Adjusting Button Visiblity with MouseOver

Question

I want to display a button only when the user puts the mouse over its location, once the mouse leaves the area, the button should go back to being Hidden. Here is my code for the buttons.

<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 that and it wasn't working. My log in button has the the following eventhandler attached..

LoginButton.MouseEnter += new MouseEventHandler(LoginButton_MouseEnter);

The method that handles this is..

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

    LoginButton.Visibility = Visibility.Visible;
}

When I run my app, nothing happens when I put over the location where the button should be. However, if I set the log in button's visibility to be Visible initially, I can see the button, and when I click on it, my log in logic method for a users sign in is overridden, and I am prompted with the message box in the MouseEventListener method for "Made in the login button listener for mouseOver". Not only that, but I receive two of these messages (as soon as I click "Ok" the first time, it immediately pops up again) I am not sure why it doesn't work, nor why my click event method is ignored and NOW the mouseEvent method occurs.

Any thoughts or help would be appreciated, thanks!

Answer 1

Off-topic: First of all, having items suddenly appear "under" your mouse is really a bad design and I would advise on changing it.

On-topic: As others already mentioned in the comments section, whenever a control is Hidden or Collapsed it will stop processing any inputs, so you won't trigger any triggers.

You could use the Opacity property to implement the behavior you seek and furthermore use EventTriggers on "MouseEnter" and "MouseLeave" to be able to put a nice animation there. Here's how I would write that 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, back on my first idea, I would strongly suggest to keep the button visible even when mouse is not over (opacity = 0.2 in my example above) and play with the animation times. If it's not an option, you can always set the animation durations to 0:0:0 and opacity value ti 0 and you will get the same result as the Visibility (at least visually).

Later Edit: You must apply the style on your buttons like this:

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