C# UWP社区工具包中的主详细信息视图

我试图从UWP社区工具包2.0中实现主细节视图。我从uwp社区工具包示例应用程序复制了示例代码。但数据似乎没有正确绑定。现在，“主详细信息”视图为空。谁能帮我找出哪里出了问题

XAMl代码：`

<Page
    x:Class="FaceIdentification.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FaceIdentification"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
    xmlns:models="using:Microsoft.Toolkit.Uwp.SampleApp.Models"
    mc:Ignorable="d"  >

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <controls:MasterDetailsView ItemsSource="{Binding Emails}"
                                    NoSelectionContent="Select an item to view"
                                    Foreground="Black">
            <controls:MasterDetailsView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Margin="0,8">
                        <TextBlock Text="{Binding From}" 
                                   Style="{ThemeResource SubtitleTextBlockStyle}"/>
                        <TextBlock Text="{Binding Subject}" 
                                   Style="{ThemeResource BodyTextBlockStyle}" 
                                   Foreground="{ThemeResource Brush-Blue-01}" 
                                   MaxLines="1"/>
                        <TextBlock Text="{Binding Body}" 
                                   Style="{ThemeResource BodyTextBlockStyle}" 
                                   Opacity=".6" 
                                   MaxLines="1"/>
                    </StackPanel>
                </DataTemplate>
            </controls:MasterDetailsView.ItemTemplate>
            <controls:MasterDetailsView.DetailsTemplate>
                <DataTemplate>
                    <RelativePanel Margin="24">
                        <controls:RoundImageEx 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>
    </Grid>
</Page>

`

CS代码：

public sealed partial class MainPage : Page
{
    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."
    );
    public MainPage()
    {
        this.InitializeComponent();
    }
}

公共密封部分类主页面：第页
{
公共类电子邮件
{
来自{get；set；}的公共字符串
公共字符串主题{get；set；}
公共字符串体{get；set；}
}
列表电子邮件=新列表
(
新电子邮件{From=“Steve Johnson”，Subject=“Sunch Tomory”，Body=“你明天有空吃午饭吗？一位客户想和你讨论一个项目。”
);
公共主页（）
{
this.InitializeComponent（）；
}
}

我的输出：

---

我在谷歌上搜索了很多。但由于这是一项新功能，因此没有任何帮助或教程可用。希望Stackoverflow社区帮助我

您正在将MasterDetailsView的ItemsSource绑定到

电子邮件

，但您尚未为页面或MasterDetailsView设置DataContext。要解决此问题，您可以设置DataContext要成为页面本身，请使用x:Bind而不是binding

使用数据上下文：

public MainPage()
{
    this.InitializeComponent();
    DataContext = this;
}

使用x:Bind

<controls:MasterDetailsView ItemsSource="{x:Bind Emails}"/>

---

您正在将MasterDetailsView的ItemsSource绑定到

电子邮件

，但尚未为页面或MasterDetailsView设置DataContext。要解决此问题，您可以将DataContext设置为页面本身，或使用x:Bind而不是binding

使用数据上下文：

public MainPage()
{
    this.InitializeComponent();
    DataContext = this;
}

使用x:Bind

<controls:MasterDetailsView ItemsSource="{x:Bind Emails}"/>

这是一个相当古老的问题，但由于没有答案，我将添加我刚刚发现的问题

问题有两方面：

正如Shawn Kendrot在回答中提到的，需要使用

{x:Bind}

而不是

{Binding}

XAML中的数据模板也需要设置{x:DataType}

这两项工作一起完成将解决问题。正确的XAML代码粘贴在下面：

    <controls:MasterDetailsView BackButtonBehavior="Automatic" ItemsSource="{x:Bind inbox}" NoSelectionContent="Select an item to view" CompactModeThresholdWidth="720">
        <controls:MasterDetailsView.ItemTemplate>
            <DataTemplate x:DataType="local:Email">
                <StackPanel Margin="8,0">
                    <TextBlock Text="{x:Bind From}" Style="{ThemeResource SubtitleTextBlockStyle}" />
                    <TextBlock Text="{x:Bind Subject}" Style="{ThemeResource BodyTextBlockStyle}" Foreground="{ThemeResource Brush-Blue-01}" MaxLines="1" />
                    <TextBlock Text="{x:Bind Body}" Style="{ThemeResource BodyTextBlockStyle}" Opacity="0.6" MaxLines="1" />
                </StackPanel>
            </DataTemplate>
        </controls:MasterDetailsView.ItemTemplate>
        <controls:MasterDetailsView.DetailsTemplate>
            <DataTemplate x:DataType="local:Email">
                <RelativePanel Margin="24">
                    <controls:ImageEx x:Name="FromEllipse" Source="{x:Bind Thumbnail}" Width="50" Height="50" CornerRadius="999" />
                    <TextBlock Text="{x:Bind From}" Style="{ThemeResource SubtitleTextBlockStyle}" RelativePanel.RightOf="FromEllipse" Margin="12,-6,0,0" />
                    <TextBlock x:Name="SubjectLine" Text="{x:Bind Subject}" Style="{ThemeResource BodyTextBlockStyle}" RelativePanel.Below="FromEllipse" Margin="0,12,0,0" />
                    <TextBlock x:Name="Body" Text="{x:Bind Body}" Style="{ThemeResource BodyTextBlockStyle}" TextWrapping="Wrap" RelativePanel.Below="SubjectLine" Margin="0,12,0,0" />
                </RelativePanel>
            </DataTemplate>
        </controls:MasterDetailsView.DetailsTemplate>

这是一个相当古老的问题，但由于没有答案，我将添加我刚刚发现的问题

问题有两方面：

正如Shawn Kendrot在回答中提到的，需要使用

{x:Bind}

而不是

{Binding}

XAML中的数据模板也需要设置{x:DataType}

这两项工作一起完成将解决问题。正确的XAML代码粘贴在下面：

    <controls:MasterDetailsView BackButtonBehavior="Automatic" ItemsSource="{x:Bind inbox}" NoSelectionContent="Select an item to view" CompactModeThresholdWidth="720">
        <controls:MasterDetailsView.ItemTemplate>
            <DataTemplate x:DataType="local:Email">
                <StackPanel Margin="8,0">
                    <TextBlock Text="{x:Bind From}" Style="{ThemeResource SubtitleTextBlockStyle}" />
                    <TextBlock Text="{x:Bind Subject}" Style="{ThemeResource BodyTextBlockStyle}" Foreground="{ThemeResource Brush-Blue-01}" MaxLines="1" />
                    <TextBlock Text="{x:Bind Body}" Style="{ThemeResource BodyTextBlockStyle}" Opacity="0.6" MaxLines="1" />
                </StackPanel>
            </DataTemplate>
        </controls:MasterDetailsView.ItemTemplate>
        <controls:MasterDetailsView.DetailsTemplate>
            <DataTemplate x:DataType="local:Email">
                <RelativePanel Margin="24">
                    <controls:ImageEx x:Name="FromEllipse" Source="{x:Bind Thumbnail}" Width="50" Height="50" CornerRadius="999" />
                    <TextBlock Text="{x:Bind From}" Style="{ThemeResource SubtitleTextBlockStyle}" RelativePanel.RightOf="FromEllipse" Margin="12,-6,0,0" />
                    <TextBlock x:Name="SubjectLine" Text="{x:Bind Subject}" Style="{ThemeResource BodyTextBlockStyle}" RelativePanel.Below="FromEllipse" Margin="0,12,0,0" />
                    <TextBlock x:Name="Body" Text="{x:Bind Body}" Style="{ThemeResource BodyTextBlockStyle}" TextWrapping="Wrap" RelativePanel.Below="SubjectLine" Margin="0,12,0,0" />
                </RelativePanel>
            </DataTemplate>
        </controls:MasterDetailsView.DetailsTemplate>

该代码是您的代码吗？看起来它没有更新视图。如果将其更改为

ObservableCollection

，会发生什么情况？1.我在这里给出了所有代码。2.没有。这不起作用。1.调试时输出窗口中是否存在任何绑定错误？2.我认为您的问题可能是由于xaml不知道正确的DataCon文本绑定，尝试使用x:Bind而不是Binding在输出窗口中没有错误。我将尝试x:Bind并报告。代码是您的代码吗？看起来它没有更新视图。如果将其更改为ObservableCollection？1.我已在此处给出了所有代码。2.不，这不起作用。1.视图中是否存在绑定错误调试时的输出窗口？2.我认为您的问题可能是因为xaml不知道绑定的正确DataContext，请尝试使用x:Bind而不是Binding。输出窗口中没有错误。我将尝试x:Bind并报告。