WPF下可编辑Header的Tab控件实现
介绍
有这样一个需求,当用户双击Tab控件Header区域时, 希望可以直接编辑。对于WPF控件,提供一个ControlTemplate在加上一些Trigger就可以实现。效果如下:
代码
首先,我们需要给Tab Header设计一个ControlTemplate。类似一个TextBlock,双击进入编辑状态。 所以Xaml如下:
< Setter Property="Template"> < Setter.Value > < ControlTemplate TargetType="{x:Type local:EditableTabHeaderControl}"> < Grid > < TextBox x:Name="PART_TabHeader" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content, Mode=TwoWay}" Visibility="Collapsed"/> < TextBlock x:Name="PART_TextBlock" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content, Mode=TwoWay}"/> </ Grid > < ControlTemplate.Triggers > < Trigger Property="IsInEditMode" Value="True"> < Trigger.Setters > < Setter TargetName="PART_TabHeader" Property="Visibility" Value="Visible"/> < Setter TargetName="PART_TextBlock" Property="Visibility" Value="Collapsed"/> </ Trigger.Setters > </ Trigger > </ ControlTemplate.Triggers > </ ControlTemplate > </ Setter.Value > </ Setter > |
接下来,我们需要定义个“EditableTabHeaderControl”类,它具有控制TextBox和TextBlock的能力。如下:
namespace EditableTabHeaderDemo { using System; using System.Windows; using System.Windows.Controls; using System.Windows.Input; using System.Windows.Threading; /// <summary> /// Header Editable TabItem /// </summary> [TemplatePart(Name = "PART_TabHeader" , Type = typeof (TextBox))] public class EditableTabHeaderControl : ContentControl { /// <summary> /// Dependency property to bind EditMode with XAML Trigger /// </summary> private static readonly DependencyProperty IsInEditModeProperty = DependencyProperty.Register( "IsInEditMode" , typeof ( bool ), typeof (EditableTabHeaderControl)); private TextBox textBox; private string oldText; private DispatcherTimer timer; private delegate void FocusTextBox(); /// <summary> /// Gets or sets a value indicating whether this instance is in edit mode. /// </summary> public bool IsInEditMode { get { return ( bool ) this .GetValue(IsInEditModeProperty); } set { if ( string .IsNullOrEmpty( this .textBox.Text)) { this .textBox.Text = this .oldText; } this .oldText = this .textBox.Text; this .SetValue(IsInEditModeProperty, value); } } /// <summary> /// When overridden in a derived class, is invoked whenever application code or internal processes call <see cref="M:System.Windows.FrameworkElement.ApplyTemplate"/>. /// </summary> public override void OnApplyTemplate() { base .OnApplyTemplate(); this .textBox = this .Template.FindName( "PART_TabHeader" , this ) as TextBox; if ( this .textBox != null ) { this .timer = new DispatcherTimer(); this .timer.Tick += TimerTick; this .timer.Interval = TimeSpan.FromMilliseconds(1); this .LostFocus += TextBoxLostFocus; this .textBox.KeyDown += TextBoxKeyDown; this .MouseDoubleClick += EditableTabHeaderControlMouseDoubleClick; } } /// <summary> /// Sets the IsInEdit mode. /// </summary> /// <param name="value">if set to <c>true</c> [value].</param> public void SetEditMode( bool value) { this .IsInEditMode = value; this .timer.Start(); } private void TimerTick( object sender, EventArgs e) { this .timer.Stop(); this .MoveTextBoxInFocus(); } private void MoveTextBoxInFocus() { if ( this .textBox.CheckAccess()) { if (! string .IsNullOrEmpty( this .textBox.Text)) { this .textBox.CaretIndex = 0; this .textBox.Focus(); } } else { this .textBox.Dispatcher.BeginInvoke(DispatcherPriority.Render, new FocusTextBox( this .MoveTextBoxInFocus)); } } private void TextBoxKeyDown( object sender, KeyEventArgs e) { if (e.Key == Key.Escape) { this .textBox.Text = oldText; this .IsInEditMode = false ; } else if (e.Key == Key.Enter) { this .IsInEditMode = false ; } } private void TextBoxLostFocus( object sender, RoutedEventArgs e) { this .IsInEditMode = false ; } private void EditableTabHeaderControlMouseDoubleClick( object sender, MouseButtonEventArgs e) { if (e.LeftButton == MouseButtonState.Pressed) { this .SetEditMode( true ); } } } } |
这里有一个问题,当控件进入编辑状态,TextBox变为可见状态时,它不能自动获得focus。一种解决办法是挂一个Timer,每1毫秒轮询一次,检查状态并控制focus。
现在就来添加一个WPF TabControl,并应用ItemContainerStyle。然后双击Header,可以编辑啦~
< Window x:Class="EditableTabHeaderDemo.MainWindow" xmlns:local="clr-namespace:EditableTabHeaderDemo" Title="EditableTabHeaderDemo" Height="300" Width="500"> < Window.Resources > < Style x:Key="EditableTabHeaderControl" TargetType="{x:Type local:EditableTabHeaderControl}"> <!-- The template specified earlier will come here !--> </ Style > < Style x:Key="ItemContainerStyle" TargetType="TabItem"> < Setter Property="HeaderTemplate"> < Setter.Value > < DataTemplate > < local:EditableTabHeaderControl Style="{StaticResource EditableTabHeaderControl}"> < local:EditableTabHeaderControl.Content > < Binding Path="Name" Mode="TwoWay"/> </ local:EditableTabHeaderControl.Content > </ local:EditableTabHeaderControl > </ DataTemplate > </ Setter.Value > </ Setter > </ Style > < DataTemplate x:Key="ContentTemplate"> < Grid > < TextBlock HorizontalAlignment="Left" Text="{Binding Name}"/> < TextBlock HorizontalAlignment="Center" Text="{Binding City}"/> </ Grid > </ DataTemplate > </ Window.Resources > < Grid > < TabControl Grid.Row="0" ItemsSource="{Binding Data}" ItemContainerStyle="{StaticResource ItemContainerStyle}" ContentTemplate="{StaticResource ContentTemplate}" /> </ Grid > </ Window > |
开发工具
ComponentOne Studio WPF 是专为桌面应用程序开发所准备的一整套控件包,崇尚优雅和创新,以“触控优先”为设计理念,内含轻量级高性能表格控件,和大量类型丰富的2D和3D图表控件,能使开发的应用程序更富创意。
许可证
本文以及示例代码文件遵循The Code Project Open License(CPOL)。
源码下载
英文链接:Header Editable Tab Control in Wpf
WPF下可编辑Header的Tab控件实现的更多相关文章
- WPF 程序如何移动焦点到其他控件
原文:WPF 程序如何移动焦点到其他控件 WPF 中可以使用 UIElement.Focus() 将焦点设置到某个特定的控件,也可以使用 TraversalRequest 仅仅移动焦点.本文介绍如何在 ...
- 《Programming WPF》翻译 第5章 7.控件模板
原文:<Programming WPF>翻译 第5章 7.控件模板 如果仔细的看我们当前的TTT游戏,会发现Button对象并没有完全为我们工作.哪些TTT面板有内圆角? 图5-14 这里 ...
- WPF从我炫系列4---装饰控件的用法
这一节的讲解中,我将为大家介绍WPF装饰控件的用法,主要为大家讲解一下几个控件的用法. ScrollViewer滚动条控件 Border边框控件 ViewBox自由缩放控件 1. ScrollView ...
- WPF自定义控件(二)の重写原生控件样式模板
话外篇: 要写一个圆形控件,用Clip,重写模板,去除样式引用圆形图片可以有这三种方式. 开发过程中,我们有时候用WPF原生的控件就能实现自己的需求,但是样式.风格并不能满足我们的需求,那么我们该怎么 ...
- WPF编程,通过KeyFrame 类型制作控件线性动画的一种方法。
原文:WPF编程,通过KeyFrame 类型制作控件线性动画的一种方法. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_43307934/articl ...
- WPF教程002 - 实现Step步骤条控件
原文:WPF教程002 - 实现Step步骤条控件 在网上看到这么一个效果,刚好在用WPF做控件,就想着用WPF来实现一下 1.实现原理 1.1.该控件分为2个模块,类似ComboBox控件分为Ste ...
- WPF中自定义的DataTemplate中的控件,在Window_Loaded事件中加载机制初探
原文:WPF中自定义的DataTemplate中的控件,在Window_Loaded事件中加载机制初探 最近因为项目需要,开始学习如何使用WPF开发桌面程序.使用WPF一段时间之后,感 ...
- [工具推荐]005.Axure RP Pro 7.0模拟C#TAB控件
有一次,主管安排我写一个项目的原型,但是项目中涉及到了Tab控件,在Axure中的控件中找了一番,没有找着Tab控件.那么我们只能换种法子来实现它了,我们用到了Dynamic Panel来模拟. 1. ...
- 扩展easyUI tab控件,添加加载遮罩效果
项目里要用HighChart显示图表,如果返回的数量量太多,生成图表是一个很耗时的过程.tab控件又没有显示遮罩的设置(至少本菜是没有找到), Google了一下,根据另一个兄台写的方法,拿来改造了一 ...
随机推荐
- salesforce零基础学习(八十四)配置篇: 自定义你的home page layout
当我们进入salesforce系统或者切换app后,默认第一个看到的就是home页面.home页面简单的来说可以包括左侧(narrow component)和右侧(wide component)两部分 ...
- reverse函数实现指定页面跳转
需求: 在views中返回的url需要返回到具体的某一篇文章的评论列表 return redirect(reverse('cms_comment_manage',args=(number,))) dj ...
- Python爬虫(二十一)_Selenium与PhantomJS
本章将介绍使用Selenium和PhantomJS两种工具用来加载动态数据,更多内容请参考:Python学习指南 Selenium Selenium是一个Web的自动化测试工具,最初是为网站自动化测试 ...
- Unix:关于一个file在file system和disk中占用空间
參考文献: Harley Hahns:Guide to Unix and Linux. Chap 24 -->首先要有的关键概念:the amount of "disk space&q ...
- POJ 1251 Jungle Roads(最小生成树)
题意 有n个村子 输入n 然后n-1行先输入村子的序号和与该村子相连的村子数t 后面依次输入t组s和tt s为村子序号 tt为与当前村子的距离 求链接全部村子的最短路径 还是裸的最小生成树咯 ...
- 让Android Support V4中的SwipeRefreshLayout支持上拉载入很多其它
前言 原来的Android SDK中并没有下拉刷新组件,可是这个组件确实绝大多数APP必备的一个部件.好在google在v4包中出了一个SwipeRefreshLayout.可是这个组件仅仅支持下拉刷 ...
- [UI列表]LoopScrollRect无限滑动不卡顿
应用场景 对于背包界面,排行榜列表,聊天消息,等有大量的UI列表的界面,常规做法是为每一条数据生成一个格子,在数据量越大的情况下,会生成越来越多的Gameobject,引起卡顿. 这篇文章讲述的就是解 ...
- 【转载】Java 类加载与初始化
原文地址:http://www.cnblogs.com/zhguang/p/3154584.html 目录 类加载器 动态加载 链接 初始化 示例 类加载器 在了解Java的机制之前,需要先了解类在J ...
- 自学Python4.1-文件操作
文件操作 操作文件时,一般需要经历如下步骤: 打开文件 操作文件 关闭文件(非必须) 一.打开文件 open('文件路径', '模式') 打开文件时,需要指定文件路径和以何等方式打开文件,打 ...
- C#winform向Txt文件传值,不重复录入且不清空
private void textLog_TextChanged(object sender, EventArgs e) { FileStream fs = new FileStream(@" ...