WPF TabControl 滚动选项卡

最新推荐文章于 2025-03-18 14:29:50 发布

龙中舞王

最新推荐文章于 2025-03-18 14:29:50 发布

阅读量2.4k

点赞数 29

分类专栏： WPF 入门知识文章标签： wpf

本文链接：https://blog.csdn.net/qq_44695769/article/details/136452776

版权

本文围绕WPF中的TabControl展开，介绍了其布局职责，通过模板副本查看样式，指出WPF xaml优缺点。讲解了IsItemsHost属性，说明了修改TabControl样式的方法，即添加ScrollViewer并将Panel改为StackPanel。还提及HandyControl的TabControl滚动，最后总结WPF的难点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

我原本以为是很简单的事情，但是没想到实际做起来还是有很多的基础知识点的。

TabControl是什么东西

我们平常写TabControl的时候，可能都很习惯了直接写TabControl+TabItem。但是TabControl负责了什么布局，TabItem负责了什么布局，我们都不知道。

在《深入浅出WPF》中，我们可以看到TabControl属于ItemsControl

在这里插入图片描述

通过模板副本查看样式

我们去看看控件模板样式副本。WPF的xaml的优点是每个控件都是单独的逻辑，耦合低。缺点是写起来麻烦，每次改动约等于重新写一个新的。通过增加自己的工作量来降低了耦合

在这里插入图片描述

    <SolidColorBrush x:Key="TabItem.Selected.Background" Color="#FFFFFF"/>
    <SolidColorBrush x:Key="TabItem.Selected.Border" Color="#ACACAC"/>
    <Style x:Key="TabControlStyle1" TargetType="{x:Type TabControl}">
        <!--默认基础属性-->
        <Setter Property="Padding" Value="2"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Background" Value="{StaticResource TabItem.Selected.Background}"/>
        <Setter Property="BorderBrush" Value="{StaticResource TabItem.Selected.Border}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <!--控件模板-->
        <Setter Property="Template">
            <Setter.Value>
                <!--选择控件模板属性模板-->
                <ControlTemplate TargetType="{x:Type TabControl}">
                    <Grid x:Name="templateRoot" ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition x:Name="ColumnDefinition0"/>
                            <ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition x:Name="RowDefinition0" Height="Auto"/>
                            <RowDefinition x:Name="RowDefinition1" Height="*"/>
                        </Grid.RowDefinitions>
                        <!--设置TabItem选项卡的布局-->
                        <TabPanel x:Name="headerPanel" Background="Transparent" Grid.Column="0" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
                        <!--设置TabItem的内容-->
                        <Border x:Name="contentPanel" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="1" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
                            <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </Border>
                    </Grid>
                    <!--用于设置位置布局-->
                    <ControlTemplate.Triggers>
                        <Trigger Property="TabStripPlacement" Value="Bottom">
                            <Setter Property="Grid.Row" TargetName="headerPanel" Value="1"/>
                            <Setter Property="Grid.Row" TargetName="contentPanel" Value="0"/>
                            <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                            <Setter Property="Height" TargetName="RowDefinition1" Value="Auto"/>
                            <Setter Property="Margin" TargetName="headerPanel" Value="2,0,2,2"/>
                        </Trigger>
                        <Trigger Property="TabStripPlacement" Value="Left">