StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Refer to the Nathan Wheeler's code snippet, the following codes are complete UserControl source that I coded yesterday. <strong>Especially, Binding issues are addressed.</strong> Nathan's code is easy to follow, but needs some aid in order to work with databound text. </p> <p>ClickToEditTextboxControl.xaml.cs</p> <pre><code>public partial class ClickToEditTextboxControl : UserControl { public ClickToEditTextboxControl() { InitializeComponent(); } public string Text { get { return (string)GetValue(TextProperty); } set { SetValue(TextProperty, value); } } // Using a DependencyProperty as the backing store for Text. This enables animation, styling, binding, etc... public static readonly DependencyProperty TextProperty = DependencyProperty.Register("Text", typeof(string), typeof(ClickToEditTextboxControl), new UIPropertyMetadata()); private void textBoxName_LostFocus(object sender, RoutedEventArgs e) { var txtBlock = (TextBlock)((Grid)((TextBox)sender).Parent).Children[0]; txtBlock.Visibility = Visibility.Visible; ((TextBox)sender).Visibility = Visibility.Collapsed; } private void textBlockName_MouseDown(object sender, MouseButtonEventArgs e) { var grid = ((Grid) ((TextBlock) sender).Parent); var tbx = (TextBox)grid.Children[1]; ((TextBlock)sender).Visibility = Visibility.Collapsed; tbx.Visibility = Visibility.Visible; this.Dispatcher.BeginInvoke((Action)(() => Keyboard.Focus(tbx)), DispatcherPriority.Render); } private void TextBoxKeyDown(object sender, KeyEventArgs e) { if (e == null) return; if (e.Key == Key.Return) { TextBoxLostFocus(sender, null); } } } </code></pre> <p>ClickToEditTextboxControl.xaml</p> <pre><code><UserControl x:Class="Template.ClickToEditTextboxControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" Name="root" d:DesignHeight="30" d:DesignWidth="100"> <Grid> <TextBlock Name="textBlockName" Text="{Binding ElementName=root, Path=Text}" VerticalAlignment="Center" MouseDown="textBlockName_MouseDown" /> <TextBox Name="textBoxName" Text="{Binding ElementName=root, Path=Text, UpdateSourceTrigger=PropertyChanged}" Visibility="Collapsed" LostFocus="textBoxName_LostFocus" KeyDown ="TextBoxKeyDown"/> </Grid> </UserControl> </code></pre> <p>And, finally, you can use this control in the XAML as below:</p> <pre><code><Template1:ClickToEditTextboxControl Text="{Binding Path=Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" MinWidth="40" Height="23" /> </code></pre> <p>Note that <strong>Mode=TwoWay, UpdateSourceTrigger=PropertyChanged</strong> is set. It enables to change the binded value in every type.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload