我正在使用模板 10 开发 uwp 项目,我尝试使用 UWP 社区工具包,但是当我将控件放在我的 xaml 页面中时,我在实现 MasterDetailsView 时遇到了一些麻烦,我在设计师,我认为绑定可能是我的问题的原因,但我不知道为什么。
文档:http ://uwpcommunitytoolkit.readthedocs.io/en/master/controls/MasterDetailsView/
模型
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 属性
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>