规模上的按钮在XAML变换（在ControlTemplate中）执行＆QUOT;变焦＆QUOT; [英] Scale transform in xaml (in a controltemplate) on a button to perform a "zoom"

问题描述

我有在它的图像的按钮，它是由以下样式：

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

感谢。

推荐答案

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

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.

的<一个href=\"http://msdn.microsoft.com/en-us/library/system.windows.media.scaletransform.aspx\">ScaleTransform可以应用到<一href=\"http://msdn.microsoft.com/en-us/library/system.windows.uielement.rendertransform.aspx\">RenderTransform无论是按钮本身或模板只是边境的财产。这可能是一个<一href=\"http://msdn.microsoft.com/en-us/library/system.windows.media.transformgroup.aspx\">TransformGroup如果你想要做的不仅仅是规模以上（即复合变换由其他tranforms，如翻译，旋转，倾斜的），但保持它的简单和实例的缘故类似以下适用单一ScaleTransform值按钮：

The ScaleTransform can be applied to the RenderTransform property of either the Button itself or just the Border of your template. This could be a TransformGroup if 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:

<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的边框：

or this to apply to the Border of the 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属性。下面的故事板将缩放按钮2.5倍，在X方向（添加的TargetName =渲染到＆LT;情节提要... 如果您选择以应用变换边界，而不是按钮）。

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

<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是该组的第一个孩子。

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].ScaleX assuming the ScaleTransform is the first child of the group.

这应该让你和你需要什么，你可以把它放在你从那里要运行...

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

心连心

这篇关于规模上的按钮在XAML变换（在ControlTemplate中）执行＆QUOT;变焦＆QUOT;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！