Getting started with the DevExpress Grid Control for WPF - data binding 1

I've started taking a more in-depth look at our WPF grid control, and I just thought I'd document some of the important steps I'm making for others to follow along. Please feel free to point me towards things that don't seem that easy to do - that's what I'm most interested in!

For a start, I'm just going to drop a grid control on a form and try to hook it up to data. Since this is WPF, there are of course numerous options for this. For my first test, I have a simple static collection of data in my application, which consists of objects with data about countries. The collection derives from a List<T>.

On my form, I've got a GridControl inside a DockPanel. I changed the standard layout panel (Grid) to a DockPanel, but otherwise I've left everything as it was after dropping the GridControl on the form. Here's the XAML code:

<Window x:Class="DxGrid1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="342" Width="534" xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid">
    <DockPanel>
        <dxg:GridControl Name="gridControl1">
            <dxg:GridControl.Columns>
                <dxg:GridColumn FieldName="Column1" />
                <dxg:GridColumn FieldName="Column2" />
            </dxg:GridControl.Columns>
            <dxg:GridControl.View>
                <dxg:GridColumnView />
            </dxg:GridControl.View>
        </dxg:GridControl>
    </DockPanel>
</Window>

Now I would like to hook up the grid to my data source. I've got a class called CountryInfoList which just needs to be instantiated. An easy way to do this is of course to create a resource section entry, so I add a namespace line to my Window instantiation:

xmlns:local="clr-namespace:DxGrid1"

Then I configure the DataSource property of the grid to bind to the list instance from the resources:

DataSource="{StaticResource list}"

I also set the AutoPopulateColumns property to True and I remove the existing two empty columns. This last step is important - if the current column definition collides with the columns that are actually in the data source, the grid currently (that's on the 8.3 version I'm using) throws an exception. (I've registered a bug for this here.)

At this point the data from my list is already visible in the designer in Visual Studio. My complete XAML looks like this now:

<Window x:Class="DxGrid1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:DxGrid1"
    Title="Window1" Height="342" Width="534" xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid">
    <Window.Resources>
        <local:CountryInfoList x:Key="list" />
    </Window.Resources>
    <DockPanel>
        <dxg:GridControl Name="gridControl1" AutoPopulateColumns="True" DataSource="{StaticResource list}">
            <dxg:GridControl.View>
                <dxg:GridColumnView />
            </dxg:GridControl.View>
        </dxg:GridControl>
    </DockPanel>
</Window>

As you see, a hookup to a simple object data source is very easy to do. Of course I could achieve the same result by setting the DataSource property from code - this would allow more flexibility regarding the actual source of my data, since the collection could be constructed more dynamically than the WPF resource system allows. A broad feature set is already supported at this point - sorting, column configuration, grouping.

Update: Here's the download of the source code for my project.

Free DevExpress Products – Get Your Copy Today