This document assumes that you understand the concepts of object oriented programming and more specifically with C# programming, such as Classes or Objects, Methods, Properties, Events, etc. If not, it will be much harder to follow along.
This tutorial will cover the basics of data Binding in a WPF application. When you are done with this tutorial, you should be able to create a basic WPF-based graphical program that uses Binding. We will cover the different types of data Binding as well as what works and sometimes what doesn’t.
What is data Binding?
The idea of data Binding is to link a variable of any Type (int, string, object, etc…) to a graphical object’s Property that has the same type.
For example, lets say you have a Button object called myButton in your GUI like this: . The words “Click Me!” is a string property in the Button object: myButton.Text.
Imagine you have a string variable called strProperty in some part of your code that on its own has no way to interact with your GUI code. Lets say you want to change the myButton.Text property to match that string variable. Binding allows the button’s text string to always match a string property in some other object not really related to your GUI so if you change strProperty to equal “Enable” your button text will look like . If you then change the strProperty to “Disable” the button text will automatically change to be without out your back end code having to make any interaction with the GUI on its own.
Without Binding, you would have to write code yourself that would interact with the GUI and update the myButton.Text property when ever you update the string in code. In order to do this without Binding, you would also have to intermingle your background code with your GUI code. This can make it difficult to update or modify your GUI because GUI code is strung throughout all parts of your application. You don’t just have to update your GUI, you have to update all your code that interacts with the GUI.
So Binding allows you to have a back end code that is independent of the GUI. This is especially useful when the GUI needs to be updated or improved or when multiple GUIs exists (skins) and you can switch between them.
There are programming styles associated with developing a GUI separate from the back-end. Two of which are Model-View-Control (MVC) or Model-View-ViewModel (MVVM). This tutorial is not going to cover these, however, it is probably wise for you become familiar with these.
However, there is no reason you are limited to Binding to back end code. You can bind to code that is in the WPF GUI and very powerful applications can be written with little to no back end code.
Requirements for data Binding in WPF
In order to using data Binding, you should have the following requirements:
Your project should be a WPF Application, or your project should include a WPF Window or WPF Control.
Objects your elements bind to should implement System.ComponentModel.INotifyPropertyChanged.
The Binding source can also be “any public property, including properties of other controls, common language runtime (CLR) objects, XAML elements, ADO.NET DataSets, XML Fragments, and so forth.” (Reference: http://msdn.microsoft.com/en-us/magazine/cc163299.aspx).
Copyright ® Rhyous.com – Linking to this page is allowed without permission and as many as ten lines of this page can be used along with this link. Any other use of this page is allowed only by permission of Rhyous.com.
How to add a dynamic image and/or a dynamic button to a row using WPFToolKit DataGrid and DataGridTemplateColumns?
To start, I have a WPF project in Visual Studio 2008. I have installed the WPFToolKit and have added a reference to it in my project.
Often you want to display a DataGrid, but you don’t want to simply display it as is, you want to be able to enhance it and add functionality to it, such as adding an image to the start of each row or adding a button on each row.
Ok, so I have a table created using a DataTable that looks as follows:
IntVal
StrVal
0
normal
1
warning
2
error
I am passing this to a WFPToolKit DataGrid.
As I pass this to a Datagrid I want to add two columns:
I want to add an image that is different if it is normal, warning, or error.
I want to add a button only if it is warning or error.
So the visual would look as follows:
Image
IntVal
StrVal
Action
0
normal
1
warning
2
error
Step 1. Install prerequisites: Install Visual Studio 2008, and download and install the WPFToolkit.
You probably already have this done, and there are no steps for provided for these.
Step 2. Create a new WPF project in Visual studio 2008 and design the WPF interface
So once my project was created and the reference to WPFToolKit added, I then changed the XAML on my default Window1 class.
I needed to add a reference to the toolkit here as well.
I needed to add resources for my button.
I needed to add three separate resources for my images.
The data can come from anywhere but for this basic example, I am just statically creating a DataTable in the Constructor. I also added a property for the DataTable and the DataTable.DefaultView.
Data.cs
using System.Data;
namespace DataGridAddButtonAndImageColumns
{
public class Data
{
#region Member Variables
private DataTable mTable;
#endregion
#region Constructors
/*
* The default constructor
*/
public Data()
{
mTable = new DataTable();
mTable.Columns.Add("IntVal", typeof(int));
mTable.Columns.Add("StrVal", typeof(string));
DataRow row0 = mTable.NewRow();
row0["IntVal"] = 0;
row0["StrVal"] = "normal";
mTable.Rows.Add(row0);
DataRow row1 = mTable.NewRow();
row1["IntVal"] = 1;
row1["StrVal"] = "warning";
mTable.Rows.Add(row1);
DataRow row2 = mTable.NewRow();
row2["IntVal"] = 2;
row2["StrVal"] = "error";
mTable.Rows.Add(row2);
}
#endregion
#region Properties
public DataTable Table
{
get { return mTable; }
set { mTable = value; }
}
public DataView View
{
get { return mTable.DefaultView; }
}
#endregion
#region Functions
#endregion
#region Enums
#endregion
}
}
Step 4 – Create a ViewModel that implements INotifyPropertyChanged.
So creating a ViewModel is not exactly required but there really is benefit to the Model-View-ViewModel design pattern, so I will attempt to follow it even though this is a simple example application.
I created a new object called DataViewModel.
I implemented the INotifyPropertyChanged interface (though for this small application it isn’t used, I don’t want to leave it out cause you might need it for your application.)
I changed the constructor to take the Data object I designed in the previous step.
I expose the Table and the Table’s view as properties.
DataViewModel.cs
using System;
using System.ComponentModel;
using System.Data;
namespace DataGridAddButtonAndImageColumns
{
public class DataViewModel : INotifyPropertyChanged
{
#region Member Variables
readonly Data mData;
#endregion
#region Constructors
/*
* The default constructor
*/
public DataViewModel(Data inData)
{
mData = inData;
}
#endregion
#region Properties
public DataView View
{
get { return mData.View; }
}
public DataTable Table
{
get { return mData.Table; }
}
#endregion
#region Functions
#endregion
#region Enums
#endregion
#region INotifyPropertyChanged Members
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
if (this.PropertyChanged != null)
this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
#endregion
}
}
Step 5 – Add code to pass the DataTable to the DataGrid
So in the Window1.xaml.cs file, I create a new DataViewModel object and pass it a new Data object. I then assign the DataTable to the DataGrid’s DataContext object. My class now looks as follows.
Window1.xaml.cs
using System.Windows;
using System.Windows.Controls;
namespace DataGridAddButtonAndImageColumns
{
/// <summary>
/// Interaction logic for Window1.xaml
/// </summary>
public partial class Window1 : Window
{
#region Member Variables
#endregion
#region Contructor
public Window1()
{
InitializeComponent();
DataViewModel model = new DataViewModel(new Data());
// It is ok to pass either the DataTable or the DataView
// so both lines below work, however I am only using one:
//
// mDataGrid.DataContext = model.View;
// mDataGrid.DataContext = model.Table;
mDataGrid.DataContext = model.Table;
}
#endregion
#region Functions
private void ButtonFixThis_Click(object sender, RoutedEventArgs e)
{
// Do something here
}
#endregion
#region Properties
#endregion
}
}
Now I can compile and run see my simple DataGrid.
IntVal
StrVal
0
normal
1
warning
2
error
Step 6 – Create the DataTemplateSelectors
I am going to use two DataTemplateSelector and I want them to share a base class, so first, I am going to create a base class for them.
I inherit DataTemplateSelector.
I add a function to find the parent Window1 object.
BaseDataTemplateSelector.cs
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
namespace DataGridAddButtonAndImageColumns
{
public class BaseDataTemplateSelector : DataTemplateSelector
{
#region Member Variables
#endregion
#region Constructors
/*
* The default constructor
*/
public BaseDataTemplateSelector()
{
}
#endregion
#region Properties
#endregion
#region Functions
protected Window1 GetWindow1(DependencyObject inContainer)
{
DependencyObject c = inContainer;
while (true)
{
DependencyObject p = VisualTreeHelper.GetParent(c);
if (c is Window1)
{
//mSectionControl = c;
return c as Window1;
}
else
{
c = p;
}
}
}
#endregion
}
}
Now I create an ActionDataTemplateSelector and a StatusImageDataTemplateSelector.
The ActionDataTemplateSelector will overload the SelectTemplate function and correctly select the Fix button resource if the status is warning or error.
ActionDataTemplateSelector.cs
using System.Data;
using System.Windows;
namespace DataGridAddButtonAndImageColumns
{
public class ActionDataTemplateSelector : BaseDataTemplateSelector
{
#region Constructors
/*
* The default constructor
*/
public ActionDataTemplateSelector()
{
}
#endregion
#region Functions
public override DataTemplate SelectTemplate(object inItem, DependencyObject inContainer)
{
DataRowView row = inItem as DataRowView;
if (row != null)
{
Window1 w = GetWindow1(inContainer);
if (row.DataView.Table.Columns.Contains("IntVal"))
{
if ((int)row["IntVal"] > 0)
{
return (DataTemplate)w.FindResource("FixThisTemplate");
}
}
return (DataTemplate)w.FindResource("NormalTemplate");
}
return null;
}
#endregion
}
}
The StatusImageDataTemplateSelector also overloads the SelectTempate function and selects the correct image for the status.
StatusImageDataTemplateSelector .cs
using System.Data;
using System.Windows;
namespace DataGridAddButtonAndImageColumns
{
public class StatusImageDataTemplateSelector : BaseDataTemplateSelector
{
#region Constructors
/*
* The default constructor
*/
public StatusImageDataTemplateSelector()
{
}
#endregion
#region Functions
public override DataTemplate SelectTemplate(object inItem, DependencyObject inContainer)
{
DataRowView row = inItem as DataRowView;
if (row != null)
{
if (row.DataView.Table.Columns.Contains("IntVal"))
{
Window1 w = GetWindow1(inContainer);
int status = (int)row["IntVal"];
if (status == 0)
{
return (DataTemplate)w.FindResource("StatusTemplateNormal");
}
if (status == 1)
{
return (DataTemplate)w.FindResource("StatusTemplateWarning");
}
if (status == 2)
{
return (DataTemplate)w.FindResource("StatusTemplateError");
}
}
}
return null;
}
#endregion
}
}
Step 7 – Create functions that add the new columns and have the constructor call each function.
Each function must:
Create a new DataGridTemplateColumn.
Assign a string for the Header.
Create a new DataTemplateSelector and assign it to the DataGridTemplateColumn’s CellTemplateSelector.
Add the new DataGridTemplateColumn to the DataGrid.
public void CreateActionButtonColumn()
{
DataGridTemplateColumn actionColumn = new DataGridTemplateColumn { CanUserReorder = false, Width = 85, CanUserSort = true };
actionColumn.Header = "Action";
actionColumn.CellTemplateSelector = new ActionDataTemplateSelector();
mDataGrid.Columns.Add(actionColumn);
}
public void CreateStatusColumnWithImages()
{
DataGridTemplateColumn statusImageColumn = new DataGridTemplateColumn { CanUserReorder = false, Width = 85, CanUserSort = false };;
statusImageColumn.Header = "Image";
statusImageColumn.CellTemplateSelector = new StatusImageDataTemplateSelector();
mDataGrid.Columns.Insert(0, statusImageColumn);
}
Don’t forget to call the functions in the constructor.
public Window1()
{
InitializeComponent();
DataViewModel model = new DataViewModel(new Data());
// It is ok to pass either the DataTable or the DataView
// so both lines below work, however I am only using one:
//
// mDataGrid.DataContext = model.View;
// mDataGrid.DataContext = model.Table;
mDataGrid.DataContext = model.Table;
CreateActionButtonColumn();
CreateStatusColumnWithImages();
}
Ok, so now you are finished. This should be working for you if you compile and run the program.
Image
IntVal
StrVal
Action
0
normal
1
warning
2
error
Options for handling the images without using a static path
The images were called statically in the above example, however, that will be problematic in actual implementation as each program is installed in a different location and the install location can usually be chosen by a user. You have two options to resolve this, and I will show you how to do both:
Embedding your images
Using image files located in a relative path
Either option work. The second option makes branding a little easier as code doesn’t have to be recompiled with new images to change the images, because the image files can simply be replaced.
Embedding your images
So you can embed your images as resources and use the embedded resources instead. To embed them, do this:
In Visual Studio under your project, create a folder called Images.
Copy your images into that folder.
In the XAML, change each of the image resource lines as shown
Using image files located in a relative path
I decided to NOT embed my images but instead solve this by using a relative path. My preference is for the images to come from actual files in an images directory that is relative to the directory from which the executable is launched:
Make sure to create the Images folder and add the images in the location where you exectuable runs. You may have to add the images folder to both the debug and release directories or otherwise resolve this, else you will get an exception when the images are not found.
Copyright ® Rhyous.com – Linking to this page is allowed without permission and as many as ten lines of this page can be used along with this link. Any other use of this page is allowed only by permission of Rhyous.com.
