Posted by: Zeeshan Amjad | December 30, 2009

Using user control in Data Grid


WPF 4.0 introduce data grid control. Although this control is very powerful, but sometimes we have to create our own control and use it inside the data grid. Now we are going to create one control that display the percentage value and user grade and then use that user control in data grid. Here is a XAML to define the user control.

  1: <UserControl x:Class="grid.Percentage"
  2:              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  5:              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  6:              mc:Ignorable="d" 
  7:              d:DesignHeight="300" d:DesignWidth="300" Loaded="UserControl_Loaded">
  8:     <Grid>
  9:         <Grid.RowDefinitions>
 10:             <RowDefinition/>
 11:             <RowDefinition/>
 12:         </Grid.RowDefinitions>
 13:         <TextBlock Name="percentage" Grid.Row="0" Margin="5" FontSize="14" FontWeight="Bold" 
 14:                    HorizontalAlignment="Center" VerticalAlignment="Center">
 15:             <TextBlock.Background>
 16:                 <LinearGradientBrush>
 17:                     <GradientStop Offset="0" Color="LightYellow"/>
 18:                     <GradientStop Offset="1" Color="Wheat"/>
 19:                 </LinearGradientBrush>
 20:             </TextBlock.Background>
 21:         </TextBlock>
 22:         <TextBlock Name="grade" Grid.Row="1" Margin="5" FontSize="14" FontWeight="Bold" 
 23:                    Foreground="Yellow" HorizontalAlignment="Center" VerticalAlignment="Center">
 24:             <TextBlock.Background>
 25:                 <LinearGradientBrush>
 26:                     <GradientStop Offset="0" Color="LightBlue"/>
 27:                     <GradientStop Offset="1" Color="Blue"/>
 28:                 </LinearGradientBrush>
 29:             </TextBlock.Background>
 30:         </TextBlock>
 31:     </Grid>
 32: </UserControl>
 33: 

Here is a C# code of this user control.

  1: using System;
  2: using System.Collections.Generic;
  3: using System.Linq;
  4: using System.Text;
  5: using System.Windows;
  6: using System.Windows.Controls;
  7: using System.Windows.Data;
  8: using System.Windows.Documents;
  9: using System.Windows.Input;
 10: using System.Windows.Media;
 11: using System.Windows.Media.Imaging;
 12: using System.Windows.Navigation;
 13: using System.Windows.Shapes;
 14: 
 15: namespace grid
 16: {
 17:     /// <summary>
 18:     /// Interaction logic for Precentage.xaml
 19:     /// </summary>
 20:     public partial class Percentage : UserControl
 21:     {
 22:         public static DependencyProperty PercentageValueProperty =
 23:              DependencyProperty.Register("PercentageValue", typeof(double), typeof(Percentage));
 24: 
 25:         public double PercentageValue
 26:         {
 27:             get { return (double)GetValue(PercentageValueProperty); }
 28:             set { SetValue(PercentageValueProperty, value); }
 29:         }
 30: 
 31:         public Percentage()
 32:         {
 33:             InitializeComponent();
 34:         }
 35: 
 36:         private void UserControl_Loaded(object sender, RoutedEventArgs e)
 37:         {
 38:             percentage.Text = PercentageValue.ToString();
 39: 
 40:             if (PercentageValue < 50)
 41:             {
 42:                 grade.Text = "Fail";
 43:             }
 44:             else if (PercentageValue >= 50 && PercentageValue < 60)
 45:             {
 46:                 grade.Text = "D";
 47:             }
 48:             else if (PercentageValue >= 60 && PercentageValue < 70)
 49:             {
 50:                 grade.Text = "C";
 51:             }
 52:             else if (PercentageValue >= 70 && PercentageValue < 80)
 53:             {
 54:                 grade.Text = "B";
 55:             }
 56:             else if (PercentageValue >= 80)
 57:             {
 58:                 grade.Text = "A";
 59:             }
 60:         }
 61:     }
 62: }
 63: 

 

Now we are going to make client program for this user control. In this program we are going to use the data grid control. Here is a piece of code to define the data template and user the user control in data grid.

  1: <DataGrid Name="datagrid" AlternationCount="2" Background="AliceBlue" AlternatingRowBackground="LightGreen">
  2: 	<DataGrid.Columns>
  3: 		<DataGridTemplateColumn ClipboardContentBinding="{x:Null}" Header="Result">
  4: 			<DataGridTemplateColumn.CellTemplate>
  5: 				<DataTemplate>
  6: 					<local:Percentage x:Name="ustctl" PercentageValue="{Binding Precentage}"/>
  7: 				</DataTemplate>
  8: 			</DataGridTemplateColumn.CellTemplate>
  9: 		</DataGridTemplateColumn>
 10: 	</DataGrid.Columns>
 11: </DataGrid>
 12: 

Defining data template is same we define data template for any other control. Here is complete XAML code of the program.

  1: <Window x:Class="grid.MainWindow"
  2:         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:         xmlns:local="clr-namespace:grid"
  5:         Title="Example of Data Grid" Height="300" Width="300">
  6:     <Grid Name="grid">
  7:         <DataGrid Name="datagrid" AlternationCount="2" Background="AliceBlue" AlternatingRowBackground="LightGreen">
  8:             <DataGrid.Columns>
  9:                 <DataGridTemplateColumn ClipboardContentBinding="{x:Null}" Header="Result">
 10:                     <DataGridTemplateColumn.CellTemplate>
 11:                         <DataTemplate>
 12:                             <local:Percentage x:Name="ustctl" PercentageValue="{Binding Precentage}"/>
 13:                         </DataTemplate>
 14:                     </DataGridTemplateColumn.CellTemplate>
 15:                 </DataGridTemplateColumn>
 16:             </DataGrid.Columns>
 17:         </DataGrid>
 18:     </Grid>
 19: </Window>
 20: 

Here is a complete C# coding of the program.

  1: using System;
  2: using System.Collections.Generic;
  3: using System.Linq;
  4: using System.Text;
  5: using System.Windows;
  6: using System.Windows.Controls;
  7: using System.Windows.Data;
  8: using System.Windows.Documents;
  9: using System.Windows.Input;
 10: using System.Windows.Media;
 11: using System.Windows.Media.Imaging;
 12: using System.Windows.Navigation;
 13: using System.Windows.Shapes;
 14: 
 15: namespace grid
 16: {
 17:     /// <summary>
 18:     /// Interaction logic for MainWindow.xaml
 19:     /// </summary>
 20:     public partial class MainWindow : Window
 21:     {
 22:         private List<Student> student;
 23: 
 24:         public MainWindow()
 25:         {
 26:             InitializeComponent();
 27: 
 28:             student = new List<Student>();
 29:             student.Add(new Student(10, "Bob", "Smith", 65));
 30:             student.Add(new Student(25, "James", "Brown", 87));
 31:             student.Add(new Student(15, "Joe", "Martin", 45));
 32:             student.Add(new Student(12, "Dona", "Taylor", 92));
 33:             student.Add(new Student(18, "Peter", "Brian", 64));
 34: 
 35:             datagrid.ItemsSource = student;
 36:         }
 37:     }
 38: 
 39:     public class Student
 40:     {
 41:         public Student(int id, String firstName, String lastName, double percentage)
 42:         {
 43:             ID = id;
 44:             FirstName = firstName;
 45:             LastName = lastName;
 46:             this.Precentage = percentage;
 47:         }
 48: 
 49:         public int ID
 50:         { get; set; }
 51: 
 52:         public String FirstName
 53:         { get; set; }
 54: 
 55:         public String LastName
 56:         { get; set; }
 57: 
 58:         public double Precentage
 59:         { get; set; }
 60:     }
 61: }
 62: 

This is the output of the program.

DataGridUserControl

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: