ListDetailsView does not show item list on CommunityToolkit.WinUI.UI.Controls 7.1.2

[tungox6]

Describe the bug

I just copy code from the Sample App to test ListDetailsView. Items are not shown.

Regression

No response

Reproducible in sample app?

• This bug can be reproduced in the sample app.

Steps to reproduce

1. In Visual Studio Community 2022, Create a Blank App, Packaged (WinUI 3 in Desktop)
2. Add CommunityToolkit.WinUI.UI.Controls 7.1.2 Nuget package
3. Add models code to MainWindow.xaml.cs:
`
public class Email
        {
            public string From { get; set; }

            public string Subject { get; set; }

            public string Body { get; set; }
        }

        List<Email> Emails = new List<Email>
        {
            new Email { From = "Steve Johnson", Subject = "Lunch Tomorrow", Body = "Are you available for lunch tomorrow? A client would like to discuss a project with you." },
            new Email { From = "Becky Davidson", Subject = "Kids game", Body = "Don't forget the kids have their soccer game this Friday. We have to supply end of game snacks." },
            new Email { From = "OneDrive", Subject = "Check out your event recap", Body = "Your new album.\r\nYou uploaded some photos to your OneDrive and automatically created an album for you." },
            new Email { From = "Twitter", Subject = "Follow randomPerson, APersonYouMightKnow", Body = "Here are some people we think you might like to follow:\r\n.@randomPerson\r\nAPersonYouMightKnow" },
        };
`
4. Add UI code to MainWindow.xaml:
`
<Grid>
        <controls:ListDetailsView BackButtonBehavior="Automatic"
                                    ItemsSource="{Binding Emails}"
                                    NoSelectionContent="Select an item to view"
                                    CompactModeThresholdWidth="720">
            <controls:ListDetailsView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Margin="0,8">
                        <TextBlock Text="{Binding From}"
                                   Style="{StaticResource SubtitleTextBlockStyle}"/>
                        <TextBlock Text="{Binding Subject}"
                                   Style="{StaticResource BodyTextBlockStyle}"
                                   Foreground="{ThemeResource Brush-Blue-01}"
                                   MaxLines="1"/>
                        <TextBlock Text="{Binding Body}"
                                   Style="{StaticResource BodyTextBlockStyle}"
                                   Opacity=".6"
                                   MaxLines="1"/>
                    </StackPanel>
                </DataTemplate>
            </controls:ListDetailsView.ItemTemplate>
            <controls:ListDetailsView.DetailsTemplate>
                <DataTemplate>
                    <RelativePanel Margin="24">
                        <controls:ImageEx x:Name="FromEllipse"
                                               Source="{Binding Thumbnail}"
                                               Width="50"
                                               Height="50"
                                               CornerRadius="999"/>
                        <TextBlock Text="{Binding From}"
                                   Style="{StaticResource SubtitleTextBlockStyle}"
                                   RelativePanel.RightOf="FromEllipse"
                                   Margin="12,-6,0,0"/>
                        <TextBlock x:Name="SubjectLine"
                                   Text="{Binding Subject}"
                                   Style="{StaticResource BodyTextBlockStyle}"
                                   RelativePanel.Below="FromEllipse"
                                   Margin="0,12,0,0"/>
                        <TextBlock x:Name="Body"
                                   Text="{Binding Body}"
                                   Style="{StaticResource BodyTextBlockStyle}"
                                   TextWrapping="Wrap"
                                   RelativePanel.Below="SubjectLine"
                                   Margin="0,12,0,0"/>
                    </RelativePanel>
                </DataTemplate>
            </controls:ListDetailsView.DetailsTemplate>
            <controls:ListDetailsView.NoSelectionContentTemplate>
                <DataTemplate>
                    <StackPanel HorizontalAlignment="Center"
                                VerticalAlignment="Center">
                        <SymbolIcon Symbol="Mail"
                                    RenderTransformOrigin=".5,.5">
                            <SymbolIcon.RenderTransform>
                                <CompositeTransform
                                  ScaleX="2"
                                  ScaleY="2"/>
                            </SymbolIcon.RenderTransform>
                        </SymbolIcon>
                        <TextBlock Text="{Binding}"
                                   FontSize="24"
                                   Margin="0,12"/>
                    </StackPanel>
                </DataTemplate>
            </controls:ListDetailsView.NoSelectionContentTemplate>
            <controls:ListDetailsView.ListCommandBar>
                <CommandBar>
                    <!-- Button functionality to be implemented by developer -->
                    <AppBarButton Icon="Back" Label="Back"/>
                    <AppBarButton Icon="Forward" Label="Forward"/>
                    <CommandBar.Content>
                        <TextBlock Margin="12,14">
                      <Run Text="{Binding Emails.Count}" />
                      <Run Text="Items" />
                        </TextBlock>
                    </CommandBar.Content>
                </CommandBar>
            </controls:ListDetailsView.ListCommandBar>
            <controls:ListDetailsView.DetailsCommandBar>
                <CommandBar>
                    <!-- Button functionality to be implemented by developer -->
                    <AppBarButton Icon="MailReply" Label="Reply" />
                    <AppBarButton Icon="MailReplyAll" Label="Reply All" />
                    <AppBarButton Icon="MailForward" Label="Forward" />
                </CommandBar>
            </controls:ListDetailsView.DetailsCommandBar>
        </controls:ListDetailsView>
    </Grid>
`
5. Run the app. The ListDetailsView show 'Select an item to view' text only

Expected behavior

Items must be shown

Screenshots

No response

Windows Build Number

• Windows 10 1809 (Build 17763)
• Windows 10 1903 (Build 18362)
• Windows 10 1909 (Build 18363)
• Windows 10 2004 (Build 19041)
• Windows 10 20H2 (Build 19042)
• Windows 10 21H1 (Build 19043)
• Windows 11 21H2 (Build 22000)
• Other (specify)

Other Windows Build number

Windows 10 21H2

App minimum and target SDK version

• Windows 10, version 1809 (Build 17763)
• Windows 10, version 1903 (Build 18362)
• Windows 10, version 1909 (Build 18363)
• Windows 10, version 2004 (Build 19041)
• Other (specify)

Other SDK version

No response

Visual Studio Version

No response

Visual Studio Build Number

10.0.17763.0

Device form factor

Desktop

Nuget packages

No response

Additional context

No response

Help us help you

No.

[ghost]

Hello tungox6, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[tungox6]

Changing ItemsSource="{Binding Emails}" to ItemsSource="{x:Bind Emails}", the code works!

[michael-hawker]

Yup, we set the binding context in the sample app automatically, but it's something you'd have to do in your app or as you discovered switch to {x:Bind}. Our new sample infrastructure we're working on for #4487 will provide the x:Bind version from the start.