Windows 10通用应用程序圆形按钮，单击时带有'animation'

Question

我当前正在尝试以一个圆的形状创建一个简单的按钮，该按钮对int eh进行反应相同的方式默认按钮对单击（您可以在单击一个单击时可以视觉上看到反应默认按钮，颜色更改了）。

我使用椭圆属性制作了一个圆形按钮。这删除了任何反应（就视觉效果而言），按钮必须点击。为了将其带回，我使用了视觉管理器。我的问题是我无法成功结合两者。

我应该怎么做？

也许有一种更简单的方法来制作对单击反应的圆形按钮？

理想情况下，我想要一些用代码来执行此操作的东西，并避免使用我在多个地方提到的混合物。

以下是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，这更容易维护。

要对单击和moseovers做出反应在圆圈内仅，请删除外部Grid，该CC_6无论如何都没有提供任何东西。此外，请注意，如果您重命名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>