WPF模拟实现Gitee泡泡菜单的示例代码

1. 概述

本文将基于WPF技术，详细介绍如何模拟实现Gitee泡泡菜单的效果。Gitee泡泡菜单是Gitee（类似于GitHub的代码托管平台）提供的一种用户界面效果，在鼠标悬停或点击某个元素时，会出现一个从该元素弹出的菜单选项列表。

2. 实现步骤

2.1 创建WPF应用程序

首先，新建一个WPF应用程序。在Visual Studio中，选择“文件”->“新建”->“项目”，然后选择“WPF应用程序”模板。创建完成后，我们可以看到默认的主窗口。

2.2 添加泡泡菜单的样式

Gitee泡泡菜单的样式一般为一个圆角矩形，上面有菜单选项的文字和箭头图标。因此，我们需要在XAML文件中定义这个样式。

在主窗口的XAML文件中，找到标签，这将作为泡泡菜单的弹出点。在标签内部，添加如下XAML代码：

<Style x:Key="BubbleMenuStyle" TargetType="Button">

    <Setter Property="Width" Value="100" />
    <Setter Property="Height" Value="30" />
    <Setter Property="Background" Value="#007acc" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border x:Name="PART_Border" 
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="1"
                        CornerRadius="5"
                        Padding="5">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="菜单" Margin="5,0,5,0" />
                        <Path Data="M5 12L19 12 12 5z" Fill="White" VerticalAlignment="Center" />
                    </StackPanel>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#005b8a" TargetName="PART_Border"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

在上述代码中，我们定义了一个名为"BubbleMenuStyle"的样式，类型为Button。通过设置各种属性，如宽度、高度、背景色、边框等，来实现泡泡菜单的样式。其中，Value="菜单"为泡泡菜单的显示文本，Path Data="M5 12L19 12 12 5z"为箭头图标的路径数据。

2.3 添加弹出菜单

接下来，我们需要在主窗口中添加一个弹出的菜单。在XAML文件中，找到标签，添加如下XAML代码：

<Popup x:Name="BubbleMenuPopup" IsOpen="False" Width="150" Placement="Bottom" PlacementTarget="{Binding ElementName=bubbleButton}">

    <StackPanel Background="White" BorderBrush="#ccc" BorderThickness="1" Margin="0,5">
        <Button Content="菜单项1" Height="30" HorizontalAlignment="Stretch" VerticalAlignment="Center" />
        <Button Content="菜单项2" Height="30" HorizontalAlignment="Stretch" VerticalAlignment="Center" />
        <Button Content="菜单项3" Height="30" HorizontalAlignment="Stretch" VerticalAlignment="Center" />
    </StackPanel>
</Popup>

在上述代码中，我们使用了一个标签来实现弹出的菜单。将标签放在中，并添加相关菜单选项

。这样就实现了一个简单的弹出菜单。

2.4 添加事件处理

最后，我们需要在代码中添加事件处理逻辑来控制泡泡菜单的显示与隐藏。在主窗口的代码文件中，添加以下C#代码：

<Button x:Name="bubbleButton" Content="显示菜单" Style="{StaticResource BubbleMenuStyle}" Click="OnBubbleButtonClicked" />

private void OnBubbleButtonClicked(object sender, RoutedEventArgs e)
{
    BubbleMenuPopup.IsOpen = !BubbleMenuPopup.IsOpen;
}

在上述代码中，我们将

标签命名为，并设置其Content属性为"显示菜单"，并应用样式BubbleMenuStyle。同时，我们实现了一个事件处理方法OnBubbleButtonClicked，在点击按钮时触发。在该方法中，我们可以通过改变Popup的IsOpen属性来控制菜单的显示与隐藏。

3. 运行效果

完成以上步骤后，我们可以执行程序，观察泡泡菜单的效果。当鼠标悬停或点击按钮时，菜单会弹出显示相应的选项。当鼠标移出菜单区域时，菜单会自动隐藏。