介绍
有这样一个需求,当用户双击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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- 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>
复制代码 许可证
本文以及示例代码文件遵循The Code Project Open License(CPOL)。
源码下载
英文链接:Header Editable Tab Control in Wpf |