UWP社区工具包中的“主-详细信息"视图 [英] Master-Details view in UWP Community Toolkit

问题描述

我尝试从UWP Community Toolkit 2.0实现主从视图.我从uwp社区工具包示例应用程序中复制了示例代码.但是似乎数据没有正确绑定.现在，主详细信息"视图为空.谁能帮助我我哪里出错了?

I tried to implement Master-Details view from UWP Community Toolkit 2.0. I copied the example code from the uwp community toolkit sample app. But It seems the data is not binding properly. Now the Master details View is empty. Can anyone help me where I went wrong?

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();
    }
}

我的输出: 我在Google搜索了很多东西.但是，由于这是一项新功能，因此没有任何帮助或教程.希望Stackoverflow社区对我有帮助

MY OUTPUT: I searched a lot in google. But as this is a new feature, there isn't any help or tutorial available. Hope Stackoverflow community helps me

推荐答案

您正在将MasterDetailsView的ItemsSource绑定到Emails，但是尚未为页面或MasterDetailsView设置DataContext.为了解决这个问题，您可以将DataContext设置为页面本身，或者使用x:Bind代替绑定

You are binding the ItemsSource of the MasterDetailsView to Emails, but you have not set a DataContext for the page or the MasterDetailsView. To solve this you can either set the DataContext to be the page itself, or use x:Bind instead of binding

使用DataContext:

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

使用x:Bind

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

这篇关于UWP社区工具包中的“主-详细信息"视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！