WPF TabControl模版改造工程

最新推荐文章于 2024-04-20 15:15:16 发布

佐弥蒔絵

最新推荐文章于 2024-04-20 15:15:16 发布

阅读量3k

点赞数

分类专栏： WPF 文章标签： wpf 控件 TabControl 选项卡

本文链接：https://blog.csdn.net/u010012264/article/details/72638532

版权

WPF 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

因为项目需要，使用一个TabControl控件作为展示内容的容器，然而……默认样式真的很丑！真的很丑！真的很丑！重要的事情要说三遍！

那么问题来了，我需要一个自定义的模版。

作为一个懒癌晚期患者，我的宗旨就是能自动生成绝对不手动去写，能少些一个字符绝对不多打一个空格，好，那么开始自己的改造计划。

首先，作为一个dalao(伪)，需要看下原来的默认样式是什么样子的，于是屁颠屁颠的去使用blend打开样式，然后发现……

<Style x:Key="TabControlStyle1" TargetType="{x:Type TabControl}">
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="Padding" Value="4"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="BorderBrush" Value="#FF8C8E94"/>
        <Setter Property="Background" Value="#FFF9F9F9"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabControl}">
                    <Grid 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>
                        <TabPanel x:Name="HeaderPanel" Grid.Column="0" IsItemsHost="True" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
                        <Border x:Name="ContentPanel" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="1" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
                            <ContentPresenter x:Name="PART_SelectedContentHost" ContentTemplate="{TemplateBinding SelectedContentTemplate}" Content="{TemplateBinding SelectedContent}" ContentStringFormat="{TemplateBinding SelectedContentStringFormat}" 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">
                            <Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0"/>
                            <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
                            <Setter Property="Grid.Column" TargetName="HeaderPanel" Value="0"/>
                            <Setter Property="Grid.Column" TargetName="ContentPanel" Value="1"/>
                            <Setter Property="Width" TargetName="ColumnDefinition0" Value="Auto"/>
                            <Setter Property="Width" TargetName="ColumnDefinition1" Value="*"/>
                            <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                            <Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
                            <Setter Property="Margin" TargetName="HeaderPanel" Value="2,2,0,2"/>
                        </Trigger>
                        <Trigger Property="TabStripPlacement" Value="Right">
                            <Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0"/>
                            <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
                            <Setter Property="Grid.Column" TargetName="HeaderPanel" Value="1"/>
                            <Setter Property="Grid.Column" TargetName="ContentPanel" Value="0"/>
                            <Setter Property="Width" TargetName="ColumnDefinition0" Value="*"/>
                            <Setter Property="Width" TargetName="ColumnDefinition1" Value="Auto"/>
                            <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                            <Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
                            <Setter Property="Margin" TargetName="HeaderPanel" Value="0,2,2,2"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

………………

卧槽好多！！！

我选择放弃。

好吧，那么从结构上分析，然后发现，似乎，也许，大概，不是很难的样子？

默认的模版是一个两行两列的Grid，我百度了一下原因，并自己亲自尝试了一下，发现……并没卵用……好吧，可能是我的功能太简单用不到，事实上我只用了两列就搞定，因为我是纵向展示的，那么，先上图！

绅士的萝莉控

其实这些都很好搞定，无非就是一些控件的使用，那么，废话不多说，上图……呸，上模版！

1、TabControl模版

 <ControlTemplate x:Key="NameTabControlTemplate" TargetType="{x:Type TabControl}">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="40"></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <TabPanel Grid.Column="0" IsItemsHost="True" KeyboardNavigation.TabIndex="1"/>
            <Border Grid.Column="1" KeyboardNavigation.DirectionalNavigation="Cycle" KeyboardNavigation.TabIndex="2">
                <ContentPresenter
                    HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" 
                    RecognizesAccessKey="True" 
                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                    VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" 
                    ContentSource="SelectedContent" />
            </Border>
        </Grid>
    </ControlTemplate>IsItemsHost="True" KeyboardNavigation.TabIndex="1"/>
            <Border Grid.Column="1" KeyboardNavigation.DirectionalNavigation="Cycle" KeyboardNavigation.TabIndex="2">
                <ContentPresenter
                    HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" 
                    RecognizesAccessKey="True" 
                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                    VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" 
                    ContentSource="SelectedContent" />
            </Border>
        </Grid>
    </ControlTemplate>

TabControl模版对应的样式

<Style x:Key="NameTabControlStyle" TargetType="{x:Type TabControl}">
        <Setter Property="Control.Template" Value="{StaticResource NameTabControlTemplate}"></Setter>
        <Setter Property="TabStripPlacement" Value="Left"></Setter>
    </Style><Setter Property="TabStripPlacement" Value="Left"></Setter>
</Style>

 

2、TabItem模版

<ControlTemplate x:Key="NameTabItemControlTemplate" TargetType="{x:Type TabItem}">
        <Border x:Name="TabItemBorder" Background="Wheat" SnapsToDevicePixels="true" Height="100" Width="40">
            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" ContentSource="Header"/>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Background" TargetName="TabItemBorder" Value="#EEEEEE"></Setter>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

TabItem模版对应的样式

<Style TargetType="{x:Type TabItem}">
        <Setter Property="Template" Value="{StaticResource NameTabItemControlTemplate}"></Setter>
        <Setter Property="FontFamily" Value="Microsoft YaHei UI,Microsoft YaHei,Simsun"></Setter>
        <Setter Property="Foreground" Value="#A9A9A9"></Setter>
    </Style>

上面有两个红红火火的地方，这两个地方要强调一下，第一个地方按照MSDN上来解释反正我是看不懂，大白话就是给了这个属性之后就可以在这个容器中生成我们看到的可以点点点切换的选项卡；第二给地方！正是我吃亏了一次的地方，因为我要纵向搞，所以在没加这个属性之前，默认始终会选中纵向中最后一个，并且点击没有任何效果，反而点击第一个选项卡可以来回切换（卧槽好神奇ヾ(｡｀Д´｡)），那么加上这个属性之后，好吧，MSDN上的解释我依然看不懂，按照我的理解就是告诉TabControl按照何种对齐方式进行排列。最后的最后！貌似使用这个属性之后无论你用不用一个单独的列去放置选项卡，似乎都会纵向设置，因为没有尝试，尝试过的朋友请留言告诉我下，谢谢！

最后，看到这里的各位dalao们，如果以上有任何不对的地方，欢迎指正拍砖糊脸。

では,みんな様( ・´ω｀・p[お疲れ様ｧ]q

佐弥蒔絵

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
WPF TabControl模版改造工程

因为项目需要，使用一个TabControl控件作为展示内容的容器，然而……默认样式真的很丑！真的很丑！真的很丑！重要的事情要说三遍！那么问题来了，我需要一个自定义的模版。作为一个懒癌晚期患者，我的宗旨就是能自动生成绝对不手动去写，能少些一个字符绝对不多打一个空格，好，那么开始自己的改造计划。首先，作为一个dalao(伪)，需要看下原来的默认样式是什么样子的，于是屁颠屁颠的去使用blen...
复制链接

扫一扫