WPF实战项目三：首页左侧菜单绑定

痕迹灬

已于 2024-03-29 13:44:28 修改

阅读量1.2k

点赞数 2

分类专栏： WPF 文章标签： wpf

于 2023-07-11 16:08:30 首次发布

本文链接：https://blog.csdn.net/yigu4011/article/details/131656528

版权

WPF 专栏收录该内容

25 篇文章 6 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了一个WPF实战项目，涉及在MainView.xaml中创建用户控件UserControl作为菜单，将菜单项绑定到MenuBar.cs模型，并在App.xaml中设置黑色主题及ListBox样式，实现左侧菜单栏的展示。

摘要由CSDN通过智能技术生成

新增文件夹Common-Models，新建菜单类名：MenuBar.cs

    /// <summary>
    /// 系统导航菜单实体类
    /// </summary>
    public class MenuBar : BindableBase//支持动态变更
    {
		private string icon;
		/// <summary>
		/// 菜单图标
		/// </summary>
		public string Icon
		{
			get { return icon; }
			set { icon = value; }
		}
		private string title;
		/// <summary>
		/// 菜单名称
		/// </summary>
		public string Title
		{
			get { return title; }
			set { title = value; }
		}
		private string nameSpace;
		/// <summary>
		/// 菜单命名空间
		/// </summary>
		public string NameSpace
		{
			get { return nameSpace; }
			set { nameSpace = value; }
		}

	}

新建Views，ViewModels文件夹，将原来的MainWindows.xaml改成MainView.xaml，移到ViewModels文件夹，在ViewModels文件夹中新建MainViewModel.cs文件：

public class MainViewModel : BindableBase
    {
        public MainViewModel() 
        {
            menuBars = new ObservableCollection<MenuBar>();//新建菜单集合对象
            CreateMenuBar();//初始化菜单
        }

        private ObservableCollection<MenuBar>  menuBars;
        /// <summary>
        /// 菜单集合
        /// </summary>
        public ObservableCollection<MenuBar> MenuBars
        {
            get { return menuBars; }
            set { menuBars = value; RaisePropertyChanged();}
        }

        private void CreateMenuBar()
        {
            MenuBars.Add(new MenuBar { Icon = "Home", Title = "首页", NameSpace = "IndexView" });
            MenuBars.Add(new MenuBar { Icon = "NotebookOutline", Title = "代办事项", NameSpace = "ToDoView" });
            MenuBars.Add(new MenuBar { Icon = "NotebookPlus", Title = "备忘录", NameSpace = "MemoView" });
            MenuBars.Add(new MenuBar { Icon = "Cog", Title = "设置", NameSpace = "SettingsView" });
        }
    }

在项目文件夹Views中添加用户空间，这里注意一定要是 UserControl，就是在设计页面的xaml根部不要是Window属性，要得是UserControl，如果是Window设计就不能嵌套。新建界面如下：

在主界面MainView.xaml中添加prism的命名空间，添加上下文，一般情况下是默认为true也可不添加：

xmlns:prism="http://prismlibrary.com/"
    prism:ViewModelLocator.AutoWireViewModel="True"

MainView.xaml中的菜单（<DockPanel MinWidth="220" />）

<DockPanel MinWidth="220">
                    <StackPanel
                        Margin="0,20"
                        DockPanel.Dock="Top"
                        Orientation="Vertical">
                        <Image
                            Width="50"
                            Height="50"
                            Source="../Images/user.jpg">
                            <Image.Clip>
                                <!--  裁剪图片  -->
                                <EllipseGeometry
                                    Center="25,25"
                                    RadiusX="25"
                                    RadiusY="25" />
                            </Image.Clip>
                        </Image>
                        <TextBlock
                            Margin="0,10"
                            HorizontalAlignment="Center"
                            Text="春风十里不及你" />
                    </StackPanel>
                    <ListBox ItemsSource="{Binding MenuBars}">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Background="Transparent" Orientation="Horizontal">
                                    <materialDesign:PackIcon Margin="15,0" Kind="{Binding Icon}" />
                                    <TextBlock Margin="10,0" Text="{Binding Title}" />
                                </StackPanel>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </DockPanel>

修改主题为黑色

<Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <materialDesign:BundledTheme
                    BaseTheme="Dark"
                    PrimaryColor="DeepPurple"
                    SecondaryColor="Lime" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

对左边的菜单栏添加样式，App.xaml中添加Style：

<Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <materialDesign:BundledTheme
                    BaseTheme="Dark"
                    PrimaryColor="DeepPurple"
                    SecondaryColor="Lime" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <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="ItemsControl.Background" Value="{DynamicResource PrimaryHueLightBrush}" />
                                    <Setter TargetName="border" Property="Opacity" Value="0.2" />
                                </Trigger>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter TargetName="border" Property="ItemsControl.Background" Value="{DynamicResource PrimaryHueLightBrush}" />
                                    <Setter TargetName="border" Property="Opacity" Value="0.2" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ResourceDictionary>
    </Application.Resources>

ListBox添加样式：

<ListBox ItemContainerStyle="{StaticResource MyListBoxItemStyle}" ItemsSource="{Binding MenuBars}">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Background="Transparent" Orientation="Horizontal">
                                    <materialDesign:PackIcon Margin="15,0" Kind="{Binding Icon}" />
                                    <TextBlock Margin="10,0" Text="{Binding Title}" />
                                </StackPanel>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>

运行项目，显示左侧菜单栏：