Question

我正在尝试使用XAML为WPF中的按钮设置自定义样式。我希望它们在鼠标悬停时扩展其大小，并在不再悬停时恢复到原始大小。我还想同时使用动画来进行缩放，以使其看起来更平滑。我正在使用ScaleTransform和DoubleAnimation为ScaleX和ScaleY属性设置动画。第一部分工作正常（在悬停时扩展动画），而第二部分则根本不工作-当我将mu光标移出按钮时，它立即变为没有任何动画的初始状态。

我尝试直接对Width和Height属性进行动画处理，并且确实可以工作-但是我无法在ScaleTransform中使用它。

这是我定义样式的App.xaml文件

<Style TargetType="Button" x:Key="GrowOnHover">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">

                    <Setter Property="LayoutTransform">
                        <Setter.Value>
                            <ScaleTransform ScaleX="1.0" ScaleY="1.0"/>
                        </Setter.Value>
                    </Setter>

                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleX)"
                                                 From="1.0" To="1.1" Duration="0:0:0.5"/>
                                <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleY)"
                                                 From="1.0" To="1.1" Duration="0:0:0.5"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>

                    <Trigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleX)"
                                                 From="1.1" To="1.0" Duration="0:0:0.5"/>

                                <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleY)"
                                                 From="1.1" To="1.0" Duration="0:0:0.5"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.ExitActions>
                </Trigger>
            </Style.Triggers>
        </Style>

和MainWindow.xaml代码，为了进行测试，我在其中放置了4个按钮。

<StackPanel>
        <Button Height="100" Width="200" Margin="10" Content="ASDF"
                Style="{StaticResource GrowOnHover}">

        </Button>

        <Button Height="100" Width="200" Margin="10" Content="ASDF"
                Style="{StaticResource GrowOnHover}">

        </Button>

        <Button Height="100" Width="200" Margin="10" Content="ASDF"
                Style="{StaticResource GrowOnHover}">

        </Button>

        <Button Height="100" Width="200" Margin="10" Content="ASDF"
                Style="{StaticResource GrowOnHover}">

        </Button>
    </StackPanel>

我希望仅在XAML中实现此功能。

Answer 1

尝试以下一个

         <Style TargetType="Button" x:Key="GrowOnHover">
            <Setter Property="LayoutTransform">
                <Setter.Value>
                    <ScaleTransform ScaleX="1.0" ScaleY="1.0"/>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard >
                                <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleX)"
                                             From="1.0" To="1.1" Duration="0:0:0.5"/>
                                <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleY)"
                                             From="1.0" To="1.1" Duration="0:0:0.5"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>

                    <Trigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard >
                                <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleX)"
                                             From="1.1" To="1.0" Duration="0:0:0.5"/>

                                <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleY)"
                                             From="1.1" To="1.0" Duration="0:0:0.5"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.ExitActions>
                </Trigger>
            </Style.Triggers>
        </Style>

Answer 2

您也可以使用EventTrigger

  <Style TargetType="Button" x:Key="GrowOnHover">
            <Setter Property="LayoutTransform">
                <Setter.Value>
                    <ScaleTransform ScaleX="1.0" ScaleY="1.0"/>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <EventTrigger RoutedEvent="MouseEnter">
                    <BeginStoryboard>
                        <Storyboard >
                            <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleX)"
                                             From="1.0" To="1.1" Duration="0:0:0.5"/>
                            <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleY)"
                                             From="1.0" To="1.1" Duration="0:0:0.5"/>
                        </Storyboard>
                    </BeginStoryboard>

                </EventTrigger>
                <EventTrigger RoutedEvent="MouseLeave">
                    <BeginStoryboard>
                        <Storyboard >
                            <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleX)"
                                             From="1.1" To="1.0" Duration="0:0:0.5"/>
                            <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleY)"
                                             From="1.1" To="1.0" Duration="0:0:0.5"/>
                        </Storyboard>
                    </BeginStoryboard>

                </EventTrigger>
            </Style.Triggers>
        </Style>

Trigger.ExitActions部分中的ScaleScale动画化

2 个答案: