Как использовать размер содержимого в триггерах шаблонов кнопок?

Question

Я создаю шаблон 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, но это будет медленнее, поскольку необходимо постоянно пересчитывать измерения и компоновку макета.