WPF Menu动态绑定View_wpf mvvm绑定菜单

作者：2023面试高手 | 2024-04-26 22:30:23

踩

wpf mvvm绑定菜单

项目场景：

WPF Menu动态绑定View

例如：当我们有好几个上位机程序共用一个解决方案的时候，每个设备上的功能有些许的不同，需要开放不同的菜单栏选项。
可参考官方教程：https://learn.microsoft.com/zh-cn/dotnet/desktop/wpf/data/data-templating-overview?view=netframeworkdesktop-4.8

HierarchicalDataTemplate帮助文档：https://learn.microsoft.com/zh-cn/dotnet/api/system.windows.hierarchicaldatatemplate?view=windowsdesktop-7.0

问题描述

例如：通过数据库去动态绑定需要开放的菜单栏选项：（示例是未配置数据库，单纯模拟）
MainWindowViewModel 中设置

using Prism.Commands;
using Prism.Mvvm;
using Prism.Regions;
using System.Collections.ObjectModel;

namespace TestViews.ViewModels
{
    public class MainWindowViewModel : BindableBase
    {
        private string _title = "Prism Application";
        private readonly IRegionManager _regionManager;
        public DelegateCommand<string> NavigateCommand { get; private set; }
        public string Title
        {
            get { return _title; }
            set { SetProperty(ref _title, value); }
        }

        private ObservableCollection<Menus> _menusOne = new ObservableCollection<Menus>();
        public ObservableCollection<Menus> MenusOne
        {
            get { return _menusOne; }
            set { SetProperty(ref _menusOne, value); }
        }

        private void Navigate(string navigatePath)
        {
            if (navigatePath != null)
                _regionManager.RequestNavigate("ContentRegion", navigatePath);
        }
        public MainWindowViewModel()
        {
            MenusOne = new ObservableCollection<Menus>
            {
                new Menus
                {
                    Content = "主页",
                    //IsChecked = true,
                    //CommandParameter = "home",
                    //NavigateCommand = new DelegateCommand<string>(Navigate),
                    PageList = new ObservableCollection<NavigateItemModel>
                    {
                        new NavigateItemModel
                        {
                            Content = "数据",
                            IsChecked = true,
                            CommandParameter = "data",
                            NavigateCommand = new DelegateCommand<string>(Navigate),
                        }
                    }
                },
                new Menus
                {
                    Content = "视图",
                    //IsChecked = true,
                    //CommandParameter = "view",
                    //NavigateCommand = new DelegateCommand<string>(Navigate),
                    PageList = new ObservableCollection<NavigateItemModel>
                    {
                        new NavigateItemModel
                        {
                            Content = "日志",
                            IsChecked = true,
                            CommandParameter = "log",
                            NavigateCommand = new DelegateCommand<string>(Navigate),
                        }
                    }
                },
                new Menus
                {
                    Content = "时间",
                    //IsChecked = true,
                    //CommandParameter = "time",
                    //NavigateCommand = new DelegateCommand<string>(Navigate),
                    PageList = new ObservableCollection<NavigateItemModel>
                    {
                        new NavigateItemModel
                        {
                            Content = "运行",
                            IsChecked = true,
                            CommandParameter = "run",
                            NavigateCommand = new DelegateCommand<string>(Navigate),
                        }
                    }
                },
            };
        }
    }


}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

XAML 中配置

<Window x:Class="TestViews.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:prism="http://prismlibrary.com/"
        xmlns:local="clr-namespace:TestViews"
        prism:ViewModelLocator.AutoWireViewModel="True"
        Title="{Binding Title}" Height="350" Width="525" >
    <Window.Resources>
        <Style x:Key="menu1" TargetType="Menu">
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="FontSize" Value="30"/>
            <!--<Setter Property="FontWeight" Value="ExtraBlack"/>-->
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Menu  Grid.Row="0" Grid.Column="0"  Grid.ColumnSpan="10" ItemsSource="{Binding MenusOne}">
                <!--<Menu.Resources>
                    <Style TargetType="Menu">
                        <Setter Property="FontSize" Value="20"/>
                    </Style>
                </Menu.Resources>-->
                <Menu.ItemTemplate>
                    <HierarchicalDataTemplate ItemsSource="{Binding PageList}">
                        <TextBlock Text="{Binding Content}"/>
                    </HierarchicalDataTemplate>
                </Menu.ItemTemplate>

                <Menu.ItemContainerStyle>
                    <Style TargetType="MenuItem">
                        <Setter Property="FontSize" Value="20"></Setter>
                        <Setter Property="Command" Value="{Binding NavigateCommand}"></Setter>
                        <Setter Property="CommandParameter" Value="{Binding CommandParameter}"></Setter>
                    </Style>
                </Menu.ItemContainerStyle>
            </Menu>
        </Grid>

        <ContentControl prism:RegionManager.RegionName="ContentRegion" />
    </Grid>
</Window>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

菜单类中添加：

using Prism.Commands;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace TestViews
{
    public class Menus
    {
        /// <summary>
        /// 一级目录显示的文本
        /// </summary>
        public string Content { get; set; }

        /// <summary>
        /// 二级菜单信息
        /// </summary>
        public ObservableCollection<NavigateItemModel> PageList { get; set; }


    }

    /// <summary>
    /// 左侧二级导航项
    /// </summary>
    public class NavigateItemModel
    {
        /// <summary>
        /// 界面显示的文本
        /// </summary>
        public string Content { get; set; }

        /// <summary>
        /// 是否选中状态
        /// </summary>
        public bool IsChecked { get; set; }

        /// <summary>
        /// 导航参数（要导航到的页面的名字）
        /// </summary>
        public string CommandParameter { get; set; }


        public int Size { get; set; } = 20;

        /// <summary>
        /// 导航命令
        /// </summary>
        public DelegateCommand<string> NavigateCommand { get; set; }
    }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

解决方案：

提示：某些时候，具有的集合包含其他集合。 HierarchicalDataTemplate 类专用于 HeaderedItemsControl 类型以显示此类数据这里填写该问题的具体解决方案：

 <Menu  Grid.Row="0" Grid.Column="0"  Grid.ColumnSpan="10" ItemsSource="{Binding MenusOne}">
                <!--<Menu.Resources>
                    <Style TargetType="Menu">
                        <Setter Property="FontSize" Value="20"/>
                    </Style>
                </Menu.Resources>-->
                <Menu.ItemTemplate>
                    <HierarchicalDataTemplate ItemsSource="{Binding PageList}">
                        <TextBlock Text="{Binding Content}"/>
                    </HierarchicalDataTemplate>
                </Menu.ItemTemplate>

                <Menu.ItemContainerStyle>
                    <Style TargetType="MenuItem">
                        <Setter Property="FontSize" Value="20"></Setter>
                        <Setter Property="Command" Value="{Binding NavigateCommand}"></Setter>
                        <Setter Property="CommandParameter" Value="{Binding CommandParameter}"></Setter>
                    </Style>
                </Menu.ItemContainerStyle>
            </Menu>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

说明：导航界面未实现

private void Navigate(string navigatePath)
        {
            if (navigatePath != null)
                _regionManager.RequestNavigate("ContentRegion", navigatePath);
        }
        //可以将//if (navigatePath != null)
            //    _regionManager.RequestNavigate("ContentRegion", navigatePath); 改为System.Windows.MessageBox.Show($"准备导航至 {navigatePath} 页面");去验证
        private void Navigate(string navigatePath)
        {
            //if (navigatePath != null)
            //    _regionManager.RequestNavigate("ContentRegion", navigatePath);
            System.Windows.MessageBox.Show($"准备导航至 {navigatePath} 页面");
        }
        ```
// 总结：多看官方文档。有事找微软。


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】