Associating data with a DataGrid at design time

Question

I am learning XAML and this is the main question.
I want to bind data so that it is generated during development (during normal operation, it works fine) through XAML.

Xaml

<Window x:Class="GridTest.MainWindow" Name="This" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Grid> <DataGrid AutoGenerateColumns="False" Height="200" Width="308" HorizontalAlignment="Left" Margin="25,23,0,0" Name="dataGrid1" VerticalAlignment="Top" ItemsSource="{Binding ElementName=This, Path=MyData}"> <DataGrid.Columns> <DataGridTextColumn Header="No" Width="Auto" Binding="{Binding Id}" IsReadOnly="True" /> <DataGridTextColumn Header="Title" Binding="{Binding Title}" IsReadOnly="True" /> <DataGridTextColumn Header="Description" Binding="{Binding Description}" IsReadOnly="True" /> </DataGrid.Columns> </DataGrid> 

Code for

 public partial class MainWindow : Window { public List<Item> MyData { get { return myData; } } List<Item> myData; public MainWindow() { myData = new List<Item> { new Item{ Id=5, Description="Brown Car", Title="my car"}, new Item{Id=1,Description="sweet dog", Title="my dog"}, }; InitializeComponent(); } } public class Item { public string Title { set; get; } public string Description { set; get; } public int Id { set; get; } } 

Answer 1

The sequence is as follows:

1) Move the code from the MainWindow class to the user class and set the DataContext property:

 public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); this.DataContext = new MainWindowViewModel(); } } public class MainWindowViewModel { public MainWindowViewModel() { myData = new List<Item> { new Item{ Id=5, Description="Brown Car", Title="my car"}, new Item{Id=1,Description="sweet dog", Title="my dog"}, }; } public List<Item> MyData { get { return myData; } } List<Item> myData; } 

2) Change the DataGrid binding:

 ItemsSource="{Binding MyData}" 

3) Add a new ResourceDictionary named DataGridSample.xaml , open its properties (Right-click → Properties), set the BuildAction property to DesignData and clear the value of the CustomTool property.

4) Copy this code, but change the vm namespace from WpfApplication1 to yours:

 <vm:MainWindowViewModel xmlns:vm="clr-namespace:WpfApplication1"> <vm:MainWindowViewModel.MyData> <vm:Item Id="1" Title="My dog" Description="Sweet dog" /> <vm:Item Id="5" Title="My car" Description="Brown car" /> </vm:MainWindowViewModel.MyData> </vm:MainWindowViewModel> 

5) Go back to MainWindow.xaml and add the following lines to the Window element, where all the declarations are:

 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DataContext="{d:DesignData Source=DataGridSample.xaml}" 

After that, you can switch to development mode, and you will see that the datagrid is with two rows.