WPF-菜单和Tab控件

　　因为菜单和Tab控件一起用，所以就拿出来一块写

Tab控件

　　定义一个名为ViewItem类，定义Tab的属性

 1 /// <summary>
 2     /// tab  item
 3     /// </summary> 
 4     public class ViewItem
 5     {
 6         /// <summary>
 7         /// 标题
 8         /// </summary>
 9         public string Header
10         {
11             get;
12             set;
13         }
14 
15         /// <summary>
16         /// 主键名称
17         /// </summary>
18         public string KeyName
19         {
20             get;
21             set;
22         }
23 
24         /// <summary>
25         /// the show Control
26         /// </summary>
27         public object ViewControl
28         {
29             get;
30             set;
31         }
32     }

　　TabControl用的是Dev的控件，所以先要引用三个Dev的DLL，分别是DevExpress.Xpf.Core，DevExpress,Xpf.Docking，DevExpress.Xpf.Layout.Core。

　　新建一个UserControl，命名为MenuControl，在主窗体的Window中需要添加一下引用

1         xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking"2         xmlns:c="clr-namespace:RemindWin"
3         xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
4         Name="MainView_View"

　　其中，c引用的是MenuControl所在的文件夹，因为要用到MenuControl，所以需要引用MenuControl所在的文件夹。并为窗体命名为“MainView_View”（后面用到）。

　　定义一个DockPanel，在其的顶端设置菜单栏，内容放TabControl，也可以在下面放FootBar，这里省略，主窗体代码如下：

 1 <Grid x:Name="MainView">
 2         <DockPanel LastChildFill="True">
 4             <c:MenuControl DockPanel.Dock="Top" HorizontalAlignment="Left"/>
 5             <dxd:DockLayoutManager x:Name="dockManager" UseLayoutRounding="True" AllowCustomization="False">
 6                 <dxd:LayoutGroup Orientation="Vertical" >
 7                     <dxd:DocumentGroup Name="documentContainer" 
 8                                    SelectedTabIndex="{Binding SelectedTabIndex,Mode=TwoWay}"
 9                                    ItemsSource="{Binding ItemList}"
10                                    DestroyOnClosingChildren="False" 
11                                    Background="Azure"
12                                    ClosePageButtonShowMode="InActiveTabPageAndTabControlHeader">
13                         <dxd:DocumentGroup.ItemStyle>
14                             <Style TargetType="dxd:DocumentPanel">
15                                 <Setter Property="CloseCommand" Value="{Binding DataContext.CloseCommand,ElementName=MainView}" />
16                                 <Setter Property="Caption" Value="{Binding Header}"></Setter>
17                                 <Setter Property="AllowFloat" Value="False"></Setter>
18                                 <Setter Property="AllowMaximize" Value="False"></Setter>
19                             </Style>
20                         </dxd:DocumentGroup.ItemStyle>
21                         <dxd:DocumentGroup.ItemContentTemplate>
22                             <DataTemplate>
23                                 <ContentControl Content="{Binding ViewControl}"></ContentControl>
24                             </DataTemplate>
25                         </dxd:DocumentGroup.ItemContentTemplate>
26                     </dxd:DocumentGroup>
27                 </dxd:LayoutGroup>
28             </dxd:DockLayoutManager>
29         </DockPanel>
30     </Grid>

　　binding了Model中的ItemList，这是Tab集合，SelectedTabIndex是所选Tab的索引，为Int型，每个Tab有一个Close事件，Binding后台代码中的CloseCommand事件，属性Caption，banding了ViewItem中的Header，每个Tab的内容ContentControl绑定了ViewItem中的ViewControl，其中需要注意Grid的Name与<Setter>里面的元素一致。

　　添加主窗体的ViewModel，命名MainViewModel，定义ItemList和SelectedTabIndex（引用了SimpleMvvmToolkit）

 1         #region Properties
 2 
 3         //
 4         private ObservableCollection<ViewItem> _itemList = new ObservableCollection<ViewItem>();
 5         /// <summary>
 6         /// Tab页集合
 7         /// </summary>
 8         public ObservableCollection<ViewItem> ItemList
 9         {
10             get
11             {
12                 return _itemList;
13             }
14             set
15             {
16                 _itemList = value;
17             }
18         }
19 
20         //所选tab索引
21         private int _selectedTabIndex = 0;
22         /// <summary>
23         /// 所选tab索引
24         /// </summary>
25         public int SelectedTabIndex
26         {
27             get
28             {
29                 return _selectedTabIndex;
30             }
31             set
32             {
33                 _selectedTabIndex = value;
34                 NotifyPropertyChanged(x => x.SelectedTabIndex);
35             }
36         }
37 
38         #endregion

View Code