How can i Create a three in one TextBox in WPF C# that Shows a FullName?

Question

How can i Create a TextBox in WPF C# that Shows a FullName when not Clicked and when Clicked Shows 3 Textboxes inside the FullName TextBox that Displays FirstName, SecondName, LastName respectively?

Like This One:

الاسم - is a Hint meaning 'FullName'.

اسم - is a Hint meaning 'FirstName'.

الأب- is a Hint meaning 'FatherName/SecondName'.

الجد- is a Hint meaning 'GrandfaName/LastName'.

Answer 1

Your requirement is not clear but lets break it down

First Approach

By default text box shows first name name when some one clicks on it, then it will show full name(first name, middle name or last name) and again if clicks it will show the first name

<TextBox x:Name="textBox" Text="{Binding FirstName}" GotFocus="TextBox_GotFocus" LostFocus="TextBox_LostFocus"/>

Code behind

public partial class MainWindow : Window
{
    private MainViewModel _viewModel;

    public MainWindow()
    {
        InitializeComponent();
        _viewModel = new MainViewModel();
        DataContext = _viewModel;
    }

    private void TextBox_GotFocus(object sender, RoutedEventArgs e)
    {
        if (!_viewModel.IsFullNameVisible)
        {
            _viewModel.IsFullNameVisible = true;
            _viewModel.RefreshDisplayedName();
        }
    }

    private void TextBox_LostFocus(object sender, RoutedEventArgs e)
    {
        if (_viewModel.IsFullNameVisible)
        {
            _viewModel.IsFullNameVisible = false;
            _viewModel.RefreshDisplayedName();
        }
    }
}

View Model

public class MainViewModel : INotifyPropertyChanged
{
    private string _firstName;
    private string _lastName;
    private bool _isFullNameVisible;

    public string FirstName
    {
        get { return _firstName; }
        set
        {
            if (_firstName != value)
            {
                _firstName = value;
                OnPropertyChanged(nameof(FirstName));
                RefreshDisplayedName();
            }
        }
    }

    public string LastName
    {
        get { return _lastName; }
        set
        {
            if (_lastName != value)
            {
                _lastName = value;
                OnPropertyChanged(nameof(LastName));
                RefreshDisplayedName();
            }
        }
    }

    public bool IsFullNameVisible
    {
        get { return _isFullNameVisible; }
        set
        {
            if (_isFullNameVisible != value)
            {
                _isFullNameVisible = value;
                OnPropertyChanged(nameof(IsFullNameVisible));
            }
        }
    }

    public string DisplayedName
    {
        get { return _isFullNameVisible ? $"{_firstName} {_lastName}" : _firstName; }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    public void RefreshDisplayedName()
    {
        OnPropertyChanged(nameof(DisplayedName));
    }
}

Second Approach

Create a three textbox, default make the middle name & last name hidden and when some once click first text box change the visibility of middle name and last name text box you can reuse the above code

Answer 2

Hi,
you can use Style with Trigger like in following MVVM demo:

XAML:

<Window x:Class="WpfApp121.Window121"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp121"
        mc:Ignorable="d"
        Title="Mesh_Ka_231207" Height="450" Width="800">
  <Window.DataContext>
    <local:ViewModel/>
  </Window.DataContext>
  <Window.Resources>
    <Style x:Key="MultiTbStyle" TargetType="TextBox">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type Control}">
            <Grid>
              <TextBox x:Name="tbFull" Text="{Binding FullName}"/>
              <Grid x:Name="tbDetail">
                <Grid.ColumnDefinitions>
                  <ColumnDefinition/>
                  <ColumnDefinition/>
                  <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <TextBox Grid.Column="0" Text= "{Binding FirstName}"/>
                <TextBox Grid.Column="1" Text="{Binding SecondName}"/>
                <TextBox Grid.Column="2" Text="{Binding LastName}"/>
              </Grid>
            </Grid>
            <ControlTemplate.Triggers>
              <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Visibility" TargetName="tbDetail" Value="Visible"/>
                <Setter Property="Visibility" TargetName="tbFull" Value="Collapsed"/>
              </Trigger>
              <Trigger Property="IsMouseOver" Value="False">
                <Setter Property="Visibility" TargetName="tbDetail" Value="Collapsed"/>
                <Setter Property="Visibility" TargetName="tbFull" Value="Visible"/>
              </Trigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </Window.Resources>
  <Grid>
    <TextBox Style="{StaticResource MultiTbStyle}" Width="300" Height="30"/>
  </Grid>
</Window>

Code:

using System.Windows;

namespace WpfApp121
{
	/// <summary>
	/// Interaction logic for Window121.xaml
	/// </summary>
	public partial class Window121 : Window
	{
		public Window121()
		{
			InitializeComponent();
		}
	}
	public class ViewModel
	{
		public string FullName { get; set; } = "الاسم";
		public string FirstName { get; set; } = "اسم";
		public string SecondName { get; set; } = "الأب";
		public string LastName { get; set; } = "الجد";
	}
}

Result:

Answer 3

Here i accomplished the task:

https://github.com/MeshkaM/MultiTextBoxName