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

已于 2024-12-19 11:23:45 修改
阅读量1.3k 收藏 6
点赞数 14
CC 4.0 BY-SA版权
文章标签： wpf c# 前端
于 2024-12-19 11:21:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuanchuang123456/article/details/144580934

控件名：TabControl

作   者：WPFDevelopersOrg - 驚鏵

原文链接[1]：https://github.com/WPFDevelopersOrg/WPFDevelopers

码云链接[2]：https://gitee.com/WPFDevelopersOrg/WPFDevelopers

  • 框架支持.NET4 至 .NET8；

  • Visual Studio 2022;

逻辑实现

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

TabItem 逻辑如下

  • 在每个 TabItem 的右侧添加一个关闭按钮。

  • 使用附加属性来控制关闭按钮的显示和隐藏。

1. 定义 TabItem 样式

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

    <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:Name="PART_Border" BorderThickness="{TemplateBinding BorderThickness}" />
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <ContentPresenter x:Name="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:Name="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 WD.NormalButton}"
                                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 TargetName="PART_Border" Property="BorderBrush" Value="{DynamicResource WD.PrimaryNormalSolidColorBrush}" />
                        <Setter Property="Background" Value="{DynamicResource WD.DefaultBackgroundSolidColorBrush}" />
                        <Setter TargetName="PART_ContentPresenter" Property="TextElement.Foreground" Value="{DynamicResource WD.PrimaryNormalSolidColorBrush}" />
                    </Trigger>
                    <!-- 鼠标悬停状态触发器 -->
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="PART_ContentPresenter" Property="TextElement.Foreground" Value="{DynamicResource WD.PrimaryNormalSolidColorBrush}" />
                    </Trigger>
                    <!-- 控制是否显示关闭按钮的触发器 -->
                    <Trigger Property="helpers:ElementHelper.IsClear" Value="True">
                        <Setter TargetName="PART_CloseButton" Property="Visibility" Value="Visible" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
    2. 使用附加属性来控制关闭按钮

    1. 定义附加属性 IsClear

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

  • 判断 IsClear 的新值 e.NewValue 是否为 true（按钮是否应当具有关闭功能）。

  • 如果 true，则为 Button 添加 Click 事件处理器 ButtonClear_Click，即点击该按钮时将触发关闭功能。

  • 如果 false，则移除 Click 事件处理器，按钮不再响应点击事件。

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

 3.ButtonClear_Click 事件处理器

  • 首先，检查 sender 是否是 Button 类型。

  • 然后，通过 button.TemplatedParent 获取按钮的模板父元素，通常在这里是 TabItem。

  • 接下来，获取 TabItem 的父控件，应该是 TabControl。如果 tabControl 不为 null，表示按钮点击事件有效。

  • 最后，通过 tabControl.Items.Remove(tabItem) 从 TabControl 中移除当前的 TabItem，即实现了关闭 TabItem 页的功能。

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 的 Nuget 正式包

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

<UserControl
    x:Class="WPFDevelopers.Samples.ExampleViews.DateRangePickerExample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="clr-namespace:WPFDevelopers.Samples.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:WPFDevelopers.Samples.ExampleViews"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:wd="https://github.com/WPFDevelopersOrg/WPFDevelopers"
    d:DesignHeight="450"
    d:DesignWidth="800"
    mc:Ignorable="d">
       <UniformGrid
    Margin="0,10"
    Columns="2"
    Rows="2">
    <TabControl Margin="4" wd:ElementHelper.CornerRadius="3">
        <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="TabItem3">
            <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:Name="MyTabItem"
            MaxWidth="120"
            Padding="10"
            wd:ElementHelper.IsClear="True"
            Header="TabItem2LongLongLongLongLongLongLongLong"
            ToolTip="{Binding ElementName=MyTabItem, Path=Header}">
            <Rectangle Fill="{DynamicResource WD.DangerSolidColorBrush}" />
        </TabItem>
        <TabItem
            MaxWidth="120"
            Padding="10"
            wd:ElementHelper.IsClear="True">
            <TabItem.Header>
                <TextBlock
                    VerticalAlignment="Center"
                    Text="TabItem3LongLongLongLongLongLongLongLong"
                    TextTrimming="CharacterEllipsis"
                    TextWrapping="NoWrap"
                    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="TabItem3">
            <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="TabItem3">
            <Rectangle Fill="{DynamicResource WD.WarningSolidColorBrush}" />
        </TabItem>
    </TabControl>
</UniformGrid>
</UserControl>

 

GitHub 源码地址[3]

Gitee 源码地址[4]

参考资料

[1]原文链接: https://github.com/WPFDevelopersOrg/WPFDevelopers

[2]码云链接: https://gitee.com/WPFDevelopersOrg/WPFDevelopers

[3]GitHub 源码地址: https://github.com/WPFDevelopersOrg/WPFDevelopers/blob/master/src/WPFDevelopers.Shared/Styles/Styles.TabControl.xaml

[4]Gitee 源码地址: https://gitee.com/WPFDevelopersOrg/WPFDevelopers/blob/master/src/WPFDevelopers.Shared/Styles/Styles.TabControl.xaml

WPF TabControl 带关闭按钮
05-12
WPF 的TabControl样式定制，类似VS风格，带关闭按钮，无需继承控件，仅在样式中附加行为，最简单的TabControl关闭按钮实现方式。
WPF Prism 可关闭的TabControl
08-10
在这个方法中，我们可以将`CloseableTabItem`的`IsClosable`属性与一个适当的命令绑定，使得用户可以通过点击右上角的“关闭”按钮来关闭当前Tab页。 为了实现依赖注入，我们需要配置Prism的容器，如Unity或Autofac...
WPF自适应可关闭的TabControl 类似浏览器的标签页
weixin_30800987的博客
06-28 558
效果如图: 虽然说是自适应可关闭的TabControl,但TabControl并不需要改动,不如叫自适应可关闭的TabItem. 大体思路:建一个用户控件,继承自TabItem,里面放个按钮,点击的时候在TabControl中移除自身.在添加,移除TabItem和TabControl尺寸变化时,通过Items的个数计算合适的Width. 新建用户控件 新建用户控件,并继承自Tab...
C# WinForm TabControl控件美化与扩展技术详解
最新发布
weixin_42613017的博客
06-10 1435
TabControl是一个常用的界面元素，用于在用户界面中切换显示不同的页面或数据。它使用户能够通过点击不同的标签页（Tab）来切换视图，从而在一个窗口内展示多个内容区域。在.NET Framework、WinForms、WPF等技术栈中，TabControl控件扮演着提高界面整洁性和用户体验的重要角色。在用户界面中，Tab按钮是引导用户浏览不同页面的关键元素。它不仅仅是一个简单的链接，更是一种视觉和交互的焦点。
TabControl控件的加入关闭按钮
weixin_40029679的博客
09-19 1527
首先需要将 绘制模式修改成 自定义模式 只有DrawMode等于OwnerDrawFixed时，才会在绘制选项卡时发生DrawItem事件 tabControl1.DrawMode = TabDrawMode.OwnerDrawFixed; 注册事件 const int CLOSE_SIZE = 12;// 定义范围大小 private void tabControl1_DrawItem(object sender, DrawItemEventArgs e)//DrawItem事件 {
Winform -----TabControl 标签 画关闭按钮
fishernemo的专栏
10-21 6420
<br />            this.tabControl.MouseDown += new MouseEventHandler(tabControl_MouseDown);<br />             this.tabControl.DrawItem += new DrawItemEventHandler(tabControl_DrawItem);<br /><br /> <br />private void tabControl_DrawItem(object sender, Draw
TabControl控件每一个Item加一个关闭按钮
weixin_40029679的博客
11-24 1478
TabControl_tabcontrol_Tabú_wpfTabControl_wpf代码tabcontrol_
10-04
在Windows Presentation Foundation (WPF) 中，`TabControl` 是一个常用的UI控件，它允许用户通过标签页的形式来组织和切换不同的内容区域。这个压缩包提供的资源是一个关于`TabControl`的源代码示例，适用于初学者...
tabcontrol_demo.rar_Tab 颜色_tab_tab c++_tabcontrol_demo_tab控件
09-23
在Windows编程领域，Tab控件（TabControl）是一种常见的用户界面元素，它允许用户在多个页面或选项卡之间切换，以展示不同的内容。本示例"tabcontrol_demo.rar"提供了关于如何在C++环境下使用Tab控件的实践演示，...
tabcontrol_demo.zip_tab control_tab 控件_tabcontrol_标签_标签控件
09-21
在Windows编程领域，`TabControl`是一个非常常见的控件，它允许用户通过点击不同的标签来切换显示不同的内容区域。本项目中的"tabcontrol_demo.zip"是一个关于`TabControl`使用的示例，帮助开发者理解如何自定义和...
可以关闭的 TabControl
12-03
改写的 TabControl 实现了热点选择 鼠标移动到关闭区域 高亮光标按钮 Hovers上时高亮显示标签，其他标签无关闭按钮
TabControl控件带关闭按钮和多种样式
08-10
有多种样式和关闭按钮的TabControl的例程，通过自定义用户控件的方式实现，可以编译为Dll控件进行调用
带关闭按钮的TabControl控件(
03-26
选项卡，控件上面带关闭的 其实都是用从绘方式画上去的 然后监测点击位置 如果在右上的X关闭的区域就关闭了 以前写的演示，不过没什么用了现在流行双击关闭选项卡简单还 private void TabDraw_Load(object sender, System.EventArgs e) { //设置若干属性 tabControl1.DrawMode = TabDrawMode.OwnerDrawFixed; tabControl1.Padding = new System.Drawing.Point(CLOSE
C#TabControl添加关闭功能
11-30
C#TabControl添加关闭功能，很简单，可扩展。
带关闭按钮可自定义样式的wpf tabcontrol控件
03-13
带关闭按钮可自定义样式的wpf tabcontrol控件，前景样式，背景样式都可以设定，打开的tab超过控件宽度后有左右箭头按钮可以左右滑动，使用非常方便，适合初学者参考和学习。
WPF tab宽度自适应 可关闭
01-09
然而，WPF 的默认`TabControl`并未提供关闭按钮功能，这使得开发者需要自定义样式和行为来实现这一功能。同时，为了使选项卡的宽度能够自动适应内容，也需要进行特定的设置。以下将详细讲解如何实现“WPF TabControl...
TabControl添加关闭按钮
weixin_30439067的博客
01-05 132
TabControl添加关闭按钮 2012-03-28 16:09:13|分类： 默认分类 |字号订阅 this.MainTabControl.DrawItem += new DrawItemEventHandler(this.tabControl2_DrawItem);this.MainTabControl.MouseDown += new Sy...
Pluto.WPF.Controls-可关闭TabControl
nightingale1985的博客
03-01 558
WPF控件，可关闭的TabControl
自定义TabControl标签页：添加关闭按钮与图片
在TabControl中为每个Tab添加一个关闭按钮，能够让用户根据需要关闭不需要的标签页，提高用户体验。下面是实现该功能的步骤和关键代码： #### 步骤： - 在TabControl控件上添加一个事件处理器，用于响应TabPages的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

创可贴治愈心灵

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值