从零开始搭建Wpf基础6-Tab选项卡MVVM实现

前言：之前是单容器显示页面，改成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