Transformação de escala em Xaml (em um ControlTemplate) em um botão para executar um "zoom"

Question

Eu tenho um botão com uma imagem e ela está sendo estilizada pelo seguinte:

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

O botão é o seguinte:

            <Button Template="{StaticResource IconButton}" Name="btnExit">
                <Image Source="Images/Exit.png" />
            </Button>

O problema é que a largura não muda quando meu mouse passa. (Ou pelo menos - a largura da imagem não ...)

Eu acredito que há uma transformação de "escala" que posso usar para aumentar o botão e todo o seu conteúdo? Como eu faria isso aqui ...?

Obrigado.

Answer 1

Seu modelo parece ser bastante mínimo, mas estou assumindo que você apenas comece a começar, no entanto, isso ajudará você a começar o uso de um Scaletransform, em vez de animar a largura.

o Scaletransform pode ser aplicado ao Rendertransform propriedade do próprio botão ou apenas da borda do seu modelo. Isso pode ser um TransformGroup Se você deseja fazer mais do que apenas escala (ou seja, uma transformação composta que consiste em outras transformas, como traduzir, girar, distorcer), mas para simplificar e, por exemplo

<Button Template="{StaticResource IconButton}" Name="btnExit">
    <Button.RenderTransform>
        <ScaleTransform ScaleX="1.0" ScaleY="1.0"></ScaleTransform>
    </Button.RenderTransform>
    <Image Source="Images/Exit.png" />
</Button>

ou isso para se aplicar à fronteira do 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>
    ...
    ...

Em seguida, você desejará alterar o gatilho do MouseEnter para direcionar essa propriedade e, para largura, desejar direcionar a propriedade Scalex do Scaletransform. O storyboard a seguir escalará o botão 2,5 vezes na direção x (adicione TargetName="render" para <Storyboard... Se você optou por aplicar a transformação na borda em oposição ao botão).

<EventTrigger RoutedEvent="Mouse.MouseEnter">
    <BeginStoryboard>
        <Storyboard TargetProperty="RenderTransform.ScaleX">
            <DoubleAnimation To="2.5" Duration="0:0:0.2" />
        </Storyboard>
    </BeginStoryboard>
</EventTrigger>

Se você usasse um grupo de transformação com várias transformações, mudaria o valor do TargetProperty para algo como RenderTransform.(TransformGroup.Children)[0].ScaleX Supondo que o Scaletransform seja o primeiro filho do grupo.

Isso deve colocá -lo em funcionamento com o que você precisa e você pode levá -lo aonde quiser a partir daí ...

Hth