WPF自适应可关闭的TabControl 类似浏览器的标签页(转)

效果如图:

虽然说是自适应可关闭的TabControl,但TabControl并不需要改动,不如叫自适应可关闭的TabItem.

大体思路:建一个用户控件,继承自TabItem,里面放个按钮,点击的时候在TabControl中移除自身.在添加,移除TabItem和TabControl尺寸变化时,通过Items的个数计算合适的Width.

新建用户控件

新建用户控件,并继承自TabItem,这样它就拥有TabItem所有的属性和事件.而这个功能不需要自定义依赖属性和事件.它的用法就和TabItem完全一样.

建完后把UserControl换成TabItem,去掉多余部分

后台继承自UserControl改成继承自TabItem

更改样式添加关闭按钮

在Xmal里添加一个自己喜欢的样式,最主要的是在Template里添加一个按钮,注册一个Click事件,用于关闭.

 1 <Style TargetType="{x:Type TabItem}">
 2             <Setter Property="BorderBrush" Value="Black"></Setter>
 3             <Setter Property="Background" Value="White"></Setter>
 4             <Setter Property="Foreground" Value="Black"></Setter>
 5             <Setter Property="Padding" Value="5,0,0,0"></Setter>
 6             <Setter Property="HorizontalAlignment" Value="Left"></Setter>
 7             <Setter Property="VerticalAlignment" Value="Center"></Setter>
 8             <Setter Property="HorizontalContentAlignment" Value="Left"></Setter>
 9             <Setter Property="VerticalContentAlignment" Value="Center"></Setter>
10             <Setter Property="Template">
11                 <Setter.Value>
12                     <ControlTemplate TargetType="{x:Type TabItem}">
13                         <Border CornerRadius="5,0,0,0" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
14                             <Grid>
15                                 <Grid.ColumnDefinitions>
16                                     <ColumnDefinition Width="*"></ColumnDefinition>
17                                     <ColumnDefinition Width="20"></ColumnDefinition>
18                                 </Grid.ColumnDefinitions>
19                                 <ContentPresenter Grid.Column="0" ContentSource="Header" Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"></ContentPresenter>
20                                 <Button Grid.Column="1" Name="btn_Close" Click="btn_Close_Click"></Button>
21                             </Grid>
22                         </Border>
23                         <ControlTemplate.Triggers>
24                             <Trigger Property="IsSelected" Value="true">
25                                 <Setter Property="Background" Value="#FFFF923E"></Setter>
26                                 <Setter Property="Foreground" Value="White"></Setter>
27                             </Trigger>
28                         </ControlTemplate.Triggers>
29                     </ControlTemplate>
30                 </Setter.Value>
31             </Setter>
32         </Style>

后台的逻辑

查找父级TabControl

注意TabItem并不能关闭自身,这里所说的关闭其实是在他父级TabControl的Items集合里移除.而且父级TabControl的尺寸改变时还要注册事件去改变每个Item的Width.所以我决定找到它的父级TabControl,声明一个私有变量添加对父级的引用.

可以通过可视化树的帮助类VisualTreeHelper来找到它的父级TabControl.当然并不是它的父级直接就是TabControl了,需要递归去查找

 1 /// <summary>
 2         /// 递归找父级TabControl
 3         /// </summary>
 4         /// <param name="reference">依赖对象</param>
 5         /// <returns>TabControl</returns>
 6         private TabControl FindParentTabControl(DependencyObject reference)
 7         {
 8             DependencyObject dObj = VisualTreeHelper.GetParent(reference);
 9             if (dObj == null)
10                 return null;
11             if (dObj.GetType() == typeof(TabControl))
12                 return dObj as TabControl;
13             else
14                 return FindParentTabControl(dObj);
15         }

计算尺寸

既然是自适应,总得有一个正常的尺寸,只有空间不足的时候才去缩小每个Item.我想到的最简单的办法就是做个约定,把这个尺寸放到父级TabControl的Tag里,这样可以通过对父级TabControl的引用,轻松拿到这个尺寸.

计算方法就是取父级TabControl运行时的宽度ActualWidth除以约定的尺寸,取整形int,这个就是保持约定宽度item个数的临界值了.

小于等于这个值就用约定宽度,大于这个值就用父级运行宽度除以Items的个数求出平均宽度,然后遍历父级TabControl的Items,都赋上这个平均值.

需要注意的是,如果所有Items的尺寸加起来大于等于父级的尺寸,Items会换行,感觉有点丑啊.所以我取的是父级运行宽度-5做的运算,这样就永远也抵达不到边界,不会换行.

不过也可以改写TabControl的控件模版,把放Hrader的容器换成Stackpanel就不会换行了,我只是觉得上面的方法比较简单.

父级尺寸改变

可以通过TabControl的SizeChanged事件监测到.需要干的事就是重新计算尺寸.

关闭按钮

在父级TabControl的Items集合里移除自身后,注意重新计算下尺寸和移除注册SizeChanged事件的方法.

最后附上代码 自适应可关闭的Tab

这个效果比较常见,可能您已经做过了,有更好的想法希望您能分享出来,大家共同进步

时间: 06-30

WPF自适应可关闭的TabControl 类似浏览器的标签页(转)的相关文章

WPF自适应可关闭的TabControl 类似浏览器的标签页

效果如图: 虽然说是自适应可关闭的TabControl,但TabControl并不需要改动,不如叫自适应可关闭的TabItem. 大体思路:建一个用户控件,继承自TabItem,里面放个按钮,点击的时候在TabControl中移除自身.在添加,移除TabItem和TabControl尺寸变化时,通过Items的个数计算合适的Width. 新建用户控件 新建用户控件,并继承自TabItem,这样它就拥有TabItem所有的属性和事件.而这个功能不需要自定义依赖属性和事件.它的用法就和TabItem

vue单页面条件下添加类似浏览器的标签页切换功能

在用vue开发的时候,单页面应用程序,而又有标签页这种需求,各种方式实现不了, 从这个 到这个,然后再返回上面那个 因为每个标签页的route不一样,导致组件重新渲染的问题,怎么都不知道如何实现......... 简直郁闷到爆炸,后来和同学谈起的时候,说起生命周期这个才恍然大悟, 对于vue的生命周期,因为用的少,本身多用的是created,mounted这两个,都忘记beforeDestroy这些了,然后抓瞎了好久 实现方式是 每次销毁组件之前   缓存数据    能够用到的是 this.$d

给浏览器网页标签页添加图标

很简单的方式,在<head>标签里加入一个<link>标签: <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" /> 给浏览器网页标签页添加图标

在浏览器的标签页显示网站标志图标(或指定图标)的方法

对于不同的浏览器,方法是有差别的1.对于IE或TT浏览器:把需要显示的16x16像素的ICO图标命名为favicon.ICO放置在网站根目录下,浏览器会自动检索2.这大概是所有浏览器通用的在标签页加入指定图标的方法:把favicon.ico图标放到网站根目录下,在网页的<head></head>中加入<link rel="shortcut icon" href="favicon.ico" type="image/x-icon&

zabbix导航栏自定义Label、Zatree在新浏览器新标签页打开的方法

1.  vim $zabbix_PATH/include/menu.inc.php 284行增加以下内容 284         'zatree'=>array( 285         'label' => _('Zatree'), 286         'user_type'                             => USER_TYPE_ZABBIX_USER, 287         'default_page_id'       => 0, 288  

selenium 对浏览器标签页进行关闭和切换

关闭标签页 # 1.关闭浏览器全部标签页 driver.quit() # 2.关闭当前标签页(从标签页A打开新的标签页B,关闭标签页A) driver.close() 切换标签页 from selenium import webdriver browser=webdriver.Firefox() browser.get('xxxxx') # 获取当前窗口句柄(窗口A) handle = browser.current_window_handle # 打开一个新的窗口 browser.find_e

C# WPF可拖拽的TabControl

微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. C# WPF可拖拽的TabControl 阅读导航 本文背景 代码实现 本文参考 源码 1. 本文背景 本文介绍使用第三方开源库 Dragablz 实现可拖拽的 TabControl,本文代码效果图如下: 2. 代码实现 使用 .Net Framework 4.8 创建名为 "TabMenu2" 的WPF模板项目,添加三个Nuget库:MaterialDesignThemes.Ma

js 判断浏览器关闭事件 兼容所有浏览器

无论是从页签处关闭浏览器,还是关闭整个浏览器窗口,无论是 ie11,火狐,谷歌,苹果,还是ie6,都能兼容的浏览器关闭事件监听 在网上搜索了一天,虽然网上也有之类的代码,但是太繁琐,有时候还不可用.我也是在原有基础上修改的.经过了上述的浏览器测试,如果有不兼容的,欢迎提出意见一起学习. ? <script type="text/jscript" src="jquery-1.10.2.min.js"></script> <script t

WPF触控程序开发(三)——类似IPhone相册的反弹效果

用过IPhone的都知道,IPhone相册里,当图片放大到一定程度后,手指一放,会自动缩回,移动图片超出边框后手指一放,图片也会自动缩回,整个过程非常和谐.自然.精确,那么WPF能否做到呢,答案是肯定的. 在没有现成的控件的情况下,只有自己做,你肯定想到做动画,WPF触屏开发提供了相应的功能来获取触控点的一些变化,这些变化的最佳消费者个人认为是Matrix.我们回想下做动画一般怎么做,比如给一个button做个宽度增5的动画,我们一般是定义一个DoubleAnimation,然后定义一个Sotr