In this post I am going to show how we can change the Silverlight TreeView Template to support expanding TreeViewItems from right to left.
The text on the items should still be left-to-right and the text should be right alligned.
First we will build a normal TreeView with some data.
We define a HierarchicalDataTemplate:
<UserControl.Resources>
<common:HierarchicalDataTemplate x:Key="MyHierarchicalTemplate" ItemsSource="{Binding Items}" >
<TextBlock Text="{Binding Title}" />
</common:HierarchicalDataTemplate>
</UserControl.Resources>
And this is the TreeView that will use the HierarchicalDataTemplate:
<controls:TreeView VerticalAlignment="Stretch"
x:Name="treeView"
ItemTemplate="{StaticResource MyHierarchicalTemplate />
Then we define a simple class to hold the data:
public class DataItem
{
public string Title { get; set; }
public ObservableCollection<DataItem> Items { get; set; }
public DataItem(string title, params DataItem[] items)
{
this.Title = title;
ObservableCollection<DataItem> itemsObservableCollection =
new ObservableCollection<DataItem>();
foreach (var item in items)
itemsObservableCollection.Add(item);
Items = itemsObservableCollection;
}
}
And in our MainPage we populate the TreeView with some data:
public partial class MainPage : UserControl
{
ObservableCollection<DataItem> itemsSource;
public MainPage()
{
InitializeComponent();
AddData();
treeView.ItemsSource = itemsSource;
}
private void AddData()
{
itemsSource = new ObservableCollection<DataItem>()
{
new DataItem("Europe",
new DataItem("Denmark"),
new DataItem("Norway"),
new DataItem("Sweden")),
new DataItem("USA",
new DataItem("New York",
new DataItem("Albany"))),
};
}
}
When we run this, we get a simple TreeView like this:

So far, so good. Now lets change the Template so we can get the TreeView to display the items from Right to Left.
We open Blend and edit the ItemContainerStyle Template:

First set HorizontalContentAlignment and HorizontalAlignment to right:
<Setter Property="HorizontalContentAlignment" Value="Right"/>
<Setter Property="HorizontalAlignment" Value="Right"/>
Now locate the Grid element, and change the definition to this:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="15"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
Now located the Selection Rectangle element and set these two properties:
Grid.Column="0"
HorizontalAlignment="Right"
Now located the Header Button element and set these properties:
Margin="0,0,10,0"
Grid.ColumnSpan="2"
HorizontalAlignment="Right"
Next locate the ContentPresenter and set HorizontalAlignment:
HorizontalAlignment="Right"
Then locate the ItemsPresenter element and set these properties:
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2"
Margin="0,0,10,0"
HorizontalAlignment="Right"
Visibility="Collapsed"
Now Locate the ExpanderButton and set these properties:
VerticalAlignment="Stretch"
HorizontalAlignment="Right"
RenderTransformOrigin="0.5,0.5"
Grid.Column="1"
Now we will use a RotateTransform to rotate the ExpanderButton. Add this:
<ToggleButton.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-180"/>
<TranslateTransform/>
</TransformGroup>
</ToggleButton.RenderTransform>
Now add a RotateTransform to the CheckedVisual Path element. We rotate that –90.
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-90"/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
That’s it!
Set the ItemContainerStyle on the TreeView to our new Template:
ItemContainerStyle="{StaticResource RightToLeftViewItemStyle}"
Run and you should see the Items expanding from right to left with the text alligned to the right:

Get the code here.
(rename it to .zip)