devbox
煮酒与君饮
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：煮酒与君饮 | 2024-06-26 05:50:29

赞

踩

wpf 菜单控件

效果图：

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

1.控件样式代码App.xaml

  1. <Application
  2.     x:Class="HT.ControlWPF.App"
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5.     xmlns:local="clr-namespace:HT.ControlWPF"
  6.     StartupUri="MainWindow.xaml">
  7.     <Application.Resources>
  8.         <Style TargetType="{x:Type local:CustomMenuScrollViewer}">
  9.             <Setter Property="Template">
  10.                 <Setter.Value>
  11.                     <ControlTemplate TargetType="{x:Type local:CustomMenuScrollViewer}">
  12.                         <Grid>
  13.                             <Grid.ColumnDefinitions>
  14.                                 <ColumnDefinition Width="Auto" />
  15.                                 <ColumnDefinition Width="*" />
  16.                             </Grid.ColumnDefinitions>
  17.                             <!--  菜单栏  -->
  18.                             <ScrollViewer
  19.                                 Grid.Row="0"
  20.                                 Grid.Column="0"
  21.                                 HorizontalScrollBarVisibility="Auto"
  22.                                 VerticalScrollBarVisibility="Auto">
  23.                                 <ItemsControl x:Name="PART_Mune">
  24.                                     <ItemsControl.ItemsPanel>
  25.                                         <ItemsPanelTemplate>
  26.                                             <StackPanel Orientation="Vertical" />
  27.                                         </ItemsPanelTemplate>
  28.                                     </ItemsControl.ItemsPanel>
  29.                                     <ItemsControl.ItemTemplate>
  30.                                         <DataTemplate>
  31.                                             <Grid>
  32.                                                 <RadioButton
  33.                                                     MinWidth="120"
  34.                                                     HorizontalContentAlignment="Stretch"
  35.                                                     Command="{Binding CheckedCommand}"
  36.                                                     CommandParameter="{Binding ElementName=PART_Function_Content}"
  37.                                                     Content="{Binding Title}"
  38.                                                     Cursor="Hand"
  39.                                                     GroupName="rd"
  40.                                                     IsChecked="{Binding IsSeleted, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
  41.                                                     <RadioButton.Resources>
  42.                                                         <Style TargetType="{x:Type RadioButton}">
  43.                                                             <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
  44.                                                             <Setter Property="BorderThickness" Value="1" />
  45.                                                             <Setter Property="Padding" Value="10,5,10,5" />
  46.                                                             <Setter Property="Margin" Value="2,0,2,0" />
  47.                                                             <Setter Property="Template">
  48.                                                                 <Setter.Value>
  49.                                                                     <ControlTemplate TargetType="{x:Type RadioButton}">
  50.                                                                         <Border
  51.                                                                             x:Name="content_Border"
  52.                                                                             Margin="{TemplateBinding Margin}"
  53.                                                                             Padding="{TemplateBinding Padding}">
  54.                                                                             <ContentPresenter
  55.                                                                                 x:Name="contentPresenter"
  56.                                                                                 HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
  57.                                                                                 VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
  58.                                                                                 Focusable="False"
  59.                                                                                 RecognizesAccessKey="True"
  60.                                                                                 SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
  61.                                                                         </Border>
  62.                                                                         <ControlTemplate.Triggers>
  63.                                                                             <Trigger Property="IsMouseOver" Value="True">
  64.                                                                                 <Setter Property="Foreground" Value="#379aff" />
  65.                                                                             </Trigger>
  66.                                                                             <DataTrigger Binding="{Binding IsSeleted}" Value="True">
  67.                                                                                 <Setter Property="Foreground" Value="#fff" />
  68.                                                                                 <Setter TargetName="content_Border" Property="Background" Value="#379aff" />
  69.                                                                                 <Setter TargetName="content_Border" Property="CornerRadius" Value="0 10 10 0" />
  70.                                                                             </DataTrigger>
  71.                                                                         </ControlTemplate.Triggers>
  72.                                                                     </ControlTemplate>
  73.                                                                 </Setter.Value>
  74.                                                             </Setter>
  75.                                                         </Style>
  76.                                                     </RadioButton.Resources>
  77.                                                 </RadioButton>
  78.                                             </Grid>
  79.                                         </DataTemplate>
  80.                                     </ItemsControl.ItemTemplate>
  81.                                 </ItemsControl>
  82.                             </ScrollViewer>
  83.                             <!--  功能内容  -->
  84.                             <ScrollViewer
  85.                                 x:Name="PART_Function_Content"
  86.                                 Grid.Row="0"
  87.                                 Grid.Column="1">
  88.                                 <ScrollViewer.Resources>
  89.                                     <Style TargetType="Label">
  90.                                         <Setter Property="FontSize" Value="16" />
  91.                                         <Setter Property="Margin" Value="5,2,0,2" />
  92.                                         <Setter Property="Template">
  93.                                             <Setter.Value>
  94.                                                 <ControlTemplate TargetType="{x:Type Label}">
  95.                                                     <Grid Margin="{TemplateBinding Margin}">
  96.                                                         <Grid.ColumnDefinitions>
  97.                                                             <ColumnDefinition Width="Auto" />
  98.                                                             <ColumnDefinition Width="*" />
  99.                                                         </Grid.ColumnDefinitions>
  100.                                                         <Rectangle
  101.                                                             Width="4"
  102.                                                             Height="18"
  103.                                                             Margin="0,0,5,0"
  104.                                                             Fill="#379aff" />
  105.                                                         <ContentPresenter
  106.                                                             Grid.Column="1"
  107.                                                             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
  108.                                                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
  109.                                                             RecognizesAccessKey="True"
  110.                                                             SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
  111.                                                     </Grid>
  112.                                                 </ControlTemplate>
  113.                                             </Setter.Value>
  114.                                         </Setter>
  115.                                     </Style>
  116.                                     <Style TargetType="{x:Type GroupBox}">
  117.                                         <Setter Property="Template">
  118.                                             <Setter.Value>
  119.                                                 <ControlTemplate TargetType="{x:Type GroupBox}">
  120.                                                     <Grid SnapsToDevicePixels="true">
  121.                                                         <Grid.RowDefinitions>
  122.                                                             <RowDefinition Height="Auto" />
  123.                                                             <RowDefinition Height="Auto" />
  124.                                                         </Grid.RowDefinitions>
  125.                                                         <Border x:Name="Header" Grid.Row="0">
  126.                                                             <StackPanel>
  127.                                                                 <ContentPresenter
  128.                                                                     Name="header"
  129.                                                                     ContentSource="Header"
  130.                                                                     RecognizesAccessKey="True"
  131.                                                                     SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
  132.                                                                     Visibility="Collapsed" />
  133.                                                                 <Label HorizontalAlignment="Left" Content="{Binding ElementName=header, Path=Content}" />
  134.                                                                 <Border Height="1" Background="#eeeeee" />
  135.                                                             </StackPanel>
  136.                                                         </Border>
  137.                                                         <ContentPresenter
  138.                                                             Grid.Row="1"
  139.                                                             Margin="{TemplateBinding Padding}"
  140.                                                             SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
  141.                                                     </Grid>
  142.                                                 </ControlTemplate>
  143.                                             </Setter.Value>
  144.                                         </Setter>
  145.                                     </Style>
  146.                                 </ScrollViewer.Resources>
  147.                             </ScrollViewer>
  148.                         </Grid>
  149.                     </ControlTemplate>
  150.                 </Setter.Value>
  151.             </Setter>
  152.         </Style>
  153.     </Application.Resources>
  154. </Application>

2.控件业务代码CustomMenuScrollViewer.cs

  1. using System.Collections.Generic;
  2. using System.ComponentModel;
  3. using System.Linq;
  4. using System.Windows;
  5. using System.Windows.Controls;
  6.  
  7. namespace HT.ControlWPF
  8. {
  9.     [TemplatePart(Name = PART_Function_Content, Type = typeof(ScrollViewer))]
  10.     [TemplatePart(Name = PART_Mune, Type = typeof(StackPanel))]
  11.     public class CustomMenuScrollViewer : Control
  12.     {
  13.         public const string PART_Function_Content = nameof(PART_Function_Content);
  14.         public const string PART_Mune = nameof(PART_Mune);
  15.         /// <summary>
  16.         /// 菜单栏目录
  17.         /// </summary>
  18.         private List<MuneInfo> muneInfos = new List<MuneInfo>();
  19.         /// <summary>
  20.         /// 是否加载
  21.         /// </summary>
  22.         private bool isLoaded = false;
  23.         /// <summary>
  24.         /// 需要更新菜单
  25.         /// </summary>
  26.         private bool hasUpdateMune = true;
  27.         /// <summary>
  28.         /// 需要更新内容 为2则更新
  29.         /// </summary>
  30.         private int hasUpdateContentOffset = 0;
  31.         /// <summary>
  32.         /// 内容控件
  33.         /// </summary>
  34.         private ScrollViewer content_ScrollViewer = null;
  35.         /// <summary>
  36.         /// 菜单控件
  37.         /// </summary>
  38.         private ItemsControl mune = null;
  39.         static CustomMenuScrollViewer()
  40.         {
  41.             DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomMenuScrollViewer), new FrameworkPropertyMetadata(typeof(CustomMenuScrollViewer)));
  42.         }
  43.         public override void OnApplyTemplate()
  44.         {
  45.             content_ScrollViewer = this.GetTemplateChild(PART_Function_Content) as ScrollViewer;
  46.             mune = this.GetTemplateChild(PART_Mune) as ItemsControl;
  47.             content_ScrollViewer.Content = this.Content;
  48.             content_ScrollViewer.Loaded += ScrollViewer_Loaded;
  49.             content_ScrollViewer.ScrollChanged += PART_Function_Content_ScrollChanged;
  50.             base.OnApplyTemplate();
  51.         }
  52.         /// <summary>
  53.         /// 内容绑定
  54.         /// </summary>
  55.         [Bindable(true)]
  56.         public object Content
  57.         {
  58.             get { return GetValue(ContentProperty); }
  59.             set { SetValue(ContentProperty, value); }
  60.         }
  61.         public static readonly DependencyProperty ContentProperty =DependencyProperty.Register(nameof(Content),typeof(object),typeof(CustomMenuScrollViewer),new FrameworkPropertyMetadata(null));
  62.  
  63.         private void RadioButton_Checked(MuneInfo selectedDataContext)
  64.         {
  65.             if (!hasUpdateMune) return;
  66.             hasUpdateContentOffset = 0;
  67.             content_ScrollViewer.ScrollToVerticalOffset(selectedDataContext.StartPoint);
  68.         }
  69.         private void ScrollViewer_Loaded(object sender, RoutedEventArgs e)
  70.         {
  71.             if (isLoaded) return;
  72.             //找出有Name的GroupBox
  73.             var group_boxs = ((Panel)this.content_ScrollViewer.Content).Children.OfType<GroupBox>().Where(s => !string.IsNullOrWhiteSpace(s.Name)).ToList();
  74.             for (int i = 0; i < group_boxs.Count; i++)
  75.             {
  76.                 var key = group_boxs[i].Name;
  77.                 var title = group_boxs[i].Header.ToString();
  78.                 //计算GroupBox在ScrollViewer的开始位置和结束位置
  79.                 double endPoint = 0;
  80.                 double startPoint = 0;
  81.                 for (int j = 0; j <= i; j++)
  82.                 {
  83.                     endPoint += group_boxs[j].ActualHeight;
  84.                     if (j == i) continue;
  85.                     startPoint += group_boxs[j].ActualHeight;
  86.                 }
  87.                 muneInfos.Add(new MuneInfo()
  88.                 {
  89.                     PageKey = key,
  90.                     IsSeleted = false,
  91.                     Title = title,
  92.                     StartPoint = startPoint,
  93.                     EndPoint = endPoint
  94.                 });
  95.             }
  96.             foreach (var item in muneInfos)
  97.             {
  98.                 item.Checked += RadioButton_Checked;
  99.             }
  100.             mune.ItemsSource = muneInfos;
  101.         }
  102.         private void PART_Function_Content_ScrollChanged(object sender, ScrollChangedEventArgs e)
  103.         {
  104.             if (++hasUpdateContentOffset >= 2)
  105.             {
  106.                 var control = (ScrollViewer)sender;
  107.                 double offset = control.VerticalOffset;
  108.                 var itemz = muneInfos.Where(s => s.StartPoint <= offset).OrderByDescending(s => s.StartPoint).FirstOrDefault();
  109.                 if (itemz != null)
  110.                 {
  111.                     hasUpdateMune = false;
  112.                     itemz.IsSeleted = true;
  113.                     hasUpdateMune = true;
  114.                 }
  115.             }
  116.         }
  117.     }
  118. }

3.菜单模型类MuneInfo

  1. using Prism.Commands;
  2. using Prism.Mvvm;
  3. using System;
  4. using System.Windows.Input;
  5.  
  6. namespace HT.ControlWPF
  7. {
  8.     public class MuneInfo : BindableBase
  9.     {
  10.         public event Action<MuneInfo> Checked;
  11.         private bool isSeleted;
  12.         /// <summary>
  13.         /// 是否选中
  14.         /// </summary>
  15.         public bool IsSeleted
  16.         {
  17.             get
  18.             {
  19.                 return isSeleted;
  20.             }
  21.             set
  22.             {
  23.                 isSeleted = value;
  24.                 RaisePropertyChanged(nameof(IsSeleted));
  25.             }
  26.         }
  27.         /// <summary>
  28.         /// 导航地址
  29.         /// </summary>
  30.         public string PageKey { get; set; }
  31.         /// <summary>
  32.         /// 开始位置
  33.         /// </summary>
  34.         public double StartPoint { get; set; }
  35.         /// <summary>
  36.         /// 结束位置
  37.         /// </summary>
  38.         public double EndPoint { get; set; }
  39.         private string title;
  40.         /// <summary>
  41.         /// 标题
  42.         /// </summary>
  43.         public string Title
  44.         {
  45.             get
  46.             {
  47.                 return title;
  48.             }
  49.             set
  50.             {
  51.                 title = value;
  52.                 RaisePropertyChanged(nameof(Title));
  53.             }
  54.         }
  55.         public ICommand CheckedCommand
  56.         {
  57.             get
  58.             {
  59.                 return new DelegateCommand(() =>
  60.                 {
  61.                     Checked?.Invoke(this);
  62.                 });
  63.             }
  64.         }
  65.     }
  66. }

4.使用

  1. <Window
  2.     x:Class="HT.ControlWPF.MainWindow"
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  6.     xmlns:local="clr-namespace:HT.ControlWPF"
  7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  8.     Title="MainWindow"
  9.     Width="800"
  10.     Height="450"
  11.     FontSize="14"
  12.     mc:Ignorable="d">
  13.     <local:CustomMenuScrollViewer>
  14.         <local:CustomMenuScrollViewer.Content>
  15.             <StackPanel>
  16.                 <GroupBox x:Name="groupBox1" Header="功能1标题">
  17.                     <Border Height="200" />
  18.                 </GroupBox>
  19.                 <GroupBox x:Name="groupBox2" Header="功能2标题">
  20.                     <Border Height="200" />
  21.                 </GroupBox>
  22.                 <GroupBox x:Name="groupBox3" Header="功能3标题">
  23.                     <Border Height="200" />
  24.                 </GroupBox>
  25.                 <GroupBox x:Name="groupBox4" Header="功能4标题">
  26.                     <Border Height="200" />
  27.                 </GroupBox>
  28.                 <GroupBox x:Name="groupBox5" Header="功能5标题">
  29.                     <Border Height="200" />
  30.                 </GroupBox>
  31.             </StackPanel>
  32.         </local:CustomMenuScrollViewer.Content>
  33.     </local:CustomMenuScrollViewer>
  34. </Window>

注：

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

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

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号