一招搞定！轻松优雅地关闭 TabControl 的 Tab 页

2025-07-26 07:52:01

一招搞定！轻松优雅地关闭 TabControl 的 Tab 页一招搞定！轻松优雅地关闭 TabControl 的 Tab 页控件名：TabControl 作者：WPFDevelopersOrg - 驚鏵原文链接[1]：码云链接[2]：框架支持.ET4 至 .ET8；Visual Studio 2022;逻辑实现在本篇将介绍如何在 TabControl 中为每个 TabItem 添

一招搞定！轻松优雅地关闭 TabControl 的 Tab 页

一招搞定！轻松优雅地关闭 TabControl 的 Tab 页

控件名：TabControl 作者：WPFDevelopersOrg - 驚鏵 原文链接[1]： 码云链接[2]：

框架支持.ET4 至 .ET8；
Visual Studio 2022;

逻辑实现

在本篇将介绍如何在 TabControl 中为每个 TabItem 添加一个关闭按钮。将使用一个附加属性来控制关闭按钮的显示和隐藏。通过自定义 ControlTemplate，可以为 Tab 页提供关闭操作。

TabItem 逻辑如下

在每个 TabItem 的右侧添加一个关闭按钮。
使用附加属性来控制关闭按钮的显示和隐藏。

1. 定义 TabItem 样式

通过 XAML 中的样式为 TabItem 设置外观，并添加一个关闭按钮。

代码语言：javascript代码运行次数：0运行复制

<Style x:Key="WD.BaseTAndBTabItem"
       BasedOn="{StaticResource WD.ControlBasicStyle}"
       TargetType="{x:Type TabItem}">
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Stretch" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Padding" Value="{StaticResource WD.DefaultPadding}" />
    <Setter Property="BorderThickness" Value="{StaticResource WD.TabItemBorderThickness}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <controls:SmallPanel Width="{TemplateBinding Width}"
                                     Height="{TemplateBinding Height}"
                                     Background="{TemplateBinding Background}">
                    <Border x:ame="PART_Border" BorderThickness="{TemplateBinding BorderThickness}" />
                    <Grid>
                        <Grid.ColumnDefiniti>
                            <ColumnDefinition />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefiniti>
                        <ContentPresenter x:ame="PART_ContentPresenter"
                                          Margin="{TemplateBinding Padding}"
                                          HorizontalAlignment="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
                                          VerticalAlignment="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
                                          ContentSource="Header"
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                        <!-- 关闭按钮 -->
                        <Button x:ame="PART_CloseButton"
                                Grid.Column="1"
                                Width="20"
                                Height="20"
                                Margin="0,0,4,0"
                                helpers:ElementHelper.CornerRadius="4"
                                helpers:ElementHelper.IsClear="{Binding Path=(helpers:ElementHelper.IsClear), RelativeSource={RelativeSource TemplatedParent}}"
                                Style="{StaticResource }"
                                ToolTip="{Binding [Close], Source={x:Static resx:LanguageManager.Instance}}"
                                Visibility="Collapsed">
                            <controls:PathIcon Width="10"
                                               Height="10"
                                               Foreground="{DynamicResource WD.SecondaryTextSolidColorBrush}"
                                               Kind="WindowClose" />
                        </Button>
                    </Grid>
                </controls:SmallPanel>
                <ControlTemplate.Triggers>
                    <!-- 选中状态触发器 -->
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Targetame="PART_Border" Property="BorderBrush" Value="{DynamicResource WD.PrimaryormalSolidColorBrush}" />
                        <Setter Property="Background" Value="{DynamicResource WD.DefaultBackgroundSolidColorBrush}" />
                        <Setter Targetame="PART_ContentPresenter" Property="TextElement.Foreground" Value="{DynamicResource WD.PrimaryormalSolidColorBrush}" />
                    </Trigger>
                    <!-- 鼠标悬停状态触发器 -->
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Targetame="PART_ContentPresenter" Property="TextElement.Foreground" Value="{DynamicResource WD.PrimaryormalSolidColorBrush}" />
                    </Trigger>
                    <!-- 控制是否显示关闭按钮的触发器 -->
                    <Trigger Property="helpers:ElementHelper.IsClear" Value="True">
                        <Setter Targetame="PART_CloseButton" Property="Visibility" Value="Visible" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

2. 使用附加属性来控制关闭按钮
定义附加属性 `IsClear`

代码语言：javascript代码运行次数：0运行复制

public static readonly DependencyProperty IsClearProperty =
   DependencyProperty.RegisterAttached("IsClear", typeof(bool), typeof(ElementHelper),
       new PropertyMetadata(false, OnIsClearChanged));

判断 IsClear 的新值是否为 true（按钮是否应当具有关闭功能）。
如果 true，则为 Button 添加 Click 事件处理器 ButtonClear_Click，即点击该按钮时将触发关闭功能。
如果 false，则移除 Click 事件处理器，按钮不再响应点击事件。

代码语言：javascript代码运行次数：0运行复制

private static void OnIsClearChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    var button = d as Button;
    if (button != null)
    {
        if ((bool))
            button.Click += ButtonClear_Click;
        else
            button.Click -= ButtonClear_Click;
    }
}

首先，检查 sender 是否是 Button 类型。
然后，通过 button.TemplatedParent 获取按钮的模板父元素，通常在这里是 TabItem。
接下来，获取 TabItem 的父控件，应该是 TabControl。如果 tabControl 不为 null，表示按钮点击事件有效。
最后，通过 tabControl.Items.Remove(tabItem) 从 TabControl 中移除当前的 TabItem，即实现了关闭 TabItem 页的功能。

代码语言：javascript代码运行次数：0运行复制

private static void ButtonClear_Click(object sender, RoutedEventArgs e)
{
    if (sender is Button button)
    {
        if (button.TemplatedParent is TabItem tabItem)
        {
            var tabControl = tabItem.Parent as TabControl;
            if (tabControl != null)
                tabControl.Items.Remove(tabItem); 
        }
    }
}

XAML 示例

示例引入 WPFDevelopers 的 uget 正式包

可以使用附加属性 helpers:ElementHelper.IsClear 来绑定或控制 TabItem 是否显示关闭按钮。

代码语言：javascript代码运行次数：0运行复制

<UserControl
    x:Class="WPFDevelopers.Samples.ExampleViews.DateRangePickerExample"
    xmlns=";
    xmlns:x=";
    xmlns:controls="clr-namespace:WPFDevelopers.Samples.Controls"
    xmlns:d=";
    xmlns:local="clr-namespace:WPFDevelopers.Samples.ExampleViews"
    xmlns:mc=";
    xmlns:wd=";
    d:DesignHeight="450"
    d:DesignWidth="800"
    mc:Ignorable="d">
       <UniformGrid
    Margin="0,10"
    Columns="2"
    Rows="2">
    <TabControl Margin="4" wd:ElementHelper.CornerRadius="">
        <TabItem Padding="10" Header="TabItem1">
            <Rectangle Fill="{DynamicResource WD.DangerSolidColorBrush}" />
        </TabItem>
        <TabItem
            Padding="10"
            wd:ElementHelper.IsClear="True"
            Header="TabItem2">
            <Rectangle Fill="{DynamicResource WD.InfoSolidColorBrush}" />
        </TabItem>
        <TabItem
            Padding="10"
            wd:ElementHelper.IsClear="True"
            Header="TabItem">
            <Rectangle Fill="{DynamicResource WD.WarningSolidColorBrush}" />
        </TabItem>
    </TabControl>
    <TabControl Margin="4" TabStripPlacement="Bottom">
        <TabItem
            Padding="10"
            wd:ElementHelper.IsClear="True"
            Header="1">
            <Rectangle Fill="{DynamicResource WD.InfoSolidColorBrush}" />
        </TabItem>
        <TabItem
            x:ame="MyTabItem"
            MaxWidth="120"
            Padding="10"
            wd:ElementHelper.IsClear="True"
            Header="TabItem2LongLongLongLongLongLongLongLong"
            ToolTip="{Binding Elementame=MyTabItem, Path=Header}">
            <Rectangle Fill="{DynamicResource WD.DangerSolidColorBrush}" />
        </TabItem>
        <TabItem
            MaxWidth="120"
            Padding="10"
            wd:ElementHelper.IsClear="True">
            <TabItem.Header>
                <TextBlock
                    VerticalAlignment="Center"
                    Text="TabItemLongLongLongLongLongLongLongLong"
                    TextTrimming="CharacterEllipsis"
                    TextWrapping="oWrap"
                    ToolTip="{Binding Text, RelativeSource={RelativeSource Self}}" />
            </TabItem.Header>
            <Rectangle Fill="{DynamicResource WD.WarningSolidColorBrush}" />
        </TabItem>
    </TabControl>
    <TabControl Margin="4" TabStripPlacement="Left">
        <TabItem
            Padding="10"
            wd:ElementHelper.IsClear="True"
            Header="TabItem1">
            <Rectangle Fill="{DynamicResource WD.WarningSolidColorBrush}" />
        </TabItem>
        <TabItem
            Padding="10"
            wd:ElementHelper.IsClear="True"
            Header="TabItem2">
            <Rectangle Fill="{DynamicResource WD.InfoSolidColorBrush}" />
        </TabItem>
        <TabItem
            Padding="10"
            wd:ElementHelper.IsClear="True"
            Header="TabItem">
            <Rectangle Fill="{DynamicResource WD.DangerSolidColorBrush}" />
        </TabItem>
    </TabControl>
    <TabControl
        Margin="4"
        IsEnabled="False"
        TabStripPlacement="Right">
        <TabItem
            Padding="10"
            wd:ElementHelper.IsClear="True"
            Header="TabItem1">
            <Rectangle Fill="{DynamicResource WD.SuccessSolidColorBrush}" />
        </TabItem>
        <TabItem
            Padding="10"
            wd:ElementHelper.IsClear="True"
            Header="TabItem2">
            <Rectangle Fill="{DynamicResource WD.InfoSolidColorBrush}" />
        </TabItem>
        <TabItem
            Padding="10"
            wd:ElementHelper.IsClear="True"
            Header="TabItem">
            <Rectangle Fill="{DynamicResource WD.WarningSolidColorBrush}" />
        </TabItem>
    </TabControl>
</UniformGrid>
</UserControl>

GitHub 源码地址[]

Gitee 源码地址[4]

参考资料

[1]

原文链接:

[2]

码云链接:

[]

GitHub 源码地址: .Shared/Styles/Styles.TabControl.xaml

[4]

Gitee 源码地址: .Shared/Styles/Styles.TabControl.xaml

本文参与腾讯云自媒体同步曝光计划，分享自。原始发表：2025-01-15，如有侵权请联系 cloudcommunity@tencent 删除paddingtabcontrol事件源码header

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/biancheng/1176226.html

本站网友苏大姐	16分钟前发表
Type ItemsControl}}}" ContentSource="Header" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /> <!-- 关闭按钮 --> <Button x
本站网友化肥行情	5分钟前发表
通过 tabControl.Items.Remove(tabItem) 从 TabControl 中移除当前的 TabItem
本站网友虚拟系统	26分钟前发表
SmallPanel Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Background="{TemplateBinding Background}"> <Border x
本站网友田慧宇	1分钟前发表
通过 tabControl.Items.Remove(tabItem) 从 TabControl 中移除当前的 TabItem
本站网友南方批八字注册机	13分钟前发表
ElementHelper.IsClear="True" Header="TabItem2"> <Rectangle Fill="{DynamicResource WD.InfoSolidColorBrush}" /> </TabItem> <TabItem Padding="10" wd
本站网友悬崖勒马	20分钟前发表
1. 定义 TabItem 样式通过 XAML 中的样式为 TabItem 设置外观
本站网友工程机械贷款	16分钟前发表
Path=Header}"> <Rectangle Fill="{DynamicResource WD.DangerSolidColorBrush}" /> </TabItem> <TabItem MaxWidth="120" Padding="10" wd
本站网友昆布是什么	5分钟前发表
最后
本站网友西安联合学院贴吧	14分钟前发表
ElementHelper.CornerRadius=""> <TabItem Padding="10" Header="TabItem1"> <Rectangle Fill="{DynamicResource WD.DangerSolidColorBrush}" /> </TabItem> <TabItem Padding="10" wd
本站网友霍曼迪	25分钟前发表
ElementHelper.CornerRadius=""> <TabItem Padding="10" Header="TabItem1"> <Rectangle Fill="{DynamicResource WD.DangerSolidColorBrush}" /> </TabItem> <TabItem Padding="10" wd
本站网友北京宠物市场	4分钟前发表
Key="WD.BaseTAndBTabItem" BasedOn="{StaticResource WD.ControlBasicStyle}" TargetType="{x
本站网友远红外	23分钟前发表
Path=Header}"> <Rectangle Fill="{DynamicResource WD.DangerSolidColorBrush}" /> </TabItem> <TabItem MaxWidth="120" Padding="10" wd
本站网友慈溪市卫生局	23分钟前发表
RoutedEventArgs e) { if (sender is Button button) { if (button.TemplatedParent is TabItem tabItem) { var tabControl = tabItem.Parent as TabControl; if (tabControl != null) tabControl.Items.Remove(tabItem); } } } XAML 示例示例引入 WPFDevelopers 的 uget 正式包可以使用附加属性 helpers

一招搞定！轻松优雅地关闭 TabControl 的 Tab 页