前言：之前是單容器顯示頁面，改成TabControl,實現選項卡頁面顯示。

第一步：選項卡有Header，ViewModel實體類新建Title屬性，與之繫結。

publicclassLoginViewModel:BindableBase
{
publicstringTitle{get;set;}="Login";
}

classIntroduceViewModel:BindableBase
{
publicstringTitle{get;set;}="Introduce";
}

第二步，MainView介面ContentControl改成TabControl，(雖然我們用起來很簡單，其實prism幫我們做了很多工作，底層實現了RegionAdapterBase，常用的ContentControl，StackPanel，TabControl都實現了，拿來用就可以了，沒有實現的就得自己實現，比如AvalonDock,還有本章用到的dragablz), 另外再將Title繫結到Header上。

<StyleTargetType="TabItem">
<SetterProperty="Header"Value="{BindingDataContext.Title}"/>
</Style>

<TabControlGrid.Row="1"prism:RegionManager.RegionName="MainContentRegion"/>

進行看效果：

第三步，選項卡上新增關閉按鈕，需要重新TabControl的ItemTemplate。

<DataTemplatex:Key="TabItemTemplate">
<DockPanelDataContext="{BindingPath=DataContext,RelativeSource={RelativeSourceMode=FindAncestor,AncestorType={x:TypeTabItem}}}">
<GridDockPanel.Dock="Right"Margin="6,0,2,0">
<ButtonCommand="{BindingDataContext.CloseCommand}"Cursor="Hand"FontWeight="Bold"Width="24"Height="24"HorizontalAlignment="Center"VerticalAlignment="Center">
<Button.Content>
<TextBlockText="X"Foreground="{DynamicResourceAccentColorBrush}"VerticalAlignment="Center"/>
</Button.Content>
</Button>
</Grid>
<ContentPresenterContent="{BindingDataContext.Title}"VerticalAlignment="Center"/>
</DockPanel>
</DataTemplate>

<TabControlGrid.Row="1"ItemTemplate="{StaticResourceTabItemTemplate}"prism:RegionManager.RegionName="MainContentRegion"/>
 

注：CloseCommand沒實現，有興趣的可以自己去實現。 繼續執行看效果：

第四步：TabControl美化，可以藉助一下先進的生產力，咱就不自己寫了，安裝dragablz。

安裝完成後，在App.xaml上引入dragablz的metro樣式（所以本框架選擇metro主流框架，因為很多控制元件都會對其進行適配）。

<prism:PrismApplicationx:Class="AIStudio.Wpf.Client.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:prism="http://prismlibrary.com/">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionarySource="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml"/>
<ResourceDictionarySource="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml"/>
<ResourceDictionarySource="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Blue.xaml"/>

<!--DragablzMahAppsDesign-->
<ResourceDictionarySource="pack://application:,,,/Dragablz;component/Themes/MahApps.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</prism:PrismApplication>
 

第五步：將MainView上的TabControl控制元件改成TabablzControl

<dragablz:TabablzControlGrid.Row="1"prism:RegionManager.RegionName="MainContentRegion"
ShowDefaultCloseButton="True"
ClosingItemCallback="{BindingClosingTabItemHandler}"
Style="{StaticResourceMahAppsTabablzControlStyle}">
<dragablz:TabablzControl.HeaderItemTemplate>
<DataTemplate>
<StackPanelOrientation="Horizontal">
<TextBlockText="{BindingDataContext.Title}"/>
</StackPanel>
</DataTemplate>
</dragablz:TabablzControl.HeaderItemTemplate>
<dragablz:TabablzControl.ContentTemplate>
<DataTemplateDataType="{x:Typepreview:TabablzProxy}">
<ContentPresenterMargin="4"Content="{BindingView}"/>
</DataTemplate>
</dragablz:TabablzControl.ContentTemplate>
</dragablz:TabablzControl>

第六步：新增已經實現好了TabablzControlRegionAdapter的工程AIStudio.Wpf.PrismDragablzExtensions，並在App.xaml.cs中引入。（可以先學怎麼用，後期可以自己去看程式碼怎麼實現的。）

protectedoverridevoidConfigureRegionAdapterMappings(RegionAdapterMappingsregionAdapterMappings)
{
base.ConfigureRegionAdapterMappings(regionAdapterMappings);
regionAdapterMappings.RegisterMapping(typeof(TabablzControl),Container.Resolve<TabablzControlRegionAdapter>());
}

好了，執行看效果：

後續：下一章將實現，國際化還是Api介面呢，考慮一下。

原始碼地址：https://gitee.com/akwkevin/aistudio.-wpf.-client.-stepby-step

另外推薦一下我的Wpf客戶端框架：https://gitee.com/akwkevin/aistudio.-wpf.-aclient