WPF-菜单和Tab控件
因为菜单和Tab控件一起用，所以就拿出来一块写
Tab控件
定义一个名为ViewItem类，定义Tab的属性
1 /// <summary>
2 /// tab item
3 /// </summary>
4 public class ViewItem
5 {
6 /// <summary>
7 /// 标题
8 /// </summary>
9 public string Header
10 {
11 get;
12 set;
13 }
14
15 /// <summary>
16 /// 主键名称
17 /// </summary>
18 public string KeyName
19 {
20 get;
21 set;
22 }
23
24 /// <summary>
25 /// the show Control
26 /// </summary>
27 public object ViewControl
28 {
29 get;
30 set;
31 }
32 }
TabControl用的是Dev的控件，所以先要引用三个Dev的DLL，分别是DevExpress.Xpf.Core，DevExpress,Xpf.Docking，DevExpress.Xpf.Layout.Core。
新建一个UserControl，命名为MenuControl，在主窗体的Window中需要添加一下引用
1 xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking"2 xmlns:c="clr-namespace:RemindWin" 3 xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" 4 Name="MainView_View"
其中，c引用的是MenuControl所在的文件夹，因为要用到MenuControl，所以需要引用MenuControl所在的文件夹。并为窗体命名为“MainView_View”（后面用到）。
定义一个DockPanel，在其的顶端设置菜单栏，内容放TabControl，也可以在下面放FootBar，这里省略，主窗体代码如下：
1 <Grid x:Name="MainView">
2 <DockPanel LastChildFill="True">
4 <c:MenuControl DockPanel.Dock="Top" HorizontalAlignment="Left"/>
5 <dxd:DockLayoutManager x:Name="dockManager" UseLayoutRounding="True" AllowCustomization="False">
6 <dxd:LayoutGroup Orientation="Vertical" >
7 <dxd:DocumentGroup Name="documentContainer"
8 SelectedTabIndex="{Binding SelectedTabIndex,Mode=TwoWay}"
9 ItemsSource="{Binding ItemList}"
10 DestroyOnClosingChildren="False"
11 Background="Azure"
12 ClosePageButtonShowMode="InActiveTabPageAndTabControlHeader">
13 <dxd:DocumentGroup.ItemStyle>
14 <Style TargetType="dxd:DocumentPanel">
15 <Setter Property="CloseCommand" Value="{Binding DataContext.CloseCommand,ElementName=MainView}" />
16 <Setter Property="Caption" Value="{Binding Header}"></Setter>
17 <Setter Property="AllowFloat" Value="False"></Setter>
18 <Setter Property="AllowMaximize" Value="False"></Setter>
19 </Style>
20 </dxd:DocumentGroup.ItemStyle>
21 <dxd:DocumentGroup.ItemContentTemplate>
22 <DataTemplate>
23 <ContentControl Content="{Binding ViewControl}"></ContentControl>
24 </DataTemplate>
25 </dxd:DocumentGroup.ItemContentTemplate>
26 </dxd:DocumentGroup>
27 </dxd:LayoutGroup>
28 </dxd:DockLayoutManager>
29 </DockPanel>
30 </Grid>
binding了Model中的ItemList，这是Tab集合，SelectedTabIndex是所选Tab的索引，为Int型，每个Tab有一个Close事件，Binding后台代码中的CloseCommand事件，属性Caption，banding了ViewItem中的Header，每个Tab的内容ContentControl绑定了ViewItem中的ViewControl，其中需要注意Grid的Name与<Setter>里面的元素一致。
添加主窗体的ViewModel，命名MainViewModel，定义ItemList和SelectedTabIndex（引用了SimpleMvvmToolkit）
1 #region Properties
2
3 //
4 private ObservableCollection<ViewItem> _itemList = new ObservableCollection<ViewItem>();
5 /// <summary>
6 /// Tab页集合
7 /// </summary>
8 public ObservableCollection<ViewItem> ItemList
9 {
10 get
11 {
12 return _itemList;
13 }
14 set
15 {
16 _itemList = value;
17 }
18 }
19
20 //所选tab索引
21 private int _selectedTabIndex = 0;
22 /// <summary>
23 /// 所选tab索引
24 /// </summary>
25 public int SelectedTabIndex
26 {
27 get
28 {
29 return _selectedTabIndex;
30 }
31 set
32 {
33 _selectedTabIndex = value;
34 NotifyPropertyChanged(x => x.SelectedTabIndex);
35 }
36 }
37
38 #endregion
定义添加Tab的方法，定义了两个，一个ViewModel是为类型的方法，一个ViewModel以参数形式的方法，第二种主要是针对一些需要传参的ViewModel，这里有一个规则，如果一个需要添加一个已有的Tab页，会自动跳到该Tab页，而不是出现两个一样的Tab页，这里主要依靠KeyName做判断（也可添加两个一样的Tab，代码需简单修改）
1 /// <summary>
2 /// 添加Tab页
3 /// </summary>
4 /// <typeparam name="TView">View</typeparam>
5 /// <typeparam name="KMode">ViewModel</typeparam>
6 /// <param name="header">对应的标题</param>
7 /// <param name="systemFunction">View的类型</param>
8 public void OpenNewItem<TView, KMode>(string header, string systemFunction)
9 where TView : System.Windows.Controls.UserControl, new()
10 where KMode : new()
11 {
12 string keyName = systemFunction.ToString();
13 var q = ItemList.Where(x => x.KeyName == keyName).FirstOrDefault();
14 int index = 0;
15 if (q == null)
16 {
17 KMode vModel = new KMode();
18 TView view = new TView();
19 ViewItem item = new ViewItem();
20 item.Header = header;
21 item.KeyName = keyName;
22 item.ViewControl = view;
23 ItemList.Add(item);
24 view.DataContext = vModel;
25 index = ItemList.Count() - 1;
26 }
27 else
28 {
29 index = ItemList.IndexOf(q);
30 }
31 SelectedTabIndex = index;
32 }
33
34 /// <summary>
35 /// 添加Tab页
36 /// </summary>
37 /// <typeparam name="TView">View</typeparam>
38 /// <param name="header">对应的标题</param>
39 /// <param name="systemFunction">View的类型</param>
40 /// <param name="_model">可带参数的ViewModel</param>
41 public void OpenNewItemPara<TView>(string header, string systemFunction,object _model)
42 where TView : System.Windows.Controls.UserControl, new()
43 {
44 string keyName = systemFunction.ToString();
45 var q = ItemList.Where(x => x.KeyName == keyName).FirstOrDefault();
46 int index = 0;
47 if (q == null)
48 {
49 TView view = new TView();
50 ViewItem item = new ViewItem();
51 item.Header = header;
52 item.KeyName = keyName;
53 item.ViewControl = view;
54 ItemList.Add(item);
55 view.DataContext = _model;
56 index = ItemList.Count() - 1;
57 }
58 else
59 {
60 index = ItemList.IndexOf(q);
61 }
62 SelectedTabIndex = index;
63 }
定义关闭Tab的事件和方法
1 /// <summary>
2 /// 关闭Tab页
3 /// </summary>
4 public DelegateCommand CloseCommand
5 {
6 get
7 {
8 return new DelegateCommand(CloseTab);
9 }
10 }
11
12 private void CloseTab()
13 {
14 if (SelectedTabIndex >= 0)
15 {
16 var q = ItemList[SelectedTabIndex];
17 ItemList.RemoveAt(SelectedTabIndex);
18 ((System.Windows.Controls.UserControl)q.ViewControl).DataContext = null;
19 q.ViewControl = null;
20 q = null;
21 GC.Collect();
22 GC.WaitForPendingFinalizers();
23 GC.Collect();
24 }
25 }
别忘了，在MainWindow.xaml.cs的构造中添加这句话
1 this.DataContext = new MainViewModel();
MenuControl菜单栏
定义MenuItem
1 /// <summary>
2 /// 主菜单项。可添加更多属性实现菜单的个性配置，如字体、图片、响应等
3 /// </summary>
4 public class MenuItem : ModelBase<MenuItem>
5 {
6 public MenuItem(string item)
7 {
8 Header = item;
9 Childrens = new List<MenuItem>();
10 }
11
12 public MenuItem(string header, string keyName)
13 {
14 Header = header;
15 KeyName = keyName;
16 }
17
18 /// <summary>
19 /// 菜单名称，做为菜单主键
20 /// </summary>
21 public string KeyName
22 {
23 get;
24 set;
25 }
26
27 /// <summary>
28 /// 菜单名
29 /// </summary>
30 public string Header { get; set; }
31
32 /// <summary>
33 /// 图片
34 /// </summary>
35 public BitmapImage Icon { get; set; }
36
37 /// <summary>
38 /// 是否可用
39 /// </summary>
40 private bool m_IsEnabled = true;
41 /// <summary>
42 /// 菜单可用性。判断权限后设置此属性实现菜单的可用性控制
43 /// </summary>
44 new public bool IsEnabled
45 {
46 get
47 {
48 return m_IsEnabled;
49 }
50 set
51 {
52 m_IsEnabled = value;
53 NotifyPropertyChanged(x => x.IsEnabled);
54 }
55 }
56
57 /// <summary>
58 /// 子菜单
59 /// </summary>
60 public List<MenuItem> Childrens { get; set; }
61
62 /// <summary>
63 /// 事件
64 /// </summary>
65 public DelegateCommand<string> SelectedCommand { get; set; }
66
67
68 }
在MenuControl中定义各种格式和属性
1 <UserControl.Resources>
2 <HierarchicalDataTemplate x:Key="ItemTemplate"
3 ItemsSource="{Binding Childrens}">
4 <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
5 <TextBlock Text="{Binding Header}"
6 IsEnabled="{Binding IsEnabled}" VerticalAlignment="Center"/>
7 </StackPanel>
8 </HierarchicalDataTemplate>
9 <ControlTemplate x:Key="MenuSeparatorTemplate">
10 <Separator />
11 </ControlTemplate>
12 </UserControl.Resources>
13
14 <Menu DockPanel.Dock="Top"
15 VerticalAlignment="Top"
16 ItemsSource="{Binding MenuList}"
17 ItemTemplate="{StaticResource ItemTemplate}">
18
19 <!-- 菜单背景色-->
20 <Menu.Background>
21 <LinearGradientBrush StartPoint="0,0" EndPoint="0,1.5">
22 <GradientStop Color="#f2f2f2" Offset="0.5"/>
23 <GradientStop Color="#F8F9FB" Offset="01"/>
24 </LinearGradientBrush>
25 </Menu.Background>
26 <Menu.ItemContainerStyle>
27 <Style TargetType="MenuItem">
28 <Setter Property="IsEnabled"
29 Value="{Binding IsEnabled}" />
30 <Setter Property="Command"
31 Value="{Binding SelectedCommand}" />
32 <Setter Property="CommandParameter"
33 Value="{Binding Header}" />
34 <Setter Property="FontSize" Value="14"/>
35
36 <Style.Triggers>
37 <DataTrigger Binding="{Binding }"
38 Value="{x:Null}">
39 <Setter Property="Template"
40 Value="{StaticResource MenuSeparatorTemplate}" />
41 </DataTrigger>
42 </Style.Triggers>
43
44 </Style>
45 </Menu.ItemContainerStyle>
46 </Menu>
定义菜单的ViewModel，名为MenuControlModel，定义属性
1 #region Properties
2
3 private List<MenuItem> m_MainMenus = new List<MenuItem>();
4 public List<MenuItem> MenuList
5 {
6 get
7 {
8 return m_MainMenus;
9 }
10 set
11 {
12 m_MainMenus = value;
13 NotifyPropertyChanged(x => x.MenuList);
14 }
15 }
16
17 #endregion
定义递归设置所有菜单的命令
1 /// <summary>
2 /// 递归设置所有菜单的命令
3 /// </summary>
4 /// <param name="Menus"></param>
5 void SetMenuCommand(List<MenuItem> Menus)
6 {
7 foreach (var item in Menus)
8 {
9 item.SelectedCommand = new DelegateCommand<string>(OpenMenu);
10 if (item.Childrens.Count > 0) SetMenuCommand(item.Childrens);
11 }
12 }
定义点击菜单Item时执行的方法，其中第一个判断是找到主窗体，再进行操作，如果菜单的Name中包含“测试”两个字符，则使用第一个添加Tab的方法，否则，用第二种。Control_Test和TestModel分别是UserControl和其ViewModel。
1 /// <summary>
2 /// 打开方法
3 /// </summary>
4 /// <param name="MenuName"></param>
5 private void OpenMenu(string MenuName)
6 {
7 foreach (System.Windows.Window win in System.Windows.Application.Current.Windows)
8 {
9 if (win.Name == "MainView_View")
10 {
11 if (MenuName.Contains("测试"))
12 {
13 (win.DataContext as MainViewModel).OpenNewItem<UserControls.Control_Test, UserControls.TestModel>(MenuName, MenuName);
14 }
15 else
16 {
17 UserControls.TestModelSec m = new UserControls.TestModelSec(MenuName);
18 (win.DataContext as MainViewModel).OpenNewItemPara<UserControls.Control_Test>(MenuName, MenuName, m);
19 }
20 break;
21 }
22 }
23 }
初始化菜单，在“主菜单”中有四个子菜单，其中“操作”的子菜单中还有子菜单
1 private void LoadMenuData()
2 {
3 MenuItem mainMenu = new MenuItem("主菜单");
4 MenuItem projectMenu = new MenuItem("项目");
5 MenuItem toolMenu = new MenuItem("工具");
6 MenuItem otherMenu = new MenuItem("其他");
7 MenuItem helpMenu = new MenuItem("帮助");
8
9 mainMenu.Childrens.Add(new MenuItem("打开"));
10 mainMenu.Childrens.Add(new MenuItem("新建"));
11
12 MenuItem operateMenu = new MenuItem("操作");
13
14
15 MenuItem saveMenu = new MenuItem("保存");
16 MenuItem deleteMenu = new MenuItem("删除");
17 MenuItem readMenu = new MenuItem("读取");
18 operateMenu.Childrens.Add(saveMenu);
19 operateMenu.Childrens.Add(deleteMenu);
20 operateMenu.Childrens.Add(readMenu);
21
22 mainMenu.Childrens.Add(operateMenu);
23
24 mainMenu.Childrens.Add(new MenuItem("测试三"));
25
26 helpMenu.Childrens.Add(new MenuItem("测试一"));
27 helpMenu.Childrens.Add(new MenuItem("测试二"));
28 helpMenu.Childrens.Add(new MenuItem("测试三"));
29
30 MenuList.Add(mainMenu);
31 MenuList.Add(projectMenu);
32 MenuList.Add(toolMenu);
33 MenuList.Add(otherMenu);
34 MenuList.Add(helpMenu);
35
36 SetMenuCommand(MenuList);
37 }
在构造中，执行初始化菜单的方法
1 public MenuControlModel()
2 {
3 LoadMenuData();
4 }
结束
Tab每项的内容必须为UserControl，UserControl无需与Model进行banding。测试的UserControl和其Model没有写，只是一个简单的例子~
时间： 2024-08-03 19:03:54