WPF：将 ListView 绑定到数据结构

Question

I would like to bind a data structure like the one below to a ListView or similar component. Desired result is in the picture below.

public struct Info
{
    public string Port;
    public byte FwVersion;
    public byte ApiVersion;
    public byte BootVersion;
    public char[] BoardId;
    public char[] AfeId;
    public AfeType AfeType;
}

I know it is possible to put the structure content to an array of objects and then bind this array to the ListView, but I would prefer to define the ListView row names in xaml and make direct binding to the underlying structure, for example:

<ListView>
     <ListView.View>
            <GridView>
                <GridViewColumn Header="Name" Width="120" />
                <GridViewColumn Header="Value" Width="240" />
            </GridView>
     <ListView.View>
     <ListViewItem>
         <ListViewColumn Column="1">Serial port</ListViewColumn>
         <ListViewColumn Column="2">{Binding MyStructure.Port}</ListViewColumn>
     </ListViewItem>
     <ListViewItem>
         <ListViewColumn Column="1">Board ID</ListViewColumn>
         <ListViewColumn Column="2">{Binding MyStructure.BoardId}</ListViewColumn>
     </ListViewItem>
     ...
</ListView>

Unfortunately I cannot figure out, how to define "hard-coded" rows in xaml.

Thank you for your ideas.

Answer 1

The way you are adding ListViewItems manually with different bound objects one by one makes it almost impossible to bind to multiple objects. There's 2 ways you can do it though : 1) Make you own ListViewItem (extend and modify it), or 2) In listview declare different properties as columns, eg :

<ListView x:Name = "LWBoards">
     <ListView.View>
            <GridView>
                <GridViewColumn Header="Serial port" Width="auto" DisplayMemberBinding="{Binding Port}"/>
                <GridViewColumn Header="Board ID" Width="auto" DisplayMemberBinding="{Binding BoardId}"/>
                <...>
                <GridViewColumn Header="AFE ID" Width="auto" DisplayMemberBinding="{Binding AfeId}"/>
                <GridViewColumn Header="AFE Type" Width="auto" DisplayMemberBinding="{Binding AfeType}"/>
            </GridView>
     <ListView.View>
</ListView>

And then after you got list of Info object from somewhere just set ListView item source as that list, eg

LWBoards.ItemsSource = GetListOfBoards();

Answer 2

The simplest solution would be to add a ICollection to your's DataContext . Let's say that you're using a MVVM, in which the ListViewBindingExampleViewModel is the DataContext of your view (may it be a Window , a Page or a UserControl ). So, you'd have:

public class ListViewBindingExampleViewModel
{
    public List<Info> Infos { get; set; } = new List<Info>();

    private ListViewBindingExampleViewModel () { }
}

And then, in the xaml:

<ListView ItemsSource="{Binding Path=Infos}">
    <ListView.View>
            <GridView>
                <GridViewColumn Header="Name" Width="120" />
                <GridViewColumn Header="Value" Width="240" />
            </GridView>
     <ListView.View>
     <ListViewItem>
         <ListViewColumn Column="1">Serial port</ListViewColumn>
         <ListViewColumn Column="2">{Binding Path=Port}</ListViewColumn>
     </ListViewItem>
     <ListViewItem>
         <ListViewColumn Column="1">Board ID</ListViewColumn>
         <ListViewColumn Column="2">{Binding Path=BoardId}</ListViewColumn>
     </ListViewItem>
</ListView>

It is also worth to mention that the changes of a item of the Infos list would not be propagated to the front-end in this way.

The best way to aproach this problem, in my opinion, would be using Caliburn.Micro , in which the ViewModel has a BindableCollection that would be binded to the ItemsSource of the ListView . For example, in the view model you have this

public class ListViewBindingExampleViewModel
{
    public BindableCollection<Info> Infos { get; set; } = new BindableCollection<Info>();

    private ListViewBindingExampleViewModel () { }
}

And then, you should change your Info class to implement the INotifyPropertyChanged interface, like this:

public struct Info : PropertyChangedBase
{
    private string _port;
    ...

    public string Port { get { return _port; } set { _port= value; NotifyOfPropertyChange(nameof(Port  )); } }
    ...
}

Doing it that way, if you need, the changes in the back-end would be reflected in the front-end.

Answer 3

Finally it turned out the simplest way is to make a separate view-model class which turns the model data into a collection which can be easily bound to ListView. The solution is quite similar to Rafael Camelo's solution, but it does not fit to the comment.

When using this approach, the field names and descriptions are not written in Xaml, but in the view-model class, but finally this is better solution for my use case. How I finally did it:

• Implemented DataRow class implementing INotifyPropertyChanged interface. The class provides variable name, value and ListView group. When the value changes, PropertyChangedEventHandler propagates the change to the user interface.
• Implemented class ListViewModel implementing IReadOnlyList<DataRow>, INotifyCollectionChanged . This class pulls the required structure from the model and turns it into a collection.
• ListViewModel class has internal List<DataRow> containing a fixed list of DataRow objects.
• As soon as the structure changes in the model, I simply update all necessary DataRow objects and their changes propagate to UI via PropertyChanged event.
• Implementation of the interface IReadOnlyList<DataRow> is quite simple because I just call internal list's methods.
• INotifyCollectionChanged interface is necessary only if you want to display empty ListView in case there is no structure to be displayed. In such cases the internal list remains unchanged, but the IReadOnlyList<DataRow> methods return "empty" data.
• If there would be more different structures, the ListViewModel class could be implemented as a template class and reused many times.
• The ListViewModel class can also perform data conversions more conveniently than Xaml.