彩票走势图

WPF下可编辑Header的Tab控件实现

转帖|其它|编辑:郝浩|2010-12-31 11:49:22.000|阅读 806 次

概述:有这样一个需求,当用户双击Tab控件Header区域时, 希望可以直接编辑。对于WPF控件,提供一个ControlTemplate在加上一些Trigger就可以实现。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

  有这样一个需求,当用户双击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="//schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="//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>

 


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:网络转载

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP