（二）绑定菜单

绑定菜单

1.准备工作

• 创建公共部分的文件夹
  • 创建视图文件夹
    • 创建菜单实体类

//系统导航菜单实体类
public class MenuBar:BindableBase
{//Prism.Mvvm: 主要包含 BindableBase 实现数据字段绑定，并有更新通知。
    private string icon;//图标
    public string Icon 
    {
        get { return icon;}
        set { icon=value; }
    }

    //输入propfull双击tab属性和字段同时生成
    private string title;//菜单名称

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

    private string nameSpace;//命名空间

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

}

• 创建vvm层，之前mainwindow中的复制到mainview中，作为主页删掉mainwindow，mainwindow.cs中的复制到mainview.cs中
  
  名字改了
  
  mainwindow.xaml添加
  

2.MVVM

• View是视图层，也就是用户界面。前端主要由HTML和CSS来构成，为了更方便地展现ViewModel或者Model层的数据。
• Model是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则。
• ViewModel由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者从后端获取得到Model数据进行转换出来，做二次封装，以生成符合View层使用预期的视图数据模型。视图状态和行为都封装在ViewModel里。这样的封装使得ViewModel可以完整地去描述View层。

3. 业务逻辑层

 public class MainViewModel : BindableBase
 {
     public MainViewModel()
     {
         MenuBars = new ObservableCollection<MenuBar>();
         CreateMenuBar();
     }
     // ObservableCollection<T> 类  表示一个动态数据集合，在添加项、移除项或刷新整个列表时，此集合将提供通知。
     private ObservableCollection<MenuBar> menuBars;
     public ObservableCollection<MenuBar> MenuBars
     {
         get { return menuBars; }
         set { menuBars = value; RaisePropertyChanged(); }//RaisePropertyChanged实现双向交互的方式
     }

     void CreateMenuBar()
     {
         menuBars.Add(new MenuBar() { Icon = "Home", Title = "首页", NameSpace = "IndexView" });
         menuBars.Add(new MenuBar() { Icon = "NotebookPlusOutline", Title = "待办", NameSpace = "ToDoView" });
         menuBars.Add(new MenuBar() { Icon = "NotebookPlus", Title = "备忘录", NameSpace = "MemoView" });
         menuBars.Add(new MenuBar() { Icon = "Cog", Title = "设置", NameSpace = "SettingdView" });
     }
 }

4. 视图层

<!--左侧菜单栏-->
<materialDesign:DrawerHost.LeftDrawerContent>
    <DockPanel MinWidth="220">
        <StackPanel DockPanel.Dock="Top" Margin="0,20">
            <!--头像-->
            <Image 
                Source="/Images/user.jpg" 
                Width="50" 
                Height="50">
                <Image.Clip>
                    <!--圆角设置-->
                    <EllipseGeometry
                        Center="25,25"
                        RadiusX="25"
                        RadiusY="25"/>
                </Image.Clip>
            </Image>
            <!--标题或用户名-->
            <TextBlock
                Margin="0,10"
                HorizontalAlignment="Center"
                Text="huihui"/>
        </StackPanel>
        <!--菜单列表-->
        <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>
    </DockPanel>
</materialDesign:DrawerHost.LeftDrawerContent>

5. 点击样式

 <Style x:Key="MyListBoxItemStyle" TargetType="ListBoxItem">
     <Setter Property="MinHeight" Value="40"/><!--最小行高-->
     <Setter Property="Template">
         <Setter.Value>
             <ControlTemplate TargetType="{x:Type ListBoxItem}">
                 <Grid>
                     <!--Border控件为其添加背景或在其周围添加边框-->
                     <Border x:Name="borderHeader"/>
                     <Border x:Name="border"/>
                     <ContentPresenter
                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                         HorizontalAlignment="{TemplateBinding HorizontalAlignment}"/>
                 </Grid>
                     <!--两个触发器-->
                 <ControlTemplate.Triggers>
                     <Trigger Property="IsSelected" Value="True">
                         <Setter Property="BorderThickness" TargetName="borderHeader" Value="4,0,0,0"/>
                         <Setter Property="BorderBrush" TargetName="borderHeader" Value="{DynamicResource PrimaryHueLightBrush}"/>
                         <Setter Property="Background" TargetName="border" Value="{DynamicResource PrimaryHueLightBrush}"/>
                         <Setter Property="Opacity" TargetName="border" Value="0.2"/>
                     </Trigger>
                     
                     <Trigger Property="IsMouseOver" Value="True">
                         <Setter Property="Background" TargetName="border" Value="{DynamicResource PrimaryHueLightBrush}"/>
                         <Setter Property="Opacity" TargetName="border" Value="0.2"/>
                     </Trigger>
                 </ControlTemplate.Triggers>
             </ControlTemplate>
         </Setter.Value>
     </Setter>
 </Style>

运行结果