Question

我正在为Button创建一个ControlTemplate。我希望动画大小，以便当鼠标悬停在内容上时，它会增长以适应内容。但是，我不知道如何在触发器部分获取内容大小。这就是我所拥有的。

<ControlTemplate x:Key="buttonTemplate" TargetType="Button">
<Grid Name="grid" Height="12" Width="12" Opacity="0.4">
<ContentPresenter Name="content" ... />
</Grid>

<ControlTemplate.Triggers>
    <EventTrigger RoutedEvent="MouseEnter">
        <BeginStoryboard>
            <Storyboard>
        <DoubleAnimation
            Storyboard.TargetName="grid"
            Storyboard.TargetProperty="Width"
            To="40"                         
            Duration="0:0:0.4"/>    
        <DoubleAnimation
            Storyboard.TargetName="grid"
                Storyboard.TargetProperty="Height"
            To="20"                         
            Duration="0:0:0.4"/>    
        </Storyboard>
    </BeginStoryboard>
    </EventTrigger>

    <EventTrigger RoutedEvent="MouseLeave">
    <BeginStoryboard>
        <Storyboard>
            <DoubleAnimation
            Storyboard.TargetName="grid"
            Storyboard.TargetProperty="Width"
            Duration="0:0:0.2"/>    
        <DoubleAnimation
            Storyboard.TargetName="grid"
            Storyboard.TargetProperty="Height"
            Duration="0:0:0.2"/>                        
        </Storyboard>
    </BeginStoryboard>
    </EventTrigger>

</ControlTemplate.Triggers>
</ControlTemplate>

我尝试使用TemplateBinding代替触发器中的To="40"，但这会导致异常。如何在触发器中使用动态值？

Answer 1

不是直接为布局大小设置动画，而是可以将ScaleTransform应用于网格并为其ScaleX和ScaleY值设置动画。这不仅可以自动调整大小，还可以提供更好的性能，尤其是当您将其应用为RenderTransform而不是LayoutTransform时。如果您希望在动画期间对布局进行其他更改，您可以坚持使用LayoutTransform，但由于需要不断重新计算布局测量和排列，因此速度会变慢。

如何在按钮模板触发器中使用内容大小？

1 个答案: