Wpf – Adding rows to DataGrid through XAML

datagridwpfxaml

Is it possible to add one or more rows to WPF DataGrid through XAML, without binding it to a collection. What I'm looking for would essentially be something like:

<DataGrid AutoGenerateColumns="False">
    <DataGrid.Columns>
    ...
    </DataGrid.Columns>

    <DataGrid.Items>
        <DataGridRow>
        ...
        </DataGridRow>
    </DataGrid.Items>
</DataGrid>

I'm going to use it at design-time to see how my DataGrid columns would look like without actually running the code.

Best Answer

Feeling lucky. Found it myself. Here's the simplest way.

Create a dummy class with the same public properties (important that you define members as properties and not fields). For example:

public class Dummy
{
    public string Subject { get; set; }
    public string Body { get; set; }
    public DateTime DueDateStart { get; set; }       
}

Import your project namespace into XAML by adding the following import at the top:

xmlns:local="clr-namespace:YourProjectNamespace"

Now you can add items (rows) to your DataGrid at design-time like (make sure your columns have proper bindings):

<DataGrid AutoGenerateColumns="False">
    <DataGrid.Columns>
      <DataGridTextColumn Header="Subject" Binding="{Binding Path=Subject}"/>
      <DataGridTextColumn Header="Body" Binding="{Binding Path=Body}"/>
      <DataGridTextColumn Header="Due Date" Binding="{Binding Path=DueDateStart}"/>
    </DataGrid.Columns>

    <local:Dummy Subject="Subject 1" Body="Body 1" ... />
    <local:Dummy Subject="Subject 2" Body="Body 2" ... />
</DataGrid>

Hope this helps someone!

Update

Since this is now a popular post, I thought I should update this with the standard way of doing things.

WPF supports a concept known as Design-Time Data that serves this exact purpose. A few key advantages of using Design-Time Data over the approach I mentioned above include:

Design-Time Data remains separate from application functionality.
You do not need to change anything at all to switch your controls between design and run modes.
Data lives in XML files that are easily editable.

Here are the steps to create design-time data files:

Open your project in Blend (comes free with VS2015 and VS2017).
Open your View (Window or Control that you're working with).
From Data tool window (docked with Solution Explorer by default), choose Create Sample Data From Class.
Select your VM class. You should choose the same class that your control will actually use at runtime as its DataContext.

Blend will create an XML file with sample data automatically filled in for you. The file will look something like this:

<local:TestDataList xmlns:local="clr-namespace:YourNamespaceHere" Capacity="46" ID="33" Name="Maecenas curabitur cras">
  <local:TestData ID="66" Name="Aenean vestibulum class"/>
  <local:TestData ID="34" Name="Duis adipiscing nunc praesent"/>
  <local:TestData ID="91" Name="Accumsan bibendum nam"/>
</local:TestDataList>

Important to note that you do not need Blend to generate this file. You can do this by hand too.

Now in your DataGrid (or whatever control you're working with), add the following property (change file path according to your project):
```
d:DataContext="{d:DesignData Source=SampleData/TestDataListSampleData.xaml}"
```
Given that your control has its properties properly set (e.g. ItemsSource, Columns etc.), sample data will start showing in the designer immediately.

Just for completion, note that Blend cannot generate automatic data for generic classes. For example, if your VM class contains a property of type List<string> (or if the VM class itself is a generic class), you'll not see that property getting generated in the sample data file. In that case, you must create your own dummy class inheriting from the generic class and then use it as the type of your property. For example:

public class MyListOfStrings : List<string>
{ }

Related Solutions

C# – How to bind a WPF DataGrid to a variable number of columns

Here's a workaround for Binding Columns in the DataGrid. Since the Columns property is ReadOnly, like everyone noticed, I made an Attached Property called BindableColumns which updates the Columns in the DataGrid everytime the collection changes through the CollectionChanged event.

If we have this Collection of DataGridColumn's

public ObservableCollection<DataGridColumn> ColumnCollection
{
    get;
    private set;
}

Then we can bind BindableColumns to the ColumnCollection like this

<DataGrid Name="dataGrid"
          local:DataGridColumnsBehavior.BindableColumns="{Binding ColumnCollection}"
          AutoGenerateColumns="False"
          ...>

The Attached Property BindableColumns

public class DataGridColumnsBehavior
{
    public static readonly DependencyProperty BindableColumnsProperty =
        DependencyProperty.RegisterAttached("BindableColumns",
                                            typeof(ObservableCollection<DataGridColumn>),
                                            typeof(DataGridColumnsBehavior),
                                            new UIPropertyMetadata(null, BindableColumnsPropertyChanged));
    private static void BindableColumnsPropertyChanged(DependencyObject source, DependencyPropertyChangedEventArgs e)
    {
        DataGrid dataGrid = source as DataGrid;
        ObservableCollection<DataGridColumn> columns = e.NewValue as ObservableCollection<DataGridColumn>;
        dataGrid.Columns.Clear();
        if (columns == null)
        {
            return;
        }
        foreach (DataGridColumn column in columns)
        {
            dataGrid.Columns.Add(column);
        }
        columns.CollectionChanged += (sender, e2) =>
        {
            NotifyCollectionChangedEventArgs ne = e2 as NotifyCollectionChangedEventArgs;
            if (ne.Action == NotifyCollectionChangedAction.Reset)
            {
                dataGrid.Columns.Clear();
                foreach (DataGridColumn column in ne.NewItems)
                {
                    dataGrid.Columns.Add(column);
                }
            }
            else if (ne.Action == NotifyCollectionChangedAction.Add)
            {
                foreach (DataGridColumn column in ne.NewItems)
                {
                    dataGrid.Columns.Add(column);
                }
            }
            else if (ne.Action == NotifyCollectionChangedAction.Move)
            {
                dataGrid.Columns.Move(ne.OldStartingIndex, ne.NewStartingIndex);
            }
            else if (ne.Action == NotifyCollectionChangedAction.Remove)
            {
                foreach (DataGridColumn column in ne.OldItems)
                {
                    dataGrid.Columns.Remove(column);
                }
            }
            else if (ne.Action == NotifyCollectionChangedAction.Replace)
            {
                dataGrid.Columns[ne.NewStartingIndex] = ne.NewItems[0] as DataGridColumn;
            }
        };
    }
    public static void SetBindableColumns(DependencyObject element, ObservableCollection<DataGridColumn> value)
    {
        element.SetValue(BindableColumnsProperty, value);
    }
    public static ObservableCollection<DataGridColumn> GetBindableColumns(DependencyObject element)
    {
        return (ObservableCollection<DataGridColumn>)element.GetValue(BindableColumnsProperty);
    }
}

Wpf – Need to format dates in dynamically built WPF DataGrid

Format the binding by StringFormat:

<DataGridTextColumn Header="Fecha Entrada" 
                    Width="110"  
                    Binding="{Binding EnterDate, StringFormat={}\{0:dd/MM/yyyy hh:mm\}}"
                    IsReadOnly="True" />

I think it's better than writing code behind pieces of code

Best Answer

Update

Related Solutions

C# – How to bind a WPF DataGrid to a variable number of columns

Wpf – Need to format dates in dynamically built WPF DataGrid

Related Topic