Échelle transformer en XAML (dans un ControlTemplate) sur un bouton pour effectuer un « zoom »

Question

J'ai un bouton avec une image et il est en cours de Styled par ce qui suit:

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

Bouton est la suivante:

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

Le problème est que la largeur ne change pas quand ma souris passe au-dessus. (Ou au moins - la largeur de l'image ne pas ...)

Je crois qu'il ya une transformation « échelle » je peux utiliser pour agrandir le bouton et tout son contenu? comment pourrais-je faire ici ...?

Merci.

Answer 1

Votre modèle semble être assez minime, mais je présume que votre juste de commencer là-dessus, mais cela vous aidera à démarrer avec l'aide d'un ScaleTransform par opposition à l'animation de la largeur.

Le ScaleTransform peut être appliquée à RenderTransform propriété soit le bouton lui-même ou juste la frontière de votre modèle. Cela pourrait être un TransformGroup si vous voulez faire plus que simplement l'échelle (par exemple une transformation composite composé d'autres TRANFORMS telles que translation, rotation, inclinaison), mais pour le garder simple et pour des exemples quelque chose de bien comme ce qui suit applique une seule valeur de ScaleTransform au bouton:

<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 ce à appliquer à la frontière du 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>
    ...
    ...

Ensuite, vous voulez changer votre déclencheur de MouseEnter pour cibler cette propriété et pour la largeur que vous voulez cibler la propriété ScaleX du ScaleTransform. Ce qui suit storyboard échelle le bouton 2,5 fois dans la direction X (ajouter TargetName="render" à <Storyboard... si vous avez choisi d'appliquer la transformation à la frontière, par opposition au bouton).

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

Si vous deviez utiliser un TransformGroup avec un certain nombre de transformations que vous changeriez la valeur TargetProperty à quelque chose comme RenderTransform.(TransformGroup.Children)[0].ScaleX en supposant que le ScaleTransform est le premier enfant du groupe.

Cela devrait vous lever et courir avec ce que vous avez besoin et vous pouvez le prendre où vous voulez à partir de là ...

HTH