MasterDetailsView не показывает элементы главного списка, несмотря на установку свойств

Question

После выполнения кода Microsoft для элемента управления MasterDetailsView главный список становится пустым и вообще не отображает никаких элементов? Почему это произошло и как это исправить?

MasterDetailPage.xaml

<Page
    x:Class="MyApp.MasterDetailPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyApp"
    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:data="using:MyApp.Models"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <controls:MasterDetailsView BackButtonBehavior="Automatic" 
                                    x:Name="MyMasterDetailsView"

                                    NoSelectionContent="Select an item to view"
                                    CompactModeThresholdWidth="720">
            <controls:MasterDetailsView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Margin="0,8">
                        <TextBlock Text="{Binding From}" 
                                   Style="{ThemeResource SubtitleTextBlockStyle}"/>
                        <TextBlock Text="{Binding Body}" 
                                   Style="{ThemeResource BodyTextBlockStyle}" 
                                   Opacity=".6" 
                                   MaxLines="1"/>
                    </StackPanel>
                </DataTemplate>
            </controls:MasterDetailsView.ItemTemplate>
            <controls:MasterDetailsView.DetailsTemplate>
                <DataTemplate>
                    <RelativePanel Margin="24">
                        <controls:ImageEx x:Name="FromEllipse"
                                               Source="{Binding Thumbnail}"
                                               Width="50"
                                               Height="50"
                                               CornerRadius="999"/>
                        <TextBlock Text="{Binding From}" 
                                   Style="{ThemeResource SubtitleTextBlockStyle}" 
                                   RelativePanel.RightOf="FromEllipse" 
                                   Margin="12,-6,0,0"/>
                        <TextBlock x:Name="SubjectLine"
                                   Text="{Binding Subject}" 
                                   Style="{ThemeResource BodyTextBlockStyle}" 
                                   RelativePanel.Below="FromEllipse"
                                   Margin="0,12,0,0"/>
                        <TextBlock x:Name="Body" 
                                   Text="{Binding Body}" 
                                   Style="{ThemeResource BodyTextBlockStyle}" 
                                   TextWrapping="Wrap" 
                                   RelativePanel.Below="SubjectLine" 
                                   Margin="0,12,0,0"/>
                    </RelativePanel>
                </DataTemplate>
            </controls:MasterDetailsView.DetailsTemplate>
            <controls:MasterDetailsView.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:MasterDetailsView.NoSelectionContentTemplate>
            <controls:MasterDetailsView.MasterCommandBar>
                <CommandBar>
                    <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:MasterDetailsView.MasterCommandBar>
      <controls:MasterDetailsView.DetailsCommandBar>
        <CommandBar>
          <AppBarButton Icon="MailReply" Label="Reply" />
          <AppBarButton Icon="MailReplyAll" Label="Reply All" />
          <AppBarButton Icon="MailForward" Label="Forward" />
        </CommandBar>
      </controls:MasterDetailsView.DetailsCommandBar>
    </controls:MasterDetailsView>
  </Grid>
</Page>

MasterDetailPage.xaml.cs

    public sealed partial class MasterDetailPage: Page
    {
        public MasterDetailPage()
        {    
            this.InitializeComponent();

        Binding myBinding = new Binding()
        {
            Source = Emails,
            Mode = BindingMode.OneWay
        };

        MyMasterDetailsView.SetBinding(MasterDetailsView.ItemsSourceProperty, myBinding);

            var emails = MyEmailManager.GetEmails();
            emails.ForEach(email => Emails.Add(email));
        }

        public ObservableCollection<Email> Emails = new ObservableCollection<Email>();

        public void OnXamlRendered(FrameworkElement control)
        {
            control.DataContext = this;
        }
    }

Email.cs

    public class Email
    {
        public string From { get; set; }
        public string Body { get; set; }
    }

    public class MyEmailManager
    {
        public static List<Email> GetEmails()
        {
            var MyEmails = new List<Email>
            {
                new Email
                {
                    From = "Steve Johnson",
                    Body = "Are you available for lunch tomorrow? A client would like to discuss a project with you."
                },
                new Email
                {
                    From = "Pete Davidson",
                    Body = "Don't forget the kids have their soccer game this Friday. We have to supply end of game snacks."
                },
                new Email
                {
                    From = "OneDrive",
                    Body = "Your new album.\r\nYou uploaded some photos to yuor OneDrive and automatically created an album for you."
                },
                new Email
                {
                    From = "Twitter",
                    Body = "Here are some people we think you might like to follow:\r\n.@randomPerson\r\nAPersonYouMightKnow"
                }
            };

            return MyEmails;
        }
    }

Текущий результат

введите описание изображения здесь

Answer 1

Исходя из предоставленного вами кода, вы не присвоили значение переменной Emails, попробуйте следующий код:

public MasterDetailPage()
{
    this.InitializeComponent();
    var emails = MyEmailManager.GetEmails();
    emails.ForEach(email => Emails.Add(email));
}

public ObservableCollection<Email> Emails = new ObservableCollection<Email>();

// other code

Из-за изменения коллекции вам необходимо уведомить Пользовательский интерфейс для внесения изменений, поэтому рекомендуется использовать ObservableCollection вместо ICollection , получить запись электронной почты через MyEmailManager и добавить ее в коллекцию.

В MasterDetailsView XAML требуется привязка Emails:

<controls:MasterDetailsView ItemsSource="{x:Bind Emails}"
                            ...>
  <!-- content code -->
</controls:MasterDetailsView>

В WindowsCommunityToolkit полный код Xaml и C# можно просмотреть здесь

Спасибо.