I started checking out the new Silverlight 4 Beta this week and the most important feature (for me) added to this release : FlowDirection. If you’re not a WPF guy, this is the equivalent of RightToLeft in WinForm world, just recently added to Silverlight. If this works the way the same feature in WPF works, all custom controls built in this platform will automagically have correct RightToLeft behavior, “Almost” without any additional code from component vendor / developer. Sounds too good to be true, but it is.

To test how this works, we need a Silverlight 4 control first. Well, look no further! AgDataGrid from DevExpress is both free and open-source! Register and grab your version from here. Should you need to see some demos of this control’s features go here.

The build is for latest released version of Silverlight 3, so you need to compile it against Silverlight 4 runtime. Open the solution and change the framework version to SL 4 and build it. That’s it.

Now a Silverlight Application and remember to select “Silverlight 4” runtime when Visual Studio asks which runtime version to use. Add reference to assemblies you just built and add a agDataGrid instance to your page:

1
2
3
4
5
6
7
8
9
10
11
<dg:AgDataGrid x:Name="grid" FlowDirection="RightToLeft" 
ShowGroupPanel="Visible">
<dg:AgDataGrid.Columns>
<dg:AgDataGridTextColumn x:Name="colFirstname"
FieldName="Firstname" HeaderContent="نام" />
<dg:AgDataGridTextColumn x:Name="colLastname"
FieldName="Lastname" HeaderContent="نام خانوادگی" />
<dg:AgDataGridColumn x:Name="colDateOfBirth"
FieldName="DateOfBirth" HeaderContent="تاریخ تولد"/>
</dg:AgDataGrid.Columns>
</dg:AgDataGrid>

The new FlowDirection property on AgDataGrid is added automatically just by compiling it against SL 4.

To make it a better example, let’s add some more sugar to the pot. To localize the GroupPanel text, let’s use a DataTemplate. I also needed to display the DateOfBirth values in PersianCalendar, so I’m going to create a converter for that. The final xaml looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<UserControl.Resources>

<cnv:PersianDateConverter x:Key="DefaultConverter" />

<DataTemplate x:Key="DateTemplate">
<TextBlock Text="{Binding Converter={StaticResource DefaultConverter}}" />
</DataTemplate>

<DataTemplate x:Key="GroupTemplate">
<TextBlock Text="برای ایجاد یک گروه ، یک ستون را به اینجا بکشید" Foreground="White" Margin="15,11,0,11"/>
</DataTemplate>
</UserControl.Resources>

<dg:AgDataGrid x:Name="grid" FlowDirection="RightToLeft"
ShowGroupPanel="Visible"
EmptyGroupPanelTemplate="{Binding Source={StaticResource GroupTemplate}}">
<dg:AgDataGrid.Columns>
<dg:AgDataGridTextColumn x:Name="colFirstname" FieldName="Firstname" HeaderContent="نام" />
<dg:AgDataGridTextColumn x:Name="colLastname" FieldName="Lastname" HeaderContent="نام خانوادگی" />
<dg:AgDataGridColumn x:Name="colDateOfBirth" FieldName="DateOfBirth" HeaderContent="تاریخ تولد" CellDisplayTemplate="{StaticResource DateTemplate}" />
</dg:AgDataGrid.Columns>
</dg:AgDataGrid>

Unfortunately, unlike full version of .NET Framework, in beta version of Silverlight 4, there’s no PersianCalendar class! I’m not sure about the justification SL team has made in order to exclude this class, but I hope they’ll include it in the final version. I’ve opened a thread here, requesting this calendar to be added to SL 4, you may want to follow it up.

For now, to do the date conversion “sans” PersianCalendar, I’m going to use my old FarsiLibrary project, now supporting with Silverlight. It is in fact the same projects that existed for WinForm and WPF, now built against Silverlight. You can get it here if you’re interested.

Back to work, the date converted looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
public class PersianDateConverter : IValueConverter 
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var cell = (AgDataGridCellData) value;

if (cell.CellValue == null)
return null;

var date = DateTime.Parse(cell.CellValue.ToString());
var converted = FarsiLibrary.Utils.PersianDateConverter.ToPersianDate(date);

return converted.ToString("D");
}

public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new InvalidOperationException("one way conversion");
}
}

…and here’s the output.

Output

You can get the sources of this demo from here.