XAML WinUI3圆形按钮需要保持悬停动画

当您覆盖ControlTemplate时，您也覆盖了VisualStates（在本例中是删除）。

PointerOver
按下
禁用

您需要为每个添加VisualStates。
应该是这样的：

<Button
    Width="80"
    Height="80"
    Click="Button_Click">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Grid x:Name="RootGrid">
                <Ellipse
                    x:Name="EllipseBase"
                    Fill="Green" />
                <FontIcon
                    x:Name="FontIconContent"
                    FontSize="16"
                    Glyph="&#xE8E5;" />
                <ContentPresenter
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center" />

                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal" />
                        <VisualState x:Name="PointerOver">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames
                                    Storyboard.TargetName="EllipseBase"
                                    Storyboard.TargetProperty="Fill">
                                    <DiscreteObjectKeyFrame
                                        KeyTime="0"
                                        Value="MediumSeaGreen" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Pressed">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames
                                    Storyboard.TargetName="EllipseBase"
                                    Storyboard.TargetProperty="Fill">
                                    <DiscreteObjectKeyFrame
                                        KeyTime="0"
                                        Value="ForestGreen" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames
                                    Storyboard.TargetName="FontIconContent"
                                    Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame
                                        KeyTime="0"
                                        Value="{ThemeResource ButtonForegroundPressed}" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Disabled">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames
                                    Storyboard.TargetName="EllipseBase"
                                    Storyboard.TargetProperty="Fill">
                                    <DiscreteObjectKeyFrame
                                        KeyTime="0"
                                        Value="DarkOliveGreen" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames
                                    Storyboard.TargetName="FontIconContent"
                                    Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame
                                        KeyTime="0"
                                        Value="{ThemeResource ButtonForegroundDisabled}" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
            </Grid>
        </ControlTemplate>
    </Button.Template>
</Button>

请注意，我对 DefaultButtonStyle 做了一些更改。例如，我针对的不是ContentPresenter的Background属性，而是Ellipse的Fille属性。

更新

如果要将模板XAML分离到另一个文件中，则需要像这样创建样式：

注意事项 *

由于以下已知问题，您需要添加“Microsoft.UI.Xaml.Controls”命名空间：https://github.com/microsoft/microsoft-ui-xaml/issues/6648

按钮.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <ResourceDictionary.MergedDictionaries>
        <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
    </ResourceDictionary.MergedDictionaries>

    <Style
        x:Key="AwesomeButtonStyle"
        BasedOn="{StaticResource DefaultButtonStyle}"
        TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid x:Name="RootGrid">
                        <Ellipse
                            x:Name="EllipseBase"
                            Fill="Green" />
                        <FontIcon
                            x:Name="FontIconContent"
                            FontSize="16"
                            Glyph="&#xE8E5;" />
                        <ContentPresenter
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center" />
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames
                                            Storyboard.TargetName="EllipseBase"
                                            Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame
                                                KeyTime="0"
                                                Value="MediumSeaGreen" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames
                                            Storyboard.TargetName="EllipseBase"
                                            Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame
                                                KeyTime="0"
                                                Value="ForestGreen" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames
                                            Storyboard.TargetName="FontIconContent"
                                            Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame
                                                KeyTime="0"
                                                Value="{ThemeResource ButtonForegroundPressed}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames
                                            Storyboard.TargetName="EllipseBase"
                                            Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame
                                                KeyTime="0"
                                                Value="DarkOliveGreen" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames
                                            Storyboard.TargetName="FontIconContent"
                                            Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame
                                                KeyTime="0"
                                                Value="{ThemeResource ButtonForegroundDisabled}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>

App.xaml

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
            <ResourceDictionary Source="/Styles/Buttons.xaml" />
        </ResourceDictionary.MergedDictionaries>
        <!--  Other app resources here  -->
    </ResourceDictionary>
</Application.Resources>

然后像这样应用 AwesomeButtonStyle：

<Button
    Style="{StaticResource AwesomeButtonStyle}"
    Width="80"
    Height="80"
    Click="Button_Click">
    <Button.Template />
</Button>

XAML WinUI3圆形按钮需要保持悬停动画

1条答案

相关问题

热门标签

最新问答