WPF Databinding- Part 2 of 3

Posted by Shervin Shakibi on Geeks with Blogs See other posts from Geeks with Blogs or by Shervin Shakibi
Published on Mon, 03 May 2010 13:51:21 GMT Indexed on 2010/05/03 13:59 UTC
Read the original article Hit count: 342

Filed under:

 

This is a follow up to my previous post WPF Databinding- Not your fathers databinding Part 1-3 you can download the source code here  http://ssccinc.com/wpfdatabinding.zip

Example 04

 

In this example we demonstrate  the use of default properties and also binding to an instant of an object which is part of a collection bound to its container. this is actually not as complicated as it sounds.

First of all, lets take a look at our Employee class notice we have overridden the ToString method, which will return employees First name , last name and employee number in parentheses,

public override string ToString()
       {
           return String.Format("{0} {1} ({2})", FirstName, LastName, EmployeeNumber);
       }

 

in our XAML we have set the itemsource of the list box to just  “Binding” and the Grid that contains it, has its DataContext set to a collection of our Employee objects.

DataContext="{StaticResource myEmployeeList}">

…..

<ListBox Name="employeeListBox"  ItemsSource="{Binding }" Grid.Row="0" />

the ToString in the method for each instance will get executed and the following is a result of it.

image

if we did not have a ToString the list box would look  like this:image

now lets take a look at the grid that will display the details when someone clicks on an Item, the Grid has the following DataContext

DataContext="{Binding ElementName=employeeListBox,
           Path=SelectedItem}">

Which means its bound to a specific instance of the Employee object. and within the gird we have textboxes that are bound to different Properties of our class.

<TextBox Grid.Row="0" Grid.Column="1" Text="{Binding Path=FirstName}" />
<TextBox Grid.Row="1" Grid.Column="1" Text="{Binding Path=LastName}" />
<TextBox Grid.Row="2" Grid.Column="1" Text="{Binding Path=Title}" />
<TextBox Grid.Row="3" Grid.Column="1" Text="{Binding Path=Department}" />

 

Example 05

 

This project demonstrates use of the ObservableCollection and INotifyPropertyChanged interface.

Lets take a look at Employee.cs first, notice it implements the INotifyPropertyChanged interface now scroll down and notice for each setter there is a call to the OnPropertyChanged method, which basically will will fire up the event notifying to the value of that specific property has been changed.

Next EmployeeList.cs notice it is an ObservableCollection .

Go ahead and set the start up project to example 05 and then run. Click on Add a new employee and the new employee should appear in the list box.

 

Example 06

 

This is a great example of IValueConverter its actuall a two for one deal, like most of my presentation demos I found this by “Binging” ( formerly known as g---ing) unfortunately now I can’t find the original author to give him  the credit he/she deserves.

Before we look at the code lets run the app and look at the finished product, put in 0 in Celsius  and you should see Fahrenheit textbox displaying to 32 degrees, I know this is calculating correctly from my elementary school science class , also note the color changed to blue, now put in 100 in Celsius which should give us 212 Fahrenheit but now the color is red indicating it is hot, and finally put in 75 Fahrenheit and you should see 23.88 for Celsius and the color now should be black.

Basically IValueConverter allows us different types to be bound, I’m sure you have had problems in the past trying to bind to Date values .

First look at FahrenheitToCelciusConverter.cs first notice it implements IValueConverter. IValueConverter has two methods Convert and ConvertBack. In each method we have the code for converting Fahrenheit to Celsius and vice Versa.

In our XAML, after we set a reference in our Windows.Resources section. and for txtCelsius we set the path to TxtFahrenheit and the converter to an instance our FahrenheitToCelciusConverter converter. no need to repeat this for TxtFahrenheit since we have a convert and ConvertBack.

Text="{Binding  UpdateSourceTrigger=PropertyChanged,
           Path=Text,ElementName=txtFahrenheit,
           Converter={StaticResource myTemperatureConverter}}"

As mentioned earlier this is a twofer Demo, in the second demo, we basically are converting a double datatype to a brush. Lets take a look at TemperatureToColorConverter, notice we in our Covert Method, if the value is less than our cold temperature threshold we return a blue brush and if it is higher than our hot temperature threshold we return a redbrush. since we don’t have to convert a brush to double value in our example the convert back is not being implemented.

Take time and go through these three examples and I hope you have a better understanding   of databinding, ObservableCollection  and IValueConverter . Next blog posting we will talk about ValidationRule, DataTemplates and DataTemplate triggers.

© Geeks with Blogs or respective owner