Windows 10通用应用程序圆形按钮点击时显示'动画'

Question

我目前正在尝试创建一个简单的按钮，其形式为圆形，反应的方式与默认按钮对点击的反应方式相同（您可以直观地看到反应当点击一个默认按钮时，颜色会改变）。

我制作了一个使用椭圆属性的圆形按钮。这消除了任何反应（就视觉而言）按钮必须点击。 为了让它恢复原样，我使用了视觉管理器。 我的问题是，我不能将这两个成功结合起来。

我应该怎么做呢？

有没有更简单的方法来制作一个圆形的按钮，对点击作出反应？

理想情况下，我想用代码做这件事，并避免使用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> 

（我相信你可以逃脱只有一个但是。）

另外，使用Storyboard和ObjectAnimationUsingKeyFrames是麻烦的。您可以使用VisualState.Setters代替，这更易于维护。

要对点击和moseovers作出反应只有在圆圈内，请移除外部Grid，但不提供任何内容。另外，请注意，如果将其重命名为PointerOver，则视觉状态MouseOver会更好。

这工作你想要的方式：

<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>