wpf 在按钮上以 xaml（在控制模板中）缩放变换以执行“缩放”

Scale transform in xaml (in a controltemplate) on a button to perform a "zoom"

提问by Matt B

I've got a button with an image in it and it's being styled by the following:

我有一个带有图像的按钮，它的样式如下：

<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 is as follows:

按钮如下：

            <Button Template="{StaticResource IconButton}" Name="btnExit">
                <Image Source="Images/Exit.png" />
            </Button>

The problem is that the width doesn't change when my mouse goes over. (Or at least - the width of the image does not...)

问题是当我的鼠标经过时宽度不会改变。（或者至少 - 图像的宽度不...）

I believe there is a "scale" transform I can use to enlarge the button and all it's contents? how would I do that here...?

我相信有一个“比例”变换可以用来放大按钮及其所有内容？我怎么会在这里...？

Thanks.

谢谢。

回答by Simon Fox

Your template seems to be pretty minimal but I'm assuming your only just getting started on it, however this will help you get started with using a ScaleTransform as opposed to animating the width.

您的模板似乎很小，但我假设您只是刚刚开始使用它，但是这将帮助您开始使用 ScaleTransform 而不是动画宽度。

The ScaleTransformcan be applied to the RenderTransformproperty of either the Button itself or just the Border of your template. This could be a TransformGroupif you want to do more than just Scale (i.e. a composite transform consisting of other tranforms such as Translate, Rotate, Skew) but to keep it simple and for examples sake something like the following applies a single ScaleTransform value to the Button:

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

or this to apply to the Border of the ControlTemplate:

或者这适用于 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>
    ...
    ...

Next you will want to change your MouseEnter trigger to target that property and for width you will want to target the ScaleX property of the ScaleTransform. The following Storyboard will scale the Button 2.5 times in the X direction (add TargetName="render"to <Storyboard...if you have chosen to apply the Transform to the Border as opposed to the Button).

接下来，您需要将 MouseEnter 触发器更改为以该属性为目标，而对于宽度，您将要以 ScaleTransform 的 ScaleX 属性为目标。以下 Storyboard 将在 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>

If you were to use a TransformGroup with a number of transforms you would change the TargetProperty value to something like RenderTransform.(TransformGroup.Children)[0].ScaleXassuming the ScaleTransform is the first child of the group.

如果您将 TransformGroup 与多个转换一起使用，您可以将 TargetProperty 值更改为RenderTransform.(TransformGroup.Children)[0].ScaleX假设ScaleTransform是该组的第一个子项。

This should get you up and running with what you need and you can take it where you want from there...

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

HTH

HTH