UWP 社区工具包中的主从视图

Posted 2023-04-12

【中文标题】UWP 社区工具包中的主从视图

【英文标题】：Master-Details view in UWP Community Toolkit

【发布时间】：2018-02-25 11:51:37

【问题描述】：

我尝试从 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 代码：

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

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

【问题讨论】：

代码是您的代码吗？看起来它没有更新视图。如果将其更改为 ObservableCollection<Email> 会发生什么？

1.我在这里给出了我所有的代码。 2. 不。那没用。

1.调试时输出窗口中是否有任何绑定错误？ 2.我认为您的问题可能是由于 xaml 不知道正确的 DataContext 进行绑定，请尝试使用 x:Bind 而不是 Binding

输出窗口中没有错误。我将尝试 x:Bind 并报告。

【参考方案1】：

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

使用 DataContext：

public MainPage()

    this.InitializeComponent();
    DataContext = this;

使用 x:Bind

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

【参考方案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>