Master-Details view in UWP Community Toolkit

半城伤御伤魂 提交于 2020-04-21 05:15:16

问题


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 CODE:`

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

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


回答1:


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

Using DataContext:

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

Using x:Bind

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



回答2:


Granted this is a rather old question, but as it doesn't have an answer, I'll add the one I just discovered.

The problem is twofold:

  1. As mentioned in Shawn Kendrot's answer, {x:Bind}needs to be used instead of {Binding}.
  2. The DataTemplate in XAML needs a {x:DataType} to be set as well.

Both of these done together will solve the issue. The correct XAML code is pasted below:

    <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>


来源:https://stackoverflow.com/questions/46253939/master-details-view-in-uwp-community-toolkit

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!