WPF使用TreeView和TabControl控件jian实现菜单的选择和切换

一、页面添加TreeView和TabControl控件

1.在MainWindow.xaml页面上添加TreeView控件，设置ItemsSource属性为ViewModel中的TreeList属性，添加<TreeView.ItemTemplate>,在该节点下添加<HierarchicalDataTemplate>,绑定ViewModel中的Tree List下子项中的Children属性，菜单名称绑定Header属性

<TreeView Background="Transparent" BorderThickness="0" ItemsSource="{Binding TreeList}">
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding Children}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="30" Name="c1"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding IconCode}"  
                          FontFamily="{StaticResource Iconfont}"
                          VerticalAlignment="Center" 
                          HorizontalAlignment="Center"
                          FontSize="18" 
                          SnapsToDevicePixels="True"/>

                <TextBlock Text="{Binding Header}" Grid.Column="1" Margin="5,0,0,0" FontSize="13"/>
            </Grid>
            <HierarchicalDataTemplate.Triggers>
                <DataTrigger Binding="{Binding IconCode}" Value="{x:Null}">
                    <Setter TargetName="c1" Property="Width" Value="13"/>
                </DataTrigger>
            </HierarchicalDataTemplate.Triggers>
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

在<Window.Resources>资源文件中设置style样式，TargetType为TreeViewItem，并设置样式背景等属性

　　设置Template属性ControlTemplate，TargetType为TreeViewItem，

        <Style TargetType="TreeViewItem">
            <Setter Property="IsExpanded" Value="{Binding IsExpanded,Mode=TwoWay}"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="8,5"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize" Value="12"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TreeViewItem">
                        <Grid Background="Transparent" Name="root">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition MaxWidth="30"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" MinHeight="36"/>
                                <RowDefinition  />
                            </Grid.RowDefinitions>
                            <!--响应当前节点的鼠标双击动作，并且关联到VM中的命令-->
                            <Grid.InputBindings>
                                <MouseBinding MouseAction="LeftClick"
                                             Command="{Binding OpenViewCommand}"
                                             CommandParameter="{Binding}"/>
                            </Grid.InputBindings>

                            <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}"
                                               BorderThickness="{TemplateBinding BorderThickness}"
                                               Background="{TemplateBinding Background}"
                                               CornerRadius="0" Grid.ColumnSpan="2" 
                                   Padding="{TemplateBinding Padding}"
                                               SnapsToDevicePixels="true"
                                   TextBlock.Foreground="{TemplateBinding Foreground}">
                                <ContentPresenter x:Name="PART_Header" 
                                                 ContentSource="Header"
                                                 HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                 VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                 SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
                                </ContentPresenter>
                            </Border>

                            <ToggleButton x:Name="Expander" Grid.Column="1" ClickMode="Press" Foreground="{Binding ElementName=Bd,Path=(TextBlock.Foreground)}"
                                         IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
                                         Template="{StaticResource ArrowButtonTemplate}"/>
                            <!--当前子项的  Children集合-->
                            <ItemsPresenter x:Name="ItemsHost" Margin="18,0,0,0" Grid.ColumnSpan="2" Grid.Row="1" />
                        </Grid>

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsExpanded" Value="false">
                                <Setter Property="Visibility" TargetName="ItemsHost" Value="Collapsed"/>
                            </Trigger>
                            <DataTrigger Binding="{Binding Children.Count}" Value="0">
                                <Setter Property="Visibility" TargetName="Expander" Value="Hidden"/>
                            </DataTrigger>
                            <Trigger Property="IsSelected" Value="true">
                                <Setter Property="Background" TargetName="Bd" Value="#F7F9FA"/>
                                <Setter Property="Foreground" Value="#0b3d90"/>
                                <Setter Property="Foreground" Value="#0b3d90" TargetName="Expander"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

2.增加TabControl控件，设置相关属性；在TabControl控件下增加子节点<TabControl.ItemContainerStyle>，<TabControl.ItemTemplate >文本标题，<TabControl.ContentTemplate>页面内容

<TabControl x:Name="TabControlItem" 
            Grid.Row="1" 
            ItemsSource="{Binding Pages}" 
            SelectionChanged="TabControlItem_SelectionChanged"
            Background="Transparent" 
            BorderThickness="0,1,0,0" 
            BorderBrush="White">
    <TabControl.ItemContainerStyle>
        <Style TargetType="TabItem">
            <Setter Property="IsSelected" Value="{Binding IsSelected}"/>
            <Setter Property="Background" Value="#336590C1"/>
            <Setter Property="Margin" Value="2,0"/>
            <Setter Property="Foreground" Value="#777"/>
            <Setter Property="Template">
                <Setter.Value>
                    <!--控件模板-->
                    <ControlTemplate TargetType="TabItem">
                        <Grid Background="{TemplateBinding Background}" Height="30">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition Width="auto" MinWidth="10"/>
                            </Grid.ColumnDefinitions>
                            <ContentPresenter ContentSource="Header" VerticalAlignment="Center" Margin="10,5,5,5"/>
                            <Grid Grid.Column="1" Width="30" Margin="0,0,3,0">
                                <Button Grid.Column="1" 
                                        Style="{StaticResource TabCloseButtonStyle}" 
                                        Foreground="{TemplateBinding Foreground}" 
                                        Margin="3,0"
                                        Command="{Binding CloseTabCommand}"
                                        CommandParameter="{Binding}"/>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="#EEE"/>
                </Trigger>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Background" Value="#FF6590C1"/>
                    <Setter Property="Foreground" Value="#FFDEFBFF"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </TabControl.ItemContainerStyle>
    <!--Header部分-->
    <TabControl.ItemTemplate >
        <!--数据模板-->
        <DataTemplate>
            <TextBlock  Text="{Binding Header}"/>
        </DataTemplate>
    </TabControl.ItemTemplate>
    <!--内容部分-->
    <TabControl.ContentTemplate>
        <!--数据模板-->
        <DataTemplate>
            <ContentControl Content="{Binding PageView}"/>
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

 

二、封装ViewModel中属性双向绑定通知，命令事件，页面方法注入管理等基类

1、页面方法注入管理类ActionManager，View中的行为方法存放进来，由窗口对象调用 ，注册一个方法，这个方法中有打开弹窗的逻辑

    /// <summary>
    /// 页面方法注入管理类
    /// </summary>
    public class ActionManager
    {
        // 委托
        static Dictionary<string, Delegate> actionMap = new Dictionary<string, Delegate>();

        // 希望能将View中的行为方法存放进来   注册
        // 由窗口对象调用 ，注册一个方法，这个方法中有打开弹窗的逻辑
        // 优化：由不同实例进行注册的时候  进行区分
        // 这个方法可以让我们接受两种类型的委托对象  Action  Func
        public static void Register(string key, Delegate action)
        {
            if (!actionMap.ContainsKey(key))
                actionMap.Add(key, action);
        }

        // VM中需要进行调用
        public static void Execute(string key, object data)
        {
            if (actionMap.ContainsKey(key))
                actionMap[key].DynamicInvoke(data);
        }

        public static bool ExecuteAndResult(string key, object data)
        {
            if (actionMap.ContainsKey(key))
            {
                var action = (actionMap[key] as Func<object, bool>);
                if (action == null)
                    return false;

                return action.Invoke(data);
            }
            return false;
        }

        public static void Unregister(string key)
        {

        }
    }

2.通知基础类NotifyBase，继承自接口INotifyPropertyChanged（using System.ComponentModel）

    /// <summary>
    /// 通知基础类
    /// </summary>
    public class NotifyBase : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler? PropertyChanged;

        public void SetProperty<T>(ref T field, T value, [CallerMemberName] string propName = "")
        {
            if (field == null || !field.Equals(value))
            {
                field = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName));
            }
        }
    }

3.命令方法基础类Command<T> ，继承自接口ICommand（using System.Windows.Input），封装委托方法的执行

    /// <summary>
    /// 命令方法基础类
    /// </summary>
    /// <typeparam name="T"></typeparam>
    public class Command<T> : ICommand
    {
        public event EventHandler? CanExecuteChanged;

        public bool CanExecute(object? parameter)
        {
            if (DoCanExecute == null) return true;
            return DoCanExecute(parameter);
        }


        public void Execute(object? parameter)
        {
            DoExecuteNoneParam?.Invoke();

            dynamic p = parameter;
            DoExecuteWithParam?.Invoke(p);
        }

        public void RasieCanExecuteChanged()
        {
            CanExecuteChanged?.Invoke(this, new EventArgs());
        }


        public Action DoExecuteNoneParam { get; set; }
        public Action<T> DoExecuteWithParam { get; set; }


        public Func<object, bool> DoCanExecute { get; set; }

        /// <summary>
        /// 
        /// </summary>
        /// <param name="doExecute"></param>
        public Command(Action doExecute)
        {
            DoExecuteNoneParam = doExecute;
        }

        /// <summary>
        /// 
        /// </summary>
        /// <param name="doExecute"></param>
        public Command(Action<T> doExecute)
        {
            DoExecuteWithParam = doExecute;
        }

        //public Command(Action<int?> executePageUpdatedCommand)
        //{
        //   // DoExecuteNoneParam = executePageUpdatedCommand;
        //}
    }

 

三、ViewModel方法的编写和绑定，实现页面中绑定的命令方法，和属性，list数据获取

1.菜单类MenuItemModel

    /// <summary>
    /// 菜单
    /// </summary>
    public class MenuItemModel
    {
        public int Id { get; set; }
        public int Parent { get; set; }
        public string? IconCode { get; set; }
        public string? Header { get; set; }
        public string? TargetView { get; set; }

        public ICommand? OpenViewCommand { get; set; }

        public List<MenuItemModel> Children { get; set; } = new List<MenuItemModel>();

    }

2.页面类PageItemModel，继承基类NotifyBase，实现属性的双向绑定，更新保存等

    public class PageItemModel : NotifyBase
    {
        private bool _isSelected;
        public bool IsSelected
        {
            get { return _isSelected; }
            set { SetProperty(ref _isSelected, value); }
        }
        public string Header { get; set; }
        public object PageView { get; set; }

        public ICommand CloseTabCommand { get; set; }

        public int Parent { get; set; }
    }

3.MainViewModel，继承基类NotifyBase，实现属性的双向绑定，更新保存等

　　封装打开菜单的方法，通过反射找到菜单对应的页面，页面为dll.文件夹.页面名称的格式

　　

        /// <summary>
        /// 打开选择菜单项
        /// </summary>
        /// <param name="menu"></param>
        private void OpenView(MenuItemModel menu)
        {
            var page = Pages.ToList().FirstOrDefault(p => p.Header == menu.Header);

            if (page == null)
            {
                Type type = Assembly.GetExecutingAssembly().GetType(menu.TargetView);
                object p = Activator.CreateInstance(type);

                Pages.Add(new PageItemModel
                {
                    Parent = menu.Parent,
                    Header = menu.Header,
                    PageView = p,
                    IsSelected = true,
                    CloseTabCommand = new Command<PageItemModel>(ClosePage)
                });

                this.MenuSecondHeader = menu.Header;
            }
            else
                page.IsSelected = true;
        }

　　

　　页面 集合
　　　　public ObservableCollection<PageItemModel> Pages { get; set; } = new ObservableCollection<PageItemModel>();

完整代码

public class MainViewModel : NotifyBase
{
    // 菜单 集合
    public List<MenuItemModel> TreeList { get; set; }
    // 页面 集合
    public ObservableCollection<PageItemModel> Pages { get; set; }
        = new ObservableCollection<PageItemModel>();

    //内容标题一级菜单
   // public ObservableCollection<string> MenuFirstHeader { get; set; }

    //内容标题二级菜单
    private string _menuSecondHeader;
    public string MenuSecondHeader
    {
        get { return _menuSecondHeader; }
        set
        {
            _menuSecondHeader = value;
            SetProperty<string>(ref _menuSecondHeader, value);
        }
    }

    public MainViewModel()
    {
        //菜单初始化
        InitMenu();
    }

    /// <summary>
    /// 菜单初始化
    /// </summary>
    private void InitMenu()
    {
        #region 菜单初始化
        TreeList = new List<MenuItemModel>();
        {
            MenuItemModel tim = new MenuItemModel();
            tim.Parent = 0;
            tim.Id = 1;
            tim.Header = "工艺设计";
            //&#xe740;  XAML里使用
            tim.IconCode = "\ue610"; // 字体图标编码，阿里的Iconfont平台打包的图标库
            TreeList.Add(tim);
            MenuItemModel tim1 = new MenuItemModel();
            tim1.Header = "系统设置";
            //&#xe740;  XAML里使用
            tim1.IconCode = "\ue626"; // 字体图标编码，阿里的Iconfont平台打包的图标库
            tim1.Parent = 0;
            tim1.Id = 2;
            TreeList.Add(tim1);
            tim1.Children.Add(new MenuItemModel
            {
                Parent=2,
                Header = "用户管理",
                TargetView = "MESWPFUI.Views.Pages.SystemSet.UserManage",
                OpenViewCommand = new Command<MenuItemModel>(OpenView)
            });
            tim.Children.Add(new MenuItemModel
            {
                Parent = 1,
                Header = "加工工艺",
                TargetView = "MESWPFUI.Views.Pages.BlankPage",
                OpenViewCommand = new Command<MenuItemModel>(OpenView)
            });
            tim.Children.Add(new MenuItemModel
            {
                Parent = 1,
                Header = "EBOM",
                TargetView = "BlankPage",
                OpenViewCommand = new Command<MenuItemModel>(OpenView)
            });
            tim.Children.Add(new MenuItemModel
            {
                Parent = 1,
                IconCode = "\ue661",
                Header = "设备看板",
                TargetView = "MESWPFUI.Views.Pages.ProcessDesign.DevicePage",
                OpenViewCommand = new Command<MenuItemModel>(OpenView)
            });

            tim.Children.Add(new MenuItemModel
            {
                Parent = 1,
                Header = "PBOM",
                TargetView = "PBomPage",
                OpenViewCommand = new Command<MenuItemModel>(OpenView)
            });
            MenuItemModel subMenu = new MenuItemModel();
            subMenu.Parent = 1;
            subMenu.Id = 3;
            subMenu.Header = "二级菜单";
            subMenu.Children.Add(
                new MenuItemModel
                {
                    Parent = 3,
                    Header = "三级菜单",
                    TargetView = "MESWPFUI.Views.Pages.ProcessDesign.DevicePage",
                    OpenViewCommand = new Command<MenuItemModel>(OpenView)
                }
               );
            tim.Children.Add(subMenu);
        }
        #endregion
    }

    /// <summary>
    /// 打开选择菜单项
    /// </summary>
    /// <param name="menu"></param>
    private void OpenView(MenuItemModel menu)
    {
        var page = Pages.ToList().FirstOrDefault(p => p.Header == menu.Header);

        if (page == null)
        {
            Type type = Assembly.GetExecutingAssembly().GetType(menu.TargetView);
            object p = Activator.CreateInstance(type);

            Pages.Add(new PageItemModel
            {
                Parent = menu.Parent,
                Header = menu.Header,
                PageView = p,
                IsSelected = true,
                CloseTabCommand = new Command<PageItemModel>(ClosePage)
            });

            this.MenuSecondHeader = menu.Header;
        }
        else
            page.IsSelected = true;
    }

    /// <summary>
    /// 关闭菜单选项卡
    /// </summary>
    /// <param name="menu"></param>
    private void ClosePage(PageItemModel menu)
    {
        Pages.Remove(menu);
    }
}