WPF实战学习笔记03-绑定菜单_wpf menu 绑定

作者：我家小花儿 | 2024-04-26 22:52:18

踩

wpf menu 绑定

绑定菜单

新建文件夹、与文件

Common->Models、ViewModel、Views
Models 内新建类文件 MenuBars.cs
Views内新建XAML文件MainView.xaml

MenuBars.cs 添加代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Mytodo.Common.Models
{
    public class MenuBar
    {
		private string icon;

		/// <summary>
		/// 图标字符串
		/// </summary>
		public string Icon
		{
			get { return icon; }
			set { icon = value; }
		}

		private string title;

		public string Title
		{
			get { return title; }
			set { title = value; }
		}

		private string nameSpace;

		public string  NameSpace
		{
			get { return nameSpace; }
			set { nameSpace = value; }
		}


	}
}

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

移动MainWindow内容

MainWindow内容，移动到Mainview.xaml中，并做相应修改,并把对应的.cs文件复制过来

x:Class="Mytodo.Views.MainView"
1

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace Mytodo.Views
{
    /// <summary>
    /// MainView.xaml 的交互逻辑
    /// </summary>
    public partial class MainView : Window
    {
        public MainView()
        {
            InitializeComponent();

            btnclo.Click += (s, e) =>
            {
                this.Close();
            };

            btnmin.Click += (s, e) =>
            {
                this.WindowState = WindowState.Minimized;
            };

            btnmax.Click += (s, e) =>
            {
                this.WindowState = WindowState.Maximized;
            };

            ColorZone.MouseMove += (s, e) =>
            {
                if (e.LeftButton == MouseButtonState.Pressed)
                    this.DragMove();
            };

            ColorZone.MouseDoubleClick += (s, e) =>
            {
                if (WindowState != WindowState.Normal)
                    WindowState = WindowState.Normal;
                else
                    WindowState = WindowState.Maximized;
            };
        }
    }
}
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 Mytodo.Common.Models;
using Prism.Mvvm;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Mytodo.ViewModels
{
    public class MainViewModel:BindableBase
    {
        public MainViewModel()
        {
            MenuBars=new ObservableCollection<MenuBar>();
            CreatMenuBar();
        }


        private ObservableCollection<MenuBar> menuBars;

        public ObservableCollection<MenuBar> MenuBars
        {
            get { return menuBars; }
            set { menuBars = value; RaisePropertyChanged(); }
        }

        void CreatMenuBar()
        {
            MenuBars.Add(new MenuBar { Icon = "Home",               NameSpace = "HomeView",     Title = "首页" });
            MenuBars.Add(new MenuBar { Icon = "FormatListChecks",   NameSpace = "TodoView",     Title = "待办事项" });
            MenuBars.Add(new MenuBar { Icon = "Notebook",           NameSpace = "NoteView",     Title = "备忘录" });
            MenuBars.Add(new MenuBar { Icon = "Cog",                NameSpace = "SettingView",  Title = "设置" });
        }
    }
}

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

注意

图标可以从MaterialDesign里面拿，格式为： <materialDesign:PackIcon Kind="{Binding Icon}" />

编写XAML界面程序

<Window
    x:Class="Mytodo.Views.MainView"
    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:Mytodo"
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:prism="http://prismlibrary.com/"
    Title="MainWindow"
    Width="800"
    Height="450"
    prism:ViewModelLocator.AutoWireViewModel="True"
    Background="{DynamicResource MaterialDesignPaper}"
    FontFamily="{materialDesign:MaterialDesignFont}"
    Style="{StaticResource MaterialDesignWindow}"
    TextElement.FontSize="14"
    TextElement.FontWeight="Medium"
    TextElement.Foreground="{DynamicResource MaterialDesignBody}"
    WindowStartupLocation="CenterScreen"
    WindowStyle="None"
    mc:Ignorable="d">

    <Grid>
        <materialDesign:DialogHost
            DialogTheme="Inherit"
            Identifier="RootDialog"
            SnackbarMessageQueue="{Binding ElementName=MainSnackbar, Path=MessageQueue}">
            <materialDesign:DrawerHost IsLeftDrawerOpen="{Binding ElementName=MenuToggleButton, Path=IsChecked}">
                <materialDesign:DrawerHost.LeftDrawerContent>
                    <DockPanel MinWidth="220">
                        <StackPanel
                            Margin="0,20"
                            HorizontalAlignment="Center"
                            DockPanel.Dock="Top">
                            <Image
                                Width="50"
                                Height="50"
                                Margin="16,0,0,0"
                                HorizontalAlignment="Right"
                                Source="../Images/user.jpg">
                                <Image.Clip>
                                    <EllipseGeometry
                                        Center="25,25"
                                        RadiusX="25"
                                        RadiusY="25" />
                                </Image.Clip>
                            </Image>
                            <TextBlock
                                Margin="0,10"
                                HorizontalAlignment="Center"
                                Text="donggg" />
                        </StackPanel>
                        <ListBox
                            HorizontalContentAlignment="Stretch"
                            ItemContainerStyle="{StaticResource MyListboxItemStyle}"
                            ItemsSource="{Binding MenuBars}">
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel Orientation="Horizontal">
                                        <materialDesign:PackIcon Kind="{Binding Icon}" />
                                        <TextBlock Margin="10,0" Text="{Binding Title}" />
                                    </StackPanel>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                    </DockPanel>
                </materialDesign:DrawerHost.LeftDrawerContent>
                <materialDesign:ColorZone
                    Name="ColorZone"
                    Padding="16"
                    materialDesign:ElevationAssist.Elevation="Dp4"
                    DockPanel.Dock="Top"
                    Mode="PrimaryMid">
                    <DockPanel>
                        <StackPanel DockPanel.Dock="Left" Orientation="Horizontal">
                            <ToggleButton
                                x:Name="MenuToggleButton"
                                AutomationProperties.Name="HamburgerToggleButton"
                                IsChecked="False"
                                Style="{StaticResource MaterialDesignHamburgerToggleButton}" />

                            <Button
                                Margin="24,0,0,0"
                                materialDesign:RippleAssist.Feedback="{Binding RelativeSource={RelativeSource Self}, Path=Foreground, Converter={StaticResource BrushRoundConverter}}"
                                Command="{Binding MovePrevCommand}"
                                Content="{materialDesign:PackIcon Kind=ArrowLeft,
                                                                  Size=24}"
                                Foreground="{Binding RelativeSource={RelativeSource AncestorType={x:Type FrameworkElement}}, Path=(TextElement.Foreground)}"
                                Style="{StaticResource MaterialDesignToolButton}"
                                ToolTip="Previous Item" />

                            <Button
                                Margin="16,0,0,0"
                                materialDesign:RippleAssist.Feedback="{Binding RelativeSource={RelativeSource Self}, Path=Foreground, Converter={StaticResource BrushRoundConverter}}"
                                Command="{Binding MoveNextCommand}"
                                Content="{materialDesign:PackIcon Kind=ArrowRight,
                                                                  Size=24}"
                                Foreground="{Binding RelativeSource={RelativeSource AncestorType={x:Type FrameworkElement}}, Path=(TextElement.Foreground)}"
                                Style="{StaticResource MaterialDesignToolButton}"
                                ToolTip="Next Item" />
                            <TextBlock
                                Margin="16,0,0,0"
                                HorizontalAlignment="Left"
                                VerticalAlignment="Center"
                                AutomationProperties.Name="Material Design In XAML Toolkit"
                                FontSize="22"
                                Text="笔记本" />
                        </StackPanel>
                        <StackPanel
                            HorizontalAlignment="Right"
                            DockPanel.Dock="Right"
                            Orientation="Horizontal">
                            <Image
                                Width="30"
                                Margin="16,0,0,0"
                                HorizontalAlignment="Right"
                                Source="../Images/user.jpg">
                                <Image.Clip>
                                    <EllipseGeometry
                                        Center="12.5,12.5"
                                        RadiusX="12.5"
                                        RadiusY="12.5" />
                                </Image.Clip>
                            </Image>
                            <Button
                                x:Name="btnmin"
                                Content="{materialDesign:PackIcon Kind=Minimize}"
                                Style="{StaticResource MaterialDesignFlatAccentButton}" />
                            <Button
                                x:Name="btnmax"
                                Content="{materialDesign:PackIcon Kind=Maximize}"
                                Style="{StaticResource MaterialDesignFlatAccentButton}" />
                            <Button
                                x:Name="btnclo"
                                Content="{materialDesign:PackIcon Kind=Close}"
                                Style="{StaticResource MaterialDesignFlatAccentButton}" />
                        </StackPanel>
                    </DockPanel>
                </materialDesign:ColorZone>
            </materialDesign:DrawerHost>
        </materialDesign:DialogHost>
    </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
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144

本次中添加

<materialDesign:DrawerHost.LeftDrawerContent>
    <DockPanel MinWidth="220">
        <StackPanel
            Margin="0,20"
            HorizontalAlignment="Center"
            DockPanel.Dock="Top">
            <Image
                Width="50"
                Height="50"
                Margin="16,0,0,0"
                HorizontalAlignment="Right"
                Source="../Images/user.jpg">
                <Image.Clip>
                    <EllipseGeometry
                        Center="25,25"
                        RadiusX="25"
                        RadiusY="25" />
                </Image.Clip>
            </Image>
            <TextBlock
                Margin="0,10"
                HorizontalAlignment="Center"
                Text="donggg" />
        </StackPanel>
        <ListBox
            HorizontalContentAlignment="Stretch"
            ItemContainerStyle="{StaticResource MyListboxItemStyle}"
            ItemsSource="{Binding MenuBars}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <materialDesign:PackIcon Kind="{Binding Icon}" />
                        <TextBlock Margin="10,0" Text="{Binding Title}" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </DockPanel>
</materialDesign:DrawerHost.LeftDrawerContent>
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

修改启动窗口

在App.xaml.cs中修改如下：

protected override Window CreateShell ()
{
    return Container.Resolve<MainView> ();
}
1
2
3
4

更改主题样式

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <materialDesign:BundledTheme
                    BaseTheme="Dark"
                    PrimaryColor="DeepPurple"
                    SecondaryColor="Lime" />
1
2
3
4
5
6
7

其中，BaseTheme=“Dark”

添加ListboxItem的样式

<Style x:Key="MyListboxItemStyle" TargetType="ListBoxItem">
    <Setter Property="MinHeight" Value="40" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                <Grid>
                    <Border x:Name="borderHeader" />
                    <Border x:Name="border" />
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter TargetName="borderHeader" Property="BorderThickness" Value="4,0,0,0" />
                        <Setter TargetName="borderHeader" Property="BorderBrush" Value="{DynamicResource PrimaryHueLightBrush}" />
                        <Setter TargetName="border" Property="Background" Value="{DynamicResource PrimaryHueLightBrush}" />
                        <Setter TargetName="border" Property="Opacity" Value="0.2" />
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="border" Property="Background" Value="{DynamicResource PrimaryHueLightBrush}" />
                        <Setter TargetName="border" Property="Opacity" Value="0.2" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/493514