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本身的RenderTransform属性，也可以只应用于模板的边框。如果您想要做的不仅仅是缩放（即由其他变换组成的复合变换，如Translate，Rotate，Skew），这可能是TransformGroup，但为了保持简单，例如以下内容适用于单个ScaleTransform值到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的边框：

<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，您可以将TargetProperty值更改为RenderTransform.(TransformGroup.Children)[0].ScaleX，假设ScaleTransform是该组的第一个子节点。

这应该可以帮助您满足您的需求，并且可以将它从您想要的地方带到...

HTH

在按钮上的xaml（在controltemplate中）缩放变换以执行“缩放”

1 个答案: