Question

I want to achieve in XAML using event triggers where button’s style (button and text gets bigger) change when mouse enter is triggered. Then when the mouse leave event is triggered, it will get back to it’s previous style.

I have already worked out on that but my problem is when a button is clicked, the style for the mouse enter must be preserved unless other button is clicked.

<Style.Triggers>
  <EventTrigger RoutedEvent="Button.MouseEnter">
    <EventTrigger.Actions>
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleX"
            To="2" Duration="0:0:0.25"/>
          <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleY"
            To="2" Duration="0:0:0.25"/>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger.Actions>
  </EventTrigger>
  <EventTrigger RoutedEvent="Button.MouseLeave">
    <EventTrigger.Actions>
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleX"
            To="1" Duration="0:0:0.25"/>
          <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleY"
            To="1" Duration="0:0:0.25"/>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger.Actions>
  </EventTrigger>
</Style.Triggers>

Any help is appreciated. Thanks!

Answer 1

First of all, thank you for all you comments. They were great and correct but I have to find a way to implement it using the standard buttons (not radio or toggle).

I was able to figure this one out. So, I thought of extending the Control button to add something like a flag to determine if the button has been clicked then handled the OnMouseLeave event.