使用 MouseOver 调整按钮可见性

Question

我只想在用户将鼠标放在其位置上时显示一个按钮，一旦鼠标离开该区域，该按钮应该回到隐藏状态。这是我的按钮代码。

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

资源部分已被注释掉，因为我试过了，但它不起作用。我的登录按钮附加了以下事件处理程序..

LoginButton.MouseEnter += new MouseEventHandler(LoginButton_MouseEnter);

处理这个的方法是..

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

    LoginButton.Visibility = Visibility.Visible;
}

当我运行我的应用程序时，当我将按钮放在应该放置的位置时没有任何反应。但是，如果我最初将登录按钮的可见性设置为可见，我可以看到该按钮，当我单击它时，我的用户登录的登录逻辑方法将被覆盖，并提示我使用消息框“Made in the login button listener for mouseOver”的 MouseEventListener 方法。不仅如此，我还收到了其中两条消息（当我第一次单击“确定”时，它立即再次弹出）我不知道为什么它不起作用，也不知道为什么我的点击事件方法被忽略和现在 mouseEvent 方法发生了。

任何想法或帮助将不胜感激，谢谢！

Answer 1

题外话： 首先，让物品突然出现在鼠标“下方”确实是一个糟糕的设计，我建议您更改它。

主题： 正如其他人在 cmets 部分中已经提到的那样，每当控件被隐藏或折叠时，它将停止处理任何输入，因此您不会触发任何触发器。

您可以使用 Opacity 属性来实现您寻求的行为，此外还可以在“MouseEnter”和“MouseLeave”上使用 EventTriggers 以便能够在那里放置漂亮的动画。以下是我将如何编写这种风格：

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

现在，回到我的第一个想法，我强烈建议即使鼠标没有结束也保持按钮可见（在我上面的示例中不透明度 = 0.2）并播放动画时间。如果这不是一个选项，您始终可以将动画持续时间设置为 0:0:0 并将不透明度值设置为 0，您将获得与可见性相同的结果（至少在视觉上）。

后期编辑： 您必须像这样在按钮上应用样式：

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