Windows 10 универсальная кнопка приложения раунда с «анимацией» при нажатии

Question

В настоящее время я пытаюсь создать простую кнопку в форме круга, который реагирует так же, как кнопка по умолчанию делает щелчок (вы можете визуально увидеть реакцию при нажатии на кнопку по умолчанию цвет меняется между прочим).

Я сделал круговую кнопку, используя атрибут Ellipse. Это устранило любую реакцию (с точки зрения визуальных эффектов), кнопка нажала кнопку. В попытке вернуть его я использовал визуальный менеджер. Моя проблема заключается в том, что я не могу успешно объединить эти два.

Как мне это сделать?

Возможно, есть более простой способ сделать круглую кнопку, реагирующую на клики?

В идеале я хотел бы что-то делать с кодом и избегать использования Blend, который я видел в нескольких местах.

Ниже приведены два фрагмента кода в XAML.

Просто простая круглая кнопка:

<Button Name="bottomCircle" Width="100" Height="100" HorizontalAlignment="Center" VerticalAlignment="Top" Grid.Row="2"> 
    <Button.Template> 
     <ControlTemplate TargetType="Button"> 
      <Grid> 
       <Ellipse Fill="Blue"> 
       </Ellipse> 
       <ContentPresenter HorizontalAlignment="Center" 
          VerticalAlignment="Center"/> 
      </Grid> 
     </ControlTemplate> 
    </Button.Template> 
</Button> 

Кнопка с «анимации»:

<Button Content="Click Me" x:Name="ClickMe" Background="Blue" Grid.Row="2" Width="100" Height="100" > 
    <Button.Template> 
     <ControlTemplate TargetType="Button"> 
      <Grid Background="Transparent"> 
       <VisualStateManager.VisualStateGroups> 
        <VisualStateGroup x:Name="CommonStates"> 
         <VisualState x:Name="Normal"/> 
         <VisualState x:Name="MouseOver"/> 
         <VisualState x:Name="Pressed"> 
          <Storyboard> 
           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Foreground"> 
            <DiscreteObjectKeyFrame KeyTime="0" Value="Black" /> 
           </ObjectAnimationUsingKeyFrames> 
           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedHighlightBackground" Storyboard.TargetProperty="Background"> 
            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarBackgroundThemeBrush}" /> 
           </ObjectAnimationUsingKeyFrames> 
           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="BorderBrush"> 
            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarBackgroundThemeBrush}" /> 
           </ObjectAnimationUsingKeyFrames> 
          </Storyboard> 
         </VisualState> 
         <VisualState x:Name="Disabled"> 
          <Storyboard> 
           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Foreground"> 
            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonBackgroundThemeBrush}" /> 
           </ObjectAnimationUsingKeyFrames> 
           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="BorderBrush"> 
            <DiscreteObjectKeyFrame KeyTime="0" Value="Green" /> 
           </ObjectAnimationUsingKeyFrames> 
           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Background"> 
            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" /> 
           </ObjectAnimationUsingKeyFrames> 
          </Storyboard> 
         </VisualState> 
        </VisualStateGroup> 
       </VisualStateManager.VisualStateGroups> 
       <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" Background="{TemplateBinding Background}"> 
        <Border x:Name="PressedHighlightBackground" Background="Transparent"> 
         <ContentControl x:Name="ContentContainer" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Padding="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/> 
        </Border> 
       </Border> 
      </Grid> 
     </ControlTemplate> 
    </Button.Template> 
</Button> 

Answer 1

Если изменить CornerRadius ваших пограничных элементов некоторого большого числа, вы получите круг:

<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" 
     BorderThickness="{TemplateBinding BorderThickness}" 
     CornerRadius="100" Background="{TemplateBinding Background}"> 
    <Border x:Name="PressedHighlightBackground" Background="Transparent" 
      CornerRadius="100"> 
     <ContentControl x:Name="ContentContainer" 
         Foreground="{TemplateBinding Foreground}" 
         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
         VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
         Padding="{TemplateBinding Padding}" 
         Content="{TemplateBinding Content}" 
         ContentTemplate="{TemplateBinding ContentTemplate}"/> 
    </Border> 
</Border> 

(Я действительно считаю, что вам может быть только один Border).

Кроме того, использование Storyboard и ObjectAnimationUsingKeyFrames является громоздким. Вместо этого вы можете использовать VisualState.Setters, что проще в обслуживании.

Чтобы отреагировать на клики и монеты только в пределах круга, удалите внешний Grid, который ничего не дает. Кроме того, имейте в виду, что визуальное состояние MouseOver работает лучше, если вы переименуете его PointerOver.

Это работает так, как вы хотите:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Button Content="Click Me" x:Name="ClickMe" Background="Blue" Grid.Row="2" Width="100" Height="100" Foreground="White"> 
     <Button.Template> 
      <ControlTemplate TargetType="Button"> 
       <Border 
        x:Name="ButtonBackground" 
        BorderBrush="{TemplateBinding BorderBrush}" 
        BorderThickness="{TemplateBinding BorderThickness}" 
        CornerRadius="100" Background="{TemplateBinding Background}"> 
        <Border 
         x:Name="PressedHighlightBackground" 
         Background="Transparent" 
         CornerRadius="100"> 
         <ContentControl x:Name="ContentContainer" 
          Foreground="{TemplateBinding Foreground}" 
          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
          Padding="{TemplateBinding Padding}" 
          Content="{TemplateBinding Content}" 
          ContentTemplate="{TemplateBinding ContentTemplate}"/> 
        </Border> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualState x:Name="Normal"/> 
          <VisualState x:Name="PointerOver"> 
           <VisualState.Setters> 
            <Setter 
             Target="ContentContainer.Foreground" 
             Value="Pink" /> 
            <Setter 
             Target="PressedHighlightBackground.Background" 
             Value="Blue" /> 
            <Setter 
             Target="ButtonBackground.BorderBrush" 
             Value="{StaticResource AppBarBackgroundThemeBrush}" /> 
           </VisualState.Setters> 
          </VisualState> 
          <VisualState x:Name="Pressed"> 
           <VisualState.Setters> 
            <Setter 
             Target="ContentContainer.Foreground" 
             Value="Black" /> 
            <Setter 
             Target="PressedHighlightBackground.Background" 
             Value="{StaticResource AppBarBackgroundThemeBrush}" /> 
            <Setter 
             Target="ButtonBackground.BorderBrush" 
             Value="{StaticResource AppBarBackgroundThemeBrush}" /> 
           </VisualState.Setters> 
          </VisualState> 
          <VisualState x:Name="Disabled"> 

          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
       </Border> 
      </ControlTemplate> 
     </Button.Template> 
    </Button> 
</Grid>