Regolazione Visiblity pulsante con MouseOver

Question

Desidero visualizzare un pulsante solo quando l'utente posiziona il mouse sopra la sua posizione, una volta che il mouse lascia l'area, il pulsante dovrebbe tornare ad essere nascosto. Ecco il mio codice per i pulsanti.

<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 sezione risorse viene commentata perché l'ho provato e non funzionava. Il mio registro nel pulsante ha la seguente EventHandler allegata ..

LoginButton.MouseEnter += new MouseEventHandler(LoginButton_MouseEnter); 

il metodo che gestisce questo è ..

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

    LoginButton.Visibility = Visibility.Visible; 
} 

Quando eseguo la mia applicazione, non succede nulla quando ho messo sopra il luogo in cui il il pulsante dovrebbe essere Tuttavia, se imposto inizialmente Visibilità del pulsante di accesso a Visible, posso visualizzare il pulsante e quando faccio clic su di esso, il metodo di accesso log in per l'accesso di un utente viene sovrascritto e viene richiesto con la finestra del messaggio in il metodo MouseEventListener per "Fatto nel listener del pulsante di accesso per mouseOver". Non solo, ma ricevo due di questi messaggi (non appena faccio clic su "Ok" la prima volta, viene immediatamente visualizzato di nuovo) Non sono sicuro del motivo per cui non funziona, né perché il metodo del mio evento click viene ignorato e ORA si verifica il metodo mouseEvent.

Qualsiasi pensiero o aiuto sarebbe apprezzato, grazie!

Answer 1

Off-topic: Prima di tutto, se gli oggetti appaiono improvvisamente "sotto" il mouse è davvero un cattivo design e consiglierei di cambiarlo.

Argomento: Come già menzionato nella sezione dei commenti, ogni volta che un controllo è Nascosto o Compresso interromperà l'elaborazione di qualsiasi input, pertanto non si attivano trigger.

È possibile utilizzare la proprietà Opacity per implementare il comportamento che si cerca e inoltre utilizzare EventTriggers su "MouseEnter" e "MouseLeave" per poter inserire una bella animazione. Ecco come avrei scritto che lo stile:

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

Ora, di nuovo sulla mia prima idea, vi consiglierei vivamente di mantenere il tasto visibile anche quando il mouse non è finita (opacità = 0.2 nel mio esempio sopra) e giocare con i tempi di animazione. Se non è un'opzione, puoi sempre impostare le durate dell'animazione su 0: 0: 0 e il valore di opacità ti 0 e otterrai lo stesso risultato della Visibilità (almeno visivamente).

Edit Più tardi: È necessario applicare lo stile sui tasti come questo:

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