WPF Метка для TextBox

Question

Как лучше всего показывать текстовую метку (например, «Имя») с помощью TextBox в WPF?Я хочу ярлык «Имя» над TextBox и много похожих ярлыков / TextBoxes.Должен ли я поместить пары Label / TextBox в вертикальную панель стека?

Есть ли более простое решение?

Answer 1

Это действительно зависит от того, что вы хотите сделать с этими элементами управления в будущем.Если вы хотите многократно использовать этот вид управления (и, возможно, создать его на лету), было бы лучше создать UserControl и запрограммировать его.Затем вы можете легко использовать его очень простым способом (например, вставить в StackPanel).

Код для 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>

Код для 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;
            }
        }
    }
}

Вы можете изменить текст Label и содержимое TextBox с помощью свойства Label и TextBox нового элемента управления (скрытого в разделе «Другие» свойств в конструкторе. Вы также можете запрограммировать дополнительные функции для UserControl.

Есливам не нужно многократно использовать эти элементы управления, других решений будет достаточно.

Answer 2

Вот элемент управления, который делает это:

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 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>

Использование (создать сетку свойств):

<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

Если вы хотите гибко управлять этой структурой текстовых меток, я предлагаю обернуть каждый TextBox и Label в панель док-станции и установить закрепление в стиле, который будет применяться ко всем меткам и текстовым полям.

так будет как

<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

Я обычно делаю что-то вроде этого:

<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>

Если вы делаете это достаточно часто, вы можете создать UserControl или Datatemplate.Но WPF - это просто многословный язык разметки ...

Answer 5

Создайте класс X, содержащий метку и текст, который реализует INotifyPropertyChanged. Сделайте ObservableCollection. Это будет ItemsSource для ListBox, ComboBox, StackPanel ... все, что вы выберете. Создайте шаблон данных, который отображает X так, как вы хотите.