Note – these posts are put together after a short time with Silverlight 4 as a way of providing pointers to some of the new features that Silverlight 4 has to offer. I’m posting these from the PDC as Silverlight 4 is announced for the first time so please bear that in mind when working through these posts.
Silverlight 4 supports the idea of text and user interface that does not necessarily lay itself out from left-to-right across the screen. Now, this kind of internationalisation is something that I don’t claim to know too much about but ( clearly ) it’s pretty important for a whole tonne of the world’s users.
On the FrameworkElement class you’ll find a new property called FlowDirection which can be set to either the default of LeftToRight or reversed to RightToLeft. Elements inherit their parent value where no value is set locally for them and framework controls that need to take note of this setting should do so.
As a simple example, my XAML below;
<UserControl x:Class="SilverlightApplication28.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ctl="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<StackPanel
x:Name="LayoutRoot"
Background="White">
<TextBlock
Text="Hello World" />
<ctl:TreeView>
<ctl:TreeView.Items>
<ctl:TreeViewItem
Header="Item One" />
<ctl:TreeViewItem
Header="Item Two">
<ctl:TreeViewItem
Header="A" />
<ctl:TreeViewItem
Header="B" />
<ctl:TreeViewItem
Header="C" />
</ctl:TreeViewItem>
<ctl:TreeViewItem
Header="Item Three" />
</ctl:TreeView.Items>
</ctl:TreeView>
<ctl:TabControl>
<ctl:TabItem
Header="Tab A">
<Rectangle
Fill="Red"
Width="96"
Height="96" />
</ctl:TabItem>
<ctl:TabItem
Header="Tab B">
<Ellipse
Fill="Green"
Width="96"
Height="96" />
</ctl:TabItem>
<ctl:TabItem
Header="Tab C">
<Ellipse
Fill="Orange"
Width="96"
Height="96" />
</ctl:TabItem>
</ctl:TabControl>
</StackPanel>
</UserControl>
usually displays like this;
However, if I change the FlowDirection on the parent StackPanel as below;
<StackPanel
x:Name="LayoutRoot"
FlowDirection="RightToLeft"
Background="White">
then the UI is rendered differently;
Silverlight 4 also has support for Right To Left languages and so it’d be usual to be using FlowDirection in combination to produce right-to-left UI. I’ll avoid adding too much more on this one as it’s not my area but it’s obviously a very important set of capabilities to have if you’re targeting a world-wide market with your apps.
Mike Taulty 