6

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

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

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

我相信我可以使用“缩放”转换来放大按钮及其所有内容？我怎么会在这里...？

谢谢。

4

1 回答 1

18

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

ScaleTransform可以应用于 Button 本身的RenderTransform属性或仅应用于模板的 Border 。如果您想要做的不仅仅是缩放（即由其他变换组成的复合变换，如平移、旋转、倾斜），但为了保持简单，例如，如下所示，这可能是一个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 方向上将按钮缩放 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 是该组的第一个子级。

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

高温高压

于 2010-04-09T00:07:47.003 回答