The code here is based on Silverlight 2 technology.
One of the key features for Silverlight that I’ve made extensive use of lately is the ability to include an IValueConverter in the databinding process. Recently I had an issue with the Silverlight DataGrid and the DataGridTextColumn. I wanted to override FontWeight property of my bound text column but was getting an AG_E PARSER error. Silverlight wasn’t up for having the FontWeight property bound to anything aside from a declarative value. Let me show you the process I worked through to get the right results:
First..the basic non-bold app:
Page.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;
namespace SilverlightValueConversion
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
}
}
public class EmailMessageList : ObservableCollection<EmailMessage>
{
public EmailMessageList()
: base()
{
Add(new EmailMessage(”Gordie Howe”, “What happened?”, false));
Add(new EmailMessage(”Chris Osgood”, “@$###$% @#$##!”, true));
Add(new EmailMessage(”Gary Bettman”, “Wahoooo!”, false));
}
}
public class EmailMessage
{
private string _fromName;
private string _message;
private bool _isNew;
public EmailMessage(string from, string body, bool newmessage)
{
this._fromName = from;
this._message = body;
this._isNew = newmessage;
}
public string FromName
{
get {return _fromName;}
set {_fromName = value;}
}
public string Message
{
get { return _message; }
set { _message = value; }
}
public bool IsNew
{
get { return _isNew; }
set { _isNew = value; }
}
}
}
Page.xaml
<UserControl xmlns:data=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data” x:Class=”SilverlightValueConversion.Page”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
xmlns:app=”clr-namespace:SilverlightValueConversion”
Width=”400″ Height=”200″>
<UserControl.Resources>
<app:EmailMessageList x:Key=”MessageListData”/>
</UserControl.Resources>
<Grid x:Name=”LayoutRoot” Background=”Silver”>
<data:DataGrid x:Name=”dgMessages”
AutoGenerateColumns=”False”
ItemsSource=”{Binding Source={StaticResource MessageListData}}”>
<data:DataGrid.Columns>
<data:DataGridTextColumn Header=”From”
Binding=”{Binding FromName}” />
<data:DataGridTextColumn Header=”Message”
Binding=”{Binding Message}” />
</data:DataGrid.Columns>
</data:DataGrid>
</Grid>
</UserControl>
If you look at the data source that I’ve thrown together, you’ll see that there is also a field for IsNew, indicating that the message is fresh and unread. Wouldn’t it be great if we could turn the font of the new messages to BOLD? We’re accustomed to having that functionality in our messaging clients so it would be great if we could duplicate that here. To accomplish in place conversion of bound properties, we’ll use an IValueConverter class. The simple description of the conversion process is that we send in an object, interrogate it and return a different value for binding.
This is the code for modifying the FontWeight property:
public class FontConverter : IValueConverter
{
public object Convert(object value,
Type targetType,
object parameter,
System.Globalization.CultureInfo culture)
{
if (value != null)
{
bool isNew = (bool)value;
return isNew ? FontWeights.Bold : FontWeights.Normal;
}
else
{
return FontWeights.Normal;
}
}
public object ConvertBack(object value,
Type targetType,
object parameter,
System.Globalization.CultureInfo culture)
{
return null;
}
}
We send in our bound “IsNew” boolean field and it sends out the appropriate FontWeight enumerated value for binding. Now lets turn our attention to the implementation of the FontConverter.
To expose the class to our xaml code, we add a short entry to our Resources tag:
<UserControl.Resources>
<app:EmailMessageList x:Key=”MessageListData”/>
<app:FontConverter x:Key=”fontconverter”/>
</UserControl.Resources>
And then it’s just a matter of working out the binding:
<data:DataGridTemplateColumn Header=”From”>
<data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text=”{Binding FromName}”
FontWeight=”{Binding IsNew,
Converter={StaticResource fontconverter}}” />
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>
The converter class is called during the binding process, referencing the StaticResource fontconverter class. The IsNew property becomes a parameter for the call and the output is bound to FontWeight.
Note that we’re using a DataGridTemplateColumn to do the binding now. Couldn’t we just use the previously used DataGridTextColumn and bind to the FontWeight Property? I’m glad you asked.
Let try that:
<data:DataGridTextColumn
Header=”From”
Binding=”{Binding FromName}”
FontWeight=”{Binding IsNew,
Converter={StaticResource fontconverter}}”>
</data:DataGridTextColumn>
If we add this and run it, we’ll get this very informative message:
So yeah…you’ll want to use the DataGridTemplateColumn instead.
So here’s the complete working code:
Page.xaml
<UserControl xmlns:data=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data” x:Class=”SilverlightValueConversion.Page”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
xmlns:app=”clr-namespace:SilverlightValueConversion”
Width=”400″ Height=”200″>
<UserControl.Resources>
<app:EmailMessageList x:Key=”MessageListData”/>
<app:FontConverter x:Key=”fontconverter”/>
</UserControl.Resources>
<Grid x:Name=”LayoutRoot” Background=”Silver”>
<data:DataGrid x:Name=”dgMessages”
AutoGenerateColumns=”False”
ItemsSource=”{Binding Source={StaticResource MessageListData}}”>
<data:DataGrid.Columns>
<data:DataGridTemplateColumn Header=”From”>
<data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text=”{Binding FromName}”
FontWeight=”{Binding IsNew,
Converter={StaticResource fontconverter}}” />
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>
<data:DataGridTemplateColumn Header=”Message”>
<data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text=”{Binding Message}”
FontWeight=”{Binding IsNew,
Converter={StaticResource fontconverter}}” />
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>
</data:DataGrid.Columns>
</data:DataGrid>
</Grid>
</UserControl>
Page.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;
using System.Windows.Data;
namespace SilverlightValueConversion
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
}
}
public class EmailMessageList : ObservableCollection<EmailMessage>
{
public EmailMessageList()
: base()
{
Add(new EmailMessage(”Gordie Howe”, “What happened?”, false));
Add(new EmailMessage(”Chris Osgood”, “@$###$% @#$##!”, true));
Add(new EmailMessage(”Gary Bettman”, “Wahoooo!”, false));
}
}
public class EmailMessage
{
private string _fromName;
private string _message;
private bool _isNew;
public EmailMessage(string from, string body, bool newmessage)
{
this._fromName = from;
this._message = body;
this._isNew = newmessage;
}
public string FromName
{
get {return _fromName;}
set {_fromName = value;}
}
public string Message
{
get { return _message; }
set { _message = value; }
}
public bool IsNew
{
get { return _isNew; }
set { _isNew = value; }
}
}
public class FontConverter : IValueConverter
{
public object Convert(object value,
Type targetType,
object parameter,
System.Globalization.CultureInfo culture)
{
if (value != null)
{
bool isNew = (bool)value;
return isNew ? FontWeights.Bold : FontWeights.Normal;
}
else
{
return FontWeights.Normal;
}
}
public object ConvertBack(object value,
Type targetType,
object parameter,
System.Globalization.CultureInfo culture)
{
return null;
}
}
}
We run the complete code to get our working grid:
Obviously the grid could use some styling love, but this should get you started on using the IValueConverter. Keep in mind that you can use this thing for quite a few other binding tasks:
· Dynamically set coloring based on database properties
· Compile DateTime fields into custom descriptors
· Conditional testing and output
· many, many more…
You can download my sample solution file HERE.
