WPF - Bind a textbox's content other Textbox

Question

I have two text box which are working independently in a wpf mvvm. But now i want to bind input of one textbox to other text box on basis of a check box.

  <Label Grid.Row="4" Grid.Column="0" Style="{StaticResource StlLblForm}" Margin="0,5">First Name:</Label>
  <TextBox Grid.Row="4" MaxLength="10" Grid.Column="1" Style="{StaticResource StlTxtForm}" Text="{Binding FirstName}" Grid.ColumnSpan="2" Margin="0,1,0,11" />

  <Label  Grid.Row="5" Grid.Column="0" Style="{StaticResource StlLblForm}" Margin="0,5">Last Name:</Label>
  <TextBox Grid.Row="5" Grid.Column="1" Style="{StaticResource StlTxtForm}" Text="{Binding LastName}" AcceptsReturn="True" Grid.ColumnSpan="2" Margin="0,1,0,11" />
  <CheckBox Content="CopyFirstNameToLast" />

So when i check the check box it repliates the First Name to Last Name. Can i do this without code behind. If yes then how ?

It's simple to bind last name to first name in the XAML, see http://stackoverflow.com/questions/9586956/how-to-bind-a-controls-property-to-another-controls-property for more info. However the check box makes it more complicated, you may have to write a value converter to get this work. — Andrew Briggs, Dec 02 '16 at 10:43
Something like this perhaps? http://stackoverflow.com/questions/23225751/wpf-binding-to-two-properties — Andrew Briggs, Dec 02 '16 at 10:46
Any reason why you would prefer to avoid code behind? You could do with a custom converter but code-behind for your scenario would be the proper approach IMHO. — LeBaptiste, Dec 02 '16 at 10:54

Alex · Answer 1 · 2016-12-02T13:13:00.697

As you are following MVVM pattern to implement your application, you should notice that according to MVVM pattern guide the view should not contain any application logic:

The view is responsible for defining the structure, layout, and appearance of what the user sees on the screen. Ideally, the view is defined purely with XAML, with a limited code-behind that does not contain business logic.

Replicating your FirstName to LastName is a part of your application logic, so you should delegate this task to your ViewModel.

Quoting MSDN again:

The view model acts as an intermediary between the view and the model, and is responsible for handling the view logic.

which is exactly what you are trying to achieve.

So to keep things tidy, your should define FirstName and LastName properties in your ViewModel which will be bound to View's TextBoxes, just like you do in the code in your question:

// ViewModel
public const string FirstNamePropertyName = "FirstName";
private string _firstName = null;
public string FirstName
{
    get
    {
        return _firstName;
    }

    set
    {
        _firstName = value;
        RaisePropertyChanged(FirstNamePropertyName);
    }
}

public const string LastNamePropertyName = "LastName";
private string _lastName = null;
public string LastName
{
    get
    {
        return _lastName;
    }

    set
    {
        _lastName = value;
        RaisePropertyChanged(LastNamePropertyName);
    }
}

<!-- XAML -->

<Label Grid.Row="4" Grid.Column="0" Style="{StaticResource StlLblForm}" Margin="0,5">First Name:</Label>
<TextBox Grid.Row="4" MaxLength="10" Grid.Column="1" Style="{StaticResource StlTxtForm}" Text="{Binding FirstName}" Grid.ColumnSpan="2" Margin="0,1,0,11" />

<Label  Grid.Row="5" Grid.Column="0" Style="{StaticResource StlLblForm}" Margin="0,5">Last Name:</Label>
<TextBox Grid.Row="5" Grid.Column="1" Style="{StaticResource StlTxtForm}" Text="{Binding LastName}" AcceptsReturn="True" Grid.ColumnSpan="2" Margin="0,1,0,11" />

While the CheckBox can be handled in two ways:

you bind its Checked event to a ViewModel's command where you manipulate your FirstName and LastName properties and you pass to it checkbox's IsChecked property value as command parameter (hard way)
you bind IsChecked property to the ViewModel's boolean property and handle your logic in its setter (easy way)

So to do this the easy way:

// ViewModel
public const string CheckedPropertyName = "Checked";
private bool _checked = false;
public bool Checked
{
    get
    {
        return _checked;
    }

    set
    {
        _checked = value;
        RaisePropertyChanged(CheckedPropertyName);

        // app logic is handled here
        if (_checked)
        {
            LastName = FirstName;
        }
    }
}

<!-- XAML -->
<CheckBox IsChecked="{Binding Checked}" />

Thanks for your help. But I am using Bindablebase which gives error that RaisePropertyChanged is not defined. — Naveed Khan, Dec 02 '16 at 15:49
You should use `BindableBase.SetProperty` then: https://msdn.microsoft.com/en-us/library/dn736263(v=pandp.50).aspx — Alex, Dec 02 '16 at 16:10

score 2 · Accepted Answer · answered Dec 05 '16 at 04:59

Without code:

 <Label>First Name:</Label>
 <TextBox x:Name="txtFirstName" Width="100" MaxLength="10" Text="{Binding FirstName}" />
<Label >Last Name:</Label>
  <TextBox Width="100">
     <TextBox.Style>
                <Style TargetType="TextBox">
                    <Setter Property="Text" Value="{Binding LastName}" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ElementName=chk, Path=IsChecked, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Value="True">
                            <Setter Property="Text" Value="{Binding ElementName=txtFirstName, Path=Text, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </TextBox.Style>
        </TextBox>
        <CheckBox x:Name="chk" Content="CopyFirstNameToLast" />

works like a charm. thank you so much. that's what i was searching for :) — Naveed Khan, Dec 05 '16 at 11:31

WPF - Bind a textbox's content other Textbox

2 Answers2