Skala przekształcić w XAML (w ControlTemplate) na przycisku, aby wykonać „Zoom”

Question

Mam przycisk z obrazem w nim i to jest stylizowany brzmienie:

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

Button jest jako następująco:

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

problem polega na tym, że szerokość nie zmienia się, gdy mój myszy przechodzi. (A przynajmniej - szerokość obrazu nie ...)

Wierzę, że istnieje transformacja "skali", której mogę użyć do powiększenia przycisku i całej jego zawartości? jak mam to zrobić tutaj ...?

Dzięki.

Answer 1

Twój szablon wydaje się być całkiem minimalny, ale zakładam, że dopiero zaczynasz, ale to pomoże ci zacząć korzystać z ScaleTransform w przeciwieństwie do animowania szerokości.

Można zastosować właściwość ScaleTransform dla właściwości samego przycisku lub samej granicy szablonu. Może to być TransformGroup, jeśli chcesz zrobić coś więcej niż tylko Skalowanie (tj. Transformacja złożona składająca się z innych transformacji, takich jak Tłumacz, Obrót, Pochylenie), ale aby zachować prostotę, a dla przykładu, coś takiego, jak poniżej, stosuje pojedynczą wartość ScaleTransform do po naciśnięciu przycisku:

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

czy ten stosuje się do granicy 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> 
    ... 
    ... 

Następny będziesz chciał zmienić MouseEnter spust kierować tę właściwość i szerokości będą chciały do ​​kierowania Właściwość ScaleX ScaleTransform. Następująca Storyboard przeskaluje przycisk 2.5 razy w kierunku X (dodaj TargetName="render" do <Storyboard..., jeśli wybrałeś zastosowanie przekształcenia do granicy w przeciwieństwie do przycisku).

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

Jeśli było użyć TransformGroup z szeregu przekształceń chcesz zmienić wartość TargetProperty coś jak RenderTransform.(TransformGroup.Children)[0].ScaleX zakładając ScaleTransform jest pierwszym dzieckiem w grupie.

To powinno Ci uruchomiony z tym, co trzeba i można go zabrać gdzie chcesz stamtąd ...

HTH