WPF TabControl样式

最新推荐文章于 2024-09-04 17:57:33 发布

Danny_hi

最新推荐文章于 2024-09-04 17:57:33 发布

阅读量1.3k

点赞数 1

分类专栏： WPF 文章标签： wpf

原文链接：https://blog.csdn.net/YouyoMei/article/details/106290001?spm=1001.2014.3001.5502

版权

WPF 专栏收录该内容

114 篇文章 39 订阅

订阅专栏

这篇博客展示了如何使用XAML代码自定义WPF TabControl的样式，包括背景色、边框颜色、选中状态等。通过设置不同触发器改变TabItem的视觉表现，如鼠标悬停、选中时的样式变化，以及内容区域的背景和前景色。示例代码详细地解释了每个元素的作用，帮助开发者创建出具有个性化的TabControl。

摘要由CSDN通过智能技术生成

WPF TabControl样式

xaml代码：

<Window.Resources>
        <!-- 顶部TabControl控件样式 -->
        <SolidColorBrush x:Key="TabItem.Static.Background" Color="White"/>
        <SolidColorBrush x:Key="TabItem.Static.Border" Color="#ACACAC"/>
        <SolidColorBrush x:Key="TabItem.MouseOver.Border" Color="#7EB4EA"/>
        <SolidColorBrush x:Key="TabItem.Disabled.Background" Color="#F0F0F0"/>
        <SolidColorBrush x:Key="TabItem.Disabled.Border" Color="#D9D9D9"/>
        <SolidColorBrush x:Key="TabItem.Selected.Border" Color="#ACACAC"/>
        <SolidColorBrush x:Key="TabItem.Selected.Background" Color="#FFFFFF"/>
        <Style x:Key="TabItem.Style.TopTabStripPlacement" TargetType="{x:Type TabItem}">
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="Background" Value="{StaticResource TabItem.Static.Background}"/>
            <Setter Property="BorderBrush" Value="{StaticResource TabItem.Static.Border}"/>
            <Setter Property="Margin" Value="0"/>
            <Setter Property="Padding" Value="0,8,0,8"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Border Padding="0 0 20 0" >
                            <Grid x:Name="templateRoot" SnapsToDevicePixels="true" >

                                <Border Background="{TemplateBinding Background}">

                                </Border>
                                <ContentPresenter x:Name="contentPresenter" ContentSource="Header" Focusable="False"
                                              HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
                                              Margin="{TemplateBinding Padding}" 
                                              RecognizesAccessKey="True" 
                                                  TextBlock.FontSize="14" TextBlock.FontWeight="UltraBlack" TextBlock.FontFamily="幼圆"
                                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                              VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>

                                <Grid Height="2" x:Name="bottomLine" VerticalAlignment="Bottom" Background="#498FD7" Visibility="Hidden">
                                </Grid>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>

                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Opacity" TargetName="contentPresenter" Value="0.56"/>
                            </Trigger>
                            <Trigger Property="IsSelected" Value="true">
                                <Setter Property="Panel.ZIndex" Value="1"/>
                                <Setter Property="Opacity" TargetName="templateRoot" Value="1"/>
                                <Setter Property="Visibility" TargetName="bottomLine" Value="Visible"/>
                                <Setter Property="Foreground" Value="#498FD7"/>
                            </Trigger>

                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="TabControl.Style.TopTabStripPlacement" TargetType="{x:Type TabControl}">
            <Setter Property="Padding" Value="0"/>
            <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="0"/>
            <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="RowDefinition2" Height="Auto"/>
                                <RowDefinition x:Name="RowDefinition1" Height="*"/>
                            </Grid.RowDefinitions>
                            <TabPanel x:Name="headerPanel" Grid.Column="0" IsItemsHost="true"  Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
                            <Grid Grid.Row="1" Background="#A8D3FE" VerticalAlignment="Top" Height="1">

                            </Grid>
                            <Border x:Name="contentPanel" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="2" 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="IsEnabled" Value="false">
                                <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid VerticalAlignment="Center" >
        <TabControl Width="500" Height="400" HorizontalAlignment="Center"  Style="{DynamicResource TabControl.Style.TopTabStripPlacement}">
            <TabItem Header="文本" Style="{DynamicResource TabItem.Style.TopTabStripPlacement}">
                <Grid Background="#FFE5E5E5"/>
            </TabItem>
            <TabItem Header="布局" Style="{DynamicResource TabItem.Style.TopTabStripPlacement}">
                <Grid Background="#FFE5E5E5"/>
            </TabItem>
            <TabItem Header="外观" Style="{DynamicResource TabItem.Style.TopTabStripPlacement}">
                <Grid Background="#FFE5E5E5"/>
            </TabItem>
        </TabControl>
    </Grid>