前言：之前是單容器顯示頁面，改成TabControl,實現選項卡頁面顯示。
第一步：選項卡有Header，ViewModel實體類新建Title屬性，與之綁定。
public class LoginViewModel : BindableBase
{
public string Title { get; set; } = "Login";
}
class IntroduceViewModel : BindableBase
{
public string Title { get; set; } = "Introduce";
}
第二步，MainView界面ContentControl改成TabControl，(雖然我們用起來很簡單，其實prism幫我們做了很多工作，底層實現了RegionAdapterBase，常用的ContentControl，StackPanel，TabControl都實現了，拿來用就可以了，沒有實現的就得自己實現，比如AvalonDock,還有本章用到的dragablz), 另外再將Title綁定到Header上。
<Style TargetType="TabItem">
<Setter Property="Header" Value="{Binding DataContext.Title}" />
</Style>
<TabControl Grid.Row="1" prism:RegionManager.RegionName="MainContentRegion"/>
進行看效果： 
第三步，選項卡上添加關閉按鈕，需要重新TabControl的ItemTemplate。
<DataTemplate x:Key="TabItemTemplate">
<DockPanel DataContext="{Binding Path=DataContext, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type TabItem}}}">
<Grid DockPanel.Dock="Right" Margin="6,0,2,0">
<Button Command="{Binding DataContext.CloseCommand}" Cursor="Hand" FontWeight="Bold" Width="24" Height="24" HorizontalAlignment="Center" VerticalAlignment="Center" >
<Button.Content>
<TextBlock Text="X" Foreground="{DynamicResource AccentColorBrush}" VerticalAlignment="Center"/>
</Button.Content>
</Button>
</Grid>
<ContentPresenter Content="{Binding DataContext.Title}" VerticalAlignment="Center" />
</DockPanel>
</DataTemplate>
<TabControl Grid.Row="1" ItemTemplate="{StaticResource TabItemTemplate}" prism:RegionManager.RegionName="MainContentRegion"/>
注：CloseCommand沒實現，有興趣的可以自己去實現。 繼續運行看效果： 
第四步：TabControl美化，可以借助一下先進的生產力，咱就不自己寫了，安裝dragablz。
安裝完成后，在App.xaml上引入dragablz的metro樣式（所以本框架選擇metro主流框架，因為很多控件都會對其進行適配）。
<prism:PrismApplication x: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>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Blue.xaml" />
<!-- Dragablz MahApps Design -->
<ResourceDictionary Source="pack://application:,,,/Dragablz;component/Themes/MahApps.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</prism:PrismApplication>
第五步：將MainView上的TabControl控件改成TabablzControl
<dragablz:TabablzControl Grid.Row="1" prism:RegionManager.RegionName="MainContentRegion"
ShowDefaultCloseButton="True"
ClosingItemCallback="{Binding ClosingTabItemHandler}"
Style="{StaticResource MahAppsTabablzControlStyle}" >
<dragablz:TabablzControl.HeaderItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding DataContext.Title}"/>
</StackPanel>
</DataTemplate>
</dragablz:TabablzControl.HeaderItemTemplate>
<dragablz:TabablzControl.ContentTemplate>
<DataTemplate DataType="{x:Type preview:TabablzProxy}">
<ContentPresenter Margin="4" Content="{Binding View}" />
</DataTemplate>
</dragablz:TabablzControl.ContentTemplate>
</dragablz:TabablzControl>
第六步：添加已經實現好了TabablzControlRegionAdapter的工程AIStudio.Wpf.PrismDragablzExtensions，並在App.xaml.cs中引入。（可以先學怎么用，后期可以自己去看代碼怎么實現的。）
protected override void ConfigureRegionAdapterMappings(RegionAdapterMappings regionAdapterMappings)
{
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