Trasformazione in scala in xaml (in un controltemplate) su un pulsante per eseguire uno “zoom”

Question

Ho un pulsante con un'immagine al suo interno ed è stato stilizzato come segue:

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

Il pulsante è il seguente:

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

Il problema è che la larghezza non cambia quando il mouse si avvicina.(O almeno, la larghezza dell'immagine no...)

Credo che esista una trasformazione "scala" che posso utilizzare per ingrandire il pulsante e tutto il suo contenuto?come potrei farlo qui...?

Grazie.

Answer 1

Il tuo modello sembra essere piuttosto minimale, ma presumo che tu abbia appena iniziato, tuttavia questo ti aiuterà a iniziare a utilizzare ScaleTransform invece di animare la larghezza.

IL Trasformazione scala può essere applicato a Rendering Trasforma proprietà del pulsante stesso o solo del bordo del modello.Questo potrebbe essere un Gruppo di trasformazione se vuoi fare di più oltre al semplice ridimensionamento (ad es.una trasformazione composita composta da altre trasformazioni come Translate, Rotate, Skew) ma per mantenerlo semplice e per motivi di esempio qualcosa di simile applica un singolo valore ScaleTransform al 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>

oppure questo da applicare al Border del 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>
    ...
    ...

Successivamente vorrai modificare il trigger MouseEnter per scegliere come target quella proprietà e per la larghezza vorrai scegliere come target la proprietà ScaleX di ScaleTransform.Il seguente Storyboard ridimensionerà il pulsante 2,5 volte nella direzione X (aggiungi TargetName="render" A <Storyboard... se hai scelto di applicare la trasformazione al bordo anziché al pulsante).

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

Se dovessi utilizzare un TransformGroup con una serie di trasformazioni, cambieresti il ​​valore TargetProperty in qualcosa di simile RenderTransform.(TransformGroup.Children)[0].ScaleX presupponendo che ScaleTransform sia il primo figlio del gruppo.

Questo dovrebbe consentirti di essere operativo con ciò di cui hai bisogno e puoi portarlo dove vuoi da lì...

HTH