TabItem ControlTemplate 元素可见性

Question

我已经为 TabItem 定义了自定义 ControlTemplate，除了 ContentPresenter 之外还有一个 Button（单击时隐藏选项卡）。

<Style TargetType="{x:Type TabItem}">
     <Setter Property="Template">
          <Setter.Value>
               <ControlTemplate TargetType="TabItem">
                    <Border>
                          <Grid>
                                <Grid.ColumnDefinitions>
                                      <ColumnDefinition Width="*"/>
                                      <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <ContentPresenter ContentSource="Header"/>
                                <Button Grid.Column="1" Content="x" Visibility="Visible"/>
                         </Grid>
                    </Border>      
                </ControlTemplate>
          </Setter.Value>
     </Setter>
</Style>

我希望 Button 仅对某些 TabItems 为 Visible，对其他 Collapsed 为 Collapsed。 Collapsed 状态应该是默认状态，我不明白如何将某些选项卡设置为 Visible。

如果标签项像

<TabItem Header="Normal tab">
    <Grid />
</TabItem>
<TabItem Header="Closable tab">
    <Grid/>
</TabItem>

我想让"Closable tab"显示这个Button但是"Normal tab"不显示这个Button，这怎么办？

Answer 1

您可以使用 TabItem 的 Tag 属性来识别其类型，并从 Button 内部观察此类型与 RelativeSource 绑定。

<TabControl>
    <TabControl.Resources>
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TabItem">
                        <Border BorderThickness="1" BorderBrush="Green" Margin="1">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <ContentPresenter ContentSource="Header"/>
                                <Button Grid.Column="1" Content="x">
                                    <Button.Style>
                                        <Style TargetType="Button">
                                            <Setter Property="Visibility" Value="Collapsed" />
                                            <Style.Triggers>
                                                <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=TabItem}, Path=Tag}" Value="Closable">
                                                    <Setter Property="Visibility" Value="Visible" />
                                                </DataTrigger>
                                            </Style.Triggers>
                                        </Style>
                                    </Button.Style>
                                </Button>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </TabControl.Resources>

    <TabItem Header="Normal tab">
        <Grid />
    </TabItem>
    <TabItem Tag="Closable" Header="Closable tab">
        <Grid />
    </TabItem>
</TabControl>

我编辑了一些 Border 属性，只是为了可视化单独的选项卡，它们对于本示例的工作不是必需的。

TabItem ControlTemplate 元素可见性

TabItem ControlTemplate element Visibility

wpf

controltemplate

tabitem