Bind listview to a typed collection in WinUI

youki 1,016 Reputation points
2022-04-23T08:04:15.567+00:00

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

Windows App SDK
Windows App SDK
A set of Microsoft open-source libraries, frameworks, components, and tools to be used in apps to access Windows platform functionality on many versions of Windows. Previously known as Project Reunion.
750 questions
C++
C++
A high-level, general-purpose programming language, created as an extension of the C programming language, that has object-oriented, generic, and functional features in addition to facilities for low-level memory manipulation.
3,633 questions
0 comments No comments
{count} votes

Accepted answer
  1. Castorix31 83,196 Reputation points
    2022-04-25T12:58:09.403+00:00

    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

    196100-winui3-listview-bind.gif

          <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


2 additional answers

Sort by: Most helpful
  1. Roy Li - MSFT 32,731 Reputation points Microsoft Vendor
    2022-04-25T03:11:50.55+00:00

    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.

    0 comments No comments

  2. youki 1,016 Reputation points
    2022-05-06T09:46:03.717+00:00

    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.

    0 comments No comments