wpf - 如何在 WPF 中重新设置 TabControl 的样式

Question

我是 WPF 的新手。在这里，我发布了一张TabControl. 请指导我如何根据我的图片在 WPF 中重新设置具有相同 UI 的选项卡。

Answer 1

在这种情况下，您将需要实现Style/ TemplateforTabControl来获取此表单。TabControl选项卡有三个方向是：中心（default）、左右方向。您需要向左方向，根据图片判断。

TabItem(elements of ) 的样式TabControl在所有方向上都是一个。

左方向TabControl的样式：

<Style x:Key="LeftTabControl" TargetType="{x:Type TabControl}">
        <Setter Property="TabStripPlacement" Value="Left" />
        <Setter Property="Margin" Value="0" />
        <Setter Property="Padding" Value="0" />
        <Setter Property="Background" Value="White" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="BorderBrush" Value="Transparent" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabControl}">
                    <Grid ClipToBounds="True" SnapsToDevicePixels="True" KeyboardNavigation.TabNavigation="Local">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Name="ColumnDefinition0" />
                            <ColumnDefinition Width="0" Name="ColumnDefinition1" />
                        </Grid.ColumnDefinitions>

                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" Name="RowDefinition0" />
                            <RowDefinition Height="*" Name="RowDefinition1" />
                        </Grid.RowDefinitions>

                        <Border x:Name="HeaderBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" Background="#FAFAFA" Margin="0">
                            <TabPanel IsItemsHost="True" Name="HeaderPanel" Panel.ZIndex="1" KeyboardNavigation.TabIndex="1" Grid.Column="0" Grid.Row="0" />
                        </Border>

                        <Grid Name="ContentPanel" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Column="0" Grid.Row="1">
                            <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0">
                                <ContentPresenter Content="{TemplateBinding SelectedContent}" ContentTemplate="{TemplateBinding SelectedContentTemplate}" ContentStringFormat="{TemplateBinding SelectedContentStringFormat}" ContentSource="SelectedContent" Name="PART_SelectedContentHost" Margin="2" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
                            </Border>
                        </Grid>
                    </Grid>

                    <ControlTemplate.Triggers>
                        <Trigger Property="TabControl.TabStripPlacement" Value="Left">
                            <Setter TargetName="HeaderPanel" Property="Grid.Row" Value="0" />
                            <Setter TargetName="ContentPanel" Property="Grid.Row" Value="0" />
                            <Setter TargetName="HeaderPanel" Property="Grid.Column" Value="0" />
                            <Setter TargetName="ContentPanel" Property="Grid.Column" Value="1" />
                            <Setter TargetName="ColumnDefinition0" Property="ColumnDefinition.Width" Value="Auto" />
                            <Setter TargetName="ColumnDefinition1" Property="ColumnDefinition.Width" Value="*" />
                            <Setter TargetName="RowDefinition0" Property="RowDefinition.Height" Value="*" />
                            <Setter TargetName="RowDefinition1" Property="RowDefinition.Height" Value="0" />
                            <Setter TargetName="HeaderBorder" Property="FrameworkElement.Margin" Value="0,0,0,0" />
                        </Trigger>

                        <Trigger Property="UIElement.IsEnabled" Value="False">
                            <Setter Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>

风格TabItem：

<Style x:Key="{x:Type TabItem}" TargetType="{x:Type TabItem}">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Foreground" Value="Gray" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="MinHeight" Value="20" />
        <Setter Property="FontFamily" Value="./#Segoe UI" />
        <Setter Property="FontSize" Value="14" />
        <Setter Property="FontWeight" Value="Normal" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="AllowDrop" Value="True" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Border SnapsToDevicePixels="True" Name="Border" Margin="0,0,2,0" Padding="2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0">
                        <ContentPresenter Name="ContentSite" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="5,5,5,5" VerticalAlignment="Center" RecognizesAccessKey="True" ContentSource="Header" />
                    </Border>

                    <ControlTemplate.Triggers>
                        <Trigger Property="TabStripPlacement" Value="Bottom">
                            <Setter TargetName="Border" Property="CornerRadius" Value="0,0,0,0" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

        <Style.Triggers>               
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Background" Value="#F5B79C" />
                <Setter Property="Foreground" Value="Black" />
            </Trigger>

            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsMouseOver" Value="True" />
                    <Condition Property="IsSelected" Value="False" />
                </MultiTrigger.Conditions>

                <Setter Property="Background" Value="#DB805A" />
                <Setter Property="Foreground" Value="White" />
            </MultiTrigger>

            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Background" Value="Black" />
                <Setter Property="Foreground" Value="White" />
            </Trigger>
        </Style.Triggers>
</Style>    

MainWindow

<TabControl Style="{StaticResource LeftTabControl}" Background="Gainsboro" Width="300" HorizontalAlignment="Left">
    <TabItem Header="New">
        <Label Content="TestNew" />
    </TabItem>

    <TabItem Header="Old">
        <Label Content="TestOld" />
    </TabItem>

    <TabItem Header="Recent">
        <Label Content="RecentHelp" />
    </TabItem>
</TabControl>

Output

要添加三角形选择，您需要修复TabItem. 添加Path三角形并在当前显示TabItem：

<ControlTemplate TargetType="{x:Type TabItem}">
    <Border SnapsToDevicePixels="True" Name="Border" Margin="0,0,2,0" Padding="2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0">
        <Grid>
            <Path x:Name="CurrentTriangle" Width="10" Height="14" Stretch="Fill" Margin="0,0,-3,0" Fill="#FAFAFA" HorizontalAlignment="Right" Data="F1 M 287.328,237.333L 319.344,255.818L 319.344,218.849L 287.328,237.333 Z " Visibility="Collapsed" />
            <ContentPresenter Name="ContentSite" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="5,5,5,5" VerticalAlignment="Center" RecognizesAccessKey="True" ContentSource="Header" />
        </Grid>
    </Border>

    <ControlTemplate.Triggers>
        ...

        <Trigger Property="IsSelected" Value="True">
            <Setter TargetName="CurrentTriangle" Property="Visibility" Value="Visible" />
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

三角形输出：

TabItem样式的完整列表Triangle：

<Style x:Key="{x:Type TabItem}" TargetType="{x:Type TabItem}">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Foreground" Value="Gray" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="MinHeight" Value="20" />
        <Setter Property="FontFamily" Value="./#Segoe UI" />
        <Setter Property="FontSize" Value="14" />
        <Setter Property="FontWeight" Value="Normal" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="AllowDrop" Value="True" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Border SnapsToDevicePixels="True" Name="Border" Margin="0,0,2,0" Padding="2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0">
                        <Grid>
                            <Path x:Name="CurrentTriangle" Width="10" Height="14" Stretch="Fill" Margin="0,0,-3,0" Fill="#FAFAFA" HorizontalAlignment="Right" Data="F1 M 287.328,237.333L 319.344,255.818L 319.344,218.849L 287.328,237.333 Z " Visibility="Collapsed" />
                            <ContentPresenter Name="ContentSite" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="5,5,5,5" VerticalAlignment="Center" RecognizesAccessKey="True" ContentSource="Header" />
                        </Grid>
                    </Border>

                    <ControlTemplate.Triggers>
                        <Trigger Property="TabStripPlacement" Value="Bottom">
                            <Setter TargetName="Border" Property="CornerRadius" Value="0,0,0,0" />
                        </Trigger>

                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="CurrentTriangle" Property="Visibility" Value="Visible" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

        <Style.Triggers>               
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Background" Value="#F5B79C" />
                <Setter Property="Foreground" Value="Black" />
            </Trigger>

            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsMouseOver" Value="True" />
                    <Condition Property="IsSelected" Value="False" />
                </MultiTrigger.Conditions>

                <Setter Property="Background" Value="#DB805A" />
                <Setter Property="Foreground" Value="White" />
            </MultiTrigger>

            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Background" Value="Black" />
                <Setter Property="Foreground" Value="White" />
            </Trigger>
        </Style.Triggers>
</Style>

Edit:我会按顺序告诉你。

Styles我上面给出的所有, 都是这样放置的App.xaml（希望它们在那里）：

<Application x:Class="SomeProgram.App"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options" 
         StartupUri="MainWindow.xaml">

<Application.Resources>
    <Style x:Key="LeftTabControl" TargetType="{x:Type TabControl}">
     ...
    </Style>

<Style x:Key="{x:Type TabItem}" TargetType="{x:Type TabItem}">
     ...
    </Style>
</Application.Resources>

指定图片路径Triangle。

默认情况下，模板TabItem如下所示：

<Setter Property="Template">
    <Setter.Value>
        <Border SnapsToDevicePixels="True" Name="Border" Margin="0,0,2,0" Padding="2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0">
            <ContentPresenter Name="ContentSite" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="5,5,5,5" VerticalAlignment="Center" RecognizesAccessKey="True" ContentSource="Header" />
        </Border>

ContentPresenter负责显示内容，在这种情况下用于显示标题中的文本。但是我们需要显示一个三角形，所以将他添加为图形Path：

<Path x:Name="CurrentTriangle" Width="10" Height="14" Stretch="Fill" Margin="0,0,-3,0" Fill="#FAFAFA" HorizontalAlignment="Right" Data="F1 M 287.328,237.333L 319.344,255.818L 319.344,218.849L 287.328,237.333 Z " Visibility="Collapsed" />

这不是Image，Path更容易使用，无需保留资源。您可以在此处找到更多信息。

所以，现在我们出现了一个三角形，但我们需要在选择选项卡时显示它。为此，我们使用触发器来执行此操作：

<Trigger Property="IsSelected" Value="True">
    <Setter TargetName="CurrentTriangle" Property="Visibility" Value="Visible" />
</Trigger>

您可以在此处找到有关触发器的更多信息。

选定的渐变背景颜色TabItem。

选定的颜色TabItem也设置在TabItem样式触发器中：

<Trigger Property="IsSelected" Value="True">
    <Setter Property="Background" Value="#F5B79C" />
    <Setter Property="Foreground" Value="Black" />
</Trigger>

这里设置selected的Background和的值。渐变色定义如下：ForegroundTabItem

<LinearGradientBrush>
    <GradientStop Color="Yellow" Offset="0.0" />
    <GradientStop Color="Orange" Offset="0.5" />
    <GradientStop Color="Red" Offset="1.0" />
</LinearGradientBrush>

您需要为Background触发器中的属性设置渐变颜色。

TabControl 的背景

Background为TabControl's这一行的样式设置：

<Style x:Key="LeftTabControl" TargetType="{x:Type TabControl}">
    ...
    <Setter Property="Background" Value="White" />

有关画笔（渐变）的更多信息，请点击此处。

此处有关样式/模板的信息。

Answer 2

试试这个。在您的窗口上添加一个选项卡控件，然后将 TabStripPlacement 设置为 Left。然后将一些选项卡项添加到此选项卡控件。现在在 Windows.Resource 部分添加样式。

    <Style  TargetType="{x:Type TabItem}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource TabItemFocusVisual}"/>
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="Padding" Value="6,1,6,1"/>
        <Setter Property="BorderBrush" Value="{StaticResource TabControlNormalBorderBrush}"/>

        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="MinHeight" Value="30"/>

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid SnapsToDevicePixels="true">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected"/>
                                <VisualState x:Name="Selected"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="Bd" BorderThickness="1,1,1,0" Padding="{TemplateBinding Padding}">
                            <Border.Background>
                                <RadialGradientBrush GradientOrigin="0.019,0.518" RadiusY="0.741" RadiusX="0.578" Center="0.019,0.518">
                                    <GradientStop Color="#FFC5C7C8" Offset="0.47"/>
                                    <GradientStop Color="#FFD1D3D8"/>
                                    <GradientStop Color="#FFE2E2E2" Offset="1"/>
                                </RadialGradientBrush>
                            </Border.Background>
                            <Grid x:Name="grd" VerticalAlignment="Stretch" MinWidth="100" MinHeight="40">
                            <Path x:Name="CurrentTriangle" Width="10" Height="14" Stretch="Fill" Margin="0,0,-3,0" Fill="#FAFAFA" HorizontalAlignment="Right" Data="F1 M 287.328,237.333L 319.344,255.818L 319.344,218.849L 287.328,237.333 Z " Visibility="Collapsed" />
                                <ContentPresenter x:Name="Content" ContentSource="Header" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>    

                            </Grid>                             
                        </Border>                       
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemHotBackground}"/>
                        </Trigger>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter Property="Panel.ZIndex" Value="1"/>
                                <Setter Property="Visibility" Value="Visible" TargetName="CurrentTriangle"/>
                                <Setter Property="Foreground" Value="White"/>
                                <Setter Property="Background" TargetName="Bd">

                                <Setter.Value>
                                    <RadialGradientBrush GradientOrigin="0.501,0.914" RadiusY="0.419" RadiusX="0.355" Center="0.501,0.914">
                                        <GradientStop Color="#FF082876" Offset="0.727"/>
                                        <GradientStop Color="#FF1145C4" Offset="0.221"/>
                                        <GradientStop Color="#FF0E245C" Offset="1"/>
                                    </RadialGradientBrush>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="false"/>
                                <Condition Property="IsMouseOver" Value="true"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="BorderBrush" TargetName="Bd" Value="Silver"/>
                        </MultiTrigger>

                        <Trigger Property="TabStripPlacement" Value="Left">
                            <Setter Property="BorderThickness" TargetName="Bd" Value="0"/>
                        </Trigger>



                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="true"/>
                                <Condition Property="TabStripPlacement" Value="Left"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Margin" Value="0"/>
                            <Setter Property="Margin" TargetName="Content" Value="0,0,1,0"/>
                        </MultiTrigger>

                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemDisabledBackground}"/>
                            <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemDisabledBorderBrush}"/>
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

对于自定义选项卡标题，您可以使用标题模板。自定义模板会很好。案子 。就像是

<TabControl   TabStripPlacement="Left">
        <TabItem >
            <TabItem.Header>
                <StackPanel Orientation="Horizontal">
                    <Image Height="16" Width="16" Source="005_Task_24x24_72.png"/>
                    <TextBlock Text="Sample Tab"/>
                </StackPanel>
            </TabItem.Header>
            <Grid Background="#FFE5E5E5"/>
        </TabItem>
        <TabItem >
            <TabItem.Header>
                <StackPanel Orientation="Horizontal">
                    <Image Height="16" Width="16" Source="008_Reminder_24x24.png"/>
                    <TextBlock Text="Sample Tab"/>
                </StackPanel>
            </TabItem.Header>
            <Grid Background="#FFE5E5E5"/>
        </TabItem>
            <TabItem >
            <TabItem.Header>
                <StackPanel Orientation="Horizontal">
                    <Image Height="16" Width="16" Source="023_Tip_16x16_72.png"/>
                    <TextBlock Text="Sample Tab"/>
                </StackPanel>
            </TabItem.Header>
            <Grid Background="#FFE5E5E5"/>
        </TabItem>
        <TabItem >
            <TabItem.Header>
                <StackPanel Orientation="Horizontal">
                    <Image Height="16" Width="16" Source="1409_Monitor_24x24.png"/>
                    <TextBlock Text="Sample Tab"/>
                </StackPanel>
            </TabItem.Header>
            <Grid Background="#FFE5E5E5"/>
        </TabItem>
            <TabItem >
            <TabItem.Header>
                <StackPanel Orientation="Horizontal">
                    <Image Height="16" Width="16" Source="FavoriteStar_FrontFacing_24x24_72.png"/>
                    <TextBlock Text="Sample Tab"/>
                </StackPanel>
            </TabItem.Header>
            <Grid Background="#FFE5E5E5"/>
        </TabItem>
        <TabItem >
            <TabItem.Header>
                <StackPanel Orientation="Horizontal">
                    <Image Height="16" Width="16" Source="Music_Note_Double_24.png"/>
                    <TextBlock Text="Sample Tab"/>
                </StackPanel>
            </TabItem.Header>
            <Grid Background="#FFE5E5E5"/>
        </TabItem>
            <TabItem >
            <TabItem.Header>
                <StackPanel Orientation="Horizontal">
                    <Image Height="16" Width="16" Source="005_Task_24x24_72.png"/>
                    <TextBlock Text="Sample Tab"/>
                </StackPanel>
            </TabItem.Header>
            <Grid Background="#FFE5E5E5"/>
        </TabItem>
        <TabItem >
            <TabItem.Header>
                <StackPanel Orientation="Horizontal">
                    <Image Height="16" Width="16" Source="005_Task_24x24_72.png"/>
                    <TextBlock Text="Sample Tab"/>
                </StackPanel>
            </TabItem.Header>
            <Grid Background="#FFE5E5E5"/>
        </TabItem>
            <TabItem >
            <TabItem.Header>
                <StackPanel Orientation="Horizontal">
                    <Image Height="16" Width="16" Source="005_Task_24x24_72.png"/>
                    <TextBlock Text="Sample Tab"/>
                </StackPanel>
            </TabItem.Header>
            <Grid Background="#FFE5E5E5"/>
        </TabItem>
        <TabItem >
            <TabItem.Header>
                <StackPanel Orientation="Horizontal">
                    <Image Height="16" Width="16" Source="005_Task_24x24_72.png"/>
                    <TextBlock Text="Sample Tab"/>
                </StackPanel>
            </TabItem.Header>
            <Grid Background="#FFE5E5E5"/>
        </TabItem>
    </TabControl>