Transformation d'échelle dans le code xaml (dans un controltemplate) sur un bouton pour effectuer un “zoom”

J'ai un bouton avec une image et de style par le texte suivant:

<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 comme suit:

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

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

Je crois qu'il existe une "échelle" transformer que je peux utiliser pour agrandir le bouton et tout son contenu? comment pourrais-je le faire ici...?

Grâce.

InformationsquelleAutor Matt B | 2010-04-08
  1. 16

    Votre modèle semble être assez minime, mais je suis en supposant que votre juste de commencer sur elle, mais ce sera vous aider à obtenir commencé avec l'aide d'un ScaleTransform par opposition à l'animation de la largeur.

    La ScaleTransform peut être appliqué à la RenderTransform bien 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 de l'Échelle (c'est à dire un composite de transformer les regroupant d'autres tranforms comme la translation, Rotation, Inclinaison), mais pour faire simple et pour des exemples souci quelque chose comme ce qui suit s'applique à un seul ScaleTransform valeur du 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 cela s'applique à la Frontière de la 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 aurez envie de changer votre MouseEnter déclencheur pour cible à la propriété et pour la largeur que vous voulez pour cible la propriété ScaleX de la ScaleTransform. La suite de Storyboard à l'échelle de la Touche 2,5 fois dans la direction X (ajouter TargetName="render" à <Storyboard... si vous avez choisi d'appliquer la Transformation à la Frontière par rapport à la Touche).

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

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

    Cela devrait le faire fonctionner avec ce que vous avez besoin et vous pouvez l'emporter où vous voulez à partir de là...

    HTH

    • Cela ressemble à ce que je veux, mais j'ai l'erreur suivante: {"Ne peut pas résoudre tous les biens des références dans le chemin de la propriété 'RenderTransform.ScaleX'. Vérifiez que les objets applicables soutenir les propriétés."}
    • Jamais l'esprit - raté le "TargetName" peu 🙂
    InformationsquelleAutor Simon Fox