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

AIStudio框架汇总及介绍

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

posted @ 2021-08-09 21:17  竹天笑  阅读(2300)  评论(0编辑  收藏  举报