Customizing Button Visibility with MouseOver

Question

I want to display the button only when the user hovers the mouse at its location, as soon as the mouse leaves the area, the button should return to hide. Here is my button code.

<StackPanel Name="ButtonOptions" Orientation="Horizontal" DockPanel.Dock="Bottom" Background="DarkBlue" Height="50" Width="auto"> <!--<StackPanel.Resources> <Style TargetType="Button"> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Visibility" Value="Visible"/> </Trigger> </Style.Triggers> </Style> </StackPanel.Resources>--> <Button Name="LoginButton" FontSize="12" Click="LoginButton_Click" Content="Log In" Width="100" Height="31" Margin="50,0,0,0" FontFamily="Arial" Visibility="Visible" IsEnabled="True" MouseEnter="LoginButton_MouseEnter" /> <Button Name="OptionsButton" Content="Options" Width="100" Height="31" Margin="20,0,0,0" FontFamily="Arial" FontSize="12" Click="OptionsButton_Click" Visibility="Hidden" IsEnabled="False"/> </StackPanel> 

The resouces section is commented out because I tried this and it did not work. My login button has the following event handler attached.

 LoginButton.MouseEnter += new MouseEventHandler(LoginButton_MouseEnter); 

The method that handles this:

 private void LoginButton_MouseEnter(object sender, MouseEventArgs e) { MessageBox.Show("Made in the login button listener for mouseOver"); LoginButton.Visibility = Visibility.Visible; } 

When I launch my application, nothing happens when I set the location where the button should be. However, if I first set the visibility of the login button to Visible, I can see the button, and when I click on it, my logical login method for user login is overridden, and I am offered a window with a message in the MouseEventListener method for "Made in the login button listener for mouseOver ". Not only that, but I get two of these messages (as soon as I click OK for the first time, it immediately appears again) I'm not sure why this does not work and why my click event method is ignored and now the mouseEvent method is called.

Any thoughts or help would be appreciated, thanks!

Answer 1

Off-topic: First of all, when objects suddenly appear “under”, your mouse has a really bad design, and I would recommend changing it.

About the topic: As already mentioned in the comments section, whenever a control is hidden or complex, it stops processing any inputs, so you won’t trigger any triggers.

You can use the Opacity property to implement the behavior you are looking for, and also use EventTriggers for "MouseEnter" and "MouseLeave" to be able to add nice animation there. Here is how I would write this style:

 <Style x:Key="FadeOutButton" TargetType="{x:Type Button}"> <Style.Triggers> <EventTrigger RoutedEvent="Control.MouseEnter"> <BeginStoryboard> <Storyboard > <DoubleAnimation Duration="0:0:1" To="1" Storyboard.TargetProperty="Opacity"/> </Storyboard> </BeginStoryboard> </EventTrigger> <EventTrigger RoutedEvent="Control.MouseLeave"> <BeginStoryboard> <Storyboard > <DoubleAnimation Duration="0:0:1" To="0.2" Storyboard.TargetProperty="Opacity"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Style.Triggers> </Style> 

Now, returning to my first idea, I highly recommend keeping the button visible even when the mouse has not ended (opacity = 0.2 in my example above) and play with the animation time. If this is not an option, you can always set the animation duration to 0: 0: 0 and the opacity value ti 0, and you will get the same result as the visibility (at least visually).

Later Edit: You should apply a style to your buttons as follows:

 <Button Content="my button" Style="{StaticResource FadeOutButton}" Opacity="0.2"/>