WPF: A Beginner's Guide - Part 5 of n

• Download demo project - 245 Kb
• Download demo project (VB .NET) - 378 Kb

Preface And Thanks

I am a .NET programmer, but a busy one, I do VB .NET and C#, ASP .NET / Winforms / WPF / WCF Flash Silverlight the lot. Basically I keep my toe in. But when I started writing this article series I naturally chose my favourite language (which happens to be C#). I since got an email from an individual who requested that I publish this series with source code in VB .NET and C#. I simply stated I didn't have time. So this individual (Robert Ranck) volunteered to help out, and do the translation to VB .NET, based on my orginal C# projects

So for that and the subsequent VB .NET projects that you will find here I ask you to thank Robert Ranck. Cheers Robert, your contributions will surely make this series more open to all .NET developers.

And another thanks also goes out Karl Shifflett (AKA the blog/article machine, also known as the Molenator) for answering my dumb VB .NET questions. And I'd also like to mention that Karl has just started a more advanced series of WPF articles (which at present will be in VB.NET, but will hopefully appear in C# as well). Karls new series will be excellent and I urge you all to encourage Karl on this series. Its not easy obligating ones self to write an entire series in one language let alone 2. Karls 1st article is located right here, have a look for yourself. Personally I love it.

Introduction

This article is the 5th in my series of beginners articles for WPF. In this article we will discuss databinding. The proposed schedule for this series will still be roughly as follows:

• Layout
• XAML vs Code / Markup Extensions And Resources
• Commands And Events
• Dependency Properties (previous article)
• DataBinding (this article)
• Styles/Templates

In this article I'm aiming to cover, is a brief introduction into the following:

• The general idea behind databinding
• DataContext
• Basic databinding concepts
• Databinding syntax
• Databinding to UI elements
• Databinding to xml
• Databinding to collections
• Databinding value convertors
• Databinding validation

I will NOT be covering the following collection based binding areas, so if you want to know more about these you'll have to do a bit of extra research using the links provided (see i'm 1/2 ok, at least I researched the correct links for you)

• Sorting
• Filtering
• Grouping
• Record Manipulation
• Master/Detail

The General Idea Behind Databinding

Databinding is actually not that new (ok how its done in WPF is new) but we have has binding in ASP .NET and Winforms for some time now. WPF has borrowed from both of these to create a really really good binding framework. But what is this binding stuff, for those of you that have never heard of it.

Well basically binding allows UI Elements to obtain their data either from other UI Elements or business logic objects/classes. So in theory its very simply, we have a source that provides a value, and we have a target that wants to use the sources value, and we kind of glue them together using binding.

A typical binding arrangement is as follows:



Typically, each binding has these four components: a binding target object, a target property, a binding source, and a path to the value in the binding source to use.

The target property must be a Depenedency Property (which I've just covered). Most UIElement properties are dependency properties and most dependency properties, except read-only ones, support data binding by default.

That's a very simplified version of whats going on in binding.

Of course to facilitate these binding operations there are many seperate considerations and bits of syntax that need to be considered. In the next sub sections you will look at some (no not all, i'd be here all year) of the binding syntax and ideas/approaches to creating happy bindings.

DataContext

There is one important thing to know before we get into the ins and outs of Databinding, and that is the DataContext property, that every FrameworkElement has. DataContext is a concept that allows elements to inherit information from their parent elements about the data source that is used for binding, as well as other characteristics of the binding, such as the path. DataContext can be set directly to a common language runtime (CLR) object, with the bindings evaluating to properties of that object. Alternatively, you can set the data context to a DataSourceProvider object.

This dependency property inherits property values. If there are child elements without other values for DataContext established through local values or styles, then the property system will set the value to be the DataContext value of the nearest parent element with this value assigned.

In XAML, DataContext is most typically set to as a Binding declaration. You can use either property element syntax or attribute syntax. And is normal set something like this

<Window.Resources>
  <src:LeagueList x:Key="MyList" />
...
...
</Window.Resources>
...
...
<DockPanel DataContext="{Binding Source={StaticResource MyList}}">

You can also use code to set DataContext, simply by using a <someElement>.DataContext = <someValue>

Another thing to note is that if some object that inherits from a parents DataContext ommits which fields it will use to bind to, such as

<MenuItem Tag="{Binding}">

This means that the entire object that is used as its parents DataContext will be used to assign to the Tag property

Basic Databinding Concepts

Before we can proceed onto looking at the nitty griity of databinding there are several key areas which we need to cover first. Namely

• Direction of the data flow
• What triggers source updates

So we'll just spend a little bit of time on these 2 subjects

Direction Of The Data Flow

As shown above in the the general idea behind databinding section, flow of binding could be 2 way. There are several possibilities that can be configured when using databinding. These are controlled using the Binding.Mode values:

• OneWay binding causes changes to the source property to automatically update the target property, but changes to the target property are not propagated back to the source property. This type of binding is appropriate if the control being bound is implicitly read-only.
• TwoWay binding causes changes to either the source property or the target property to automatically update the other. This type of binding is appropriate for editable forms or other fully-interactive UI scenarios.
• OneTime causes the source property to initialize the target property, but subsequent changes do not propagate. This means that if the data context undergoes a change or the object in the data context changes, then the change is reflected in the target property. This type of binding is appropriate if you are using data where either a snapshot of the current state is appropriate to use or the data is truly static.
• OneWayToSource is the reverse of OneWay binding; it updates the source property when the target property changess.
• Default causes the default Mode value of target property to be used

Use the Binding.Mode property to specify the direction of the data flow. To detect source changes in one-way or two-way bindings, the source must implement a suitable property change notification mechanism such as INotifyPropertyChanged. For an example, see How to: Implement Property Change Notification.

Change notification is such an important lesson to learn in databinding that we need to look at that right now. So lets have a look at an example of using this interface INotifyPropertyChanged.

To support OneWay or TwoWay binding to enable your binding target properties to automatically reflect the dynamic changes of the binding source, your class needs to provide the proper property changed notifications, this is where INotifyPropertyChanged is used.

using System.ComponentModel;

namespace SDKSample
{
  // This class implements INotifyPropertyChanged
  // to support one-way and two-way bindings
  // (such that the UI element updates when the source
  // has been changed dynamically)
  public class Person : INotifyPropertyChanged
  {
      private string name;
      // Declare the event
      public event PropertyChangedEventHandler PropertyChanged;

      public Person()
      {
      }

      public Person(string value)
      {
          this.name = value;
      }

      public string PersonName
      {
          get { return name; }
          set
          {
              name = value;
              // Call OnPropertyChanged whenever the property is updated
              OnPropertyChanged("PersonName");
          }
      }

      // Create the OnPropertyChanged method to raise the event
      protected void OnPropertyChanged(string name)
      {
          PropertyChangedEventHandler handler = PropertyChanged;
          if (handler != null)
          {
              handler(this, new PropertyChangedEventArgs(name));
          }
      }
  }
}

And heres a VB .NET version

Imports System.ComponentModel

' This class implements INotifyPropertyChanged
' to support one-way and two-way bindings
' (such that the UI element updates when the source
' has been changed dynamically)
Public Class Person
    Implements INotifyPropertyChanged

    Private personName As String

    Sub New()
    End Sub

    Sub New(ByVal Name As String)
        Me.personName = Name
    End Sub

    ' Declare the event
    Public Event PropertyChanged As PropertyChangedEventHandler 
        Implements INotifyPropertyChanged.PropertyChanged

    Public Property Name() As String
        Get
            Return personName
        End Get
        Set(ByVal value As String)
            personName = value
            ' Call OnPropertyChanged whenever the property is updated
            OnPropertyChanged("Name")
        End Set
    End Property

    ' Create the OnPropertyChanged method to raise the event
    Protected Sub OnPropertyChanged(ByVal name As String)
        RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(name))
    End Sub

End Class

To implement INotifyPropertyChanged you need to declare the PropertyChanged event and create the OnPropertyChanged method. Then for each property you want change notifications for, you call OnPropertyChanged whenever the property is updated.

I can not tell you how important the INotifyPropertyChanged interface is, but believe me its very very important, and if you plan to use Binding in WPF, just get used to using the INotifyPropertyChanged interface.

What Triggers Source Updates

Bindings that are TwoWay or OneWayToSource listen for changes in the target property and propagate them back to the source. This is known as updating the source. For example, you may edit the text of a TextBox to change the underlying source value. As described in the last section, the direction of the data flow is determined by the value of the Binding.Mode property of the binding.

However, does your source value get updated while you are editing the text or after you finish editing the text and point your mouse away from the TextBox? The Binding.UpdateSourceTrigger property of the binding determines what triggers the update of the source. The options available are as follows :

The following table provides an example scenario for each Binding.UpdateSourceTrigger value using the TextBox as an example:

UpdateSourceTrigger value	When the Source Value Gets Updated
LostFocus (default for TextBox.Text)	When the TextBox control loses focus
PropertyChanged	As you type into the TextBox
Explicit	When the application calls UpdateSource

Basic Databinding Syntax

There are many properties that may be used within the Binding class, as such I will not have time to cover all of them, though I shall attempt to go through the most common buts of syntax. As most binding will usually be set in XAML I will be concentrating on the XAML syntax, though it should be noted that anything that can be done in XAML can also be done in C#/VB .NET code behind.

Ok so lets have a look at the basic syntax (we will cover more advanced stuff in the sections below).

The most basic form of binding if to create a binding that binds to a value of an existing element (this is covered in more detail below also) I just wanted to introduce the syntax and go back and show you how to do the Binding.Mode and Binding.UpdateSourceTrigger stuff first.

So here is probably one of the simplist Bindings that you will see. This example has 2 buttons, the 1st button (btnSource) has a Yellow Background property. The 2nd button uses the 1st button (btnSource), as the source for a Binding where the 1st button (btnSource) Background value is being used to set the 2nd buttons Background.

<Button x:Name="btnSource" Background="Yellow" Width="150" Height="30">Yellow BUtton</Button>
<Button Background="{Binding ElementName=btnSource, Path=Background}" 
          Width="150" Height="30">I am bound to be Yellow Background</Button>

So that'd fairly simple right. But I just wanted to go back and have a quick look at how we could also use the Binding.Mode and Binding.UpdateSourceTrigger properties within the binding sytnax.

Well as it turns out, its fairly easy, we just add the extra property and its desired value into the binding expression such as

  
<TextBox x:Name="txtSource" Width="150" Height="30"/>
<TextBox Width="150" Height="30" Text="{Binding ElementName=txtSource, 
    Path=Text, Mode=TwoWay, UpdateSourceTrigger=LostFocus }"/>

An Important Note :

Recall from part 2 that I mentioned that Binding was a markup MarkupExtension. As such the XAML parser knows how to treat the { } sections. But really this is just shorthand, that can (if you prefer) be expressed using the longer more verbose syntax as shown below.

<Button Margin="10,0,0,0" Content="Im bound to btnSource, using long Binding syntax">
    <Button.Background>
        <Binding ElementName="btnSource" Path="Background"/>
    </Button.Background>
</Button>

This is a decision you will have to make yourself, me personally I prefer the { } syntax, though you dont get any intellisense help within Visual Studio if you do use the {} syntax.

Databinding To UI Elements

When you set out to set up a Binding there are several different things you need to consider

1. What property do I want to bind to
2. What property should we bind from
3. Does it need to be OneWay or TwoWay etc etc Binding. If it needs to be a TwoWay/OneWayToSource Binding, was the source property a Dependency Property. It has to be to carry out TwoWay/OneWayToSource Binding

Once you know or have considered all this, its really as easy as ABC. As part of the demo solution, you will find a project entitled "BindingToUIElements" which when run, will look like the following:

This simple demo application shows 3 different bindings going on. Ill briefly discuss each of these now.

1. Simply Element Binding (Default Mode)

This simple example uses the 1st buttons Background as the source value for the other 2 Buttons Background

The code for which is as follows:

<!-- Simple Element Binding-->
<Label Content="Simple Element Binding" Margin="5,0,0,0" FontSize="14" FontWeight="Bold" />
<StackPanel Orientation="Horizontal" Margin="10,10,10,10" Background="Gainsboro">
    <Label Content="Simple Element Binding"/>
    <Button x:Name="btnSource" Margin="10,0,0,0" Background="Pink" Content="Im btnSource"/>
    <Button Margin="10,0,0,0" Background="{Binding ElementName=btnSource, 
        Path=Background}" Content="Im bound to btnSource"/>
    <Button Margin="10,0,0,0" Content="Im bound to btnSource, using long Binding syntax">
        <Button.Background>
            <Binding ElementName="btnSource" Path="Background"/>
        </Button.Background>
    </Button>
</StackPanel>

2. More Elaborate Binding (Default Mode)

This simple example uses the SelectedItem.Content of a ComboBox as the source for a Binding. Where the Background of a Button is changed dependant on the SelectedItem.Content of the ComboBox

The code for which is as follows:

<Label Content="More Elaborate Binding" Margin="5,0,0,0" FontSize="14" FontWeight="Bold" />
<StackPanel Orientation="Horizontal" Margin="10,10,10,10" Background="Gainsboro">
    <Label Content="Choose a color"/>
    <ComboBox Name="cmbColor" SelectedIndex="0">
        <ComboBoxItem>Green</ComboBoxItem>
        <ComboBoxItem>Blue</ComboBoxItem>
        <ComboBoxItem>Red</ComboBoxItem>
    </ComboBox>
    <Button Margin="10,0,0,0" Background="{Binding ElementName=cmbColor, 
        Path=SelectedItem.Content}" Content="Im bound to btnSource"/>
</StackPanel>

3. TwoWay Binding using UpdateSourceTrigger

This simple example uses 2 TextBoxs, where there is a TwoWay Binding.Mode applied and the as the Binding.UpdateSourceTrigger is set to PropertyChanged, which means that the source of the Binding will be updated when the 2nd TextBoxs value changes

The code for which is as follows:

<!-- Using UpdateSourceTrigger/Mode-->
<Label Content="Using UpdateSourceTrigger/Mode" Margin="5,0,0,0" FontSize="14" FontWeight="Bold" />
<StackPanel Orientation="Horizontal" Margin="10,10,10,10" Background="Gainsboro">
    <TextBlock TextWrapping="Wrap" 
        Text="This uses TwoWay Binding and UpdateSourceTrigger=PropertyChanged. 
        Type in one textbox then the other,and see them update each other" Width="400"/>
    <TextBox x:Name="txtSource" Width="50" Height="25" Margin="5,0,0,0"/>
    <TextBox Width="50" Height="25" Margin="5,0,0,0" 
            Text="{Binding ElementName=txtSource, 
            Path=Text, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged }"/>
</StackPanel>

Databinding To Xml

XML is used a lot these days, both for configuration information and data exchange, and indeed these days even for UI design. Remember XAML is a XML derivative.

But that's not all we can use XML data for. We can infact bind to XML data. This is fairly easy to do in XAML, we can either have the XAML hold the XML data (though this is probably not the norm) or use external XML files.

Either way the normal proceeding is to use a XmlDataProvider within the XAML/code. Like I said earlier as I thinking most Bindings will be done in XAML, ill stick to that.

As part of the demo solution, you will find a project entitled "BindingToXML" which when run, will look like the following:

The top 2 sections of this demo app using XAML held XML data, and the bottom 2 use an external XML file.

XmlDataProvider Using XAML Held Data (inline XML data)

It is entirely possible to hold all the XML data within the XAML file, and use this data as a source for Binding. Lets see an example of this

<Window x:Class="BindingToXML.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    WindowStartupLocation="CenterScreen"
    Title="Window1" Height="800" Width="800">
    <Window.Resources>
        <!-- inline XML data-->
        <XmlDataProvider x:Key="xmlData" XPath="Films">
            <x:XData>
                <Films xmlns="">
                    <Film Type="Horror" Year="1987">
                        <Director>Sam Raimi</Director>
                        <Title>Evil Dead II</Title>
                    </Film>
                    <Film Type="Murder" Year="1991">
                        <Director>Jonathan Demme</Director>
                        <Title>Silence Of The Lambs</Title>
                    </Film>
                    <Film Type="Sc" Year="1979">
                        <Director>Ridley Scott</Director>
                        <Title>Alien</Title>
                    </Film>
                </Films>
            </x:XData>
        </XmlDataProvider>
    </Window.Resources>
    <ScrollViewer>
        <StackPanel Orientation="Vertical">
            <!-- Simple XPath Binding using inline XML data-->
            <Label Content="Show all Films (using inline XML data)" 
                    Margin="5,0,0,0" FontSize="14" FontWeight="Bold" />
            <StackPanel Orientation="Horizontal" Margin="10,10,10,10" 
                    Background="Gainsboro">
                <ListBox ItemsSource="{Binding Source={StaticResource xmlData}, 
                    XPath=Film/Title}"/>
            </StackPanel>
            <!-- More Complicated XPath Binding using inline XML data-->
            <Label Content="Show Only Films After 1991 (using inline XML data)" 
                    Margin="5,0,0,0" FontSize="14" FontWeight="Bold" />
            <StackPanel Orientation="Horizontal" Margin="10,10,10,10" 
                    Background="Gainsboro">
                <ListBox ItemsSource="{Binding Source={StaticResource xmlData}, 
                    XPath=*[@Year>\=1991]}"/>
            </StackPanel>
           </StackPanel>  
    </ScrollViewer>
</Window>

It can be seen from this example, that we use an in line (in the XAML) xml dataset, for the XmlDataProvider. And that we use the XmlDataProvider as the BindingSource for the ListBox. In this example the 1st ListBox shows all Films/Titles as we are just fetching the Film/Title nodeset using the Binding.XPath=Film/Title so we get all Titles shows.

The 2nd ListBox is a bit fussier and uses a bit of XPath notation to traverse the attribute axis and ony fetch those nodes that have Year > 1991, so we get less nodes returned

XmlDataProvider Using External XML File

As I say though its going to be more common to use external XML files with the XmlDataProvider, which can be done as follows. Where the XmlDataProvider Source property is set to the external XML file.

<XmlDataProvider x:Key="xmlDataSeperateFile" XPath="Resteraunts" Source="XMLFile1.xml">
</XmlDataProvider>

Using this arrangement is much the same as we saw before where we can use XPath to fetch all the nodes or use XPath to only match those nodes where the attribute match the requirements. In this example the 2nd ListBox only shows "Mexican" resteraunts from the XML file, using the following XPath

<ListBox ItemsSource="{Binding Source={StaticResource xmlDataSeperateFile}, XPath=*[@Type\=\'Mexican\']}"/>

And heres the full example

<Window x:Class="BindingToXML.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    WindowStartupLocation="CenterScreen"
    Title="Window1" Height="800" Width="800">
    <Window.Resources>
        <!-- external XML data-->
        <XmlDataProvider x:Key="xmlDataSeperateFile" XPath="Resteraunts" 
            Source="XMLFile1.xml">
        </XmlDataProvider>
    </Window.Resources>
    <ScrollViewer>
        <StackPanel Orientation="Vertical">
              <!-- Simple XPath Binding using seperate XML data-->
            <Label Content="Show all Resteraunts (using seperate XML data)" 
                Margin="5,0,0,0" FontSize="14" FontWeight="Bold" />
            <StackPanel Orientation="Horizontal" Margin="10,10,10,10" 
                    Background="Gainsboro">
                <ListBox ItemsSource="{Binding Source=
                    {StaticResource xmlDataSeperateFile}, 
                    XPath=Resteraunt/Name}"/>
            </StackPanel>
            <!-- More Complicated XPath Binding using seperate XML data-->
            <Label Content="Show Only Mexican Resteraunts (using inline XML data)" 
                    Margin="5,0,0,0" FontSize="14" FontWeight="Bold" />
            <StackPanel Orientation="Horizontal" Margin="10,10,10,10" 
                    Background="Gainsboro">
                <ListBox ItemsSource="{Binding Source={StaticResource xmlDataSeperateFile}, 
                    XPath=*[@Type\=\'Mexican\']}"/>
            </StackPanel>

        </StackPanel>  
    </ScrollViewer>
</Window>

And heres the associated XML file (should you be curious about its structure)

<?xml version="1.0" encoding="utf-8" ?>
<Resteraunts xmlns="">
  <Resteraunt Type="Meat">
    <Name>The MeatHouse</Name>
    <Phone>01237 78516</Phone>
    <email>yada@here.com</email>
  </Resteraunt>
  <Resteraunt Type="Veggie">
    <Name>VegHead</Name>
    <Phone>99999</Phone>
    <email>mmm-vegies@here.com</email>
  </Resteraunt>
  <Resteraunt Type="Mexican">
    <Name>Mexican't (El Mariachi)</Name>
    <Phone>464654654</Phone>
    <email>mex@here.com</email>
  </Resteraunt>  
</Resteraunts>

NOTE :

Using XML to provide Binding values, is fine, but dont expect that you will be able to update XML simply by using a Binding.Mode set to TwoWay. That wont work. XML data binding is a simple one way/not updatable type of arrangement.

Binding To XLINQ

Although I'm not going to go into this, Beatriz The Binding Queen Costa has a good blog entry right here if you are curious

Databinding To Collections

Typically WPF development will more than likely involve binding to an entire collection at some point. Now this is very very easy to do in WPF. As with most things there is many ways to do this, i'll outline 2 possible way, but of course there will be more. I just like these ways thats all.

One important thing to ALWAYS keep in mind is change notification, recall we addressed that for individual classes by using the INotifyPropertyChanged interface. But what about Collections that will hold objects, what should we do about that?

Well as luck would have it, these days there is a nice ObserverableCollection that fills this spot quite nicely. This collection takes care of notifying the UI everytime an element in the collection is added/removed. We still need to make sure that each of the held objects does its own change notification using the INotifyPropertyChanged interface. But by using ObserverableCollection and classes that implement INotifyPropertyChanged we are sitting pretty, no change will pass us by.

As part of the demo solution, you will find a project entitled "BindingToCollections" which when run, will look like the following:

So binding to such a collection becomes a snap. Heres 2 possible ways to do this with using ListBoxes.

Binding To Collections In Code Behind

The 1st ListBox has its ItemSource set in code behind as follows:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;

namespace BindingToCollections
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {

        private People people = new People();

        public Window1()
        {
            InitializeComponent();
            people.Add(new Person { PersonName = "Judge Mental" });
            people.Add(new Person { PersonName = "Office Rocker" });
            people.Add(new Person { PersonName = "Sir Real" });
            this.lstBox1.ItemsSource = people;
        }


    }
}

And in VB .NET

Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Text
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Data
Imports System.Windows.Documents
Imports System.Windows.Input
Imports System.Windows.Media
Imports System.Windows.Media.Imaging
Imports System.Windows.Navigation
Imports System.Windows.Shapes
Imports System.Collections.ObjectModel

    ''' <summary> 
    ''' Interaction logic for Window1.xaml 
    ''' </summary> 
    Partial Public Class Window1
        Inherits Window

        Private people As New People()

        Public Sub New()
        InitializeComponent()

        Dim _Person As New Person
        _Person.PersonName = "Judge Mental"
        people.Add(_Person)
        _Person.PersonName = "Office Rocker"
        people.Add(_Person)
        _Person.PersonName = "Sir Real"
        people.Add(_Person)

        lstBox1.ItemsSource = people
        End Sub
    End Class

And the matching XAML for this Binding is as follows

<Window x:Class="BindingToCollections.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:BindingToCollections"
    WindowStartupLocation="CenterScreen"
    Title="Window1" Height="800" Width="800">
    
    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
        <StackPanel Orientation="Vertical">
            <!-- ListBox Source Set In Code Behind-->
            <StackPanel Orientation="Vertical">
                <Label Content="ListBox Source Set In Code Behind" 
                    Margin="5,0,0,0" FontSize="14" FontWeight="Bold" />
                <ListBox x:Name="lstBox1"/>
            </StackPanel>
        </StackPanel>
    </ScrollViewer>
</Window>

Binding To Collections In XAML

The 2nd ListBox has its ItemSource set in XAML as follows:

<Window x:Class="BindingToCollections.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:BindingToCollections"
    WindowStartupLocation="CenterScreen"
    Title="Window1" Height="800" Width="800">
    
    
    <Window.Resources>
        <local:People x:Key="people">
            <local:Person PersonName="Freddy Star"/>
            <local:Person PersonName="Stick Head"/>
        </local:People>
    </Window.Resources>
    
    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
        <StackPanel Orientation="Vertical">
            <!-- ListBox Source Set By Using Resources -->
            <StackPanel Orientation="Vertical">
                <Label Content="ListBox Source Set By Using Resources" 
                    Margin="5,0,0,0" FontSize="14" FontWeight="Bold" />
                <ListBox x:Name="lstBox2" 
                    ItemsSource="{Binding Source={StaticResource people}}"/>
            </StackPanel>
        </StackPanel>
    </ScrollViewer>
</Window>

You can see that we have an instance of the People object directly in the XAML, within a resources section, and that the declared People object has several children of type Person. This is all thanks to the XAML parser which knows that children should be added using the Add() method of the ObserverableCollection.

I should point out that these examples are merely demonstrating how to Bind to collections. Probably in a production system, the collection would be part of a BAL layer/ or maybe part of a model within a MVC/MVVM pattern. Im going for quick an dirty to get the point across.

One other thing that I would like to bring your attention to is the rendering of the items within the ListBox. See how they simply show "BindingToCollection.Persons", as plain text.

This is obviously not the desired effect, but happens because WPF does not know what properties to show and how they should be shown for a Person object. This will be the subject of my next article Templates. I wont write any more about this, but just know that we can change the way a data item looks using a DataTemplate. If you really can't wait you can have a look at these links

• MSDN : DataTemplating
• Josh Smith : A Guided Tour of WPF - Part 4 (Data templates and triggers)

NOTE :

As I stated earlier I did not cover grouping/sorting/filtering etc etc, and if you really want to know more about these, please use the links provided at the start of this article.

Databinding Value Convertors

Imagine a situation where we have a bound data value that we wish to format in some way, say by using a short date format instead of a long date fomat. Up until now we have simply used the raw Binding value. So this wouldnt be possible, we would have to make sure the bound value had what we want to display. Luckily WPF has a trick up its sleeve, we can use a class that implements the IValueConverter interface to provide a new value for the binding.

ValueConverters are like the sprintf of the WPF world. You can use a ValueConverter to literally provide a new object to a Binding. This may be an object of the same type as the orginal object, or could be a totally new object. For example in WPF there is a principle of a Freezable Object which is an imutable object. If you try and animate a Frozen object, you will have problems. I have in the past circumnaviagted this issue with using a Clone ValueConverter to provide a cloned object to a Binding which is then used in an animation.

But more typically you may use ValueConverters for small formatting changes.

ValueConverters sit between the source value and the bound target property, and their sole purpose is so take a value and supply a different value.

The IValueConverter interface contains the following methods that must be implemented.

object Convert(object value, Type targetType, object parameter, CultureInfo culture)

Which is used to convert from the source object into the new value which will be used by the target

object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

Which is used to convert from the target object back to the source. This will be used where a Bindings Binding.Mode has been set to TwoWay or OneWayToSource. More often than not this will not be used and will simply throw an exception.

So how do we use of of these ValueConverters in our code. Well quite simply we use the normal Bindings expression but we also state which converter to use for the Binding.Converter property. Lets see an example shall we.

As part of the demo solution, you will find a project entitled "ValueConverters" which when run, will look like the following:

This small example actually uses 2 ValueConverters, the top one converts from words to a Brush that is used to color a Rectangle. The 2nd value converter uses an explicitly set DataContext in the code behind where 2 labels have their DataContext set to a new DateTime. Lets see the code

First the XAML

<Window x:Class="ValueConverters.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ValueConverters"
    WindowStartupLocation="CenterScreen"
    Title="Window1" Height="800" Width="800">
    
    <Window.Resources>
        <local:WordToColorConverter x:Key="wordToColorConv"/>
        <local:DateConverter x:Key="dateConv"/>
    </Window.Resources>
    
    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
        <StackPanel Orientation="Vertical">
            <!-- Using Vaue Converter To Convert Text Into Colors -->
            <Label Content="Using Vaue Converter To Convert Text To Fill Color" 
                    Margin="5,0,0,0" FontSize="14" FontWeight="Bold" />
            <StackPanel Orientation="Horizontal" Margin="10,10,10,10" Background="Gainsboro">
                <TextBlock TextWrapping="Wrap" Text="Using Vaue Converter. Type 'hot' or 'cold' 
                        into the textbox and watch the rectangle change color" Width="400"/>
                <TextBox x:Name="txtSource" Width="50" Height="25" Margin="5,0,0,0"/>
                <Rectangle Width="50" Height="25" Margin="5,0,0,0" 
                    Fill="{Binding ElementName=txtSource, Path=Text, 
                    Converter={StaticResource wordToColorConv}}" />
            </StackPanel>
            <!-- Using Vaue Converter To Convert Date To Short Date -->
            <Label Content="Using Vaue Converter To Convert Date To Short Date" 
                    Margin="5,0,0,0" FontSize="14" FontWeight="Bold" />
            <StackPanel Orientation="Vertical" Margin="10,10,10,10" Background="Gainsboro">
                <StackPanel Orientation="Horizontal">
                    <Label Content="LongDate"/>
                    <Label x:Name="lblLongDate" Content="{Binding Path=Now}"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Label Content="ShortDate thanks to value converter"/>
                    <Label x:Name="lblShortDate" Content="{Binding Path=Now, 
                        Converter={StaticResource dateConv}}"/>
                </StackPanel>
            </StackPanel>
        </StackPanel>
    </ScrollViewer>
</Window>

And here is the code behind for this Window

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace ValueConverters
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
            lblLongDate.DataContext = new DateTime();
            lblShortDate.DataContext = new DateTime();
        }
    }
}

And finally the converters

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows.Data;
using System.Windows.Media;
using System.Globalization;

namespace ValueConverters
{
    [ValueConversion(typeof(String), typeof(SolidColorBrush))]
    public class WordToColorConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, 
            object parameter, CultureInfo culture)
        {
            string boundWord = value as string;
            SolidColorBrush returnBrush = null;

            switch (boundWord.ToLower().Trim())
            {
                case "hot":
                    returnBrush = new SolidColorBrush(Colors.Red);
                    break;
                case "cold":
                    returnBrush = new SolidColorBrush(Colors.Green);
                    break;
                default:
                    returnBrush = new SolidColorBrush(Colors.Yellow);
                    break;
            }

            return returnBrush;
        }

        public object ConvertBack(object value, Type targetType, 
            object parameter, CultureInfo culture)
        {
            throw new Exception("Cant convert back");
        }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows.Data;
using System.Windows.Media;
using System.Globalization;

namespace ValueConverters
{
    [ValueConversion(typeof(DateTime), typeof(String))]
    public class DateConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, 
            object parameter, CultureInfo culture)
        {
            DateTime date = (DateTime)value;
            return date.ToShortDateString();
        }

        public object ConvertBack(object value, Type targetType, 
            object parameter, CultureInfo culture)
        {
            string strValue = value.ToString();
            DateTime resultDateTime;
            if (DateTime.TryParse(strValue, out resultDateTime))
            {
                return resultDateTime;
            }
            return value;
        }
    }
}

And here are the VB .NET versions, code behind

Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Text
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Data
Imports System.Windows.Documents
Imports System.Windows.Input
Imports System.Windows.Media
Imports System.Windows.Media.Imaging
Imports System.Windows.Navigation
Imports System.Windows.Shapes

    ''' <summary> 
    ''' Interaction logic for Window1.xaml 
    ''' </summary> 
    Partial Public Class Window1
        Inherits Window
        Public Sub New()
            InitializeComponent()
            lblLongDate.DataContext = New DateTime()
            lblShortDate.DataContext = New DateTime()
        End Sub


    End Class

VB .NET converters

Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Text
Imports System.Windows.Data
Imports System.Windows.Media
Imports System.Globalization

    <ValueConversion(GetType(String), GetType(SolidColorBrush))> _
    Public Class WordToColorConverter
        Implements IValueConverter
    Public Function Convert(ByVal value As Object, ByVal targetType As Type, 
        ByVal parameter As Object, ByVal culture As CultureInfo) 
            As Object Implements IValueConverter.Convert
        Dim boundWord As String = TryCast(value, String)
        Dim returnBrush As SolidColorBrush = Nothing

        Select Case boundWord.ToLower().Trim()
            Case "hot"
                returnBrush = New SolidColorBrush(Colors.Red)
                Exit Select
            Case "cold"
                returnBrush = New SolidColorBrush(Colors.Green)
                Exit Select
            Case Else
                returnBrush = New SolidColorBrush(Colors.Yellow)
                Exit Select
        End Select

        Return returnBrush
    End Function

    Public Function ConvertBack(ByVal value As Object, ByVal targetType As Type, 
        ByVal parameter As Object, ByVal culture As CultureInfo) 
            As Object Implements IValueConverter.ConvertBack
        Throw New Exception("Cant convert back")
    End Function
    End Class



Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Text
Imports System.Windows.Data
Imports System.Windows.Media
Imports System.Globalization
<ValueConversion(GetType(DateTime), GetType(String))> _
    Public Class DateConverter
    Implements IValueConverter


    Public Function Convert(ByVal value As Object, ByVal targetType As Type, 
        ByVal parameter As Object, ByVal culture As CultureInfo) 
            As Object Implements IValueConverter.Convert
        Dim [date] As DateTime = DirectCast(value, DateTime)
        Return [date].ToShortDateString()
    End Function

    Public Function ConvertBack(ByVal value As Object, ByVal targetType As Type, 
        ByVal parameter As Object, ByVal culture As CultureInfo) 
            As Object Implements IValueConverter.ConvertBack
        Dim strValue As String = value.ToString()
        Dim resultDateTime As DateTime
        If DateTime.TryParse(strValue, resultDateTime) Then
            Return resultDateTime
        End If
        Return value
    End Function

End Class

NOTE :

I did not cover MultiBinding because Josh Smith does such a great job of covering this in his excellent article, that I didn't feel there was any need to write more about this.

Databinding Validation

So far we've looked at binding to values/other elements/xml etc etc and seen how we can convert values. Which is good. But one of the main concerns of using Binding is validating what data is entered, especially when we have a Binding.Mode property set to TwoWay or OneWayToSource. We really need to make sure that we only allow valid data to be sent back to a source object. Not only is it the right thing to do, but it ensures that we dont send back rubbish data to our persistence store (database/file etc etc). So how are we going to do that we need some sort of validation applied to our Bindings.

Luckily Microsoft knew about this and have equipped us with the nessecary ammunition to create good well behaved validated Databindings. There are 3 main way that validation may be performed and we shall have a look at each of them below.

As part of the demo solution, you will find a project entitled "Validation" which when run, will look like the following:

Visual Validation Changes

As part of the attached "Validation" project, I have had include some Styles. Which is an area that we have not yet covered. There is no way out of this. The things you need to know for the moment are that a TextBox entry that is invalid will cause the associated TextBox to have its visual appearance changed by the use of a Style or a Template. And the other thing is how the TextBox.ToolTip is showing the correct validation message. Well this is also done via some clever binding, which is as follows:

<Setter Property="ToolTip"
Value="{Binding RelativeSource={RelativeSource Self},
Path=(Validation.Errors)[0].ErrorContent}"/>

As I say I dont want to get to bogged down with Styles/Templates as they are the discussion of the next article, but I think that this one element deserves a mention.

Exception Based Validation

Probably the easist way to use validation in Binding is to use the Exception based validation rule. Which basically means if an Exception is seen while trying to update a bound property, we can use the Exception to inform the user. Typically this would be done by showing a message on a tooltip, and changing the TextBox visual as previously discussed. If we have a small test class to bind to as follows:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace Validation
{
    public class TestClass
    {
        public int Age { get; set; }
        public DateTime StartDate { get; set; }

        public TestClass()
        {
            StartDate = DateTime.Now;
        }
    }
}

And here is the VB .NET version

Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Text

Public Class TestClass
    Private m_Age As Integer = 1
    Private m_StartDate As DateTime
    Public Property Age() As Integer
        Get
            Return m_Age
        End Get
        Set(ByVal value As Integer)
            m_Age = value
        End Set
    End Property
    Public Property StartDate() As DateTime
        Get
            Return m_StartDate
        End Get
        Set(ByVal value As DateTime)
            m_StartDate = value
        End Set
    End Property

    Public Sub New()
        m_StartDate = DateTime.Now
    End Sub
End Class

And we set the Binding up in code behind as follows (using the DataContext).

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace Validation
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
            this.DataContext = new TestClass();
            txtIDataErrorInfoAge.DataContext = new Person();
            txtIDataErrorInfoName.DataContext = new Person();
        }
    }
}

And in VB .NET

Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Text
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Data
Imports System.Windows.Documents
Imports System.Windows.Input
Imports System.Windows.Media
Imports System.Windows.Media.Imaging
Imports System.Windows.Navigation
Imports System.Windows.Shapes

    ''' <summary> 
    ''' Interaction logic for Window1.xaml 
    ''' </summary> 
    Partial Public Class Window1
        Inherits Window
        Public Sub New()
        InitializeComponent()
        Me.DataContext = New TestClass
        txtIDataErrorInfoAge.DataContext = New Person
        txtIDataErrorInfoName.DataContext = New Person
        End Sub
    End Class

Then we are able to use the Exception based validation as follows in the XAML

<Window x:Class="Validation.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Validation"
    Title="Window1" Height="800" Width="800"
    WindowStartupLocation="CenterScreen">
    
    
    <Window.Resources>
        
        <!-- Exception/ValidationRule Based Validitaion TextBox Style -->
        <Style x:Key="textStyleTextBox" TargetType="TextBox">
            <Setter Property="Foreground" Value="#333333" />
            <Style.Triggers>
                <Trigger Property="Validation.HasError" Value="true">
                    <Setter Property="ToolTip"
                        Value="{Binding RelativeSource={RelativeSource Self},
                        Path=(Validation.Errors)[0].ErrorContent}"/>
                </Trigger>
            </Style.Triggers>
        </Style>

        <!-- ValidationRule Based Validitaion Control Template -->
        <ControlTemplate x:Key="validationTemplate">
            <DockPanel>
                <TextBlock Foreground="Red" FontSize="20">!</TextBlock>
                <AdornedElementPlaceholder/>
            </DockPanel>
        </ControlTemplate>


    </Window.Resources>
    
    
    <ScrollViewer HorizontalScrollBarVisibility="Auto" 
            VerticalScrollBarVisibility="Auto">
        <StackPanel Orientation="Vertical">
            
            <!-- Exception Based Validitaion -->
            <Label Content="Exception Based Validitaion" Margin="5,0,0,0" 
                FontSize="14" FontWeight="Bold" />
            <StackPanel Orientation="Horizontal" Margin="10,10,10,10" 
                    Background="Gainsboro">
                <TextBlock TextWrapping="Wrap" Text="Exception Based Validitaion, 
                        type an non integer value" Width="400"/>
                <TextBox Name="txtException" Style="{StaticResource textStyleTextBox}" 
                         Width="120" Height="25" Margin="5,0,0,0"
                         Text="{Binding Path=Age, 
                         UpdateSourceTrigger=PropertyChanged, 
                         ValidatesOnExceptions=True}" />                           
            </StackPanel>


        </StackPanel>
    </ScrollViewer>
</Window>

The important thing to note is that the Binding.ValidatesOnExceptions=True this means that the WPF inbuilt ExceptionValidationRule will be used to create the appropraite validation message that will be shown in the TextBox.Tooltip

Custom ValidationRules Based Validation

Custom ValidationRules is similar in principle to the inbuilt ExceptionValidationRule but this time we are using our own ValidationRule to create the appropriate validation messages. Here is an example of a custom ValidationRule, where the value entered for the binding must be a DateTime in the future.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows.Controls;
using System.Globalization;

namespace Validation
{


    class FutureDateValidationRule : ValidationRule
    {
        public override ValidationResult Validate(object value, CultureInfo cultureInfo)
        {
            DateTime date;
            try
            {
                date = DateTime.Parse(value.ToString());
            }
            catch (FormatException)
            {
                return new ValidationResult(false, "Value is not a valid date.");
            }
            if (DateTime.Now.Date > date)
            {
                return new ValidationResult(false, "Please enter a date in the future.");
            }
            else
            {
                return ValidationResult.ValidResult;
            }
        }
    }

}

And here is the VB .NET version

Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Text
Imports System.Windows.Controls
Imports System.Globalization

    Public Class FutureDateValidationRule
        Inherits ValidationRule
        Public Overloads Overrides Function Validate(ByVal value As Object, 
            ByVal cultureInfo As CultureInfo) As ValidationResult
            Dim [date] As DateTime
            Try
                [date] = DateTime.Parse(value.ToString())
            Catch generatedExceptionName As FormatException
                Return New ValidationResult(False, "Value is not a valid date.")
            End Try
            If DateTime.Now.[Date] > [date] Then
                Return New ValidationResult(False, "Please enter a date in the future.")
            Else
                Return ValidationResult.ValidResult
            End If
        End Function
    End Class

And we set the Binding up in code behind as follows (using the DataContext).

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace Validation
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
            this.DataContext = new TestClass();
            txtIDataErrorInfoAge.DataContext = new Person();
            txtIDataErrorInfoName.DataContext = new Person();
        }
    }
}

And in VB .NET

Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Text
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Data
Imports System.Windows.Documents
Imports System.Windows.Input
Imports System.Windows.Media
Imports System.Windows.Media.Imaging
Imports System.Windows.Navigation
Imports System.Windows.Shapes

    ''' <summary> 
    ''' Interaction logic for Window1.xaml 
    ''' </summary> 
    Partial Public Class Window1
        Inherits Window
        Public Sub New()
        InitializeComponent()
        Me.DataContext = New TestClass
        txtIDataErrorInfoAge.DataContext = New Person
        txtIDataErrorInfoName.DataContext = New Person
        End Sub
    End Class

Then we are able to use this custom FutureDateValidationRule in the XAML

<Window x:Class="Validation.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Validation"
    Title="Window1" Height="800" Width="800"
    WindowStartupLocation="CenterScreen">
    
    
    <Window.Resources>
        
        <!-- Exception/ValidationRule Based Validitaion TextBox Style -->
        <Style x:Key="textStyleTextBox" TargetType="TextBox">
            <Setter Property="Foreground" Value="#333333" />
            <Style.Triggers>
                <Trigger Property="Validation.HasError" Value="true">
                    <Setter Property="ToolTip"
                        Value="{Binding RelativeSource={RelativeSource Self},
                        Path=(Validation.Errors)[0].ErrorContent}"/>
                </Trigger>
            </Style.Triggers>
        </Style>

        <!-- ValidationRule Based Validitaion Control Template -->
        <ControlTemplate x:Key="validationTemplate">
            <DockPanel>
                <TextBlock Foreground="Red" FontSize="20">!</TextBlock>
                <AdornedElementPlaceholder/>
            </DockPanel>
        </ControlTemplate>


    </Window.Resources>
    
    
    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
        <StackPanel Orientation="Vertical">
            
            <!-- ValidationRule Based Validitaion -->
            <Label Content="ValidationRule Based Validitaion" Margin="5,0,0,0" 
                    FontSize="14" FontWeight="Bold" />
            <StackPanel Orientation="Horizontal" Margin="10,10,10,10" Background="Gainsboro">
                <TextBlock TextWrapping="Wrap" Text="ValidationRule Based Validitaion, 
                        type a future date" Width="400"/>
                 <TextBox Name="txtStartDate" 
                        Validation.ErrorTemplate="{StaticResource validationTemplate}" 
                        Style="{StaticResource textStyleTextBox}" Width="150" Height="25" 
                        Margin="5,0,0,0">
                    <TextBox.Text>
                          <!-- As we need to supply a child ValidationRule, 
                             we need to use Property/Element Syntax  -->
                        <Binding Path="StartDate" UpdateSourceTrigger="PropertyChanged">
                            <Binding.ValidationRules>
                                <local:FutureDateValidationRule />
                            </Binding.ValidationRules>
                        </Binding>
                    </TextBox.Text>
                </TextBox>
            </StackPanel>

        </StackPanel>
    </ScrollViewer>
</Window>

The important thing to note here is that because we needed to add a new FutureDateValidationRule to the Binding.ValidationRules, we needed to use the Property as Elements syntax.

.NET 3.5 way Using IDataErrorInfo

With the release of .NET 3.5 came LINQ, oh and also a few improvements to WPF. One of which is a new interface called IDataErrorInfo which shifted where some of the validation was performed. It moved it from seperate validation classes back into the actual business object themselves.

Lets see an example of a simple class that implements the IDataErrorInfo interface.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ComponentModel;

namespace Validation
{
    /// <summary>
    /// This is the new .NET 3.5 method where each Business Object has its own validation
    /// using the IDataErrorInfo interface
    /// </summary>
    public class Person : IDataErrorInfo
    {
        public int Age { get; set; }
        public string Name { get; set; }


        public Person()
        {
            this.Age = 0;
            this.Name = "sacha";
        }

        #region IDataErrorInfo Members

        public string Error
        {
            get
            {
                return null;
            }
        }


        /// <summary>
        /// Examines the property that was changed and provides the
        /// correct error message based on some rules
        /// </summary>
        /// <param name="name">The property that changed</param>
        /// <returns>a error message string</returns>
        public string this[string name]
        {
            get
            {
                string result = null;

                //basically we need one of these blocks for each property you wish to validate
                switch (name)
                {
                    case "Age":
                        if (this.Age < 0 || this.Age > 150)
                        {
                            result = "Age must not be less than 0 or greater than 150.";
                        }
                        break;

                    case "Name":
                        if (this.Name == string.Empty)
                        {
                            result = "Name can't be empty";
                        }
                        if (this.Name.Length > 5)
                        {
                            result = "Name can't be more than 5 characters";
                        }
                        break;
                }


                return result;
            }
        }
        #endregion

    }
}

And here is the VB .NET version

Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Text
Imports System.ComponentModel


''' <summary> 
''' This is the new .NET 3.5 method where each Business Object has its own validation 
''' using the IDataErrorInfo interface 
''' </summary> 
Public Class Person
    Implements IDataErrorInfo

    Private m_Age As Integer
    Private m_Name As String
    Public Property Age() As Integer
        Get
            Return m_Age
        End Get
        Set(ByVal value As Integer)
            m_Age = value
        End Set
    End Property
    Public Property Name() As String
        Get
            Return m_Name
        End Get
        Set(ByVal value As String)
            m_Name = value
        End Set
    End Property


    Public Sub New()
        Me.Age = 0
        Me.Name = "sacha"
    End Sub

#Region "IDataErrorInfo Members"
    Public ReadOnly Property [Error]() As String Implements System.ComponentModel.IDataErrorInfo.Error
        Get
            Return Nothing
        End Get
    End Property



    ''' <summary> 
    ''' Examines the property that was changed and provides the 
    ''' correct error message based on some rules 
    ''' </summary> 
    ''' <param name="Name">The property that changed</param> 
    ''' <returns>a error message string</returns> 
    Default Public ReadOnly Property Item(ByVal Name As String) 
            As String Implements System.ComponentModel.IDataErrorInfo.Item
        'Default Public ReadOnly Property Item(ByVal name As String) As String
        Get
            Dim result As String = Nothing

            'basically we need one of these blocks for each property you wish to validate 
            Select Case Name
                Case "Age"
                    If Me.Age < 0 OrElse Me.Age > 150 Then
                        result = "Age must not be less than 0 or greater than 150."
                    End If
                    Exit Select
                Case "Name"

                    If Me.Name = String.Empty Then
                        result = "Name can't be empty"
                    End If
                    If Me.Name.Length > 5 Then
                        result = "Name can't be more than 5 characters"
                    End If
                    Exit Select
            End Select

            Return result
        End Get
    End Property
#End Region

End Class

Basically the interface allows us to validate the property that changed using the public string this[string name] syntax. The XAML is a little different this time, where the Binding no longer needs to use a seperate validation class, so we can simply use the shorthand XAML syntax, the one with the { } braces. Again if you prefer the longer more verbose syntax you can do that also.

<Window x:Class="Validation.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Validation"
    Title="Window1" Height="800" Width="800"
    WindowStartupLocation="CenterScreen">
    
    
    <Window.Resources>
        <!-- Exception/ValidationRule Based Validitaion TextBox Style -->
        <Style x:Key="textStyleTextBox" TargetType="TextBox">
            <Setter Property="Foreground" Value="#333333" />
            <Style.Triggers>
                <Trigger Property="Validation.HasError" Value="true">
                    <Setter Property="ToolTip"
                        Value="{Binding RelativeSource={RelativeSource Self},
                        Path=(Validation.Errors)[0].ErrorContent}"/>
                </Trigger>
            </Style.Triggers>
        </Style>


    </Window.Resources>
    
    
    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
        <StackPanel Orientation="Vertical">
            


            <!-- IDataErrorInfo Based Validitaion -->
            <Label Content="IDataErrorInfo Based Validitaion" Margin="5,0,0,0" 
                    FontSize="14" FontWeight="Bold" />
            <StackPanel Orientation="Horizontal" Margin="10,10,10,10" Background="Gainsboro">
                <TextBlock TextWrapping="Wrap" Text="IDataErrorInfo Based Validitaion, 
                    type a number below 0 or above 150 " Width="400"/>
                <!-- Age Entry Area -->
                <Label Content="Age"/>
                <TextBox Name="txtIDataErrorInfoAge" Style="{StaticResource textStyleTextBox}" 
                         Width="60" Height="25" Margin="5,0,0,0"
                         Text="{Binding Path=Age, 
                         UpdateSourceTrigger=PropertyChanged, 
                         ValidatesOnExceptions=True,
                         ValidatesOnDataErrors=True}" />                           
                <!-- Name Entry Area -->
                <Label Content="Name"/>
                <TextBox Name="txtIDataErrorInfoName" Style="{StaticResource textStyleTextBox}" 
                         Width="60" Height="25" Margin="5,0,0,0"
                         Text="{Binding Path=Name, 
                         UpdateSourceTrigger=PropertyChanged, 
                         ValidatesOnDataErrors=True}" />                           
            </StackPanel>


        </StackPanel>
    </ScrollViewer>
</Window>

Notice that this time we have set the Binding.ValidatesOnDataErrors=True this means that the DataErrorValidationRule will be included, which uses the IDataErrorInfo implementation we discussed.

WARNING : Beware of Tabs

I recently got a rather cool email from Karl Shifllet warning of a bug with validation error disappearing when you use tabs in WPF. You should familiarise yourself with Karls blog entry about this.

We're Done

There is more to Databinding than I have covered here, for example I have not covered grouping/sorting/filtering etc etc, and ther will be databinding points and syntax that I have missed. I leave these areas as an excercise for the reader. This article was meant as an introduction to Databinding, hope you enjoyed it. If you liked it, please vote for it and leave a comment, and maybe read the next article in this series. Thanks

References

1. MSDN : Databinding overview
2. MSDN : Multibinding
3. MSDN : Binding class
4. Data Validation In .NET 3.5
5. Bind to XML Data Using an XMLDataProvider and XPath Queries

Other good sources

1. Beatriz "The Binding Queen" Costa : Blog
2. Josh Smith : A Guided Tour of WPF – Part 3 (Data binding)

History

14/02/08 : Initial release

You must Sign In to use this message board.

FAQ    Noise Tolerance Very HighHighMediumLowVery Low   Layout Expand Posts & RepliesThread ViewNo JavascriptNo JS + Preview   Per page 102550

Msgs 1 to 25 of 88 (Total in Forum: 88) (Refresh) FirstPrevNext

Like this guide mattchang 2:04 1 Jul '09   Indeed, your guide is excellent, but I try to learn it found it still difficult for me to understand on some meaning. I'll try to learn hard. Thanks anyway for your guide. Sign In·View Thread·PermaLink WOW! What a great series of articles! Member 1974062 7:41 25 Feb '09   Sacha, You have a great set of articles here. I cannot thank you enough for the time and effort you put into them. Thank you from the bottom of my heart. Bryan Sign In·View Thread·PermaLink Re: WOW! What a great series of articles! Sacha Barber 11:27 25 Feb '09   Hey no problem, glad you like them. Did you see my latest one, its called "Sonic", now thats the stuff. Sacha Barber Microsoft Visual C# MVP 2008/2009 Codeproject MVP 2008/2009 Your best friend is you. I'm my best friend too. We share the same views, and hardly ever argue My Blog : sachabarber.net Sign In·View Thread·PermaLink How do I ignore external references using XMLDataProvider? Jeremy Odekirk 8:14 17 Feb '09   I am trying to use my external XML file that contains a reference to a DTD, but I do not have the DTD. Is there any way to set a property or turn off the checking of external references when using the XmlDataProvider? The XmlDataProvider Using External XML File does not work if the XML file contains a link to a dtd that does not exist. So no information displays at all even though everything is perfectly correct. for example: <?xml version="1.0"?> <!DOCTYPE tab SYSTEM "..\Editor\manual.dtd"> ... All of my XML files have that reference to the DTD, which I would like to ignore without modifying the XML files. Any ideas? Thanks, Jeremy Odekirk Sign In·View Thread·PermaLink Re: How do I ignore external references using XMLDataProvider? Sacha Barber 22:43 17 Feb '09   TO be truthful, I do not know, as I rarely use the XmlDataProvider, I prefer Linq source these days. Sorry. Sacha Barber Microsoft Visual C# MVP 2008 Codeproject MVP 2008 Your best friend is you. I'm my best friend too. We share the same views, and hardly ever argue My Blog : sachabarber.net Sign In·View Thread·PermaLink Re: How do I ignore external references using XMLDataProvider? Jeremy Odekirk 11:32 25 Mar '09   I figured out how to load an XML file without having the associated DTD. I could not find a pure XAML way to do this, but it's pretty simple using the code behind. The code behind creates a new XmlDocument and sets the XmlResolver property to Nothing. Then find the XAML Resource where you want to set the XML. Set the Document property of the XmlDataProvider to this new XmlDocument. Dim reader As New XmlDocument reader.XmlResolver = Nothing reader.Load("c:\abc.xml") ' give your XAML XmlDataProvider a key... such as "XMLdata" Dim existing As XmlDataProvider = FindResource("XMLdata") ' then set the Document property of the XmlDataProvider to the XmlDocument existing.Document = reader Hope this helps others that come across this issue. If anybody knows a pure XAML way to load XML files but not resolve the DTD, please share! Thanks, Jeremy Odekirk Sign In·View Thread·PermaLink Re: How do I ignore external references using XMLDataProvider? Sacha Barber 23:21 25 Mar '09   Cool thanks for sharing that. Sacha Barber Microsoft Visual C# MVP 2008/2009 Codeproject MVP 2008/2009 Your best friend is you. I'm my best friend too. We share the same views, and hardly ever argue My Blog : sachabarber.net Sign In·View Thread·PermaLink Sorting ObservableCollection ? holy_spirit 1:58 13 Jan '09   as the subject, how can I do that Peopel pplz = new People(); IEnumerable query = pplz.OrderBy(p => p.PersonName); then how to assign ordered collection (query in my case) to my pplz Thanks. Sign In·View Thread·PermaLink Re: Sorting ObservableCollection ? Sacha Barber 2:23 13 Jan '09   Look up ICollectionViewSource and SortDescriptors, these classes hold the answers Sacha Barber Microsoft Visual C# MVP 2008 Codeproject MVP 2008 Your best friend is you. I'm my best friend too. We share the same views, and hardly ever argue My Blog : sachabarber.net Sign In·View Thread·PermaLink 4.00/5 (1 vote) Re: Sorting ObservableCollection ? holy_spirit 5:09 14 Jan '09   Thanks Sign In·View Thread·PermaLink Re: Sorting ObservableCollection ? Sacha Barber 5:16 14 Jan '09   Its ok Sacha Barber Microsoft Visual C# MVP 2008 Codeproject MVP 2008 Your best friend is you. I'm my best friend too. We share the same views, and hardly ever argue My Blog : sachabarber.net Sign In·View Thread·PermaLink Nice article holy_spirit 7:46 12 Jan '09   Nice article, Thank you Sign In·View Thread·PermaLink Re: Nice article Sacha Barber 11:04 12 Jan '09   No bother. Glad you like Sacha Barber Microsoft Visual C# MVP 2008 Codeproject MVP 2008 Your best friend is you. I'm my best friend too. We share the same views, and hardly ever argue My Blog : sachabarber.net Sign In·View Thread·PermaLink 'ToString()' way of displaying person names in list frank.verheyen1@pandora.be 6:01 22 Dec '08   Hi Sacha, maybe someone else already pointed it out, or I didn't read all replies to your article well enough, but here goes my two cent's worth anyway: ----- In your example where you 'bind the listbox to person objects', you state that: "One other thing that I would like to bring your attention to is the rendering of the items within the ListBox. See how they simply show "BindingToCollection.Persons", as plain text. " I noticed - while experimenting with the code - that this is typically the output of the generic 'ToString()' method on the 'Person' object, which is used internally to fill up the listbox with rather un-useful names. So if you override the person's 'ToString()' method like this: public override string ToString() { return name; } We can simply have a more useful string showing up in the listbox... the actual names of the persons. neat and ultra simple, no? I thought I'd just mention it, because it's the most simple way of actually getting your data out there, without any need for convertors or anything. (stating the almost obvious, I guess. but hey, I'm just learning kind regards! frank Sign In·View Thread·PermaLink Re: 'ToString()' way of displaying person names in list Sacha Barber 6:18 22 Dec '08   Frank, You could indeed use a better toString() override, but more often that not, you would not do this and would actually write a custom DataTemplate. Sacha Barber Microsoft Visual C# MVP 2008 Codeproject MVP 2008 Your best friend is you. I'm my best friend too. We share the same views, and hardly ever argue My Blog : sachabarber.net Sign In·View Thread·PermaLink Compliment!!! ascotravel 4:19 21 Nov '08   Hi Sacha, i'm a beginner but i can appreciate so much your work in the same time you are simple and genius. Thanks to help people to understand in easy way. I wish you happy future. 5_STARS Regards, Bye, Sign In·View Thread·PermaLink Re: Compliment!!! Sacha Barber 5:21 21 Nov '08   Thanks man Sacha Barber Microsoft Visual C# MVP 2008 Codeproject MVP 2008 Your best friend is you. I'm my best friend too. We share the same views, and hardly ever argue My Blog : sachabarber.net Sign In·View Thread·PermaLink [Message Removed] Katekortez 10:12 25 Oct '08   Spam message removed Sign In·View Thread·PermaLink This is... Rajesh Pillai 3:38 18 Oct '08   This is helping me learn databinding better. Five from me Enjoy Life, Rajesh Pillai http://rajeshpillai.blogspot.com/ http://simply-url.blogspot.com/ Sign In·View Thread·PermaLink Re: This is... Sacha Barber 4:32 18 Oct '08   Thanks Sacha Barber Microsoft Visual C# MVP 2008 Codeproject MVP 2008 Your best friend is you. I'm my best friend too. We share the same views, and hardly ever argue My Blog : sachabarber.net Sign In·View Thread·PermaLink Just what I needed - many thanks! Member 1037311 15:20 16 Oct '08   Just what I needed to get me started! Thanks a million! Sign In·View Thread·PermaLink Re: Just what I needed - many thanks! Sacha Barber 22:51 16 Oct '08   Glad it helped Sacha Barber Microsoft Visual C# MVP 2008 Codeproject MVP 2008 Your best friend is you. I'm my best friend too. We share the same views, and hardly ever argue My Blog : sachabarber.net Sign In·View Thread·PermaLink Extended Element Binding [modified] atta.elayyan 21:39 6 Aug '08   Hi Sacha, I am a C#/WPF newbie and am trying to climb over the good ol "learning curve", your posts have definitely helped me in that quest! I have a quick question with regards to element data binding. What if I wanted to bind to an element outside the scope of a given window? i.e. bind an element from window1.xaml to an element from window2.xaml. In my scenario I have a settings window element which I would like to bind to the root window elements. More specifically I would like to scale the root windows tool bar icons and captions via the settings window slider bar. I know it's probably a trivial question, but I can't seem to make the connection and would appreciate it if you could enlighten me! Cheers! modified on Thursday, August 7, 2008 2:53 AM Sign In·View Thread·PermaLink Re: Extended Element Binding Sacha Barber 22:53 6 Aug '08   I do not believe this is possible. BUt what you could try is create an instance of Window2 (settings window) in window1 (host window) using the xmlns:local="clr-namespace=XXXX" <label content="{Binding local:window2, Path=SOME_PROP}"> syntax. But I do not think this will work, and also window2 will have to have a no parameter constructor Sacha Barber Microsoft Visual C# MVP 2008 Codeproject MVP 2008 Your best friend is you. I'm my best friend too. We share the same views, and hardly ever argue My Blog : sachabarber.net </label> Sign In·View Thread·PermaLink Question for you Mr WPF Moim Hossain 23:15 23 Jun '08   Sacha, first of all thanks for the great contributions on WPF here. hey I am running a trouble here..lets see if you can light me here.. I have an object data source defined..that is using a plain .net class to fetch some data. for instance, the class is as follows class Manager { public static []Department GetDepartments() { ... } public static []Employee GetEmployees(string departmentName) { ... } } Now, I have a combo box that is bound to the GetDepartment method by using an object data source. What i need now is, another combo box will reflect the employee names based onto the current selected department. I tried another object data source for this, but as the object data source is not a dependencyObject It can't take the selected department name as a method parameter. Would be nice to hear a expert solution from you? Best regards Moim Hossain Technical Lead (.NET) Orion Informatics. Sign In·View Thread·PermaLink 2.00/5 (1 vote)

Last Visit: 13:15 9 Feb '10     Last Update: 13:15 9 Feb '10 1234 Next »