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

标签 wpf user-interface tabcontrol

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

enter image description here

最佳答案

在这种情况下，您需要为 TabControl 实现一个 Style/Template 才能获取此表单。 TabControl 选项卡具有三个方向:中央(默认)、向左和向右方向。从图片来看，你需要向左方向。

TabItem(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>

主窗口

<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>

输出

enter image description here

要添加三角形选择，您需要修复 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>

输出三角形:

enter image description here

带有Triangle的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">
                        <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>

编辑:我会按顺序告诉你。

我上面给出的所有样式都像这样放置在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>

Specify the picture path for 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更容易使用，不需要保留资源。更多信息您可以找到 here 。

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

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

有关触发器的更多信息，您可以找到 here 。

Gradient back color for selected TabItem.

所选 TabItem 的颜色也在 TabItem 样式的触发器中设置:

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

这里设置所选TabItem的Background和Foreground的值。渐变颜色定义如下:

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

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

Background for TabControl

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

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

有关画笔(渐变)here 的更多信息。

有关样式/模板 here 的信息。

关于wpf - 如何在 WPF 中重新设置 TabControl 的样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18102890/

上一篇：perl - 连接的一般行为

下一篇：c# - DoubleUtil.DoubleToInt(double val) 如何工作？

相关文章：

C# .NET 4.5 - Entity Framework 6.0，MySQL 数据适配器程序集

java - 在 GUI 中显示 Java 控制台

wpf - WPF ControlTemplate:如何为TemplateBinding提供默认值？

c# - Storyboard.SetTarget 与 Storyboard.SetTargetName

JAVA:鼠标悬停在上方时 GUI 不会显示？

c# - 将控件添加到在 C# .net 的 tabcontrol 中动态生成的选项卡

c# - 选择 Tab 后如何将焦点放在文本框上？

wpf - 使用 ComboBox 控制 TabControl 事件选项卡

c# - 如何在更改方向时更改网格布局

android - 在 build.gradle 文件中添加 buildFeatures 时出错

©2024 IT工具网  联系我们