WPF tag for TextBox

Question

What is the best practice for displaying a text label (like "Name") using a TextBox in WPF? I want the TextBox and many similar Labels / TextBoxes to be "Name". Should I put Label / TextBox pairs in a vertical StackPanel?

Is there a simpler solution?

Answer 1

Actually, it depends on what you want to do with these controls in the future. If you want to reuse this type of control several times (and possibly create it on the fly), it would be better to create a UserControl and program it. Then you can easily use it very simply (for example, insert it into a StackPanel).

Code for LabelTextBox.xaml

<UserControl x:Class="YourProject.LabelTextBox" 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" d:DesignHeight="49" d:DesignWidth="314" MinHeight="49" MaxHeight="49"> <Grid> <Label Content="Label" Height="28" HorizontalAlignment="Left" Name="BaseLabel" VerticalAlignment="Top" /> <TextBox Height="23" Margin="0,26,0,0" Name="BaseTextBox" VerticalAlignment="Top" /> </Grid> </UserControl> 

Code for LabelTextBox.xaml.cs

 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace YourProject { /// <summary> /// Interaction logic for LabelTextBox.xaml /// </summary> public partial class LabelTextBox : UserControl { public LabelTextBox() { InitializeComponent(); } string LocalLabel = ""; string LocalTextBox = ""; public string Label { get { return LocalLabel; } set { LocalLabel = value; BaseLabel.Content = value; } } public string TextBox { get { return LocalTextBox; } set { LocalTextBox = value; BaseTextBox.Text = value; } } } } 

You can change the label text and the contents of the TextBox using the Label and TextBox properties of the new control (hidden in the "Other" part of the properties in the designer. You can also program additional functions for UserControl.

If you do not need to reuse these controls, other solutions will suffice.

Answer 2

Here is a control that does this:

 using System.Windows; using System.Windows.Controls; using System.Windows.Data; public class KeyValueControl : Control { public static readonly DependencyProperty KeyProperty = DependencyProperty.Register( "Key", typeof(string), typeof(KeyValueControl), new PropertyMetadata(default(string))); public static readonly DependencyProperty ValueProperty = DependencyProperty.Register( "Value", typeof(object), typeof(KeyValueControl), new FrameworkPropertyMetadata { DefaultValue = null, BindsTwoWayByDefault = true, DefaultUpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged, }); static KeyValueControl() { DefaultStyleKeyProperty.OverrideMetadata(typeof(KeyValueControl), new FrameworkPropertyMetadata(typeof(KeyValueControl))); } public string Key { get { return (string)GetValue(KeyProperty); } set { SetValue(KeyProperty, value); } } public object Value { get { return GetValue(ValueProperty); } set { SetValue(ValueProperty, value); } } } 

Style:

 <Style TargetType="{x:Type local:KeyValueControl}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type local:KeyValueControl}"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="100"/> <ColumnDefinition/> </Grid.ColumnDefinitions> <TextBlock Text="{Binding Key, RelativeSource={RelativeSource TemplatedParent}}"/> <TextBox Grid.Column="1" Text="{Binding Value, RelativeSource={RelativeSource TemplatedParent}, UpdateSourceTrigger=PropertyChanged}"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> 

Usage (creating a property grid):

 <ItemsControl> <customControls:KeyValueControl Key="First" Value="{Binding Value1}" /> <customControls:KeyValueControl Key="Second" Value="{Binding Value2}" /> <customControls:KeyValueControl Key="Last" Value="{Binding Value3}" /> <customControls:KeyValueControl Key="Bool1" Value="{Binding Bool1}" Style="{StaticResource CheckBoxStyle}"/> <customControls:KeyValueControl Key="Bool2" Value="{Binding Bool2}" Style="{StaticResource CheckBoxStyle}"/> </ItemsControl> 

Answer 3

If you need the flexibility to manage this text label structure, I suggest wrapping each text block and shortcut in the dock panel and setting the dock in a style that will apply to all shortcuts and text fields.

so it will be like

 <StackPanel> <StackPanel.Resources> <Style TargetType={x:Type Label}> <Setter Property="DockPanel.Dock" Value="Top"/> </Style> </StackPanel.Resources> <DockPanel> <Label></Label> <TextBox></TextBox> </DockPanel> <DockPanel> <Label></Label> <TextBox></TextBox> </DockPanel> </StackPanel> 

Answer 4

Usually I do something like this:

 <StackPanel> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"></ColumnDefinition> <ColumnDefinition Width="*"></ColumnDefinition> </Grid.ColumnDefinitions> <Label Margin="5">Repository URL:</Label> <TextBox Grid.Column="1" Margin="5"></TextBox> </Grid> </StackPanel> 

If you do this often enough, you can create a UserControl or a Datatemplate. But WPF is just a detailed markup language ...

Answer 5

Create an X class that contains the label and text that implements INotifyPropertyChanged. Make an ObservableCollection. This will be an ItemSource for ListBox, ComboBox, StackPanel .. whatever you choose. Create a DataTemplate that displays X the way you want.