Visiblidad del botón de ajuste con MouseOver

Question

Quiero mostrar un botón solo cuando el usuario coloca el mouse sobre su ubicación, una vez que el mouse abandona el área, el botón debe volver a estar oculto. Aquí está mi código para los botones.

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

La sección Resouces está comentada porque he intentado eso y no estaba trabajando. Mi registro en el botón tiene el siguiente eventhandler adjunto ..

LoginButton.MouseEnter += new MouseEventHandler(LoginButton_MouseEnter); 

El método que controla esto es ..

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

    LoginButton.Visibility = Visibility.Visible; 
} 

Cuando ejecuto mi aplicación, no pasa nada cuando pongo sobre la ubicación donde el el botón debería ser. Sin embargo, si configuro la visibilidad del botón de inicio de sesión como Visible inicialmente, puedo ver el botón, y cuando hago clic en él, mi método de inicio de sesión en la lógica para el inicio de sesión de un usuario se anula, y se me solicita el cuadro de mensaje en el método MouseEventListener para "Hecho en el oyente del botón de inicio de sesión para mouseOver". No solo eso, sino que recibo dos de estos mensajes (tan pronto como hago clic en "Ok" la primera vez, vuelven a aparecer de inmediato) No estoy seguro de por qué no funciona, ni por qué mi método de evento de clic se ignora y AHORA se produce el método mouseEvent.

¡Cualquier idea o ayuda sería apreciada, gracias!

Answer 1

Fuera de tema: En primer lugar, tener los elementos de repente aparecen "debajo" de su mouse es realmente un mal diseño y le aconsejaría que lo cambie.

Sobre el tema: Como ya se ha mencionado en la sección de comentarios, cada vez que un control es Oculto o colapsó, dejará de procesar las entradas, por lo que no activará ningún activador.

Puede usar la propiedad Opacity para implementar el comportamiento que busca y además utilizar EventTriggers en "MouseEnter" y "MouseLeave" para poder poner allí una bonita animación. Así es como me gustaría escribir ese estilo:

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

Ahora, de vuelta en mi primera idea, sugeriría fuertemente para mantener el botón visible incluso cuando el ratón no ha terminado (opacidad = 0,2 en el ejemplo anterior) y jugar con los tiempos de animación. Si no es una opción, siempre puede establecer las duraciones de la animación en 0: 0: 0 y el valor de opacidad ti 0 y obtendrá el mismo resultado que la Visibilidad (al menos visualmente).

Posteriormente Editar: Debe aplicar el estilo de los botones de la siguiente manera:

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