Avalon March CTP: Creating a simple TreeView

Articolo
03/31/2005

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>

</HeaderedItemsControl>

</HeaderedItemsControl>

</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>

<Style.VisualTree>

<Border.Background>

<LinearGradientBrush.GradientStops>

</LinearGradientBrush.GradientStops>

</LinearGradientBrush>

</Border.Background>

</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>

<Style.VisualTree>

<Grid>

<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. :-)

Comments

Anonymous
March 31, 2005
Cool sample. Honestly though, I think we'll see less tree views in the future. Avalon offers the ability to represent data in so many rich forms that the treeview will probably fall by the wayside. Still, it would be good to have it in there for that legacy look and feel. ;)
Anonymous
May 23, 2005
In case you haven't heard, we've just released the Avalon and Indigo Beta1 Release Candidate. To inspire...

Condividi tramite

Avalon March CTP: Creating a simple TreeView

Comments

Risorse aggiuntive