我一直在玩矢量图像。我已经成功地创建了它们，但想使用它们创建一些动画。我已经创建了一个按钮样式来存放图像，它可以很好地工作，但有一个例外。当鼠标悬停在图像上时，我正在尝试放大图像。我的代码工作正常，但它正在相对于左上角扩展图像。换句话说，最上面和最左边的点保持静止，图像向下和向右扩展。我希望最底部的中心点保持静止，并且图像在每个方向上水平扩展并向上扩展。如您所见，我实际上是在使用触发器来扩展 Viewbox 以使事情发生。实现这一目标的任何帮助将不胜感激。
<Style x:Key="DockButtonStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Margin="{TemplateBinding Margin}"
BorderThickness="0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Background="Transparent">
<Grid HorizontalAlignment="Center" Name="OuterGrid">
<Viewbox Height="65">
<Viewbox.Style>
<Style TargetType="Viewbox">
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform />
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, ElementName=OuterGrid}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)" To="1.1" Duration="0:0:0.2" FrameworkElement.FlowDirection="RightToLeft" />
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleX)" To="1.1" Duration="0:0:0.2" FrameworkElement.FlowDirection="RightToLeft" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)" To="1.0" Duration="0:0:0.2" />
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleX)" To="1.0" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Viewbox.Style>
<Grid Name="VectorImageGrid" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Transparent">
<Path Fill="#FF555555">
<Path.Style>
<Style TargetType="Path">
<Style.Resources>
<Storyboard x:Key="GlowOn">
<ColorAnimation Storyboard.TargetProperty="Fill.Color"
From="#FF555555"
To="Blue"
Duration="0:0:0.5"
AutoReverse="False"/>
</Storyboard>
<Storyboard x:Key="GlowOff">
<ColorAnimation Storyboard.TargetProperty="Fill.Color"
From="Blue"
To="#FF555555"
Duration="0:0:0.5"
AutoReverse="False"/>
</Storyboard>
</Style.Resources>
<Setter Property="Fill">
<Setter.Value>
<SolidColorBrush Color="Gray" Opacity="1"/>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, ElementName=VectorImageGrid}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource GlowOn}"/>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource GlowOff}"/>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Path.Style>
<Path.Data>
<PathGeometry FillRule="Nonzero" Figures="M640,5105C370,5051 144,4858 50,4603 35,4560 17,4491 11,4450 2,4394 0,3918 2,2610 6,622 -2,813 85,635 180,443 347,302 565,228L635,205 1693,202C2549,200 2750,202 2744,212 2740,219 2722,243 2705,265 2659,323 2593,432 2554,514L2520,585 1612,590 705,595 649,618C535,664 437,771 409,882 388,963 388,4362 409,4435 448,4567 536,4658 675,4709 708,4721 826,4724 1365,4727 2092,4731 2068,4734 2114,4662 2158,4596 2163,4549 2169,4100 2175,3677 2175,3675 2198,3637 2211,3617 2243,3587 2268,3572L2315,3545 2750,3540C3131,3535 3191,3532 3230,3517 3281,3497 3306,3476 3329,3435 3343,3409 3345,3354 3348,3003L3351,2601 3388,2617C3454,2645,3580,2679,3661,2692L3741,2705 3738,3170 3735,3635 3699,3710C3633,3849 3554,3938 3056,4436 2496,4995 2415,5063 2253,5105 2174,5126 743,5126 640,5105z" />
</Path.Data>
</Path>
<Path>
<Path.Style>
<Style TargetType="Path">
<Style.Resources>
<Storyboard x:Key="GlowOn">
<ColorAnimation Storyboard.TargetProperty="Fill.Color"
From="DarkGreen"
To="Green"
Duration="0:0:0.3"
AutoReverse="False"/>
</Storyboard>
<Storyboard x:Key="GlowOff">
<ColorAnimation Storyboard.TargetProperty="Fill.Color"
From="Green"
To="DarkGreen"
Duration="0:0:0.3"
AutoReverse="False"/>
</Storyboard>
</Style.Resources>
<Setter Property="Fill">
<Setter.Value>
<SolidColorBrush Color="DarkGreen" Opacity="1"/>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, ElementName=VectorImageGrid}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource GlowOn}"/>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource GlowOff}"/>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Path.Style>
<Path.Data>
<PathGeometry FillRule="Nonzero" Figures="M3832,2319C3574,2297 3319,2177 3131,1989 2731,1588 2684,955 3021,499 3082,417 3216,288 3295,235 3870,-146 4641,50 4952,655 5050,848 5085,1006 5077,1225 5066,1528 4948,1794 4734,2000 4485,2239 4177,2348 3832,2319z M4140,1575L4140,1380 4335,1380 4530,1380 4528,1183 4525,985 4333,982 4140,980 4138,787 4135,595 3938,592 3740,590 3740,785 3740,980 3545,980 3350,980 3350,1180 3350,1380 3545,1380 3740,1380 3740,1575 3740,1770 3940,1770 4140,1770 4140,1575z" />
</Path.Data>
</Path>
</Grid>
</Viewbox>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>