WPF 制作下拉式菜单栏

开发工具与关键技术：Microsoft Visual Studio 2017、WPF

这里这个下拉式菜单栏用的是一个RadioButton（单选按钮）和Popup（包含内容的弹出项）组合形成的下拉式菜单栏。
菜单栏显示：点击RadioButton即可显示。
菜单栏隐藏：点击菜单栏外 屏幕任意一处 即可隐藏或选中该菜单栏内的某一项时隐藏菜单栏，但是选中该菜单栏内的某一项时隐藏菜单栏这个代码我这里因为菜单栏的每一项的点击事件里面含有其他代码所以不方便就没有给出来，需要的话自行加上，如果你是按照我下面写的方法来做的话，那么你只需要在菜单栏的每一项的点击事件里面设置RadioButton的IsChecked属性值等于false即可，因为我把这个属性值跟Popup的IsOpen的值绑定在一起了。

菜单栏显示效果图：

xaml 代码：

<!--设置-->
<RadioButton Content="设置" Width="100" Height="25" FontSize="15" Style="{StaticResource SetRadioButtonStyle}" x:Name="butSetText" HorizontalAlignment="Left" Click="ButSetText_Click"/>

<!--设置 明细菜单-->
<Popup StaysOpen="False" x:Name="setTextelPopup" Grid.Column="2" Grid.RowSpan="2" AllowsTransparency="true" Height="Auto" Width="{Binding ActualWidth,ElementName=butSetText}" Placement="Bottom" PopupAnimation="Slide" PlacementTarget="{Binding ElementName=butSetText}" IsOpen="{Binding  ElementName=butSetText,Path=IsChecked,  Mode=OneWay}"  LostFocus="SetTextelPopup_LostFocus" Closed="SetTextelPopup_Closed" Opened="SetTextelPopup_Opened">
    <Border BorderBrush="#959593" BorderThickness="0.5" x:Name="setTextelBorder">
        <StackPanel Width="100"  Height="Auto" HorizontalAlignment="Right" Panel.ZIndex="1" VerticalAlignment="Top" Background="White" Orientation="Vertical">
            <Button Content="软件版本" Style="{StaticResource SetTextelStyle}" x:Name="BtnSoftwareVersion" />
            <Button Content="日志记录" Style="{StaticResource SetTextelStyle}" x:Name="BtnLogRecord" />
            <Button Content="系统配置" Style="{StaticResource SetTextelStyle}" x:Name="BtnSystemConfiguration"/>
        </StackPanel>
    </Border>
</Popup>

RadioButton 样式代码：

    <!--#region 主页面 "设置"按钮样式-->
    <Style TargetType="RadioButton" x:Key="SetRadioButtonStyle">
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="FontFamily" Value="{StaticResource YaHeiLight}"/>
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="Margin" Value="0,3,0,0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RadioButton">
                    <Border x:Name="border" BorderBrush="Transparent" BorderThickness="0" Background="Transparent">
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                            <Image x:Name="image" Source="/Images/MainImages/Setlogo.png" Stretch="Fill" Width="15" Height="15" Margin="5,0,2,0"/>
                            <TextBlock Text="{TemplateBinding Content}" x:Name="textBlock" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                            <Image x:Name="arrow" Source="/Images/Logo/ComboBoxOpenLogo.png" Stretch="Fill" Width="21" Height="21" Margin="2,0,2,0"/>
                        </StackPanel>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Foreground" Value="CornflowerBlue" TargetName="textBlock"/>
                            <Setter Property="Source" Value="/Images/MainImages/MouseOverSetlogo.png" TargetName="image"/>
                            <Setter Property="Source" TargetName="arrow" Value="/Images/Logo/MouseOverComboBoxOpenLogo.png"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="RenderTransform" TargetName="arrow">
                                <Setter.Value>
                                    <TransformGroup>
                                        <RotateTransform Angle="-180" CenterY="10" CenterX="10.5"/>
                                        <TranslateTransform/>
                                    </TransformGroup>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsEnabled" Value="False"/>
                            </MultiTrigger.Conditions>
                            <MultiTrigger.Setters>
                                <Setter Property="Background" Value="#FFFFFF" TargetName="border"/>
                            </MultiTrigger.Setters>
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!--#endregion-->

xaml.cs 代码：

        /// <summary>
        /// 记录IsChecked上次的值，默认为False
        /// </summary>
        bool rememberChecked = false;

        /// <summary>
        /// “设置”按钮点击事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void ButSetText_Click(object sender, RoutedEventArgs e)
        {
            if (rememberChecked)
            {
                butSetText.IsChecked = false;
                rememberChecked = false;
            }
            else
            {
                butSetText.IsChecked = true;
                rememberChecked = true;
            }
        }
        /// <summary>
        /// "设置明细"失去焦点时发生事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void SetTextelPopup_LostFocus(object sender, RoutedEventArgs e)
        {
            butSetText.IsChecked = false;
            butSetText.IsEnabled = true;
            rememberChecked = false;
        }
        /// <summary>
        /// "设置明细"隐藏时发生事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void SetTextelPopup_Closed(object sender, EventArgs e)
        {
            butSetText.IsChecked = false;
            butSetText.IsEnabled = true;
            rememberChecked = false;
        }
        /// <summary>
        /// "设置明细"显示时发生事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void SetTextelPopup_Opened(object sender, EventArgs e)
        {
            butSetText.IsEnabled = false;
        }
        

说明：后面3个事件在xaml前台的Popup控件里面都是可以直接定义创建的，如图：