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>

 

posted @ 2022-03-27 11:12  只吃肉不喝酒  阅读(1524)  评论(0)  编辑  收藏  举报