wpf - 在按钮上的xaml中缩放缩放转换(在控件模板中)以执行 “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可以应用于Button本身或模板的Border的RenderTransform属性。如果您想做的不只是Scale(即由其他变换组成的复合变换，例如Translate，Rotate，Skew)，还可以做一个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属性作为目标。下面的 Storyboard 将在X方向上将Button缩放2.5倍(如果选择将Transform应用于Border而不是Button，则将TargetName="render"添加到<Storyboard...)。

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

如果要对一个TransformGroup使用多个转换，则假定ScaleTransform是该组的第一个子级，则可以将TargetProperty值更改为RenderTransform.(TransformGroup.Children)[0].ScaleX之类的值。

这应该可以让您启动并运行所需的内容，然后可以从那里将其放置在所需的位置...

高温超导