WPF自定义控件-根据内容生成菜单

已于 2023-12-28 22:47:17 修改
阅读量554 收藏 9
点赞数 12
分类专栏： WPF 文章标签： wpf
于 2023-12-28 22:45:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37875849/article/details/135279699
版权

效果图：

控件：支持左边点击，右边内容滚到顶部，右边鼠标中键滚动，左边菜单栏跟着变化。

1.控件样式代码App.xaml

<Application
    x:Class="HT.ControlWPF.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:HT.ControlWPF"
    StartupUri="MainWindow.xaml">
    <Application.Resources>
        <Style TargetType="{x:Type local:CustomMenuScrollViewer}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type local:CustomMenuScrollViewer}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <!--  菜单栏  -->
                            <ScrollViewer
                                Grid.Row="0"
                                Grid.Column="0"
                                HorizontalScrollBarVisibility="Auto"
                                VerticalScrollBarVisibility="Auto">
                                <ItemsControl x:Name="PART_Mune">
                                    <ItemsControl.ItemsPanel>
                                        <ItemsPanelTemplate>
                                            <StackPanel Orientation="Vertical" />
                                        </ItemsPanelTemplate>
                                    </ItemsControl.ItemsPanel>
                                    <ItemsControl.ItemTemplate>
                                        <DataTemplate>
                                            <Grid>
                                                <RadioButton
                                                    MinWidth="120"
                                                    HorizontalContentAlignment="Stretch"
                                                    Command="{Binding CheckedCommand}"
                                                    CommandParameter="{Binding ElementName=PART_Function_Content}"
                                                    Content="{Binding Title}"
                                                    Cursor="Hand"
                                                    GroupName="rd"
                                                    IsChecked="{Binding IsSeleted, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
                                                    <RadioButton.Resources>
                                                        <Style TargetType="{x:Type RadioButton}">
                                                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
                                                            <Setter Property="BorderThickness" Value="1" />
                                                            <Setter Property="Padding" Value="10,5,10,5" />
                                                            <Setter Property="Margin" Value="2,0,2,0" />
                                                            <Setter Property="Template">
                                                                <Setter.Value>
                                                                    <ControlTemplate TargetType="{x:Type RadioButton}">
                                                                        <Border
                                                                            x:Name="content_Border"
                                                                            Margin="{TemplateBinding Margin}"
                                                                            Padding="{TemplateBinding Padding}">
                                                                            <ContentPresenter
                                                                                x:Name="contentPresenter"
                                                                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                                                Focusable="False"
                                                                                RecognizesAccessKey="True"
                                                                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                                                                        </Border>
                                                                        <ControlTemplate.Triggers>
                                                                            <Trigger Property="IsMouseOver" Value="True">
                                                                                <Setter Property="Foreground" Value="#379aff" />
                                                                            </Trigger>
                                                                            <DataTrigger Binding="{Binding IsSeleted}" Value="True">
                                                                                <Setter Property="Foreground" Value="#fff" />
                                                                                <Setter TargetName="content_Border" Property="Background" Value="#379aff" />
                                                                                <Setter TargetName="content_Border" Property="CornerRadius" Value="0 10 10 0" />
                                                                            </DataTrigger>
                                                                        </ControlTemplate.Triggers>
                                                                    </ControlTemplate>
                                                                </Setter.Value>
                                                            </Setter>
                                                        </Style>
                                                    </RadioButton.Resources>
                                                </RadioButton>
                                            </Grid>
                                        </DataTemplate>
                                    </ItemsControl.ItemTemplate>
                                </ItemsControl>
                            </ScrollViewer>
                            <!--  功能内容  -->
                            <ScrollViewer
                                x:Name="PART_Function_Content"
                                Grid.Row="0"
                                Grid.Column="1">
                                <ScrollViewer.Resources>
                                    <Style TargetType="Label">
                                        <Setter Property="FontSize" Value="16" />
                                        <Setter Property="Margin" Value="5,2,0,2" />
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="{x:Type Label}">
                                                    <Grid Margin="{TemplateBinding Margin}">
                                                        <Grid.ColumnDefinitions>
                                                            <ColumnDefinition Width="Auto" />
                                                            <ColumnDefinition Width="*" />
                                                        </Grid.ColumnDefinitions>
                                                        <Rectangle
                                                            Width="4"
                                                            Height="18"
                                                            Margin="0,0,5,0"
                                                            Fill="#379aff" />
                                                        <ContentPresenter
                                                            Grid.Column="1"
                                                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                            RecognizesAccessKey="True"
                                                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                                                    </Grid>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                    <Style TargetType="{x:Type GroupBox}">
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="{x:Type GroupBox}">
                                                    <Grid SnapsToDevicePixels="true">
                                                        <Grid.RowDefinitions>
                                                            <RowDefinition Height="Auto" />
                                                            <RowDefinition Height="Auto" />
                                                        </Grid.RowDefinitions>
                                                        <Border x:Name="Header" Grid.Row="0">
                                                            <StackPanel>
                                                                <ContentPresenter
                                                                    Name="header"
                                                                    ContentSource="Header"
                                                                    RecognizesAccessKey="True"
                                                                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                                                    Visibility="Collapsed" />
                                                                <Label HorizontalAlignment="Left" Content="{Binding ElementName=header, Path=Content}" />
                                                                <Border Height="1" Background="#eeeeee" />
                                                            </StackPanel>
                                                        </Border>
                                                        <ContentPresenter
                                                            Grid.Row="1"
                                                            Margin="{TemplateBinding Padding}"
                                                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                                                    </Grid>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </ScrollViewer.Resources>
                            </ScrollViewer>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>
</Application>

2.控件业务代码CustomMenuScrollViewer.cs

using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Windows;
using System.Windows.Controls;

namespace HT.ControlWPF
{
    [TemplatePart(Name = PART_Function_Content, Type = typeof(ScrollViewer))]
    [TemplatePart(Name = PART_Mune, Type = typeof(StackPanel))]
    public class CustomMenuScrollViewer : Control
    {
        public const string PART_Function_Content = nameof(PART_Function_Content);
        public const string PART_Mune = nameof(PART_Mune);
        /// <summary>
        /// 菜单栏目录
        /// </summary>
        private List<MuneInfo> muneInfos = new List<MuneInfo>();
        /// <summary>
        /// 是否加载
        /// </summary>
        private bool isLoaded = false;
        /// <summary>
        /// 需要更新菜单
        /// </summary>
        private bool hasUpdateMune = true;
        /// <summary>
        /// 需要更新内容 为2则更新
        /// </summary>
        private int hasUpdateContentOffset = 0;
        /// <summary>
        /// 内容控件
        /// </summary>
        private ScrollViewer content_ScrollViewer = null;
        /// <summary>
        /// 菜单控件
        /// </summary>
        private ItemsControl mune = null;
        static CustomMenuScrollViewer()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomMenuScrollViewer), new FrameworkPropertyMetadata(typeof(CustomMenuScrollViewer)));
        }
        public override void OnApplyTemplate()
        {
            content_ScrollViewer = this.GetTemplateChild(PART_Function_Content) as ScrollViewer;
            mune = this.GetTemplateChild(PART_Mune) as ItemsControl;
            content_ScrollViewer.Content = this.Content;
            content_ScrollViewer.Loaded += ScrollViewer_Loaded;
            content_ScrollViewer.ScrollChanged += PART_Function_Content_ScrollChanged;
            base.OnApplyTemplate();
        }
        /// <summary>
        /// 内容绑定
        /// </summary>
        [Bindable(true)]
        public object Content
        {
            get { return GetValue(ContentProperty); }
            set { SetValue(ContentProperty, value); }
        }
        public static readonly DependencyProperty ContentProperty =DependencyProperty.Register(nameof(Content),typeof(object),typeof(CustomMenuScrollViewer),new FrameworkPropertyMetadata(null));

        private void RadioButton_Checked(MuneInfo selectedDataContext)
        {
            if (!hasUpdateMune) return;
            hasUpdateContentOffset = 0;
            content_ScrollViewer.ScrollToVerticalOffset(selectedDataContext.StartPoint);
        }
        private void ScrollViewer_Loaded(object sender, RoutedEventArgs e)
        {
            if (isLoaded) return;
            //找出有Name的GroupBox
            var group_boxs = ((Panel)this.content_ScrollViewer.Content).Children.OfType<GroupBox>().Where(s => !string.IsNullOrWhiteSpace(s.Name)).ToList();
            for (int i = 0; i < group_boxs.Count; i++)
            {
                var key = group_boxs[i].Name;
                var title = group_boxs[i].Header.ToString();
                //计算GroupBox在ScrollViewer的开始位置和结束位置
                double endPoint = 0;
                double startPoint = 0;
                for (int j = 0; j <= i; j++)
                {
                    endPoint += group_boxs[j].ActualHeight;
                    if (j == i) continue;
                    startPoint += group_boxs[j].ActualHeight;
                }
                muneInfos.Add(new MuneInfo()
                {
                    PageKey = key,
                    IsSeleted = false,
                    Title = title,
                    StartPoint = startPoint,
                    EndPoint = endPoint
                });
            }
            foreach (var item in muneInfos)
            {
                item.Checked += RadioButton_Checked;
            }
            mune.ItemsSource = muneInfos;
        }
        private void PART_Function_Content_ScrollChanged(object sender, ScrollChangedEventArgs e)
        {
            if (++hasUpdateContentOffset >= 2)
            {
                var control = (ScrollViewer)sender;
                double offset = control.VerticalOffset;
                var itemz = muneInfos.Where(s => s.StartPoint <= offset).OrderByDescending(s => s.StartPoint).FirstOrDefault();
                if (itemz != null)
                {
                    hasUpdateMune = false;
                    itemz.IsSeleted = true;
                    hasUpdateMune = true;
                }
            }
        }
    }
}

3.菜单模型类MuneInfo

using Prism.Commands;
using Prism.Mvvm;
using System;
using System.Windows.Input;

namespace HT.ControlWPF
{
    public class MuneInfo : BindableBase
    {
        public event Action<MuneInfo> Checked;
        private bool isSeleted;
        /// <summary>
        /// 是否选中
        /// </summary>
        public bool IsSeleted
        {
            get
            {
                return isSeleted;
            }
            set
            {
                isSeleted = value;
                RaisePropertyChanged(nameof(IsSeleted));
            }
        }
        /// <summary>
        /// 导航地址
        /// </summary>
        public string PageKey { get; set; }
        /// <summary>
        /// 开始位置
        /// </summary>
        public double StartPoint { get; set; }
        /// <summary>
        /// 结束位置
        /// </summary>
        public double EndPoint { get; set; }
        private string title;
        /// <summary>
        /// 标题
        /// </summary>
        public string Title
        {
            get
            {
                return title;
            }
            set
            {
                title = value;
                RaisePropertyChanged(nameof(Title));
            }
        }
        public ICommand CheckedCommand
        {
            get
            {
                return new DelegateCommand(() =>
                {
                    Checked?.Invoke(this);
                });
            }
        }
    }
}

4.使用

<Window
    x:Class="HT.ControlWPF.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:HT.ControlWPF"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="800"
    Height="450"
    FontSize="14"
    mc:Ignorable="d">
    <local:CustomMenuScrollViewer>
        <local:CustomMenuScrollViewer.Content>
            <StackPanel>
                <GroupBox x:Name="groupBox1" Header="功能1标题">
                    <Border Height="200" />
                </GroupBox>
                <GroupBox x:Name="groupBox2" Header="功能2标题">
                    <Border Height="200" />
                </GroupBox>
                <GroupBox x:Name="groupBox3" Header="功能3标题">
                    <Border Height="200" />
                </GroupBox>
                <GroupBox x:Name="groupBox4" Header="功能4标题">
                    <Border Height="200" />
                </GroupBox>
                <GroupBox x:Name="groupBox5" Header="功能5标题">
                    <Border Height="200" />
                </GroupBox>
            </StackPanel>
        </local:CustomMenuScrollViewer.Content>
    </local:CustomMenuScrollViewer>
</Window>

注：

1.因为最后那个内容点击第二次才能选中，所以做了一些特殊的处理，还有自己在ItemControl上找不到CheckBox，用了CheckedCommand来触发事件Checked，代码实现有点奇怪，但是功能是已经实现了的，看看那位朋友有好的建议，方便的话和我聊下好的想法。

2.该控件所有代码已经贴出来，可以可以直接使用， 把命名空间改掉就OK。

Now喔
关注
  • 12
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF实战项目四：左侧菜单导航
yigu4011的博客
07-12 3276
9、在点击首页、待办事项、备忘录、设置按钮时，菜单栏不会自动收缩进去，需要添加一下代码，设置ListBox的名字：x:Name="drawerHost"8、在ListBox下面添加导航，通过添加行为Microsoft.Xaml.Behaviors.Wpf来实现。6、在MainViewModel.cs中初始化导航 ，声明前进后退功能方法。5、在右侧空白注册一个区域，区域注册用上面单独的类来控制。
wpf prism左侧抽屉式菜单
雨中深巷的油纸伞
03-07 1252
ContentView 、TestView、SettingView是新建的用户控件，自己随便新建可以区分不同控件查看效果即可。1.首先引入包MaterialDesignColors和MaterialDesignThemes。RegionName 对应每一个创建Control，具体的规则可以看一下prism的导航。左侧菜单显示在窗体外，点击左上角菜单图标通过简单的动画呈现出来。prism 有个注册类ModuleModule。这里头像的图片写死了，需要的自己替换。然后在App.xaml.cs中注册。
wpf菜单MenuItem样式经典
12-02
wpf菜单MenuItem样式经典源代码,绝对经典，
WPF/C#：实现导航功能
最新发布
mingupup的博客
07-18 1138
在WPF中使用导航功能可以使用Frame控件，这是比较基础的一种方法。前几天分享了wpfui中NavigationView的基本用法，但是如果真正在项目中使用起来，基础的用法是无法满足的。今天通过wpfui中的mvvm例子来说明在wpfui中如何通过依赖注入与MVVM模式使用导航功能。实践起来，我个人觉得这个例子中实现导航功能还是有点麻烦的，但我也不知道怎么能更优雅，也是学到了一些东西吧。
WPF创建漂亮的菜单栏
xieehu的博客
02-21 1820
如何用WPF做菜单，如何给菜单添加图标
【WPF应用34】WPF基本控件-Menu的详解与示例
qq_35320456的博客
04-05 3522
WPF基本控件-Menu的详解与示例
WPF实战学习笔记04-菜单导航
xinzhiya001的博客
07-24 1091
/定义Nanme变量。
WPF自定义控件
LPPTREE的专栏
09-11 422
using System.Windows; using System.Windows.Controls; using System.Windows.Media; namespace ZJWMSUI.Controls { public class DazzleButton : Button { public static readonly DependencyPro
wpf 自定义控件
m0_46533764的博客
02-04 618
UserControl ContentControl Control
wpf自定义漂亮的二级菜单
11-13
以下是对"wpf自定义漂亮的二级菜单"这一主题的详细解释。 首先，我们来理解WPF中的菜单系统。在WPF中，`Menu`控件用于展示层级结构的选项，通常用于应用程序的顶部或侧边栏。`MenuItem`是`Menu`的基本元素，可以...
wpf 圆形菜单
02-26
综上所述，创建WPF的圆形菜单涉及到多个方面的技术，包括自定义控件、几何图形绘制、数据绑定、布局管理、动画效果、事件处理以及样式模板等。通过熟练掌握这些知识点，开发者可以构建出美观且功能丰富的圆形菜单。
WPF 后台定义菜单栏
11-05
如果你的应用需要根据用户权限或运行时数据动态生成菜单，后台定义菜单栏就更为合适了。可以通过遍历数据源并创建相应的`MenuItem`实例来实现这一功能。 总结，WPF后台定义菜单栏提供了更大的灵活性，可以方便地...
WPF 环形菜单控件
05-07
**WPF 环形菜单控件** 在Windows Presentation Foundation（WPF）中，开发者...这样的控件不仅可以提升应用程序的用户体验，还展示了WPF自定义控件的强大能力。在实际开发中，可以根据具体需求进行适当的调整和优化。
WPF之工具栏菜单栏功能区。
lingxiao16888的博客
05-11 1188
1.1，Menu中可添加菜单分隔条<Separator></Separator>作为分割线，使用Separator可以通过改变其template来自定义，Separator是无焦点的，如果简单的在MenuItem中添加一个textBlock它是可以有焦点的。1.4，ToolBarTray.Band：确定工具栏放在哪一栏中（最顶部的一栏索引为0），BandIndex属性明确设置一栏中什么位置放置工具栏.2.1，使用功能区需要添加程序集System.Windows.Controls.Ribbon。
WPF 控件 (十六、Menu)
LyRics1996的博客
04-17 854
在loaded中添加以下代码。
WPF实战项目三：首页左侧菜单绑定
yigu4011的博客
07-11 1188
一定要是 UserControl，就是在设计页面的xaml根部不要是Window属性，要得是UserControl，如果是Window设计就不能嵌套。MainView.xaml中的菜单（）新增文件夹Common-Models，新建菜单类名：MenuBar.cs。在项目文件夹Views中添加用户空间，这里注意。
WPF中实现动态导航
helldoger的博客
06-11 1548
主页面 <mah:MetroWindow x:Class="Kx.View.MyMainView" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" x
wpf 导航菜单_WPF：精简导航菜单
cunhan4654的博客
08-25 4394
Download Repository 下载资料库 介绍 (Introduction) Navigation menus can enhance the quality of the user experience of your WPF application but how do you go about adding a compact navigation menu without us...
wpf treeview左侧菜单
10-31
WPF TreeView可以通过绑定数据源来动态生成菜单项。通过设置数据源的层次关系，可以实现树状结构的展示。每个菜单项通常包括一个展开/折叠的图标和一个显示文字的标签，当用户点击菜单项时，可以触发相应的操作或...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值