Scala trasformare in XAML (in un ControlTemplate) su un pulsante per eseguire un "zoom"

Question

ho un pulsante con un'immagine in esso ed è di essere designato dal seguente:

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

pulsante è come segue:

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

Il problema è che la larghezza non cambia quando si passa il mouse. (O almeno - la larghezza dell'immagine non ...)

Credo ci sia una trasformazione "scala" che posso usare per ingrandire il pulsante e tutto il suo contenuto? come lo farei qui ...?

Grazie.

Answer 1

Il modello sembra essere piuttosto minimale, ma presumo che abbiate iniziato solo su di esso, tuttavia questo vi aiuterà a iniziare a usare ScaleTransform anziché animare la larghezza.

ScaleTransform può essere applicato alla proprietà RenderTransform del pulsante stesso o solo del bordo del modello. Questo potrebbe essere un TransformGroup se si vuole fare qualcosa di più della semplice Scala (cioè una trasformazione composita composta da altre tranforms come Translate, Rotate, Skew) ma per mantenerlo semplice e, per esempio, qualcosa come il seguente applica un singolo valore ScaleTransform a il pulsante:

<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 questo da applicare al bordo del 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> 
    ... 
    ... 

Avanti si vorrà cambiare il trigger MouseEnter per indirizzare tale proprietà e per la larghezza si vuole indirizzare la Proprietà ScaleX di ScaleTransform. Il seguente Storyboard ridimensiona il pulsante 2,5 volte nella direzione X (aggiungi TargetName="render" a <Storyboard... se hai scelto di applicare Trasforma al bordo anziché il pulsante).

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

Se si sceglie di usare un TransformGroup con una serie di trasformazioni che si cambierebbe il valore TargetProperty a qualcosa come RenderTransform.(TransformGroup.Children)[0].ScaleX assumendo la ScaleTransform è il primo figlio del gruppo.

Questo dovrebbe farti installato e funzionante con quello che ti serve e si può prendere in cui si desidera da lì ...

HTH