How to use uwp Community Toolkit MasterDetailsView?

698 views Asked by At

I am working on uwp project with template 10, I tried to use UWP Community Toolkit but i have some trouble to implement the MasterDetailsView when i put the control in my xaml page i have an exception "System.Runtime.Remoting.RemotingException" on the designer, i think the binding can be the cause of my problem but i don't know why.

I followed the sample project: https://github.com/Microsoft/UWPCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MasterDetailsView

doc : http://uwpcommunitytoolkit.readthedocs.io/en/master/controls/MasterDetailsView/

Model

    class FeedModel
    {
        public string feed_id { get; set; }
        public string title { get; set; }
        public string author { get; set; }
        public string content { get; set; }
        public string date { get; set; }
    }

ViewModel Property

public ObservableCollection<FeedModel> test { get; set; }

XAML

<Page
    x:Class="edugate.Views.Teachers.FeedsPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:edugate.Views.Teachers"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Behaviors="using:Template10.Behaviors"
    xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:controls="using:Template10.Controls"
    xmlns:vm="using:edugate.ViewModels.Teachers"
    xmlns:uwp="using:Microsoft.Toolkit.Uwp.UI.Controls"
    xmlns:models="using:edugate.Models.Teachers"
    mc:Ignorable="d">

    <Page.DataContext>
        <vm:FeedsPageViewModel x:Name="ViewModel" />
    </Page.DataContext>

    <RelativePanel Background="#FAFAFA">
        <controls:PageHeader x:Name="pageHeader"
                             RelativePanel.AlignLeftWithPanel="True"
                             RelativePanel.AlignRightWithPanel="True"
                             RelativePanel.AlignTopWithPanel="True"
                             Text="File d'actualité"
                             Background="#e45325">
        </controls:PageHeader>

        <RelativePanel x:Name="ContentTop"
                       RelativePanel.Below="pageHeader"
                       RelativePanel.AlignLeftWithPanel="True"
                       RelativePanel.AlignRightWithPanel="True"
                       Margin="10,20,10,10">

            <ComboBox x:Name="ChoiceClass" 
                      HorizontalAlignment="Stretch"
                      RelativePanel.AlignLeftWithPanel="True"
                      RelativePanel.AlignRightWithPanel="True"
                      PlaceholderText="Sélectionner une classe"
                      ItemsSource="{Binding ClassList}"
                      Margin="0"
                      SelectedItem="{Binding ClassSelected, Mode=TwoWay}">

                <ComboBox.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Value.name}"/>
                    </DataTemplate>
                </ComboBox.ItemTemplate>
            </ComboBox>
        </RelativePanel>

        <uwp:MasterDetailsView Foreground="Black"
                                ItemsSource="{Binding test, Mode=TwoWay}"
                                NoSelectionContent="Select an item to view"
                                 RelativePanel.Below="ContentTop">

            <uwp:MasterDetailsView.ItemTemplate>
                <DataTemplate >
                    <StackPanel Margin="0,8">
                        <TextBlock Text="{Binding Path=title, Mode=TwoWay}" />
                        <TextBlock Text="{Binding Path=content, Mode=TwoWay}" />
                        <TextBlock Text="{Binding Path=date, Mode=TwoWay}" />
                    </StackPanel>
                </DataTemplate>
            </uwp:MasterDetailsView.ItemTemplate>

            <uwp:MasterDetailsView.DetailsTemplate>
                <DataTemplate>
                    <RelativePanel Margin="8">
                        <Ellipse x:Name="FromEllipse"
                     Width="50"
                     Height="50"
                     Fill="Gray" />
                        <TextBlock Margin="12,10,0,0"
                       VerticalAlignment="Center"
                       RelativePanel.RightOf="FromEllipse"
                       Text="{Binding title}" />
                        <TextBlock x:Name="SubjectLine"
                       RelativePanel.Below="FromEllipse"
                       Margin="0,12,0,0"
                       Text="{Binding content}" />
                        <TextBlock x:Name="Body"
                       Margin="0,12,0,0"
                       RelativePanel.Below="SubjectLine"
                       Text="{Binding Path=date}"
                       TextWrapping="Wrap" />
                    </RelativePanel>
                </DataTemplate>
            </uwp:MasterDetailsView.DetailsTemplate>

            <uwp:MasterDetailsView.NoSelectionContentTemplate>
                <DataTemplate>
                    <StackPanel HorizontalAlignment="Center"
                      VerticalAlignment="Center">
                        <SymbolIcon RenderTransformOrigin=".5,.5"
                        Symbol="Mail">
                            <SymbolIcon.RenderTransform>
                                <CompositeTransform ScaleX="2"
                                    ScaleY="2" />
                            </SymbolIcon.RenderTransform>
                        </SymbolIcon>
                        <TextBlock Margin="0,12"
                       FontSize="24"
                       Text="{Binding}" />
                    </StackPanel>
                </DataTemplate>
            </uwp:MasterDetailsView.NoSelectionContentTemplate> -->
        </uwp:MasterDetailsView>
    </RelativePanel>
</Page>
0

There are 0 answers