单击时带有“动画”的 Windows 10 通用应用圆形按钮

Question

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

我使用 Ellipse 属性制作了一个圆形按钮。这消除了按钮必须点击的任何反应（在视觉方面）。 为了把它带回来，我使用了可视化管理器。 我的问题是我无法成功地将两者结合起来。

我该怎么做呢？

是否有更简单的方法来制作一个响应点击的圆形按钮？

理想情况下，我希望使用代码来执行此操作，并避免使用我在多个地方提到过的 Blend。

以下是 XAML 中的两个代码 sn-ps。

只是一个简单的圆形按钮：

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