Bind listview to a typed collection in WinUI

Question

Hi,
i was suggested to check out the photo app and i did. I also tried the bookstore example and the binding to a collection but i don't see how must the idl be structured to make a typed collection bindable ("public for the xaml page").

For examle:
I have a type with properties like name, gender, age and i store it in a collection for different people like Alex, Nina. Now i want the person's data bind to the listview's rows (by a data template?!).

Please any concrete example app, link, page, advise or would it be easier to use cpp/cx for example?
(I'm not a professional programmer and meanwhile, i don't know any other programmers because of my job. It's crazy that it takes so much effort for me just to build a gui in Winrt as I imagine. It's been weeks where i'm just looking and reading. PS: This is my first experience with cpp and also XAML based UIs.)

Answer 1

I did a test by following MSDN docs
But it is painful (generating, copying, updating...)
In WinUI, it is a lot simpler and faster to program in C#
and most of MS samples are in C#, mainly WinUI 3 Contols Gallery

      <ListView ItemsSource="{x:Bind MainViewModel.Contacts}" Height="400">  
            <ListView.Resources>  
                <SolidColorBrush x:Key="ListViewItemBackgroundSelected" Color="magenta" />  
                <SolidColorBrush x:Key="ListViewItemBackgroundSelectedPointerOver" Color="red" />  
            </ListView.Resources>  
            <ListView.HeaderTemplate>  
                <DataTemplate>  
                    <Grid>  
                        <Grid.ColumnDefinitions>  
                            <ColumnDefinition Width="300"/>  
                            <ColumnDefinition Width="300"/>  
                            <ColumnDefinition Width="200"/>  
                        </Grid.ColumnDefinitions>  
  
                        <Border BorderBrush="Lime" BorderThickness="0,0,0,1">  
                            <TextBlock Text="First Name" Margin="18,0,0,0" FontWeight="Bold"/>  
                        </Border>  
                        <Border Grid.Column="1" BorderBrush="Lime" BorderThickness="0,0,0,1">  
                            <TextBlock Text="Last Name" Margin="18,0,0,0" FontWeight="Bold"/>  
                        </Border>  
                        <Border Grid.Column="2" BorderBrush="Lime" BorderThickness="0,0,0,1">  
                            <TextBlock Text="Company" Margin="18,0,0,0" FontWeight="Bold"/>  
                        </Border>  
                    </Grid>  
                </DataTemplate>  
            </ListView.HeaderTemplate>  
  
            <ListView.ItemTemplate>  
                <DataTemplate x:DataType="local:Contact">  
                    <Grid>  
                        <Grid.ColumnDefinitions>  
                            <ColumnDefinition Width="300"/>  
                            <ColumnDefinition Width="300"/>  
                            <ColumnDefinition Width="200"/>  
                        </Grid.ColumnDefinitions>  
  
                        <TextBlock Text="{x:Bind Path=FirstName, Mode=TwoWay}"/>  
                        <TextBlock Grid.Column="1" Text="{x:Bind Path=LastName, Mode=TwoWay}"/>  
                        <TextBlock Grid.Column="2" Text="{x:Bind Path=Company, Mode=TwoWay}"/>  
                    </Grid>  
                </DataTemplate>  
            </ListView.ItemTemplate>  
        </ListView>  

Various files (change WinUI3_CPP namespace) : ListView Bind

Answer 2

Hello,

Welcome to Microsoft Q&A!

It seems that you are trying to create a Windows APP SDK application with C++\CX, right? If you are new to development, you could take a look at this document: Data binding overview. This document shows you how to bind a control (or other UI element) to a single item or bind an items control to a collection of items. This is a document for UWP but this should also work for Windows APP SDK applications. It also contains the C++\CX code example that you could directly refer to. After you've go through this document and tried that example, then you could finish your own project.

Thank you.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 3

Took a few hours, but the example of Castorix is really great. It's really time-consuming, but if you've done it a few times, it works. Maybe there are a few careless mistakes (import contact.idl not contacts.idl and the inline specifier is windows not microsoft), but I'm not quite sure, because I took the Bookstore manual to help. It's a little confusing that it's such an elaborate process.