WPF learning 09: Binding Data to List Data, wpfbinding

WPF learning 09: Binding Data to List Data, wpfbinding

Learn from WPF 03: Element Binding: You can bind the control property to the control property.

Learn from WPF 07: Data Binding of MVVM preparation knowledge allows you to bind control attributes with custom object attributes.

The above two functions are not enough in practical application. We often need to bind the list data with the control attributes.

 

Example

The ListBox switch character. The following two text boxes follow the switch, which is a common function.

XAML code:

<Window x: Class = "DataTemplate. mainWindow "xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation "xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml" Title = "MainWindow" Height = "350" Width = "525"> <StackPanel> <ListBox IsSynchronizedWithCurrentItem = "True" ItemsSource = "{Binding}" DisplayMemberPath = ""Name"/> <StackPanel HorizontalAlignment = "Center" Orientation = "Horizontal"> <TextBlock Text = "Gender: "> </TextBlock> <TextBlock Text =" {Binding Gender} "Margin =" 0 0 100 0 "> </TextBlock> <TextBlock Text =" age: "> </TextBlock> <TextBlock Text =" {Binding Age} "Margin =" 0 0 100 0 "> </TextBlock> </StackPanel> </Window>

Background code:

public class Person : INotifyPropertyChanged{    public event PropertyChangedEventHandler PropertyChanged;    private void Notify(String propertyName)    {        if (PropertyChanged != null)            PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));    }    private Int32 age;    public Int32 Age    {        get { return age; }        set        {            age = value;            Notify("Age");        }    }    private String gender;    public String Gender    {        get { return gender; }        set        {            gender = value;            Notify("Gender");        }    }    private String name;    public String Name    {        get { return name; }        set        {            name = value;            Notify("Name");        }    }}class People : List<Person>{    public People()    {        this.Add(new Person() { Name = "John", Age = 30, Gender = "Male" });        this.Add(new Person() { Name = "Jake", Age = 26, Gender = "Male" });        this.Add(new Person() { Name = "Kate", Age = 25, Gender = "Female" });    }}public MainWindow(){    InitializeComponent();    DataContext = new People();}

 

Collection View

Make some changes to the example:

Only changes the XAML. Delete the original ListBox and add a TextBlock and two buttons.

<StackPanel HorizontalAlignment = "Center" Orientation = "Horizontal"> <TextBlock Text = "Name: "> </TextBlock> <TextBlock Text =" {Binding Name} "Margin =" 0 0 100 0 "> </TextBlock> <TextBlock Text =" Gender: "> </TextBlock> <TextBlock Text =" {Binding Gender} "Margin =" 0 0 100 0 "> </TextBlock> <TextBlock Text =" age: "> </TextBlock> <TextBlock Text =" {Binding Age} "> </TextBlock> </StackPanel>

The Data Binding path is Name Gender Age, but the current data context is a list. In this case, WPF tries to bind the Current Item of the Current data list as the source. This results in the image.

Using the GetDefaultView method provided by CollectionViewSource, we can obtain the list view. The list view allows us to perform operations including but not limited to changing the Current Item.

We can add Handler for the two buttons to implement the function of Button switching characters:

Private void BtnToRight_Click (object sender, RoutedEventArgs e) {var view = CollectionViewSource. getDefaultView (DataContext); view. moveCurrentToNext (); // if (view. isCurrentAfterLast) view. moveCurrentToPrevious ();} private void BtnToLeft_Click (object sender, RoutedEventArgs e) {var view = CollectionViewSource. getDefaultView (DataContext); view. moveCurrentToPrevious (); // if (view. isCurrentBeforeFirst) view. moveCurrentToNext ();}

After obtaining the list view, we can filter and sort the data list. Skip the example here. IsSynchronizedWithCurrentItem

Return to the example at the beginning of the article. There are two reasons for switching between two text boxes by clicking the elements in ListVox:

1. Their data binding has the same source (current data context ).

2. Configure IsSynchronizedWithCurrentItem to true.

In this way, ListControl can automatically switch the CurrentItem of the current bound list when SelectedItem is switched.

DataTemplate Introduction

Because there are too many data templates to be completed at a time, here is an example of a data template.

With the data template, We can freely define the data display content.

Modify the example at the beginning of this article. First, remove the DisplayMemberPath attribute of the element. This attribute specifies which attribute of the bound object is used as the display bound object of the Item. Conflicts with the data template function.

Effect after modification:

The modified XAML code:

<Window x: Class = "DataTemplate. MainWindow" xmlns =" http://schemas.microsoft.com/winfx/2006/xaml /Presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "Title =" MainWindow "Height =" 350 "Width =" 525 "> <ListBox IsSynchronizedWithCurrentItem =" True "ItemsSource =" {Binding} "> <ListBox. itemTemplate> <DataTemplate> <StackPanel HorizontalAlignment = "Center" Orientation = "Horizontal"> <TextBlock Text = "Name: "> </TextBlock> <TextBlock Text =" {Binding Name} "Margin =" 0 0 100 0 "> </TextBlock> <TextBlock Text =" Gender: "> </TextBlock> <TextBlock Text =" {Binding Gender} "Margin =" 0 0 100 0 "> </TextBlock> <TextBlock Text =" age: "> </TextBlock> <TextBlock Text =" {Binding Age} "> </TextBlock> </StackPanel> </DataTemplate> </ListBox. itemTemplate> </ListBox> </Window>