【发布时间】：2019-11-24 05:41:39
【问题描述】：
我正在尝试使用 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 中实现。
【问题讨论】：
-
将 LayoutTransform Setter 从触发器中移出到按钮样式中。
-
成功了，非常感谢！猜猜这是一个典型的新手错误 - 我对 WPF 技术相当陌生，尤其是 XAML 部分。
-
以防万一不清楚发生了什么。 Setter 提供的 LayoutTransform 属性值仅在 Trigger 处于活动状态时设置。当 IsMouseOver 变为 false 时，转换被移除，并且 LayoutTransform 返回到它的默认值。