UWP Community Toolkit MasterDetailsView не является обязательным, как ожидалось - PullRequest
0 голосов
/ 05 марта 2020

Я пытался реализовать MasterDetailsView из UWP Community Toolkit, но без особого успеха. Я отразил исходный код SampleApp с моими собственными классами и не смог получить список, который использовал для отображения на панелях Master или Details. Наконец, я попытался создать новый проект в VS и точно скопировать исходный код, указанный в SampleApp, используя тот же класс Email, который используется в Sample App. Несмотря на полное копирование, я получаю одинаковые результаты.

Я заметил несколько ошибок привязки (показано ниже) в окне «Вывод» VS, которые указывают на то, что это проблема привязки, но насколько я вижу, я ' мы следовали нормальному формату привязки, который я использовал в других приложениях и с другими элементами управления.

Пример ошибки:

Error: BindingExpression path error: 'Emails' property not found on 'MasterDetailsTest.MainPage'. BindingExpression: Path='Emails' DataItem='MasterDetailsTest.MainPage'; target element is 'Microsoft.Toolkit.Uwp.UI.Controls.MasterDetailsView' (Name='null'); target property is 'ItemsSource' (type 'Object')

Существует как минимум еще один вопрос с той же самой проблемой на StackOverflow (я думал, что я видел больше), но нет принятых ответов, и ни один из непринятых ответов не решил проблему для меня. Я также попытался проверить исходный код Toolkit Sample App на github, чтобы убедиться, что в SampleApp отсутствует отсутствующий исходный код, но все идентично.

Я вставляю свой исходный код Приведенный ниже код, может кто-нибудь помочь определить, что с этим не так?

Предыдущий вопрос (нет принятых ответов)

Представление Master-Details в сообществе UWP Инструментарий

MainPage.xaml:

<Page
    x:Class="MasterDetailsTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MasterDetailsTest"
    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"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <controls:MasterDetailsView BackButtonBehavior="Automatic" ItemsSource="{Binding Emails}" NoSelectionContent="Select an item to view" CompactModeThresholdWidth="720">
        <controls:MasterDetailsView.ItemTemplate>
            <DataTemplate>
                <StackPanel Margin="8,0">
                    <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="0.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="0.5,0.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>
</Page>

MainPage.xaml.cs:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

namespace MasterDetailsTest
{
    public sealed partial class MainPage : Page
    {
        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." },
            new Email { From = "Becky Davidson", Subject = "Kids game", Body = "Don't forget the kids have their soccer game this Friday. We have to supply end of game snacks." },
            new Email { From = "OneDrive", Subject = "Check out your event recap", Body = "Your new album.\r\nYou uploaded some photos to yuor OneDrive and automatically created an album for you." },
            new Email { From = "Twitter", Subject = "Follow randomPerson, APersonYouMightKnow", Body = "Here are some people we think you might like to follow:\r\n.@randomPerson\r\nAPersonYouMightKnow" },
        };

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

Email.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MasterDetailsTest
{
    public class Email
    {
        public string From { get; set; }
        public string Subject { get; set; }
        public string Body { get; set; }
        public Uri Thumbnail { get; set; }
    }    
}

Ответы [ 2 ]

0 голосов
/ 06 марта 2020

Благодаря обсуждению с Ричардом Чжаном (комментарии выше) я обнаружил, в чем заключалась полная проблема. На самом деле проблема была связана с двумя компонентами, оба взаимосвязаны с другим.

  1. Набор инструментов сообщества SampleApp использовал {Binding} вместо {x:Bind}, что потребовало бы установки ItemsSource в коде файл, а также в XAML.
  2. Кроме того, для DataTemplate в XAML необходимо было также указать {x:DataType}.

Примечание: Для правильной работы {x:Bind} ItemsSource (в данном случае List<Email>) должен быть глобальным членом; он должен быть объявлен внутри класса, но вне каких-либо функций. Его можно определять / манипулировать внутри функции, но первоначальное объявление должно быть на уровне класса (я обычно помещаю их как первое в классе, сразу после открывающих скобок).

Я пробовал каждый из них в отдельности, прежде чем опубликовать вопрос, но не вместе в одно и то же время. После того, как я внес оба эти изменения (и в оба раздела DataTemplate), все заработало как положено.

Для дальнейшего использования правильный код 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>
0 голосов
/ 06 марта 2020

Это не проблема привязки, а проблема рендеринга.

Во время рендеринга невозможно выполнить рендеринг, так как вам не хватает некоторого критического содержимого. Но поскольку мы используем ключевое слово Binding вместо x:Bind, вы не получите ошибку при обнаружении ошибки рендеринга во время выполнения, а вместо этого прекратите рендеринг элемента электронной почты, поэтому мы увидим пробел.

Недостающее содержание выглядит следующим образом:

  1. Бру sh: Brush-Blue-01
  2. Поле класса: Thumbnail

Brush-Blue-01 появляется в MasterDetailsView.ItemTemplate, если вы не определили этот bru sh, вам нужно заменить или удалить его.

Thumbnail появится в MasterDetailsView.DetailsTemplate, это должно быть свойство в Email класс, если вы его не определили, что также вызвало бы исключение. Таким образом, вы можете рассмотреть возможность удаления элемента управления, который ссылается на это свойство, или усовершенствовать определение Email class.

...