Avalon March CTP: Creating a simple TreeView
I’m going to walk through creating a simple TreeView with the March CTP of Avalon.
First, the tools you need.
2) Avalon and Indigo Community Technology Preview - March 2005 (In a previous post, I’ve discussed how to crack the ISO.)
Let’s get started
First, create a new Avalon Application project in Visual C# Express. Open up the Window1.xaml file. You should see this:
<Window x:Class="AvalonApplication1.Window1"
xmlns="https://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="https://schemas.microsoft.com/winfx/xaml/2005"
Text="AvalonApplication1"
>
<Grid>
</Grid>
</Window>
The nice thing about TreeView: most of the object model one needs to build it already exists in shipping controls. The TreeView itself is just a collection of TreeViewItems. ItemsControl fits the bill here. Each TreeViewItem is just a header with a set of children, HeaderedItemsControl does the job.
Let’s start by laying out the controls. We’ll worry about how they look later.
<Grid>
<ItemsControl Width="200" Height="200">
<HeaderedItemsControl Header="Iowa">
<HeaderedItemsControl Header="Okoboji"/>
<HeaderedItemsControl Header="Milford"/>
<HeaderedItemsControl Header="Des Moines"/>
</HeaderedItemsControl>
<HeaderedItemsControl Header="Washington">
</HeaderedItemsControl>
<HeaderedItemsControl Header="California">
</HeaderedItemsControl>
</ItemsControl>
</Grid>
You can run the application now, but it won’t be very exciting. By default, ItemsControl and HeaderedItemsControl don’t have styles. We have to provide them.
First, we add a <Grid.Resources> to the grid. Now we want to add a style for the ItemsControl. Let’s start with the inner elements and work out. We want the items to show up in a stack, top to bottom. We have a StackPanel that does just that. Setting the IsItemsHost property to true tells the ItemsControl to put its children in this StackPanel. We wrap the StackPanel in a ScrollViewer to get scroll bars. We wrap in ScrollViewer in a Border to make it all look pretty. Adding a LinearGradientBrush to the Border.Background is a great start.
Here’s the markup:
<Grid.Resources>
<Style>
<ItemsControl />
<Style.VisualTree>
<Border>
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="White" Offset="0" />
<GradientStop Color="LightGray" Offset="1" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
<ScrollViewer>
<StackPanel IsItemsHost="True"/>
</ScrollViewer>
</Border>
</Style.VisualTree>
</Style>
</Grid.Resources>
Simple, huh?
We need one more style for the TreeView Items. We add another Style element. Just like for the ItemsControl, we add HeaderedItemsControl as the first element, telling the compiler this is the style for HeaderedItemsControls. The layout for the TreeViewItem is interesting. To get the tree shape, we use a 2-by-2 grid. The expand/collapse button goes in 0,0. We’ll use a checkbox for now. The Header content goes in 1,0. We use a ContentPresenter with the ContentSource property defined to grab the header content. The StackPanel with all of the items goes in 1,1. Again we use the IsItemsHost property to grab the sub-items.
Here’s the code:
<Grid.Resources>
<Style>
<HeaderedItemsControl />
<Style.VisualTree>
<Grid>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<CheckBox Grid.Column="0" Grid.Row="0"/>
<ContentPresenter ContentSource="Header" Grid.Column="1" Grid.Row="0"/>
<StackPanel Grid.Column="1" Grid.Row="1"
IsItemsHost="True"/>
</Grid>
</Style.VisualTree>
</Style>
...
That’s it.
What about supporting collapse/expand? What about styling the checkbox? Stay tuned.
When will Avalon include a TreeView? Also, stay tuned. While I can't make promises, getting TreeView in our control library is one of my review goals. :-)