Question

我尝试从UWP Community Toolkit 2.0实现Master-Details视图。我从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 CODE：

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

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

Answer 1

您正在将MasterDetailsView的ItemsSource绑定到Emails，但您尚未为该页面或MasterDetailsView设置DataContext。要解决此问题，您可以将DataContext设置为页面本身，或使用x：Bind而不是绑定

使用DataContext：

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

使用x：Bind

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

Answer 2

当然，这是一个比较老的问题，但由于没有答案，因此我将添加刚刚发现的问题。

问题是双重的：

如肖恩·肯特罗特（Shawn Kendrot）的回答所述，需要使用{x:Bind}代替{Binding}。
XAML中的DataTemplate也需要设置{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>

UWP社区工具包中的Master-Details视图

2 个答案: