WPF TabItem 边框不反映 BorderThickness 属性

Question

我有一个带有多个 TabItem 的 TabControl。我试图让它们有一个更扁平的设计。这个想法是让选项卡的外边框消失，活动选项卡由选项卡底部的绿线指示。我已经能够让绿线完美地工作，但无论我做什么，我都无法摆脱每个 TabItem 的左、顶和右线。

由于我的规范中的文本格式限制，我已将 TabItem 标头包装到由边框包装的 TextBlock 中。我怀疑这种组合可能与它有关。如果有办法在活动选项卡上显示绿色底部边框，同时允许换行符（每个选项卡有两个单词需要分成两行）和选项卡标题中的文本居中，我完全可以更改我的配置。我尝试了 BorderThickness、Margin 和 Padding 属性的各种组合，但均无济于事。

<TabControl HorizontalAlignment="Stretch" VerticalContentAlignment="Stretch" x:Name="tabControl">
    <TabItem  MaxWidth="55" HorizontalAlignment="Center" Background="White">
        <TabItem.Header>
            <Border Style="{StaticResource TabItemText}">
                <TextBlock TextAlignment="Center" Text="Actions Needed" TextWrapping="Wrap"></TextBlock>
            </Border>
        </TabItem.Header>
    </TabItem>
</TabControl>

这是标签着色代码。目前它做了一些多余的事情，但它说明了我正在尝试做的事情。

<Style x:Key="TabItemText" TargetType="{x:Type Border}">
    <Style.Triggers>
        <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="True">
            <Setter Property="BorderBrush" Value="#57B481"/>
            <Setter Property="BorderThickness" Value="0 0 0 4"/>
            <Setter Property="Margin" Value="0 0 0 -3"/>
        </DataTrigger>
        <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="False">
            <Setter Property="BorderThickness" Value="0 0 0 0"/>
            <Setter Property="Margin" Value="0 0 0 -3"/>
        </DataTrigger>
    </Style.Triggers>
</Style>

Answer 1

您可以/应该更改TabItem 的Template。它包含一个Border，您应该将它的BorderThickness 修复为"0,0,0,2" 之类的东西。最后一个值确定您尝试创建的绿色边框的高度。您还应该将 BorderBrush 和 BackgroundBrush 设置为相同。您将触发器IsSelected==True 中的BorderBrush 更改为您选择的颜色。请注意，不需要在 TabItem 的 Header 中使用 Border。只需使用TexBlock 来控制TextWrapping 等等。我在以下示例中解释了其他一些小的更改：

<TabControl HorizontalAlignment="Stretch" VerticalContentAlignment="Stretch" x:Name="tabControl">
    <TabControl.Resources>
        <LinearGradientBrush x:Key="LightBrush" StartPoint="0,0" EndPoint="0,1">
            <GradientBrush.GradientStops>
                <GradientStopCollection>
                    <GradientStop Color="#FFF" Offset="0.0"/>
                    <GradientStop Color="#EEE" Offset="1.0"/>
                </GradientStopCollection>
            </GradientBrush.GradientStops>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="SolidBorderBrush" Color="#888" />
        <SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF" />
        <SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE" />
        <SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA" />
        <SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />
        <ControlTemplate x:Key="simpleTI" TargetType="TabItem">
            <Grid>
                <Border Name="Border" 
                            BorderThickness="0,0,0,2" 
                            Background="{StaticResource LightBrush}"
                            BorderBrush="{StaticResource LightBrush}" 
                            CornerRadius="0" >
                    <ContentPresenter x:Name="ContentSite" Margin="5,0"  VerticalAlignment="Center" HorizontalAlignment="Center"
                                          ContentSource="Header"  RecognizesAccessKey="True"/>
                </Border>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter TargetName="Border" Property="BorderBrush" Value="#57B481" />
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
                    <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
                    <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </TabControl.Resources>


    <TabItem  MaxWidth="55" HorizontalAlignment="Center" Background="White" Template="{StaticResource simpleTI}" >
        <TabItem.Header>
            <TextBlock TextAlignment="Center" Text="Actions Needed" TextWrapping="Wrap" />
        </TabItem.Header>
    </TabItem>
    <TabItem  MaxWidth="55" HorizontalAlignment="Center" Background="White" Template="{StaticResource simpleTI}" >
        <TabItem.Header>
            <TextBlock TextAlignment="Center" Text="Actions Needed 1" TextWrapping="Wrap" />
        </TabItem.Header>
    </TabItem>
    <TabItem  MaxWidth="55" HorizontalAlignment="Center" Background="White" Template="{StaticResource simpleTI}" >
        <TabItem.Header>
            <TextBlock TextAlignment="Center" Text="Actions Needed 2" TextWrapping="Wrap" />
        </TabItem.Header>
    </TabItem>
</TabControl>

Answer 2

我很确定您将需要覆盖 TabItem 和/或 TabControl 的控件模板来完成此操作。请参阅https://msdn.microsoft.com/en-us/library/ms752032.aspx 了解起点。