Displaying collection of objects with ItemsControl-CodePudding

I am trying to display collection of objects using ItemsControl. This is the simple example I created;

<Window x:Class="PhotoWieverWPF.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:PhotoWieverWPF"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <ScrollViewer>
            <ItemsControl x:Name="Images" ItemsSource="{Binding Path=Items}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Path=FullName}" />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>
    </Grid>
</Window>

using System.Collections.ObjectModel;
using System.Windows;

namespace PhotoWieverWPF
{
    /// <summary>
    /// MainWindow.xaml etkileşim mantığı
    /// </summary>
    public partial class MainWindow : Window
    {
        public ObservableCollection<ListItem> Items { get; } = new ObservableCollection<ListItem>();
        public MainWindow()
        {
            InitializeComponent();
            Items.Add(new ListItem("Item 1"));
            Items.Add(new ListItem("Item 2"));
            Items.Add(new ListItem("Item 3"));
            Items.Add(new ListItem("Item 4"));
            Items.Add(new ListItem("Item 5"));
            Items.Add(new ListItem("Item 6"));
        }

        public class ListItem
        {
            public string FullName { get; }
            public ListItem(string fullname)
            {
                FullName = fullname;
            }
        }
    }
}

However, I am getting a blank window with no errors. I suppose I made a mistake with binding, but I can't figure out what it is.

CodePudding user response：

Like @Clemens said you forget to set DataContext for your View. You can easily set it to your code-behind's constructor like this:

public MainWindow()
    {
        InitializeComponent();
        DataContext = this; // you need this
        Items.Add(new ListItem("Item 1"));
        Items.Add(new ListItem("Item 2"));
        Items.Add(new ListItem("Item 3"));
        Items.Add(new ListItem("Item 4"));
        Items.Add(new ListItem("Item 5"));
        Items.Add(new ListItem("Item 6"));
    }

CodePudding user response：

Take out Code Behind in a separate class and everything will be much simpler.

using System.Collections.ObjectModel;
using System.Windows;

namespace PhotoWieverWPF
{
    /// <summary>
    /// MainWindow.xaml etkileşim mantığı
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }

    public class ItemsViewModel
    {
        public ObservableCollection<ListItem> Items { get; }
            = new ObservableCollection<ListItem>()
            {
                new ListItem("Item 1"),
                new ListItem("Item 2"),
                new ListItem("Item 3"),
                new ListItem("Item 4"),
                new ListItem("Item 5"),
                new ListItem("Item 6")
            };
    }
    public class ListItem
    {
        public string FullName { get; }
        public ListItem(string fullname)
        {
            FullName = fullname;
        }
    }
}

<Window x:Class="PhotoWieverWPF.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:PhotoWieverWPF"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800"
        DataContext="{DynamicResource vm}">
    <Window.Resources>
        <local:ItemsViewModel x:Key="vm"/>
    </Window.Resources>
    <Grid>
        <ScrollViewer>
            <ItemsControl ItemsSource="{Binding Items}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding FullName}" />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>
    </Grid>
</Window>