Transformación de escala en XAML (en un control de control) en un botón para realizar un "zoom"

Question

Tengo un botón con una imagen y está siendo diseñado por lo siguiente:

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

El botón es el siguiente:

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

El problema es que el ancho no cambia cuando mi mouse se acerca. (O al menos, el ancho de la imagen no ...)

Creo que hay una transformación de "escala" que puedo usar para ampliar el botón y todo su contenido. ¿Cómo haría eso aquí ...?

Gracias.

Answer 1

Su plantilla parece ser bastante mínima, pero supongo que su único recién comienza, sin embargo, esto lo ayudará a comenzar a usar un escala de escamas en lugar de animar el ancho.

los Escamas se puede aplicar al Rendertransform propiedad del botón en sí o solo el borde de su plantilla. Esto podría ser un Grupo de transformación Si desea hacer más que escala (es decir, una transformación compuesta que consta de otras tranformas, como traducir, rotar, sesgar), pero para mantenerla simple y, por ejemplo, algo como lo siguiente aplica un valor de escamas de escamas en el botón:

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

o esto para aplicar al borde de la placa de control de control:

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

A continuación, querrá cambiar su activador del mouseenter para apuntar a esa propiedad y para el ancho querrá apuntar a la propiedad Scalex de la forma de escamas. El siguiente guión gráfico escalará el botón 2.5 veces en la dirección X (agregue TargetName="render" a <Storyboard... Si ha elegido aplicar la transformación al borde en lugar del botón).

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

Si usara un grupo de transformación con una serie de transformaciones, cambiaría el valor de TargetProperty a algo como RenderTransform.(TransformGroup.Children)[0].ScaleX Suponiendo que la escala de escamas es el primer hijo del grupo.

Esto debería ponerte en funcionamiento con lo que necesitas y puedes llevarlo a donde quieras de allí ...

Hth