我一直在玩矢量图像。我成功地创建了它们，但是想用它们创建一些动画。我已经创建了一个按钮样式来容纳图像，该图像非常适用于一个例外。我试图在鼠标悬停时放大图像。我的代码工作正常，但它是相对于左上角扩展图像。换句话说，最上面和最左边的点保持静止，图像向下和向右扩展。我希望最底部的中心点保持静止，图像在每个方向上水平扩展并向上扩展。正如您所看到的，我实际上是使用触发器来扩展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>
答案 0 :(得分：1)
请尝试将RenderTransformOrigin设为0.5, 1。它现在将从控件的中心水平缩放，并从底部垂直缩放。
...
<Viewbox Height="65">
<Viewbox.Style>
<Style TargetType="Viewbox">
<!-- Made the change here -->
<Setter Property="RenderTransformOrigin" Value="0.5, 1"/>
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform />
</Setter.Value>
</Setter>
...
取自MSDN：
获取或设置RenderTransform声明的任何可能的渲染变换的中心点，相对于元素的边界。
有关类似问题的解决方案，请参阅此帖子：Make ScaleTransform start from Center instead of Top-Left Corner。