WPF 用Popup做下拉菜单

Posted 2021-06-28 dotNET跨平台

今天无聊时看到必应搜索首页的菜单挺好，于是想着模仿一下。。写着写着发现和我之前做的一个MenuItem很像，干脆直接拿来用了。。。

看看效果：

上图是bing.com首页右上角的下拉菜单，今天就来做了一个这样的。。

我承认我偷懒了，哈是在以前的menuitem外面套了一个popup，

下面就看看主要代码，最后附上下载链接。

新建一个DropDownMenu用户控件：

<UserControl x:Class="wpfcore.DropDownMenu"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:wpfcore"
             mc:Ignorable="d" 
             x:Name="dropdownmenu"
             Background="Transparent"
             Width="40" Height="40"
             d:DesignHeight="32" d:DesignWidth="32">
    <Grid>
        <Border x:Name="border"
                Background="Transparent"
                Margin="8"
                MouseUp="OnBorderMouseDown">
            <Viewbox>
                <Path Fill="Red" SnapsToDevicePixels="True" Stretch="Uniform"
                  Data="M170.666667 213.333333h682.666666v85.333334H170.666667V213.333333z m0 512h682.666666v85.333334H170.666667v-85.333334z m0-256h682.666666v85.333334H170.666667v-85.333334z"/>
            </Viewbox>
        </Border>
        <Popup Placement="Bottom" 
               PlacementTarget="{Binding ElementName=border}"
               AllowsTransparency="True"
               IsOpen="{Binding IsOpen,ElementName=dropdownmenu}"
               StaysOpen="False"
               PopupAnimation="Slide"
               VerticalOffset="6"
               >
            <Border Margin="6"    Background="LightBlue">
                <Border.Effect>
                    <DropShadowEffect BlurRadius="6" ShadowDepth="0" Color="Red"/>
                </Border.Effect>
               
                <StackPanel>
                    <local:SideMenuItem DataContext="{Binding ItemViewModel,ElementName=dropdownmenu}"
                            IsExpanded="True"
                            MenuItemBackground="#24ACF2"
                            MenuItemSelectedBackground="YellowGreen"
                            ToggleBackground="#007ACC"
                            MenuItemSelectedChanged="S"/>
                    <local:SideMenuItem DataContext="{Binding ItemViewModel,ElementName=dropdownmenu}"
                            MenuItemBackground="#24ACF2"
                            MenuItemSelectedBackground="YellowGreen"
                            ToggleBackground="#007ACC"
                            MenuItemSelectedChanged="S"/>            
                </StackPanel>
            </Border>
        </Popup>
    </Grid>
</UserControl>

此控件后台代码：

using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;


namespace wpfcore
{
    public partial class DropDownMenu : UserControl
    {
        public bool IsOpen
        {
            get { return (bool)GetValue(IsOpenProperty); }
            set { SetValue(IsOpenProperty, value); }
        }
        public static readonly DependencyProperty IsOpenProperty =
            DependencyProperty.Register("IsOpen", typeof(bool), typeof(DropDownMenu), new PropertyMetadata(false));




        public DropDownMenu()
        {
            ItemViewModel = new SideMenuItemViewModel()
            {
                HeaderText = "快速开始",
                IconGeometry = FindResource("IconInfo") as Geometry,
                Items = new List<object>()
                {
                    "5.0新变化",
                    "第一个项目",
                    "第一个模块",
                    "自定义用户",
                    "捐赠",
                    "FAQ"
                }
            };
            InitializeComponent();
        }


        private void OnBorderMouseDown(object sender, MouseButtonEventArgs e)
        {
            IsOpen = !IsOpen;
        }
        public SideMenuItemViewModel ItemViewModel { get; set; }
        private void S(object sender, RoutedEventArgs e)
        {
          
        }
    }
}

其它代码太多了，直接上链接算了，

链接：https://pan.baidu.com/s/1Ei1BNVCrvZFfv2mQlBX-MA

提取码：bfpv

如果喜欢，点个赞呗~