Skip to main content

C# Silverlight - Using a DataGridTemplateColumn [Beginner]


Whenever you pit designers against developers, it always seems to be the developer that loses. It's very rare that controls like the Silverlight DataGrid are left alone - designers want little tweaks and polish to increase the user experience. This tutorial is going to illustrate how to use one of the most flexible solutions to theming a DataGrid - the DataGridTemplateColumn.

We'll be touching very little on the basics of how to use the Silverlight DataGrid. If you're new to the control.

The first thing we're going to do is build a default DataGrid without any styling. I created a class to hold some information about the SOTC authors and bound a collection of those to my DataGrid.
[silverlight width="400" height="300" src="BasicDataGrid.xap"]
using System.Collections.Generic;
using System.Windows.Controls;

namespace DataGridStyling
{
  public partial class Page : UserControl
  {
    public Page()
    {
      InitializeComponent();

      // Create some authors.
      List<Author> authors = new List<Author>()
      {
        new Author() 
        { 
          Name = "Brandon", 
          Username = "The Reddest", 
          Language = "C#"
        },
        new Author() 
        { 
          Name = "Charlie", 
          Username = "The Fattest", 
          Language = "ActionScript"
        },
        new Author() 
        { 
          Name = "Richard", 
          Username = "The Hairiest", 
          Language = "PHP"
        },
        new Author() 
        { 
          Name = "Mike", 
          Username = "The Tallest", 
          Language = "JavaScript"
        }
      };

      // Set the items source on the DataGrid to the
      // collection of authors.
      _dataGrid.ItemsSource = authors;
    }
  }

  /// <summary>
  /// Class to hold some information about an 
  /// SOTC author.
  /// </summary>
  public class Author
  {
    public string Name { get; set; }
    public string Username { get; set; }
    public string Language { get; set; }
  }
}

<UserControl x:Class="DataGridStyling.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dg="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
    Width="400" Height="300">
  <Grid x:Name="LayoutRoot" Background="White">
    <dg:DataGrid x:Name="_dataGrid" 
                 AutoGenerateColumns="False">
      <dg:DataGrid.Columns>
        <dg:DataGridTextColumn 
          Binding="{Binding Name}" 
          Header="Name" 
          Width="100" />
        <dg:DataGridTextColumn 
          Binding="{Binding Username}" 
          Header="Username" 
          Width="100" />
        <dg:DataGridTextColumn 
          Binding="{Binding Language}" 
          Header="Language" 
          Width="100" />
      </dg:DataGrid.Columns>
    </dg:DataGrid>
  </Grid>
</UserControl>
 
All right, now let's starting using the DataGridTemplateColumn. This column type gives us the ability to set the template for normal cells and cells that are in edit mode. Here's the same example as above except that uses this column type on the Name column.

[silverlight width="400" height="300" src="TemplateColumn.xap"]
<dg:DataGrid x:Name="_dataGrid" 
             AutoGenerateColumns="False">
  <dg:DataGrid.Columns>
    <dg:DataGridTemplateColumn 
      Header="Name" 
      Width="100">
      <dg:DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
          <TextBlock Text="{Binding Name}" 
                   Foreground="Green" 
                   FontWeight="Bold"
                   VerticalAlignment="Center"/>
        </DataTemplate>
      </dg:DataGridTemplateColumn.CellTemplate>
      <dg:DataGridTemplateColumn.CellEditingTemplate>
        <DataTemplate>
          <TextBox Text="{Binding Name, Mode=TwoWay}" />
        </DataTemplate>
      </dg:DataGridTemplateColumn.CellEditingTemplate>
    </dg:DataGridTemplateColumn>
    <dg:DataGridTextColumn 
      Binding="{Binding Username}" 
      Header="Username" 
      Width="100" />
    <dg:DataGridTextColumn 
      Binding="{Binding Language}" 
      Header="Language" 
      Width="100" />
  </dg:DataGrid.Columns>
</dg:DataGrid>
 
So as you can see, we changed the cell to display bold green text when not in edit mode, and a simple TextBox when it is in edit mode. This is accomplished by using the CellTemplate and CellEditingTemplate properties on the DataGridTemplateColumn object. I had to explicitly set the BindingMode to TwoWay so text entered into the TextBox would be committed back to my Author object.

Here's a slightly more interesting example that builds on the previous one. Now, whenever edit mode is entered, a pencil icon will be displayed to the left of the edit field.

[silverlight width="400" height="300" src="Pencil.xap"]
<dg:DataGrid x:Name="_dataGrid" 
             AutoGenerateColumns="False">
  <dg:DataGrid.Columns>
    <dg:DataGridTemplateColumn 
      Header="Name" 
      Width="100">
      <dg:DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
          <TextBlock Text="{Binding Name}" 
                   Foreground="Green" 
                   FontWeight="Bold"
                   VerticalAlignment="Center"/>
        </DataTemplate>
      </dg:DataGridTemplateColumn.CellTemplate>
      <dg:DataGridTemplateColumn.CellEditingTemplate>
        <DataTemplate>
          <Grid>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="Auto" />
              <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Image Source="pencil_icon.png" 
                   Grid.Column="0" />
            <TextBox Text="{Binding Name, Mode=TwoWay}" 
                     Grid.Column="1" />
          </Grid>
        </DataTemplate>
      </dg:DataGridTemplateColumn.CellEditingTemplate>
    </dg:DataGridTemplateColumn>
    <dg:DataGridTextColumn 
      Binding="{Binding Username}" 
      Header="Username" 
      Width="100" />
    <dg:DataGridTextColumn 
      Binding="{Binding Language}" 
      Header="Language" 
      Width="100" />
  </dg:DataGrid.Columns>
</dg:DataGrid>
 
All I had to do in order to use the pencil icon was add it to my project like you would any other existing item. By default the Build Action property on the image will be set to Resource, which is what you want. Now, in XAML, you can simply reference the image by name.

There are basically no limits to how you can display information within cells using this column type. The powerful templating system behind Silverlight and WPF makes doing stuff like this trivial whereas before it may not have even been possible to accomplish the same task. On that note, that wraps up this introduction to the DataGridTemplateColumn.
Labels:

Comments

Post a Comment

Popular posts from this blog

C# Snippet - Shuffling a Dictionary [Beginner]

Randomizing something can be a daunting task, especially with all the algorithms out there. However, sometimes you just need to shuffle things up, in a simple, yet effective manner. Today we are going to take a quick look at an easy and simple way to randomize a dictionary, which is most likely something that you may be using in a complex application. The tricky thing about ordering dictionaries is that...well they are not ordered to begin with. Typically they are a chaotic collection of key/value pairs. There is no first element or last element, just elements. This is why it is a little tricky to randomize them. Before we get started, we need to build a quick dictionary. For this tutorial, we will be doing an extremely simple string/int dictionary, but rest assured the steps we take can be used for any kind of dictionary you can come up with, no matter what object types you use. Dictionary < String , int > origin = new Dictionary < string , int >(); ...
1 comment
Read more

C# WPF Printing Part 2 - Pagination [Intermediate]

About two weeks ago, we had a tutorial here at SOTC on the basics of printing in WPF . It covered the standard stuff, like popping the print dialog, and what you needed to do to print visuals (both created in XAML and on the fly). But really, that's barely scratching the surface - any decent printing system in pretty much any application needs to be able to do a lot more than that. So today, we are going to take one more baby step forward into the world of printing - we are going to take a look at pagination. The main class that we will need to do pagination is the DocumentPaginator . I mentioned this class very briefly in the previous tutorial, but only in the context of the printing methods on PrintDialog , PrintVisual (which we focused on last time) and PrintDocument (which we will be focusing on today). This PrintDocument function takes a DocumentPaginator to print - and this is why we need to create one. Unfortunately, making a DocumentPaginator is not as easy as...
Post a Comment
Read more

C# WPF Tutorial - Implementing IScrollInfo [Advanced]

The ScrollViewer in WPF is pretty handy (and quite flexible) - especially when compared to what you had to work with in WinForms ( ScrollableControl ). 98% of the time, I can make the ScrollViewer do what I need it to for the given situation. Those other 2 percent, though, can get kind of hairy. Fortunately, WPF provides the IScrollInfo interface - which is what we will be talking about today. So what is IScrollInfo ? Well, it is a way to take over the logic behind scrolling, while still maintaining the look and feel of the standard ScrollViewer . Now, first off, why in the world would we want to do that? To answer that question, I'm going to take a an example from a tutorial that is over a year old now - Creating a Custom Panel Control . In that tutorial, we created our own custom WPF panel (that animated!). One of the issues with that panel though (and the WPF WrapPanel in general) is that you have to disable the horizontal scrollbar if you put the panel in a ScrollV...
Post a Comment
Read more