C# WPF Databinding and Datacontext

Question

I am (new in C# and WPF and) trying to bind data from more sources (class properties) and I am a bit confused from different guides and advices. I want to dynamically add Users in userList and showing for example the last insert and whole list at the same time. That is done on different place in source code, but simple like in contructor of my example. How and where should I set binding and datacontext for those three elements (myName,myTitle and myUserList) to reflect changes in main class properties? Should I call every time function for update binding target, or set this.datacontext after editing properties? Or should I bind to some function (if it's possible) which returns the value I need? I am a bit lost with binding to property of object and datacontexts etc. Here is an example from what I have:

<Window x:Name="Window" x:Class="WpfTest.MainWindow"
    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:WpfTest">
  <Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200"/>
        <ColumnDefinition Width="200"/>
    </Grid.ColumnDefinitions>
    <StackPanel>
      <TextBox x:Name="myName" Text=""  Grid.Column="1"/>
      <TextBox x:Name="myTitle" Text=""  Grid.Column="0"/>
    </StackPanel>
    <ListBox x:Name="myUserList">
    </ListBox>
  </Grid>
</Window>

And

public partial class MainWindow : Window {
  public User myUser;
  public Dictionary<int,User> userList= new Dictionary<int, User>();

  public object SubWindow { get; private set; }

  public MainWindow() {
    newUser = new User();
    newUser.Title = "John Doe";
    newUser.Name = "Dr.";
    this.userList.Add(index,newUser);
    this.myUser=newUser;
    InitializeComponent();
  }
}

And

public class User
{
  public String Name { get; set; }
  public String Title { get; set; }
}

Thanks for any advice.

You missed what is meant with data binding as you are updating UI elements from code-behind - this is _not_ data binding! ;-) Just have a read here, to see how it works: https://www.wpf-tutorial.com/data-binding/introduction/ — Nicolas, Nov 22 '18 at 15:17
[Data Binding Overview](https://learn.microsoft.com/en-us/dotnet/framework/wpf/data/data-binding-overview) — Clemens, Nov 22 '18 at 15:34

score 2 · Accepted Answer · answered Nov 22 '18 at 15:24

First thing is first, WPF works best when you are working with MVVM, the general idea is implementing the INotifyPropertyChanged, what ever items you add to you change, will propagate to the framework and update your views.

When working with Lists, use an ObservableCollection. If you want to add items dynamically to it, you would need to modify the ObservableCollection instead. For best results, in your UserControl, use a DataTemplate for the specific type to display a formatted version of your values.

For the second part, showing the last added item, there are a few ways you can go about this, the best would be to add a new Items(Grid, Stackpanel, etc) that can hold data, use Binding to set its value to a the same context as your list(i.e the ObservableCollection) and create a Converter that will use the ObservableCollection as input, inside your specific converter implementation, just get the last item added and Display it to the control you want( you can use a dataTemplate for this as well)

Thanks! I'll go through it and try to understand how it works. ;-) — dreamer, Nov 23 '18 at 07:55
Don't use a converter for grabbing the last item from an observable. Instead use a property with only a getter that use LINQ to get the last item from the observable, bind to that property and make sure INotifyPropertyChanged is invoked for that property every time a new item is added to the observable. — slugster, Nov 23 '18 at 08:02

score -1 · Answer 2 · edited Jun 20 '20 at 09:12

Solution: You have to bind input data in model class(User) and use model to insert data in the listbox like below

<Window x:Class="WpfRegistration.Listbox"
    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:WpfRegistration"
    mc:Ignorable="d"
    Title="Listbox" Height="450" Width="800">
<Grid>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="0.15*"></RowDefinition>
            <RowDefinition Height="0.85*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="63*"></ColumnDefinition>
            <ColumnDefinition Width="26*"></ColumnDefinition>
            <ColumnDefinition Width="109*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <StackPanel>
            <TextBox x:Name="myName"  Text=""  Grid.Column="1"/>
            <TextBox x:Name="myTitle" Text=""  Grid.Column="0"/>
        </StackPanel>
        <StackPanel>
            <Button Height="23" Margin="50,40,0,0" Name="button1" VerticalAlignment="Top" HorizontalAlignment="Left" Width="76" Click="Button1_OnClick" >Add Item</Button>
        </StackPanel>
        <StackPanel>
            <Button Height="23" Margin="140,40,10,12" Name="DeleteButton" VerticalAlignment="Top" Click="DeleteButton_Click">Delete Item</Button>
        </StackPanel>
        <ListBox  Grid.Row="1" Grid.Column="0" BorderThickness="3" BorderBrush="Black" Margin="0,60,0,100"   x:Name="myUserList">
        </ListBox>
    </Grid>
</Grid>

Xaml.cs

public partial class Listbox : Window
{
    public Listbox()
    {
        InitializeComponent();
        User newUser = new User();
        newUser.Title = "John Doe";
        newUser.Name = "Dr.";
        this.myUserList.Items.Add(newUser.Title + newUser.Name);

    }

    private void Button1_OnClick(object sender, RoutedEventArgs e)
    {
      User newUser = new User();
        newUser.Title = myTitle.Text;
        newUser.Name = myName.Text;
        myUserList.Items.Add(newUser.Name + " " + newUser.Title );
    myTitle.Text=String.Empty;
        myName.Text=String.Empty;        
}

    private void DeleteButton_Click(object sender, RoutedEventArgs e)
    {
        myUserList.Items.RemoveAt(myUserList.Items.IndexOf(myUserList.SelectedItem));
    }
}
public class User
{
    public string name;
    public string title;

    public String Name
    {
        get { return name; }
        set
        {
            name = value;
            OnPropertyChanged("name");
        }
    }

    public string Title
    {
        get { return title; }
        set
        {
            title = value;
            OnPropertyChanged("title");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

C# WPF Databinding and Datacontext

2 Answers2

Solution: You have to bind input data in model class(User) and use model to insert data in the listbox like below