按钮上的XAML(在ControlTemplate中)中的比例变换以执行“ Zoom”
-
25-09-2019 - |
题
我有一个带有图像的按钮,并由以下样式进行样式:
<ControlTemplate x:Key="IconButton" TargetType="Button">
<Border>
<ContentPresenter Height="80" Width="80" />
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard TargetProperty="Opacity">
<DoubleAnimation From="1" To="0.5" Duration="0:0:0.5" />
<DoubleAnimation From="0.5" To="1" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard>
<Storyboard TargetProperty="Width">
<DoubleAnimation From="80" To="95" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
按钮如下:
<Button Template="{StaticResource IconButton}" Name="btnExit">
<Image Source="Images/Exit.png" />
</Button>
问题在于,当我的鼠标结束时,宽度不会改变。 (或至少 - 图像的宽度没有...)
我相信我可以用来扩大按钮及其所有内容的“比例”转换?我在这里怎么做...?
谢谢。
解决方案
您的模板似乎很小,但是我假设您唯一刚开始使用它,但是这将有助于您开始使用Scaletransform而不是对宽度进行动画。
这 scaletransform 可以应用于 RenderTransform 按钮本身或模板边框的属性。这可能是 转换组 如果您想做的不仅仅是缩放(即由其他变形型组成的复合变换,例如翻译,旋转,偏斜),但要保持简单,以示例为例,例如以下内容将单个scaletransform值应用于按钮:
<Button Template="{StaticResource IconButton}" Name="btnExit">
<Button.RenderTransform>
<ScaleTransform ScaleX="1.0" ScaleY="1.0"></ScaleTransform>
</Button.RenderTransform>
<Image Source="Images/Exit.png" />
</Button>
或将其应用于控制模板的边界:
<ControlTemplate x:Key="IconButton" TargetType="Button">
<Border Background="Blue" x:Name="render">
<Border.RenderTransform>
<ScaleTransform ScaleX="1.0" ScaleY="1.0"></ScaleTransform>
</Border.RenderTransform>
<ContentPresenter Height="80" Width="80" />
</Border>
...
...
接下来,您将需要更改鼠标触发器以定位该属性,并且为了宽度,您将需要定位ScaleTransform的Scalex属性。以下故事板将在X方向上缩放2.5次按钮(添加 TargetName="render"
至 <Storyboard...
如果您选择将转换应用于边界而不是按钮)。
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard>
<Storyboard TargetProperty="RenderTransform.ScaleX">
<DoubleAnimation To="2.5" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
如果要使用具有多个转换的转换组 RenderTransform.(TransformGroup.Children)[0].ScaleX
假设Scaletransform是该组的第一个孩子。
这应该使您能够启动并运行所需的东西,您可以将其从那里带到您想要的地方...
Hth
不隶属于 StackOverflow