No data shown in DataGrid

[just-ero]

Hi, I have a sample project at https://github.com/just-ero/DataGridTest.

In this project, I have this Person class:

public class Person(string name, int age)
{
    public string Name { get; set; } = name;
    public int Age { get; set; } = age;
}

And I have this viewmodel:

public class PersonGridViewModel
{
    public ObservableCollection<Person> People { get; } = [
        new("John Doe", 25),
        new("Jane Doe", 30),
    ];
}

As you can see, there is data persent.

Here are the relevant axaml files:

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:vm="using:DataGridTest.ViewModels"

             x:Class="DataGridTest.Views.PersonGrid"
             x:DataType="vm:PersonGridViewModel">
  <Design.DataContext>
    <vm:PersonGridViewModel />
  </Design.DataContext>

  <DataGrid ItemsSource="{Binding People}">
    <DataGrid.Columns>
      <DataGridTextColumn Header="Name" Binding="{Binding Name}" />
      <DataGridTextColumn Header="Age" Binding="{Binding Age}" />
    </DataGrid.Columns>
  </DataGrid>
</UserControl>

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:v="using:DataGridTest.Views"
        xmlns:vm="using:DataGridTest.ViewModels"

        x:Class="DataGridTest.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel">
  <v:PersonGrid />
</Window>

As far as I can tell, everything should be set up correctly. However, there's simply no data in the grid at runtime. The grid shows up, but it's just the header.
Crucially, there is data when I put the DataGrid into the MainWindow directly instead of in a separate UserControl. Is this the problem? Why?

[timunie]

use DevTools F12 to inspect DataContext is correctly set

[just-ero]

I'm sorry, I don't understand what this means. Where in Visual Studio should I be pressing F12?

[robloo]

Press F12 when your app is running. The F12 is handled by the Avalonia app itself to open Avalonia DevTools.

[just-ero]

I don't follow. Nothing happens when I press F12 while focusing my app.

[rabbitism]

Design.DataContext is only for design time (previewer), You need to actually assign your DataContext (PersonGridViewModel) to your view (PersonGrid). Either by assigning in xaml

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:vm="using:DataGridTest.ViewModels"

             x:Class="DataGridTest.Views.PersonGrid"
             x:DataType="vm:PersonGridViewModel">
  <UserControl.DataContext>
    <vm:PersonGridViewModel />
  </UserControl.DataContext>

  <DataGrid ItemsSource="{Binding People}">
    <DataGrid.Columns>
      <DataGridTextColumn Header="Name" Binding="{Binding Name}"
                          IsReadOnly="False" />
      <DataGridTextColumn Header="Age" Binding="{Binding Age}"
                          IsReadOnly="False" />
    </DataGrid.Columns>
  </DataGrid>
</UserControl>

or in code behind

public partial class PersonGrid : UserControl
{
    public PersonGrid()
    {
        InitializeComponent();
        this.DataContext = new PersonGridViewModel();
    }
}

[just-ero]

Thank you.