按钮上的XAML（在ControlTemplate中）中的比例变换以执行“ Zoom”

Question

我有一个带有图像的按钮，并由以下样式进行样式：

<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>

问题在于，当我的鼠标结束时，宽度不会改变。 （或至少 - 图像的宽度没有...）

我相信我可以用来扩大按钮及其所有内容的“比例”转换？我在这里怎么做...？

谢谢。

Answer 1

您的模板似乎很小，但是我假设您唯一刚开始使用它，但是这将有助于您开始使用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