MOBILE

Windows Phone 7 Advanced Programming Model : Advanced Data Binding (part 4) - Data Bind to Anything

9/20/2011 3:44:53 PM

4. Data Bind to Anything

There are situations where you need to data bind to a value and the value type or format does not quite line up with what you need. The IValueConverter interface allows your application to data bind to just about anything including data that does not match the type expected for a particular control.

As an example, let's say you have a field that takes values of either Yes or No. You could use a ListPicker but a CheckBox makes more sense since it is just two values. You can implement IValueConverter to convert true to a Yes value and No value to false (and vice versa) while still using standard data binding mechanisms.

In this section, we create a custom IValueConverter named HtmlToImageUriConverter. This very simple converter parses the AppHub Feed html, previously displayed as raw html text, into a URL that points to an image related to the content. The URL is extracted from the HTML. Listing 4 shows the code for the converter.

Example 4. WebBrowserHTMLProp Code File
using System;
using System.Windows.Data;

namespace AdvancedDataBinding.Converters
{
public class HtmlToImageUriConverter : IValueConverter
{
public object Convert(object value, Type targetType,
object parameter, System.Globalization.CultureInfo culture)
{
string html = (string)value;
string imageUrl = "";
if (null != html)
{
string[] strings = html.Split('"');
if (strings.Length > 3)
imageUrl = strings[3].Trim();
}
return imageUrl;
}

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


The converter is somewhat brittle in that it depends on the URL value to be the fourth string when split, but one wouldn't expect the feed format to change very often, and it makes for an interesting sample. The converter is made available to the DatabindToAnything.xaml View via an xml namespace import:

xmlns:converters="clr-namespace:AdvancedDataBinding.Converters"

The converter is added as a resource in this XAML:

<phone:PhoneApplicationPage.Resources>
<converters:HtmlToImageUriConverter x:Key="HtmlToImageConverter"/>
</phone:PhoneApplicationPage.Resources>

Applying the converter is a simple modification in XAML or visually in Expression Blend. Here is the updated ListBoxDataTemplate:

<DataTemplate>
<StackPanel Margin="0,0,0,30">
<TextBlock Text="{Binding Title}" Margin="0,0,12,0" Style="{StaticResource PhoneTextLargeStyle}" />
<Image delay:LowProfileImageLoader.UriSource=
"{Binding Description, Converter={StaticResource HtmlToImageConverter}}" Margin="0,6,0,4" Width="100" HorizontalAlignment="Left" />
<HyperlinkButton NavigateUri="{Binding Link}" FontFamily="Segoe WP SemiLight" TargetName="_blank"
FontSize="18.667" FontStyle="Italic" Content="More..." HorizontalAlignment="Left" Margin="-12,0,0,0"/>
</StackPanel>
</DataTemplate>


The Binding.Converter parameter is configured to the added StaticResource to apply the converter for the Image object. Note that this sample also implements the LowProfileImageLoader for better performance as well as the PerformanceProgressBar to give better visual status to the user. Figure 6 shows the resulting output with a nice image instead of the raw HTML that was displayed previously.

Figure 6. AppHub feed with articles and corresponding images

In this section, data binding concepts are extended to more real world scenarios while also incorporating MVVM concepts. The next section provides a quick tour of available encryption services in Windows Phone 7.
Other  
 
Most View
Pioneer BDP-450 - Cutting The Cost Of Multichannel Music (Part 2)
Kobo Glo – A Prominent Tablet
A Potentially Perfect Partnership
The Complete Guide To Photography On Your Mac! (Part 1)
AMD Radeon HD 7950 3GB vs. Nvidia GeForce GTX 660 Ti 2GB vs. Nvidia GeForce GTX 670 2GB (Part 3)
Z/28 Versus M6 Versus GT-R – The Monster Battle (Part 3)
Diablotek Gamer Series CPA - 8950 Cyclops
Haswell Ultrabooks Shootout Featherweight Battle Royale (Part 2) - HP Spectre 13, Lenovo Yoga 2 Pro
Rosewill BLACKHAWK - Sturdy Reliability
What We Love Most This November?
Top 10
The Long Road To Success - Aston Martin Vanquish - Rapidely Gaining Interest - Aston Martin Rapide S (Part 3)
Extra-Curricular Activity - BMW 218d Active Tourer SE - An Engine That’s Fit For A Juke - Nissan Juke Tekna DIG-T (Part 3)
The Long Road To Success - Aston Martin Vanquish - Rapidely Gaining Interest - Aston Martin Rapide S (Part 2)
The Long Road To Success - Aston Martin Vanquish - Rapidely Gaining Interest - Aston Martin Rapide S (Part 1)
Extra-Curricular Activity - BMW 218d Active Tourer SE - An Engine That’s Fit For A Juke - Nissan Juke Tekna DIG-T (Part 2)
Extra-Curricular Activity - BMW 218d Active Tourer SE - An Engine That’s Fit For A Juke - Nissan Juke Tekna DIG-T (Part 1) - BMW 218d Active Tourer SE
Review : Garmin Fenix 2
Middle-earth: Shadow Of Mordor
Review : Leica V-Lux (Typ 114)
Review : Apple iPad Air 2