WPF 自定义一个可以编辑的TextBlock控件,仿照Excel的单元格样式
先看效果
控件代码
1 [TemplatePart(Name = "Part_DisplayTextBlock", Type = typeof(TextBlock))] 2 [TemplatePart(Name = "Part_EditTextBox", Type = typeof(TextBox))] 3 public class EditableTextBlock : Control 4 { 5 // Using a DependencyProperty as the backing store for Text. This enables animation, styling, binding, etc... 6 public static readonly DependencyProperty TextProperty = 7 DependencyProperty.Register("Text", typeof(string), typeof(EditableTextBlock), new FrameworkPropertyMetadata(default)); 8 9 static EditableTextBlock() 10 { 11 DefaultStyleKeyProperty.OverrideMetadata(typeof(EditableTextBlock), new FrameworkPropertyMetadata(typeof(EditableTextBlock))); 12 } 13 14 public string Text 15 { 16 get { return (string)GetValue(TextProperty); } 17 set { SetValue(TextProperty, value); } 18 } 19 20 public override void OnApplyTemplate() 21 { 22 base.OnApplyTemplate(); 23 24 var textBlock = GetTemplateChild("Part_DisplayTextBlock") as TextBlock; 25 var textBox = GetTemplateChild("Part_EditTextBox") as TextBox; 26 if (textBox == null || textBlock == null) 27 { 28 return; 29 } 30 //启动的时候设置TextBlock可见,textBox隐藏 31 textBlock.Visibility = Visibility.Visible; 32 textBox.Visibility = Visibility.Collapsed; 33 //给控件的鼠标双击事件挂载一个方法 34 MouseDoubleClick += (s, e) => 35 { 36 textBlock.Visibility = Visibility.Collapsed; 37 textBox.Visibility = Visibility.Visible; 38 textBox.Focus();//使TextBox获得焦点 39 }; 40 //给控件的失去焦点事件挂载一个方法 41 LostFocus += (s, e) => 42 { 43 textBox.Visibility = Visibility.Collapsed; 44 textBlock.Visibility = Visibility.Visible; 45 }; 46 ////给控件的鼠标离开事件挂载一个方法,这个好像不怎么好 47 //MouseLeave += (s, e) => 48 //{ 49 // textBox.Visibility = Visibility.Collapsed; 50 // textBlock.Visibility = Visibility.Visible; 51 52 //}; 53 } 54 }
样式代码
1 <Style TargetType="{x:Type local:EditableTextBlock}"> 2 <Setter Property="Template"> 3 <Setter.Value> 4 <ControlTemplate TargetType="{x:Type local:EditableTextBlock}"> 5 <Grid Width="{TemplateBinding Width}"> 6 <TextBlock 7 x:Name="Part_DisplayTextBlock" 8 HorizontalAlignment="{TemplateBinding HorizontalAlignment}" 9 VerticalAlignment="{TemplateBinding VerticalAlignment}" 10 Text="{TemplateBinding Text}" /> 11 <TextBox 12 x:Name="Part_EditTextBox" 13 HorizontalAlignment="{TemplateBinding HorizontalAlignment}" 14 VerticalAlignment="{TemplateBinding VerticalAlignment}" 15 Text="{TemplateBinding Text}" /> 16 </Grid> 17 </ControlTemplate> 18 </Setter.Value> 19 </Setter> 20 </Style>
界面
1 <Window 2 x:Class="MvvmToolkit学习.MainWindow" 3 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 4 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 5 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 6 xmlns:local="clr-namespace:MvvmToolkit学习" 7 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 8 Title="MainWindow" 9 Width="800" 10 Height="600" 11 d:DataContext="{d:DesignInstance Type=local:TestViewModel}" 12 mc:Ignorable="d"> 13 <Window.Resources> 14 <Style TargetType="local:EditableTextBlock"> 15 <Setter Property="VerticalAlignment" Value="Center" /> 16 <Setter Property="HorizontalAlignment" Value="Center" /> 17 <Setter Property="Height" Value="50" /> 18 <Setter Property="Width" Value="200" /> 19 <Setter Property="FontSize" Value="25" /> 20 </Style> 21 </Window.Resources> 22 <Grid> 23 <StackPanel HorizontalAlignment="Center" Orientation="Vertical"> 24 <Grid ShowGridLines="True"> 25 <Grid.RowDefinitions> 26 <RowDefinition Height="*" /> 27 <RowDefinition Height="*" /> 28 <RowDefinition Height="*" /> 29 </Grid.RowDefinitions> 30 <Grid.ColumnDefinitions> 31 <ColumnDefinition Width="*" /> 32 <ColumnDefinition Width="*" /> 33 </Grid.ColumnDefinitions> 34 <local:EditableTextBlock 35 Grid.Row="0" 36 Grid.Column="0" 37 Text="AAAA" /> 38 <local:EditableTextBlock 39 Grid.Row="0" 40 Grid.Column="1" 41 Text="AAAA" /> 42 <local:EditableTextBlock 43 Grid.Row="1" 44 Grid.Column="0" 45 Text="AAAA" /> 46 <local:EditableTextBlock 47 Grid.Row="1" 48 Grid.Column="1" 49 Text="AAAA" /> 50 <local:EditableTextBlock 51 Grid.Row="2" 52 Grid.Column="0" 53 Text="AAAA" /> 54 <local:EditableTextBlock 55 Grid.Row="2" 56 Grid.Column="1" 57 Text="AAAA" /> 58 </Grid> 59 <TextBox Text="BBB" /> 60 61 </StackPanel> 62 </Grid> 63 </Window>