Bind listview to a typed collection in WinUI

Question

question

youki asked Apr 23, '22 youki edited May 6, '22

Bind listview to a typed collection in WinUI

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.)

c++windows-app-sdk

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Answer 1 · 2022-04-25T12:58:09.403Z

Castorix31 answered Apr 25, '22 youki commented May 6, '22

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

winui3-listview-bind.gif (478.0 KiB)

· 4

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

youki · Apr 27 at 11:50 AM

Oh man, cool.
Will take a look tonight.

I really want to get in there. Then I read about it in the MS documentation for cpp/winrt and they suddenly show c# code. Then I try to read something about it in c#/ cpp cx (porting etc.) to maybe understand it better in winrt, but it doesn't really help me. I also search something about XBind and occasionally look at the examples by Raymond Chen. I really don't see through it, whether I'm possibly too stupid or overlooked something.

0 ·

RoyLi-MSFT youki · Apr 28 at 02:30 AM

You could check Data binding overview which is prepared for a beginner. It contains the full tutorial about how to create data bindings.

0 ·

RoyLi-MSFT youki · May 06 at 09:14 AM

@youki Any updates about this?

0 ·

youki RoyLi-MSFT · May 06 at 09:33 AM

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 (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.

0 ·

Answer 2 · 2022-04-25T03:11:50.55Z

RoyLi-MSFT answered Apr 25, '22

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.

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Answer 3 · 2022-05-06T09:46:03.717Z

youki answered May 6, '22 youki edited May 6, '22

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.

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

question