Skalieren Sie die Transformation in XAML (in einer Steuerung) auf einer Taste, um einen "Zoom" durchzuführen

Question

Ich habe einen Knopf mit einem Bild darin und es wird von Folgendem gestylt:

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

Die Schaltfläche lautet wie folgt:

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

Das Problem ist, dass sich die Breite nicht ändert, wenn meine Maus übergeht. (Oder zumindest - die Breite des Bildes nicht ...)

Ich glaube, es gibt eine "skalierende" Transformation, mit der ich den Knopf und alles seine Inhalte vergrößern kann? Wie würde ich das hier machen ...?

Vielen Dank.

Answer 1

Ihre Vorlage scheint ziemlich minimal zu sein, aber ich gehe davon aus, dass Sie gerade erst anfangen. Dies hilft Ihnen jedoch dabei, mit der Verwendung einer Skaletransform zu beginnen, anstatt die Breite zu beleben.

Das Skaletransform kann auf die angewendet werden Rendertransform Eigenschaft der Schaltfläche selbst oder nur des Randes Ihrer Vorlage. Dies könnte ein sein Transformgroup Wenn Sie mehr als nur skalieren möchten (dh eine zusammengesetzte Transformation, die aus anderen Tranforms wie Übersetzung, Drehen, Schiefern besteht), um sie einfach zu halten, und für Beispiele, so etwas wie folgt, wendet sie einen einzelnen Skaletransformwert auf die Taste an:

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

oder dies für den Rand der ControlTemplate zu gelten:

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

Als nächstes möchten Sie Ihren Mausenter -Trigger auf die Eigenschaft und für die Breite ändern, und Sie möchten die Scalex -Eigenschaft der Skaletransform ansprechen. Das folgende Storyboard skaliert die Schaltfläche 2,5 -mal in x -Richtung (Hinzufügen TargetName="render" zu <Storyboard... Wenn Sie sich entschieden haben, die Transformation an den Rand im Gegensatz zum Taste anzuwenden).

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

Wenn Sie eine Transformationsgruppe mit einer Reihe von Transformationen verwenden würden, würden Sie den Wert für den ZielProperty in so etwas ändern RenderTransform.(TransformGroup.Children)[0].ScaleX Angenommen, die Skaletransform ist das erste Kind der Gruppe.

Dies sollte Sie mit dem, was Sie brauchen, zum Laufen bringen, und Sie können es dorthin bringen, wo Sie von dort wollen ...

HTH