wpf binding property between 2 user control

Question

I am new to WFP and I am stuck with data binding.

On my first user control I have 2 texboxes and on my second user control I have 2 labels. And I have a class holding the properties.

My question is how can I link these two user control to the same class ? The problem here is that each user control seem to point on a different instance of the same class.

I have also attached 2 pictures as a visual example of my problem

My first user control code:

<UserControl.DataContext>
    <local:Players/>
</UserControl.DataContext>
<!--Display Players Name-->
<Label Name="LabelPlayer1Name" Grid.Row="1" Grid.Column="0" 
       Content="{Binding Player1Name}"
/>
<Label Grid.Row="1" Grid.Column="1" Content="VS" Foreground="#e74c3c"/>
<Label Name="LabelPlayer2Name"
       Grid.Row="1" Grid.Column="2" 
       Content="{Binding Player2Name}"
/>
<!--Input Players Name-->
<TextBox x:Name="TextBoxPlayer1Name" Grid.Column="0" Grid.Row="2" Text="{Binding Player1Name, 
          UpdateSourceTrigger=PropertyChanged}" 
          KeyDown="TextBoxPlayer1Name_KeyDown"
/>
<TextBox x:Name="TextBoxPlayer2Name" Grid.Column="2" Grid.Row="2" Text="{Binding Player2Name, 
          UpdateSourceTrigger=PropertyChanged}" 
          KeyDown="TextBoxPlayer2Name_KeyDown"
/>

My second user control code:

<UserControl.DataContext>
    <local:Players/>
</UserControl.DataContext>

<Label Grid.Column="0" Grid.Row="0" Content="{Binding Player1Name}"/>
<Label Grid.Column="2" Grid.Row="0" Content="{Binding Player2Name}"/>

Player Class:

public class Players : INotifyPropertyChanged
{
    #region PlayersName field
    private string _player1Name;
    private string _player2Name;

    public string Player1Name
    {
        get { return _player1Name; }
        set 
        {
            _player1Name = value;
            OnPropertyChanged();
        }
    }

    public string Player2Name
    {
        get { return _player2Name; }
        set 
        {
            _player2Name = value;
            OnPropertyChanged();
        }
    }
    #endregion

    #region ctor

    public Players()
    {
        _player1Name = "Player1";
        _player2Name = "Player2";
    }

    #endregion

    #region On Property Changed
    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
    #endregion
}

first user control: User control 1 second user control: User control 2

in this example, the first user control is used to set Player1Name and Player2Name in the Player class. But the second user control is displaying something else

assigning `` is totally wrong. it leads to errors like "The problem here is that each user control seem to point on a different instance of the same class." — ASh, Jan 26 '21 at 21:52
You need to make sure each control is using the same view model object as the other. See proposed duplicate. — Peter Duniho, Jan 26 '21 at 22:41
Does this answer your question? [Multiple Views that have same ViewModel](https://stackoverflow.com/questions/7010602/multiple-views-that-have-same-viewmodel) — Peter Duniho, Jan 26 '21 at 22:41
Does this answer your question? [Can the VM of MVVM be reused?](https://stackoverflow.com/questions/4429565/can-the-vm-of-mvvm-be-reused) — Peter Duniho, Jan 26 '21 at 22:44
Does this answer your question? [INotifyPropertyChange Confusion](https://stackoverflow.com/questions/35166810/c-sharp-wpf-inotifypropertychange-confusion) — Peter Duniho, Jan 26 '21 at 22:45
[etc.](https://stackoverflow.com/search?q=%5Bwpf%5D+share+same+view+model) — Peter Duniho, Jan 26 '21 at 22:45
Make sure you also read through posts like [How to use User Controls in WPF MVVM](https://stackoverflow.com/questions/6841924/how-to-use-user-controls-in-wpf-mvvm) and [Should a user control have its own view model?](https://stackoverflow.com/questions/1939345/should-a-user-control-have-its-own-view-model) — Peter Duniho, Jan 26 '21 at 22:47

score -1 · Accepted Answer · answered Jan 26 '21 at 22:09

You can resolve it in two ways that I can see for now:

First way: Remove this part from both xaml files

<UserControl.DataContext>
    <local:Players/>
</UserControl.DataContext>

and define one datacontext in the xaml of your MainWindow or in its code behind "DataContext = new Players()"

Second way: Make your class a singleton and return always the same instance

1- Remove this part from both xaml files

<UserControl.DataContext>
    <local:Players/>
</UserControl.DataContext>

2- Change your Players class :

 private static Players instance=null;

  private Players()
    {
        _player1Name = "Player1";
        _player2Name = "Player2";
    }

  public static Players Instance
    {
      get
      {
         if (instance==null)
         {
           instance = new Players();
         }
       return instance;
      }
    }

3- Go to the code behind of every usercontrol and add this to your constructor:

DataContext = Players.Instance;

wpf binding property between 2 user control

1 Answers1