Question

我正在使用C＃WPF开发一个项目。我有一个标签容器，我想根据用户需要动态地将不同类型的标签加载到标签容器中。作为一个例子，我正在做类似以下的事情：

tabContainer.Items.Add(new MyUserControl());

我希望每个标签都有一个关闭按钮，以便在用户不再需要时可以删除标签。

我找到了this code project example但是我可以看到你加载了一个用户控件，其中包含选项卡本身的xaml，而不是选项卡内容，或者我错过了什么。

如何将用户控件加载到选项卡容器中，还可以关闭选项卡。

目前我加载的标签使用一些静态绑定来使用以下内容设置标签标题：

<TabControl x:Name="tabContainer" Grid.Column="2" Margin="10,45,0,0" RenderTransformOrigin="0.5,0.55" Grid.ColumnSpan="3">
            <TabControl.Resources>
                <Style TargetType="{x:Type TabItem}">
                    <Setter Property="Header" Value="{Binding TabHeader}" />
                </Style>
            </TabControl.Resources>
        </TabControl>

我的用户控件有一个`public string TabHeader {get; set;}，它在构造函数中设置，具体取决于我使用的用户控件的构造函数。

Answer 1

您必须自己定义关闭Button。例如，您可以在HeaderTemplate的{{1}}中执行此操作：

TabItem

<TabControl x:Name="tabContainer"> <TabControl.Resources> <Style TargetType="{x:Type TabItem}"> <Setter Property="Header" Value="{Binding TabHeader}" /> <Setter Property="HeaderTemplate"> <Setter.Value> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding}" /> <Button Content="x" Click="Button_Click_2" Tag="{Binding DataContext, RelativeSource={RelativeSource AncestorType=TabItem}}"/> </StackPanel> </DataTemplate> </Setter.Value> </Setter> </Style> </TabControl.Resources> </TabControl>属性绑定到Tag集合中的UserControl，您可以在Items的点击事件处理程序中将其删除，如下所示：

Button

Answer 2

如果要为每个选项卡添加一个关闭按钮，那么它将位于TabItem样式ControlTemplate中。通常，您可以在内容中指定数据上下文（即仅驱动内容的数据），然后在ContentTemplate中指定外观。如果您的内容是UserControl，那么您不会指定ContentTemplate，因为UserControl知道如何绘制自己。

Answer 3

对于我的罪过，我已经为WPF TabControl添加了关闭标签按钮。我最终把关闭按钮放在ItemTemplate中。这是一个最小版本，适用于您填充TabControl和标题内容的方式：

<TabControl
    >
    <TabControl.Resources>
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="Header" Value="{Binding TabHeader}" />
        </Style>
    </TabControl.Resources>
    <TabControl.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Label
                    Content="{Binding}"
                    Grid.Column="0"
                    />
                <Button
                    VerticalAlignment="Center"
                    Grid.Column="1">
                    <Path
                        Data="M 0, 0 L 12, 12 M 12,0 L 0,12"
                        Stroke="Red"
                        StrokeThickness="2"
                        Width="12"
                        Height="12"
                        />
                </Button>
            </Grid>
        </DataTemplate>
    </TabControl.ItemTemplate>
    <local:UserControl1 TabHeader="First Item" />
    <local:UserControl1 TabHeader="Second Item" />
</TabControl>

具有选项卡项的用户控件的“可关闭”选项卡

3 个答案: