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)