XAML/WPF 绑定到 Page.Resources - 绑定流程如何？

Question

我正在尝试使用 2 个数据模板来创建如下所示的内容：

我需要一个控件，允许我动态构建的名称标签（每个 Material Design in XAML 的芯片）填充蓝色框区域，首先水平堆叠，然后垂直堆叠为每一行填上。根据我的理解，WrapPanel 是我需要使用的，我找到了各种示例并尝试调整它们以满足我的需要。我想我很喜欢这个，但无法弄清楚我在这里错过了什么。

根据我的理解，我的 ScrollViewer.ItemsControl 应该引入我的 x:Key="Recipients" DataTemplate，它应该为我的 [=19] 中的 Patient 实例实现我的 x:Key="RecipientChip"DataTemplate =] 设置为 Patients.

我认为我没有正确绑定东西，因为当我构建时，我看不到任何打印。它没有在我的输出选项卡中抛出任何错误，所以我不确定发生了什么。我的 Patients IEnumeral 像预期的那样填充为索引对象。有人可以帮助我理解为什么我的筹码没有出现以及绑定流程如何进行吗？我觉得我正在通过我的 ScrollViewer.ItemsControll 将 Patients 传递给引用的控件，但也许我只是读得太多了？

这是我的代码：

XAML

    <Page.Resources>
        <DataTemplate x:Key="RecipientChip">
            <StackPanel>
                <materialDesign:Chip
                    Content="{Binding Patient.Name}">
                    <materialDesign:Chip.Icon>
                        <Image
                            Source="{Binding Patient.Image}" />
                    </materialDesign:Chip.Icon>
                </materialDesign:Chip>
            </StackPanel>
        </DataTemplate>

        <DataTemplate x:Key="Recipients">
            <StackPanel>
                <Label Content="Recipients:" Background="Gray" FontSize="16" />
                <ItemsControl x:Name="Recipients" ItemsSource="{Binding Patients}" ItemTemplate="{StaticResource RecipientChip}" >
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapPanel Orientation="Horizontal" ScrollViewer.HorizontalScrollBarVisibility="Disabled" />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                </ItemsControl>
            </StackPanel>
        </DataTemplate>

    </Page.Resources>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="32*"/>
            <ColumnDefinition Width="126*"/>
            <ColumnDefinition Width="Auto" MinWidth="66.999"/>
            <ColumnDefinition Width="193*"/>
            <ColumnDefinition Width="32*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>

        <materialDesign:Card
            Background="{DynamicResource PrimaryHueLightBrush}"
            Foreground="{DynamicResource PrimaryHueLightForegroundBrush}"
            Grid.Row="0"
            Grid.Column="1"
            Grid.RowSpan="2"
            Grid.ColumnSpan="3"
            Padding="8"
            Margin="0,65,0,50">
            <StackPanel>
                <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
                    <ItemsControl ItemTemplate="{StaticResource Recipients}" />
                </ScrollViewer>
            </StackPanel>
        </materialDesign:Card>

隐藏代码：

    public partial class EmailMessageView : Page
    {

        public EmailMessageView(Email email)
        {
            InitializeComponent();

            Email = email;
            Patients = email.Patients.Data;
            EmailContent.NavigateToString(email.Content);
        }

        public Email Email;
        public IEnumerable<Patient> Patients;
    }

患者

-[0]    {Mable} NotificationLinkApp.Models.Patient
        Address "9930 Somewhere St. "   string
        Age 18  double
+       Birthday    {NotificationLinkApp.Models.CarbonDate} NotificationLinkApp.Models.CarbonDate
        City    "Anywhere"  string
        CommunicationId 3   int?
+       CreatedAt   {NotificationLinkApp.Models.CarbonDate} NotificationLinkApp.Models.CarbonDate
        Email   "Mable.Lang@example.com"    string
        FirstName   "Mable" string
        Gender  1   int
        HomePhone   "555-555-4260"  string
        HomePhoneIsLandline null    int?
        Id  1490607 int
        Image   "pack://application:,,,/Resources/Images/user-unknown.png"  string
        IsEmail 1   int?
        IsMail  1   int?
        IsPhone 1   int?
        IsReviewRequest 1   int?
        IsText  1   int?
        LanguageId  25493   int?
        LastName    "Lang"  string
        Latitude    "40.527834" string
        Longitude   "-122.318749"   string
        Name    "Mable Lang"    string
        OfficeId    2   int
        ParentId    null    string
        PreferredConfidential   ""  string
        PreferredConfirm    ""  string
        PreferredContact    ""  string
        PreferredRecall ""  string
        ReferenceId "4634"  string
        SSN null    string
        State   "New Mexico"    string
+       UpdatedAt   {NotificationLinkApp.Models.CarbonDate} NotificationLinkApp.Models.CarbonDate
        WirelessPhone   "555-555-4745"  string
        WorkPhone   "555-555-3226"  string
        Zip "90134" string
        _age    0   double
        _email  "Mable.Lang@example.com"    string
        _homePhone  "555-555-4260"  string
        _image  ""  string
        _wirelessPhone  "555-555-4745"  string
        _workPhone  "555-555-3226"  string

Answer 1

最后，我通过简化代码并将 DataContext 设置为 Patients 使其正常工作。我继续利用 WrapPanel 的本机功能，以便我的 "chips" 可以水平堆叠并像文本一样换行。这是工作代码。

XAML

    <Page.Resources>
        <DataTemplate x:Key="RecipientChip">
            <StackPanel>
                <materialDesign:Chip
                    Background="#FFFFFFFF"
                    Content="{Binding Name}" Click="Chip_Clicked">
                    <materialDesign:Chip.Icon>
                        <Image
                            Source="{Binding Image}" />
                    </materialDesign:Chip.Icon>
                </materialDesign:Chip>
            </StackPanel>
        </DataTemplate>
    </Page.Resources>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="32*"/>
            <ColumnDefinition Width="126*"/>
            <ColumnDefinition Width="Auto" MinWidth="66.999"/>
            <ColumnDefinition Width="193*"/>
            <ColumnDefinition Width="32*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>

        <materialDesign:Card
            Background="{DynamicResource PrimaryHueLightBrush}"
            Foreground="{DynamicResource PrimaryHueLightForegroundBrush}"
            Grid.Row="0"
            Grid.Column="1"
            Grid.RowSpan="2"
            Grid.ColumnSpan="3"
            Padding="8"
            Margin="0,65,0,50">
            <StackPanel>
                <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
                    <StackPanel>
                        <Label Content="Recipients:" FontSize="16" />
                        <ItemsControl ItemsSource="{Binding}"  ItemTemplate="{StaticResource RecipientChip}">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <WrapPanel IsItemsHost="True" />
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                        </ItemsControl>
                    </StackPanel>
                </ScrollViewer>
            </StackPanel>
        </materialDesign:Card>

        <WebBrowser Name="EmailContent" Grid.Row="1" Grid.Column="1" Grid.RowSpan="5" Grid.ColumnSpan="3" Margin="0,52,0,10"/>

    </Grid>

代码隐藏

    public EmailMessageView(Email email)
    {
        InitializeComponent();

        Email = email;
        Patients = email.Patients.Data;
        EmailContent.NavigateToString(email.Content);
        DataContext = Patients;
    }

    public Email Email;
    public IEnumerable<Patient> Patients;

XAML/WPF 绑定到 Page.Resources - 绑定流程如何？

XAML/WPF Binding to Page.Resources - How does binding flow?

c#

wpf

xaml

material-design-in-xaml