Макет ItemsControl не будет отображать коллекцию

Question

Я пытаюсь отобразить коллекцию элементов в макете ItemsControl, который помещен в другой userControl, но он ничего не отображает, вот что я пытался, зная, что большая часть этого кода скопирована из рабочих примеров, которые работают, я просто не могу выяснить, что не так, как я не опыт в wpf:

MainWindow.xaml

<Window x:Class="cafeteria.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:cafeteria"
        xmlns:local1="clr-namespace:cafeteria._shared"
        xmlns:_pages="clr-namespace:cafeteria._pages"
        mc:Ignorable="d"
        ResizeMode="NoResize"
        WindowStyle="None"
        WindowStartupLocation="CenterScreen"
        Title="منظومة الكافتريا "
        WindowState="Maximized">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"></RowDefinition>
            <RowDefinition Height="19*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="12*"></ColumnDefinition>
            <ColumnDefinition Width="3*"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <StackPanel Grid.Column="1" Grid.RowSpan="2" Background="#be2116" Orientation="Vertical">
            <!-- add the control buttons-->
            <local1:ApplicationControls></local1:ApplicationControls>
            <!--app name-->
            <Grid Margin="0,20,0,0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                </Grid.RowDefinitions>
                <Image Source="./_Content/logo.png" Grid.ColumnSpan="2" Height="80"></Image>
                <TextBlock FontSize="20" Grid.Column="1" Grid.Row="1" FontWeight="Bold" TextAlignment="Left" Foreground="White">منظومة</TextBlock>
                <TextBlock FontSize="20" Margin="0,0,10,0" Grid.Column="0" Grid.Row="1" FontWeight="Light" TextAlignment="right" Foreground="White">الكافتريا</TextBlock>
            </Grid>
            <local1:SideBar Margin="0,50,0,0"></local1:SideBar>
        </StackPanel>
        <StackPanel Background="#fe8d00" Grid.Row="0" Grid.Column="0"></StackPanel>

            <_pages:Food Grid.Column="0" Grid.Row="1"></_pages:Food>

    </Grid>
</Window>

Пищевой пользовательский контроль xaml файла

<UserControl x:Class="cafeteria._pages.Food"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:cafeteria._pages"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <ItemsControl ItemsSource="{Binding products}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="3"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Foreground="Black" Text="{Binding Path=name}"></TextBlock>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</UserControl>

Food.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace cafeteria._pages
{
    /// <summary>
    /// Interaction logic for Food.xaml
    /// </summary>
    public partial class Food : UserControl
    {

       public List<product> products;
        public Food()
        {
            this.products = new List<product>()
            {
                new product{ name = "chips"},
                 new product{ name = "pipsi"},
            };

            InitializeComponent();
        }


    }

    public class product
    {
        public string name { get; set; }
    }
}

Answer 1

Поскольку данные, которые должны отображаться в ItemsControl в UserControl, не должны предоставляться из унаследованного DataContext (например, модель представления Window), а вместо этого извлекаются изнутри логикой кода элемента управления, вы можете напрямую установить свойство ItemsSource в коде. позади.

Наиболее просто, назначив x:Name ItemsControl

<ItemsControl x:Name="itemsControl">

и затем доступ к сгенерированному полю в коде после вызова InitializeComponent:

itemsControl.ItemsSource = new List<product>()
{
    new product{ name = "chips" },
    new product{ name = "pipsi" },
};

---

Как примечание, вы ни при каких обстоятельствах не должны устанавливать DataContext UserControl на себя. В случае, если вы позже добавите привязываемые свойства к элементу управления, установка DataContext таким образом нарушит любые привязки его свойств к свойствам объекта модели представления в унаследованном DataContext, например, что-то вроде

<_pages:Food MyProperty="{Binding SomeViewModelProperty}"/>

не будет работать должным образом.

Answer 2

Чтобы ваш пример работал, вы можете, например, привязать элемент управления к себе.

<UserControl x:Class="cafeteria._pages.Food"
             ... DataContext="{Binding RelativeSource={RelativeSource Self}}">

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

<ItemsControl ItemsSource="{Binding Products}">

Как уже упоминал Клеменс, привязка к самому себе контрольного элемента не является хорошим подходом, я просто хотел указать, чего не хватает в вашем образце, чтобы он работал.

В качестве альтернативы вы также можете установить свойство ItemsSource из кода позади (то есть в ItemsCotrol.Loaded).

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