使用 WPF 我正在尝试生成一个 TextBlock,它在双击后“转换”为准备编辑的 TextBox。之后,Enter 键、Esc 键或失去焦点会导致编辑结束,并且 TextBox 会恢复为 TextBlock。
我找到的解决方案主要是有效的。我的问题是我无法将 TextBox 集中在“转换”上,从而迫使用户再次显式单击元素以使其集中并开始编辑。
代码说明
我选择实现此行为的方式是使用模板和样式的 DataTriggers 来更改元素的模板。在我展示的示例中,该元素是一个简单的 ContentControl,尽管我尝试执行此操作的实际用例稍微复杂一些(我有一个 ListBox,其中每个元素都可以通过此行为进行编辑,一次一个)。
思路如下:
- ContentControl 具有关联的样式
- 关联的 Style 将 ContentTemplate 定义为 TextBlock。
- 模型对象有一个属性 InEditing,当我想编辑控件时它变为 true
- 通过 TextBlock 上的 MouseBinding,我将模型的 InEditing 属性设置为 True
- Style 有一个监听 InEditing 的 DataTrigger,在这种情况下将 ContentTemplate 设置为 TextBox
- 通过 EventSetters,我捕获了 Enter、Esc 和 LostFocus,以便恢复保存更改并恢复到以前的样式。请注意:我不能直接将事件附加到文本框,否则我会得到一个无法在样式中的目标标记上指定的事件。请改用 EventSetter。
虽然不是最佳的(视图和模型行为有一定的混合 - 特别是在 InEditing 属性中 - 我不喜欢通过 KeyDown 和 LostFocus 的各种处理程序从本质上重新实现对 TextBox 模型的更改的提交逻辑),系统实际上可以正常工作。
失败的实现思路
起初我想连接到 TextBox 的 IsVisibleChanged 事件,并将焦点设置在那里。不能这样做,因为前面提到的无法在 Style 中的 Target 标签上指定事件。请改用 EventSetter。
错误提示的解决方案无法使用,因为此类事件不是路由事件,因此无法在 EventSetter 中使用。
编码
代码分为四个文件。
模型.cs:
using System.Windows;
namespace LeFocus
{
public class Model: DependencyObject
{
public bool InEditing
{
get { return (bool)GetValue(InEditingProperty); }
set { SetValue(InEditingProperty, value); }
}
// Using a DependencyProperty as the backing store for InEditing. This enables animation, styling, binding, etc...
public static readonly DependencyProperty InEditingProperty =
DependencyProperty.Register("InEditing", typeof(bool), typeof(Model), new UIPropertyMetadata(false));
public string Name
{
get { return (string)GetValue(NameProperty); }
set { SetValue(NameProperty, value); }
}
// Using a DependencyProperty as the backing store for Name. This enables animation, styling, binding, etc...
public static readonly DependencyProperty NameProperty =
DependencyProperty.Register("Name", typeof(string), typeof(Model), new UIPropertyMetadata("Hello!"));
}
}
应用程序.xaml:
<Application x:Class="LeFocus.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:lefocus="clr-namespace:LeFocus"
StartupUri="MainWindow.xaml">
<Application.Resources>
<lefocus:Model x:Key="Model"/>
</Application.Resources>
</Application>
MainWindow.xaml:
<Window x:Class="LeFocus.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:lefocus="clr-namespace:LeFocus"
Title="MainWindow" Height="350" Width="525"
DataContext="{Binding Source={StaticResource Model}}"
Name="mainWindow">
<Window.Resources>
<Style x:Key="SwitchingStyle"
TargetType="{x:Type ContentControl}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate DataType="{x:Type lefocus:Model}">
<TextBlock Text="{Binding Path=Name}">
<TextBlock.InputBindings>
<MouseBinding MouseAction="LeftDoubleClick"
Command="lefocus:MainWindow.EditName"
CommandParameter="{Binding}"/>
</TextBlock.InputBindings>
</TextBlock>
</DataTemplate>
</Setter.Value>
</Setter>
<EventSetter Event="TextBox.KeyDown" Handler="TextBox_KeyDown"/>
<EventSetter Event="TextBox.LostFocus" Handler="TextBox_LostFocus"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=InEditing}" Value="True">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate DataType="{x:Type lefocus:Model}">
<TextBox Text="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=lefocus:MainWindow, AncestorLevel=1}, Path=NameInEditing, UpdateSourceTrigger=PropertyChanged}" TextChanged="TextBox_TextChanged" KeyDown="TextBox_KeyDown_1" />
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Window.CommandBindings>
<CommandBinding Command="lefocus:MainWindow.EditName" Executed="setInEditing"/>
</Window.CommandBindings>
<Grid>
<ContentControl Style="{StaticResource SwitchingStyle}" Content="{Binding}"/>
</Grid>
</Window>
主窗口.xaml.cs
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
namespace LeFocus
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
public string NameInEditing
{
get { return (string)GetValue(NameInEditingProperty); }
set { SetValue(NameInEditingProperty, value); }
}
// Using a DependencyProperty as the backing store for NameInEditing. This enables animation, styling, binding, etc...
public static readonly DependencyProperty NameInEditingProperty =
DependencyProperty.Register("NameInEditing", typeof(string), typeof(MainWindow), new UIPropertyMetadata(null));
public static readonly RoutedUICommand EditName =
new RoutedUICommand("EditName", "EditName", typeof(MainWindow));
private void setInEditing(object sender, ExecutedRoutedEventArgs e)
{
var model = ((Model)e.Parameter);
NameInEditing = model.Name;
model.InEditing = true;
}
private void TextBox_KeyDown(object sender, KeyEventArgs e)
{
if (e.Key == Key.Enter)
{
var model = getModelFromSender(sender);
model.Name = NameInEditing;
NameInEditing = null;
model.InEditing = false;
}
else if (e.Key == Key.Escape)
{
var model = getModelFromSender(sender);
model.InEditing = false;
}
}
private void TextBox_LostFocus(object sender, RoutedEventArgs e)
{
var model = getModelFromSender(sender);
model.Name = NameInEditing;
NameInEditing = null;
model.InEditing = false;
}
private static Model getModelFromSender(object sender)
{
var contentControl = (ContentControl)sender;
var model = (Model)contentControl.DataContext;
return model;
}
}
}