GetNoticed IT#9: User control with data grid and observable collection

Good morning!
It’s been 10 days since my last post so the time is high! Today I’m going to write how to bind an observable collection of custom objects to a data grid in a WPF user control. Some time ago I wrote a post about basic use of user controls (see here) so this post you are reading right now can be considered as extension of the first one.

Objects in collection
Let’s start with preparing a class which objects will be stored in our collection. I won’t look for anything bright, I will just use something for my project: the class will store information about rectangles: height, width, margin and if a rectangle can be rotated. Additionally the class will have a property that returns area of a rectangle.

public class ListedItem
{
   public int Height { get; set; }
   public int Width { get; set; }
   public int Margin { get; set; }
   public bool Rotation { get; set; }
   public int Area { get { return Height*Width; } }
}

public class ListedItem

{

public int Height { get; set; }

public int Width { get; set; }

public int Margin { get; set; }

public bool Rotation { get; set; }

public int Area { get { return Height*Width; } }

}

That’s the basic implementation of our ListedItem class. Now, to use it with observable collection in a way that it is bound to datagrid in UI and all values are automatically refreshed it is necessary to implement INotifyPropertyChanged. At the same time it would be wise to tweak our class a little bit: properties Height and Width cannot be smaller than 1. Also, when implementing INotifyPropertyChanged it is necessary to notify about Area property changed when any of Height or Width changes.

public class ListedItem : INotifyPropertyChanged
{
    private int height;
    public int Height
    {
        get { return height; }
        set
        {
            if (value < 1) { height = 1; } else { height = value; }
            OnPropertyChanged("Area", "Height");
        }
    }


    private int width;
    public int Width
    {
        get { return width; }
        set
        {
            if (value < 1) { width = 1; } else { width = value; }
            OnPropertyChanged("Area", "Width");
        }
    }

    public int Margin { get; set; }
    public bool Rotation { get; set; }
    public int Area { get { return Height * Width; } }

    public event PropertyChangedEventHandler PropertyChanged;

    private void OnPropertyChanged(params string[] propertiesChanged)
    {
        if (PropertyChanged != null)
        {
            foreach (string property in propertiesChanged)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(property));
            }
        }
    }
}

public class ListedItem : INotifyPropertyChanged

{

private int height;

public int Height

{

get { return height; }

set

{

if (value < 1) { height = 1; } else { height = value; }

OnPropertyChanged("Area", "Height");

}

private int width;

public int Width

{

get { return width; }

set

{

if (value < 1) { width = 1; } else { width = value; }

OnPropertyChanged("Area", "Width");

}

public int Margin { get; set; }

public bool Rotation { get; set; }

public int Area { get { return Height * Width; } }

public event PropertyChangedEventHandler PropertyChanged;

private void OnPropertyChanged(params string[] propertiesChanged)

{

if (PropertyChanged != null)

{

foreach (string property in propertiesChanged)

{

PropertyChanged(this, new PropertyChangedEventArgs(property));

}

The last step would be to add a parameterless constructor that assigns all properties with default values.

public ListedItem()
{
   Height = 1;
   Width = 1;
   Margin = 0;
   Rotation = false;
}

public ListedItem()

{

Height = 1;

Width = 1;

Margin = 0;

Rotation = false;

}

View model
Our observable collection will be stored in our view model.

public class MainWindowViewModel
{
   public ObservableCollection<ListedItem> Items { get; set; }
   public MainWindowViewModel()
   {
      Items = new ObservableCollection<ListedItem>();
      Items.Add(new ListedItem { Height = 20, Width = 30, Margin = 1, Rotation = true });
   }
}

public class MainWindowViewModel

{

public ObservableCollection<ListedItem> Items { get; set; }

public MainWindowViewModel()

{

Items = new ObservableCollection<ListedItem>();

Items.Add(new ListedItem { Height = 20, Width = 30, Margin = 1, Rotation = true });

}

In the constructor of MainViewModel class we initialize the collection and add first item. And that’s for the purpose of this post is sufficient.

User control
Out user control will consist only of data grid inside a group box therefore the XAML is very simple.

<UserControl x:Class="DemoWPF.View.UserControls.ItemsList"
             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:DemoWPF.View.UserControls"
             mc:Ignorable="d" x:Name="this"
             d:DesignHeight="300" d:DesignWidth="300">
    <GroupBox>
        <GroupBox.Header>
            <TextBlock Grid.Row="0" Text="Content of the list" FontWeight="Bold"/>
        </GroupBox.Header>
        <DataGrid ItemsSource="{Binding ElementName=this, Path=Source, Mode=TwoWay}" CanUserAddRows="True" CanUserDeleteRows="True" IsReadOnly="False" AutoGenerateColumns="True">
    </GroupBox>
</UserControl>

<UserControl x:Class="DemoWPF.View.UserControls.ItemsList"

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:DemoWPF.View.UserControls"

mc:Ignorable="d" x:Name="this"

d:DesignHeight="300" d:DesignWidth="300">

<GroupBox.Header>

</GroupBox.Header>

</GroupBox>

</UserControl>

What’s important in the code above are two things marked above: 1) assigning name to the user control (“this”), 2) defining data grid and its binding to dependency property Source.
Now, let’s move on to the code-behind the user control where we define dependency property.

public partial class ItemsList : UserControl
{
    public ItemsList()
    {
        InitializeComponent();
    }


    public static readonly DependencyProperty SourceProperty = DependencyProperty.Register("Source",
                                                                                          typeof(ObservableCollection<ListedItem>),
                                                                                          typeof(ItemsList));
    public ObservableCollection<ListedItem> Source
    {
        get { return (ObservableCollection<ListedItem>)GetValue(SourceProperty); }
        set { SetValue(SourceProperty, value); }
    }
}

public partial class ItemsList : UserControl

{

public ItemsList()

{

InitializeComponent();

}

public static readonly DependencyProperty SourceProperty = DependencyProperty.Register("Source",

typeof(ObservableCollection<ListedItem>),

typeof(ItemsList));

public ObservableCollection<ListedItem> Source

{

get { return (ObservableCollection<ListedItem>)GetValue(SourceProperty); }

set { SetValue(SourceProperty, value); }

}

We need to set the property of type ObservableCollection<ListedItem>, owner type ItemsList (as the name of our user control class) and name Source.

View
Now the last thing: combining all together in view. First of all we need to add namespace that contains our user control to namespaces used by the UI, create an instance of view model that is going to be used be the UI and set it as data context of top level grid.

<Window
...
xmlns:ucs="clr-namespace:DemoWPF.View.UserControls"
    <Window.Resources>
        <vms:MainWindowViewModel x:Key="mainWindowWiewModel"/>
    </Window.Resources>
    <Grid DataContext="{StaticResource mainWindowWiewModel}">
    ...
    </Grid>
</Window>

<Window

...

xmlns:ucs="clr-namespace:DemoWPF.View.UserControls"

<Window.Resources>

<vms:MainWindowViewModel x:Key="mainWindowWiewModel"/>

</Window.Resources>

...

</Grid>

</Window>

To add our user control to the UI and bind observable collection for view model:

<ucs:ItemsList Grid.Row="1" Grid.Column="0" Margin="10" Source="{Binding Path=Items, Mode=TwoWay}"/>

1	<ucs:ItemsList Grid.Row="1" Grid.Column="0" Margin="10" Source="{Binding Path=Items, Mode=TwoWay}"/>

In this case binding mode is set as TwoWay because I want changes made by user in data grid to be reflected in collection in view model. But you have complete freedom here, that depends only on your needs.

So, basically that’s it. Before I finish few notes about customising the data grid.

Columns
The implementation above will generate columns in data grid according to properties exposed by elements in collection. But that is not the only way. you can set up your own names, for instance when you’re building multi-language app. To do that you need first set AutoGenerateColumns property of your data grid to false, and second define the columns manually. In our case that would be:

<DataGrid.Columns>
   <DataGridTextColumn Header="Wysokość" Binding="{Binding Height}"/>
   <DataGridTextColumn Header="Szerokość" Binding="{Binding Width}"/>
   <DataGridTextColumn Header="Margines" Binding="{Binding Margin}"/>
   <DataGridTextColumn Header="Powierzchnia" Binding="{Binding Area, Mode=OneWay}"/>
   <DataGridCheckBoxColumn Header="Obrót?" Binding="{Binding Rotation}"/>
</DataGrid.Columns>

<DataGrid.Columns>

</DataGrid.Columns>

Note, that you need to be careful to use correct column type and to set binding correctly. In our case Area property is generated automatically therefore user must not be able to put anything in that column. To achieve that I had to set binding mode for this column to OneWay.

User edits
Depending on particular needs you may want to disable editing your data grid. There are certain properties that allows you to customise access to your data grid. To disable any edits you must set IsReadOnly to true, to make more precise customisation you can use set of CanUser properties which are pretty self-explanatory so there’s no point in describing them here.

Thanks for today, I hope that it’s gonna be somehow useful for you.
Regards, Michal

Sources:
https://msdn.microsoft.com/en-us/library/ee340710(v=vs.110).aspx
http://helion.pl/ksiazki/mvvm-i-xaml-w-visual-studio-2015-jacek-matulewski,xamlmv.htm