wpf 选项卡项和选项卡控件边框样式

Tab Item and Tab Control Border Style

提问by dior001

How do I style the Tab Control Border so that the selected Tab Item does not have a line underneath it?

如何设置选项卡控件边框的样式，以便所选选项卡项下面没有线？

These are my Tab Control and Tab Item styles so far.

到目前为止，这些是我的 Tab Control 和 Tab Item 样式。

<!-- Tab control styling -->
        <Style TargetType="{x:Type TabControl}">
            <Setter Property="Padding" Value="10,5,10,5" />
            <Setter Property="Margin" Value="3.5" />
            <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}" />
        </Style>
        <!-- Tab item styling -->
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Grid>
                            <Border 
                                 Name="Border"
                                 Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"
                                 BorderBrush="Black" 
                                 BorderThickness="1,1,1,0" 
                                 CornerRadius="3,3,0,0"
                                 MinWidth="120">
                                    <ContentPresenter x:Name="ContentSite"
                                        VerticalAlignment="Center"
                                        HorizontalAlignment="Center"
                                        ContentSource="Header"
                                        Margin="12,2,12,2"/>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsFocused" Value="True" >
                                <Setter Property="Background" TargetName="Border" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}" />
                                <Setter Property="HeaderTemplate">
                                    <Setter.Value>
                                        <DataTemplate>
                                            <TextBlock FontWeight="Bold" Text="{Binding}"/>
                                        </DataTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True" >
                                <Setter Property="Background" TargetName="Border" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}" />
                                <Setter Property="HeaderTemplate">
                                    <Setter.Value>
                                        <DataTemplate>
                                            <TextBlock FontWeight="Bold" Text="{Binding}"/>
                                        </DataTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsSelected" Value="True" >
                                <Setter Property="Background" TargetName="Border" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}" />
                                <Setter Property="HeaderTemplate">
                                    <Setter.Value>
                                        <DataTemplate>
                                            <TextBlock FontWeight="Bold" Text="{Binding}"/>
                                        </DataTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

If I can achieve the look displayed in the screenshot without having to overload the tab item control template then I don't have an issue as the default tab item template doesn't have the line underneath it on the selected tab. I haven't been able to do this so far. Thanks for your help.

如果我可以实现屏幕截图中显示的外观而不必重载选项卡项控件模板，那么我就没有问题，因为默认选项卡项模板在所选选项卡上没有其下方的行。到目前为止，我一直无法做到这一点。谢谢你的帮助。

回答by Stewbob

The XAML below is how I have overridden the TabControl to solve this problem. The key piece of info is the Marginproperty of the HeaderPanel. You will see that the bottom margin is -1, which shifts it down just enough to cover up that line.

下面的 XAML 是我如何覆盖 TabControl 来解决这个问题。信息的关键部分是对Margin的财产HeaderPanel。您将看到底部边距为 -1，这将其向下移动到足以覆盖该行。

    <Setter Property="Template">
        <Setter.Value>

            <ControlTemplate TargetType="{x:Type TabControl}">
                <Grid KeyboardNavigation.TabNavigation="Local">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <TabPanel x:Name="HeaderPanel"
                              Grid.Row="0"
                              Panel.ZIndex="1"
                              Margin="0,0,4,-1"
                              IsItemsHost="True"
                              KeyboardNavigation.TabIndex="1"
                              Background="Transparent" />

                    <Border x:Name="Border"
                            Grid.Row="1"
                            BorderThickness="1"
                            KeyboardNavigation.TabNavigation="Local"
                            KeyboardNavigation.DirectionalNavigation="Contained"
                            KeyboardNavigation.TabIndex="2">

                        <Border.Background>
                            <SolidColorBrush Color="White"/>
                        </Border.Background>

                        <Border.BorderBrush>
                            <SolidColorBrush Color="White"/>
                        </Border.BorderBrush>

                        <ContentPresenter x:Name="PART_SelectedContentHost"
                                          Margin="4"
                                          ContentSource="SelectedContent" />
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

回答by RainCast

Instead of modifying tabcontrol template, you may as well just modify the TabItem template, by adding two lines to cover up the border, and using minus margins for covering up.

与其修改tabcontrol模板，不如直接修改TabItem模板，添加两行覆盖边框，使用减边距覆盖。

(Please take a look at "TopLineCover" and "BottomLineCover" borders.)

（请查看“TopLineCover”和“BottomLineCover”边框。）

<Style TargetType="TabItem" BasedOn="{StaticResource {x:Type TabItem}}">
    <Setter Property="Foreground" Value="{DynamicResource VsBrush.WindowText}"/>
    <Setter Property="Background" Value="{DynamicResource VsBrush.Window}"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <Grid SnapsToDevicePixels="true">
                    <Border x:Name="HeaderBorder" Padding="8,3,8,3" BorderThickness="1,1,1,0"
                            Background="{DynamicResource {x:Static commonControls:ColorService.JobViewHeaderBrushKey}}" 
                            BorderBrush="{DynamicResource {x:Static commonControls:ColorService.JobViewHeaderBorderBrushKey}}">
                        <ContentPresenter x:Name="Content" ContentSource="Header"
                                          HorizontalAlignment="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
                                          VerticalAlignment="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
                                          />
                    </Border>
                    <Border x:Name="TopLineCover" BorderThickness="1,1,1,0" Margin="0,-2,0,0" Height="3" Panel.ZIndex="100"
                            Background="{DynamicResource VsBrush.Window}" BorderBrush="{DynamicResource {x:Static commonControls:ColorService.JobViewHeaderBorderBrushKey}}"
                            VerticalAlignment="Top" HorizontalAlignment="Stretch" Visibility="Collapsed"/>
                    <Border x:Name="BottomLineCover" BorderThickness="0,0,0,3" Margin="1,0,1,-2" Panel.ZIndex="100" BorderBrush="{DynamicResource VsBrush.Window}"
                            VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Visibility="Collapsed"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsMouseOver" Value="True"/>
                            <Condition Property="IsSelected" Value="False"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Background" TargetName="HeaderBorder" Value="{DynamicResource VsBrush.Window}"/>
                    </MultiTrigger>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Background" TargetName="HeaderBorder" Value="{DynamicResource VsBrush.Window}"/>
                        <Setter Property="Visibility" TargetName="TopLineCover" Value="Visible"/>
                        <Setter Property="Visibility" TargetName="BottomLineCover" Value="Visible"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

回答by Rachel

In the past I've accomplished this by making the TabItemextend a little further down then it's allocated, so its actually drawn on top of the border element and hides it

在过去，我通过使TabItem扩展更向下一点然后分配它来完成此操作，因此它实际上绘制在边框元素的顶部并将其隐藏

I can't remember how I did it exactly, but I think it was with a negative margin on the bottom of the TabItem

我不记得我是怎么做的，但我认为它的底部有一个负边距 TabItem

回答by Orest Shpak

Add property Padding="0,0,0,0"to tab control :-)

将属性添加Padding="0,0,0,0"到选项卡控件:-)