Question

我设置了标签样式，以便它只显示标题文本，但我想在它们之间添加一个分隔符。标签看起来像是：

Content1 Content2

我是否可以在标签之间添加Separator，以便它看起来像：

Content1 |内容2

我已经可以设置这样的垂直分隔符，但我无法弄清楚如何将它放在标签之间。我不想使用标签边框伪造分隔符，我想远离使用
<TabItem Header="|" IsEnabled="False" />也要假装它。对此有优雅的解决方案吗？

这是我到目前为止所做的：

<TabControl Background="Transparent" BorderThickness="0">
    <TabItem Header="Content1">
        <!--content1-->
    </TabItem>
    <TabItem Header="Content2">
        <!--content2-->
    </TabItem>
    <TabControl.Resources>
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Border Margin="2,0">
                            <ContentPresenter ContentSource="Header" Margin="10,2" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="Foreground" Value="White" />
                            </Trigger>
                            <Trigger Property="IsSelected" Value="False">
                                <Setter Property="Foreground" Value="Gray" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </TabControl.Resources>
</TabControl>

提前致谢！

Answer 1

我结束了这个：

<TabItem IsEnabled="False" IsHitTestVisible="False">
    <TabItem.Header>
        <Separator Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" Height="10" Background="Black" />
    </TabItem.Header>
</TabItem>

Answer 2

对于任何来到这里的人来说，看到可能的答案（像我一样）我是这样做的：

在您的资源中定义三种样式

样式1（包含两个分隔符）：

<Style TargetType="TabItem" x:Key="TabItemWithBothSeparators">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TabItem">
                    <Border BorderBrush="DarkGray" BorderThickness="1,0">
                        <Grid Name="Panel">
                            <ContentPresenter x:Name="ContentSite" ContentSource="Header" />
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>

样式2（左侧分隔符）：

<Style TargetType="TabItem" x:Key="TabItemWithLeftSeparator">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TabItem">
                    <Border BorderBrush="DarkGray" BorderThickness="1,0,0,0">
                        <Grid Name="Panel">
                            <ContentPresenter x:Name="ContentSite" ContentSource="Header" />
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>

样式3（不带分隔符）：

<Style TargetType="TabItem" x:Key="TabItemWithoutSeparators">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TabItem">
                        <Grid Name="Panel">
                            <ContentPresenter x:Name="ContentSite" ContentSource="Header" />
                        </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>

然后以这种方式设置样式（下面的代码示例）：

在奇数TabItems计数（1,3,5,7，...）上将样式设置为 TabItemWithoutSeparators
在偶数TabItems计数（2,4,6,8，...）上将样式设置为 TabItemWithBothSeparators
当您的上一个TabItem计数为偶数时，将其样式设置为 TabItemWithLeftSeparator ，否则设置为 TabItemWithoutSeparators

偶数TabItems计数的示例

<TabItem Header="Item 1" Style="{StaticResource TabItemWithoutSeparators}">
    <!--content 1-->
</TabItem>
<TabItem Header="Item 2" Style="{StaticResource TabItemWithBothSeparators}">
    <!--content 2-->
</TabItem>
<TabItem Header="Item 3" Style="{StaticResource TabItemWithoutSeparators}">
    <!--content 3-->
</TabItem>
<TabItem Header="Item 4" Style="{StaticResource TabItemWithLeftSeparator}">
    <!--content 4-->
</TabItem>

奇数TabItems计数的示例

<TabItem Header="Item 1" Style="{StaticResource TabItemWithoutSeparators}">
    <!--content 1-->
</TabItem>
<TabItem Header="Item 2" Style="{StaticResource TabItemWithBothSeparators}">
    <!--content 2-->
</TabItem>
<TabItem Header="Item 3" Style="{StaticResource TabItemWithoutSeparators}">
    <!--content 3-->
</TabItem>

希望这可以帮助！确定有更优雅的方式来获得这个分隔符...

如何在tabcontrol中的选项卡之间添加分隔符？

2 个答案: