Convert scale to xaml (in the checklist) on the button to perform "scaling"

Question

I have a button with an image in it, and its style is as follows:

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

The button is as follows:

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

The problem is that the width does not change when my mouse goes over. (Or at least the image width is not ...)

I believe there is a large-scale conversion that I can use to enlarge the button and all the content? how can i do this here ??

Thanks.

Answer 1

Your template seems pretty minimal, but I'm assuming you're just getting started, but this will help you get started with using ScaleTransform, not for animating the width.

ScaleTransform can be applied to the RenderTransform of either the button itself or just the border of your template. It could be a TransformGroup if you want to do more than just scale (i.e., a Compound transformation consisting of other trunks, such as Translation, Skew), but to make it simple and for example, something like the following applies one ScaleTransform value to Button:

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

or this applies to the ControlTemplate border:

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

Then you want to change the MouseEnter trigger to target this property, and for width you want to target the ScaleX ScaleTransform property. The following storyboard will scale the button 2.5 times in the X direction (add TargetName="render" to <Storyboard... if you decide to apply the transformation to the border, as opposed to the button).

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

If you must use a TransformGroup with multiple transforms, you must change the TargetProperty value to something like RenderTransform.(TransformGroup.Children)[0].ScaleX , assuming ScaleTransform is the first child of the group.

This should make you work and work with what you need, and you can take it wherever you want ...

NTN