按钮上的 xaml（在控件模板中）中进行缩放变换以执行“缩放”操作

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 按钮本身或边框的属性你的模板。如果您愿意，这可能是 TransformGroup不仅仅是缩放（即由其他变换组成的复合变换，例如平移、旋转、倾斜），而是为了保持简单，例如，如下所示将单个 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 的边框：

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

接下来，您需要更改 MouseEnter 触发器以定位该属性，而对于宽度，您需要定位 ScaleTransform 的 ScaleX 属性。以下故事板将在 X 方向将按钮缩放 2.5 倍（如果您选择将变换应用到，则将 TargetName="render" 添加到 边框而不是按钮）。

<EventTrigger RoutedEvent="Mouse.MouseEnter">
    <BeginStoryboard>
        <Storyboard TargetProperty="RenderTransform.ScaleX">
            <DoubleAnimation To="2.5" Duration="0:0:0.2" />
        </Storyboard>
    </BeginStoryboard>
</EventTrigger>

如果您要使用具有多个变换的 TransformGroup，则可以将 TargetProperty 值更改为类似 RenderTransform.(TransformGroup.Children)[0].ScaleX 的值（假设 ScaleTransform 是该组的第一个子级） 。

这应该能让你启动并运行你需要的东西，你可以从那里把它带到你想要的地方......

HTH