Create a new WPF Application project, name it BindingSample1,

Define a simple Car class by adding a new Class to your solution named Car.cs. Code it as follows:

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

namespace BindingSample1
{
   public class Car
   {
        private string _make;

        public string Make
        {

get { return _make; }
            set { _make = value; }
        }
        private string _model;

        public string Model
        {
            get { return _model; }
            set { _model = value; }
        }

        public Car() { }
    }
}

In MainWindow.xaml, replace the grid with one that defines a double column and single row grid. Then add a label in each grid cell, like this:

<Grid>
     <Grid.ColumnDefinitions>
         <ColumnDefinition></ColumnDefinition>
         <ColumnDefinition></ColumnDefinition>
     </Grid.ColumnDefinitions>
     <Grid.RowDefinitions>
         <RowDefinition></RowDefinition>
     </Grid.RowDefinitions>
     <Label x:Name="lblCarMake" Grid.Row="0" Grid.Column="0"
            Content="{Binding Path=Make, Mode=OneTime}" />
     <Label x:Name="lblCarModel" Grid.Row="0" Grid.Column="1"
            Content="{Binding Path=Model, Mode=OneTime}" />
 </Grid>

Take a look at the Content dependency property value. The information contained within the curly braces defines the binding for the content to be displayed in the labels. I describe what this Binding expression means in just a moment, but first, let's get some data to bind to!

Open the MainWindow.xaml.cs code-behind file, and create a method called GenerateData that instantiates a Car object and assigns it to the DataContext of the window, like this:

private void GenerateData()
{
     Car car1 = new Car() { Make = "Athlon", Model = "XYZ" };
     this.DataContext = car1;
}

Call the GenerateData() method in the MainWindow constructor method (public MainWindow()), immediately following InitializeComponents() call.

Now, looking back to the XAML file (MainWindow.xaml), the first label lblCarMake will bind to the DataContext's Make property. The value is retrieved from the property specified in the binding's Path component. Similarly, the second label lblCarModel will bind to the DataContext's Model property as specified in the binding expression's Path property. Each of these bindings is using a OneWay mode, which means the label content will be bound only once, regardless if the underlying object property being bound to changes.

Run the application.

You can see that the labels now display the Make and Model of the Car object that was assigned to the DataContext of the window. (See Figure 3-1.)

Figure 3-1. Data binding to properties of a Data Context.

Open the Car.cs file, and edit the class to also implement the IDataErrorInfo interface, like this:

public class Car : INotifyPropertyChanged, IDataErrorInfo

Implementing this interface adds the following methods to the Car class:

public string Error
{
    get { throw new NotImplementedException(); }
}

public string this[string columnName]
{
    get { throw new NotImplementedException(); }
}

Edit the Get method of the Error property to return null.

Now it's time to add some validation rules to the properties of the Car object. The Car Make and Model properties should enforce the rule that they must always be at least three characters in length. The public string this[string columnName] method is used by the DataBinding engine to validate the properties of the object as they are changed, based on the name of the property (which is what they mean by columnName in the method signature). This method returns any error messages related to the property being edited.

To define and enforce these rules, edit the public string this[string columnName] method like this:

public string this[string columnName]
{
    get {
        string retvalue = null;
        if (columnName == "Make")
        {
            if (String.IsNullOrEmpty(this._make)
                       || this._make.Length < 3)
            {
                retvalue = "Car Make must be at least 3 " +
                               "characters in length";
            }
        }

        if (columnName == "Model")
        {
            if (String.IsNullOrEmpty(this._model)
                        || this._model.Length < 3)
            {
                retvalue = "Car Model must be at least 3 "+
                                   "characters in length";
            }
        }

        return retvalue;
    }
}

In MainWindow.xaml, the Make and Model properties are bound to TextBox controls in the user interface. To enable the text being entered into the TextBoxes to be validated against the constraints defined on the underlying property, edit the binding expressions in each TextBox like this:

<TextBox x:Name="txtCarMake"  VerticalAlignment="Top"
               Text="{Binding Path=Make, Mode=TwoWay,
                        UpdateSourceTrigger=PropertyChanged,
                        ValidatesOnDataErrors=True,

ValidatesOnExceptions=True}"
               Width="200" Height="25" />

           <TextBox x:Name="txtCarModel"  VerticalAlignment="Top"
               Text="{Binding Path=Model, Mode=TwoWay,
                        UpdateSourceTrigger=PropertyChanged,
                        ValidatesOnDataErrors=True,
                        ValidatesOnExceptions=True}"
               Width="200" Height="25" />

ValidatesOnDataErrors is what enables the IDataErrorInfo validation method to be called on the property.

ValidatesOnExceptions will invalidate the TextBox if the underlying data source throws an exception, like when, for instance, you have an integer property and the user enters a string — WPF automatically throws the exception that the input string was not in the correct format.

Run the Sample, and remove all text from the Make and Model TextBox controls. You will see the TextBox controls are now rendered in red; as you enter text back into the TextBox, as soon as you reach three characters, the red stroke disappears Figure 3-4 shows the Make text box in an invalid state.

Figure 3-4. Simple Data Validation using the IDataErrorInfo interface.

The red stroke is sufficient enough to indicate that an error has occurred, but it's of little use to the users as they are not informed of the details of the error. A simple way to display the error is to add a tooltip on the TextBox. Do this by adding a Style resource to your Window that defines a style that will trigger the tooltip when the data is in an invalid state. Add the following XAML directly below the Window tag at the top of MainWindow.xaml, like this.

<Window.Resources>
    <Style x:Key="errorAwareTextBox" TargetType="{x:Type TextBox}">
        <Style.Triggers>
            <Trigger Property="Validation.HasError" Value="true">
                <Setter Property="ToolTip"
            Value="{Binding RelativeSource={x:Static RelativeSource.
Self},
            Path=(Validation.Errors)[0].ErrorContent}"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

Add a Style attribute to your TextBox Style, like this:

Style="{StaticResource ResourceKey=errorAwareTextBox}"

Now when you run the application and remove the text out of the TextBox controls, the TextBox displays a tooltip with the actual error message. (See Figure 3-5.)

Figure 3-5. Displaying error messages using Styles.

Create a new WPF application named BindingSample3.

Add a new User Control to the project; name it GreenCheck.xaml.

Replace the XAML found in GreenCheck.xaml with this XAML:

<UserControl x:Class="BindingSample3.GreenCheck"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/
    presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-
    compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d"
             d:DesignHeight="50" d:DesignWidth="50">

        <Canvas x:Name="CheckCanvas" Width="50.4845" Height="49.6377"
                Canvas.Left="0" Canvas.Top="0">

                <Path x:Name="CheckPath" Width="43.4167" Height="45.6667"
                   Canvas.Left="0" Canvas.Top="1.3113e-006"
                  Stretch="Fill" Fill="#FF006432"
                  Data="F1 M 19.0833,45.6667L 43.4167,2.16667L 38,
                         1.3113e-006L 19.0833,42.5833L 2.41667,25.3333L
    0,
                        27.9167L 17.4167,44.25"/>
        </Canvas>
</UserControl>

Add another user control to the project; name it RedX.xaml.

Replace the XAML in the RedX.xaml file with this XAML:

<UserControl x:Class="BindingSample3.RedX"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/
    presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-
    compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d"
             d:DesignHeight="50" d:DesignWidth="50">

        <Canvas Width="44.625" Height="45.9394">

            <Path x:Name="Line1Path" Width="44.625" Height="44.375"
                  Canvas.Left="0" Canvas.Top="0" Stretch="Fill"
                   Fill="#FFDE0909"
                  Data="F1 M 0,3.5L 3.5,0L 44.625,41L 42.125,44.375"/>

            <Path x:Name="Line2Path" Width="43.5772" Height="45.3813"
                  Canvas.Left="0.201177" Canvas.Top="0.55809"
    Stretch="Fill"
                  Fill="#FFDE0909" Data="F1 M 3.7719,45.9394L 0.201177,
                  42.5115L 40.353,0.55809L 43.7784,2.98867"/>

        </Canvas>
</UserControl>

Add a new class called BooleanToIconConverter.cs.

Add the following using statement to your class:

using System.Windows.Data;

Have the BooleanToIconConverter inherit the IValueConverter interface. In the Convert method, if the value passed in is True, have it return a new instance of the GreenCheck user control. If the value passed in is False, have the Convert method return an instance of the RedX user control. Here's the code for the BooleanToIconConverter class:

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

namespace BindingSample3
{
    public class BooleanToIconConverter : IValueConverter
    {
        public object Convert(object value, Type targetType,

object parameter,
                                System.Globalization.CultureInfo culture)
        {
            if (value != null)
            {
                bool boolValue = (bool)value;
                if (boolValue)
                    return new GreenCheck();
                else
                    return new RedX();
            }

            return value;
        }

        public object ConvertBack(object value, Type targetType,
                                   object parameter,
                                   System.Globalization.CultureInfo
    culture)
        {
            throw new NotImplementedException();
        }
}

Add a new class called ServerStatus.cs that has three properties: the Server name, a Boolean indicator if the server is up, and a number of currently connected users. This will be the data class used in the application. Here is the code for ServerStatus.cs:

public class ServerStatus
{
    private string _serverName;

    public string ServerName
    {
        get { return _serverName; }
        set { _serverName = value; }
    }
    private bool _isServerUp;

    public bool IsServerUp
    {
        get { return _isServerUp; }
        set { _isServerUp = value; }
    }
    private int _numberOfConnectedUsers;

    public int NumberOfConnectedUsers
    {
        get { return _numberOfConnectedUsers; }
        set { _numberOfConnectedUsers = value; }
    }

    public ServerStatus() { }
}

In MainWindow.xaml.cs, create a GenerateData() method (call it immediately following the InitializeComponent() method in the Window constructor) that will initialize a list of a few ServerStatus objects and make that list the DataContext of the Window. Here's the code:

private void GenerateData()
{
   ServerStatus ss = new ServerStatus() {
       ServerName = "HeadquartersApplicationServer1",
       NumberOfConnectedUsers = 983,
       IsServerUp = true
   };

   ServerStatus ss2 = new ServerStatus()
   {
       ServerName = "HeadquartersFileServer1",
       NumberOfConnectedUsers = 0,
       IsServerUp = false
   };

   ServerStatus ss3 = new ServerStatus()
   {
       ServerName = "HeadquartersWebServer1",
       NumberOfConnectedUsers = 0,
       IsServerUp = false
   };

   ServerStatus ss4 = new ServerStatus()
   {
       ServerName = "HQDomainControllerServer1",
       NumberOfConnectedUsers = 10235,
       IsServerUp = true
   };

   List<ServerStatus> serverList = new List<ServerStatus>();
   serverList.Add(ss);
   serverList.Add(ss2);
   serverList.Add(ss3);
   serverList.Add(ss4);

   this.DataContext = serverList;
}

Save and build your application — this is done so that the user control classes that you have defined are available to your XAML files.

In MainWindow.xaml, replace the XAML with the XAML found in the following code segment. I describe the details of this markup in a moment.

<Window x:Class="BindingSample3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:BindingSample3"
        Title="MainWindow" Height="400" Width="525">
    <Window.Resources>
        <local:BooleanToIconConverter x:Key="BooleanToIconConverter" />

         <DataTemplate x:Key="ServerTemplate">
            <Border BorderBrush="Blue" Margin="3" Padding="3"
                       BorderThickness="2" CornerRadius="5"
    Background="Beige">

<StackPanel Orientation="Horizontal">

                       <Label Content="{Binding
                            Path=IsServerUp,
                            Converter={StaticResource
       BooleanToIconConverter}}" />

                      <StackPanel Orientation="Vertical"
                              VerticalAlignment="Center">

                         <TextBlock FontSize="25" Foreground="Goldenrod"
                             Text="{Binding Path=ServerName}" />

                          <TextBlock FontSize="18" Foreground="BlueViolet"
                             Text="{Binding Path=NumberOfConnectedUsers}"
/>
                     </StackPanel>

                 </StackPanel>
             </Border>
         </DataTemplate>

    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition />
        </Grid.RowDefinitions>

         <ListBox x:Name="lstServers" Width="490" Height="350"
                 ItemsSource="{Binding}" Grid.Row="0" Grid.Column="0"
                 ItemTemplate="{StaticResource
    ResourceKey=ServerTemplate}" />
    </Grid>
</Window>