WPF Label to TextBox

Question

what is the best practice to show text label (e.g. "Name") with the TextBox in WPF? I want a label "Name" above the TextBox and many similar Labels/TextBoxes. Should I put the pairs Label/TextBox into the vertical StackPanel?

Is there a simpler solution?

Answer 1

It really depends on what you want to do with these controls in the future. If you want to reuse this kind of control multiple times (and maybe create it on the fly), it would be the best to create UserControl and program it. You can then easily reuse it in a very simple manner (like putting in on 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 Label text and TextBox content with Label and TextBox property of new control (hidden in "Other" part of Properties in designer. You can also program additional functions for the UserControl.

If you don't need to reuse these controls so much, other solutions will suffice.

Answer 2

Here is a control that does it:

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 (create 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 want the flexibility to manipulate this text label structure I suggest to wrap each TextBox and Label in a dock panel, and set the docking in a style that will apply on all labels and text boxes.

so it'll 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

I usually 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 did this often enough, you could create a UserControl or Datatemplate. But WPF is just a verbose markup language...

Answer 5

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