在按钮上的xaml(在controltemplate中)缩放变换以执行"缩放"

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如果你想要做的不仅仅是规模以上(即复合变换由其他tranforms如移动,旋转,倾斜的),但保持它的简单和实例的缘故像下面这样一个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"至<Storyboard...,如果你选择了应用转换到边境,而不是按钮).

<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