Escala transformar en XAML (en un ControlTemplate) en un botón para realizar un "Zoom"

Question

tengo un botón con una imagen en ella y está siendo labrado por el siguiente texto:

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

botones es la sigue:

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

El problema es que el ancho no cambia cuando el mouse pasa. (O por lo menos - el ancho de la imagen no lo hace ...)

Creo que hay una "escala" transformada que puede utilizar para ampliar el botón y todo su contenido? ¿cómo podría hacer eso aquí ...?

Gracias.

Answer 1

La plantilla parece ser bastante escaso, pero estoy asumiendo que su única acaba de empezar en él, sin embargo, esto le ayudará a empezar a utilizar un ScaleTransform en contraposición a la animación de la anchura.

El ScaleTransform se puede aplicar a la propiedad RenderTransform del botón mismo o solo al borde de la plantilla. Esto podría ser un TransformGroup si quieres hacer algo más que la escala (es decir, una transformación compuesta que consta de otros tranforms como trasladar, rotar, sesgar) pero que sea sencillo y de ejemplos bien algo así como lo siguiente se aplica un único valor ScaleTransform a 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 este se aplique a la frontera 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> 
    ... 
    ... 

continuación, tendrá que cambiar su disparador MouseEnter para apuntar que la propiedad y para la anchura tendrá que dirigirse a la Propiedad ScaleX de ScaleTransform. La siguiente Storyboard escalará el botón de 2,5 veces en la dirección X (TargetName="render" añadir a <Storyboard... si ha optado por aplicar la transformación a la frontera en comparación con el botón).

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

Si se va a utilizar un TransformGroup con una serie de transformaciones que iba a cambiar el valor TargetProperty a algo así como RenderTransform.(TransformGroup.Children)[0].ScaleX asumiendo el ScaleTransform es el primer hijo del grupo.

Esto debe recibir preparación para usar con lo que necesita y se puede tomar el lugar que desee a partir de ahí ...

HTH