Posted by: Zeeshan Amjad | June 9, 2010

Horizontal Tree Control Revisited


We already saw one example of horizontal tree control here. In that example, we move the top level tree item horizontally, but leave the tree view item as it is. This time we are going to do the reverse, i.e. leave the top level item intact, but change the item template panel for tree view item. To do this we are going to define a new style and apply that style to all tree view item. Here is our new style.

<Style TargetType="{x:Type TreeViewItem}">
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <StackPanel Margin="2" Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
</Style>

Rest of the stuff is very much similar to the previous program. The only major different is this time we are not creating the static list of, but we set the list as a Data context property of Window. Here is complete XAML code of the program.

<Window x:Class="WpfApplication9.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Horizontal Tree View" Height="400" Width="600">
    <Window.Resources>
        <Style TargetType="{x:Type TreeViewItem}">
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <StackPanel Margin="2" Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <TreeView Margin="5" ItemsSource="{Binding}">
            <TreeView.Background>
                <LinearGradientBrush>
                    <GradientStop Offset="0" Color="AliceBlue"/>
                    <GradientStop Offset="0.5" Color="Navy"/>
                    <GradientStop Offset="1" Color="AliceBlue"/>
                </LinearGradientBrush>
            </TreeView.Background>
            <TreeView.ItemTemplate>
                <HierarchicalDataTemplate ItemsSource="{Binding Path=Cities}">
                    <Border Margin="1" BorderBrush="Brown" Background="AliceBlue" BorderThickness="1" CornerRadius="10">
                        <StackPanel Margin="2">
                            <TextBlock Margin="1" Foreground="Blue" Text="{Binding Name}"/>
                            <TextBlock Margin="1" Foreground="Black" Text="{Binding Path=NickName}"/>
                            <TextBlock Margin="1" Foreground="Black"  Text="{Binding Path=Population}"/>
                        </StackPanel>
                    </Border>

                    <HierarchicalDataTemplate.ItemTemplate>
                        <DataTemplate>
                            <Border Margin="1" BorderBrush="Brown" Background="AliceBlue" BorderThickness="1" CornerRadius="10">
                                <StackPanel Margin="5">
                                    <TextBlock Margin="1" Foreground="Blue" Text="{Binding Name}"/>
                                    <TextBlock Margin="1" Foreground="Black" Text="{Binding Path=Population}"/>
                                </StackPanel>
                            </Border>
                        </DataTemplate>
                    </HierarchicalDataTemplate.ItemTemplate>
                </HierarchicalDataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>
    </Grid>
</Window>

 

And here is complete C# code of the program.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication9
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private List<State> stateList = new List<State>();

        public MainWindow()
        {
            InitializeComponent();

            List<City> citylist1 = new List<City>();
            citylist1.Add(new City("Baltimore", 636919));
            citylist1.Add(new City("Frederick", 59220));
            citylist1.Add(new City("Rockville", 60734));
            State state1 = new State();
            state1.Name = "Maryland";
            state1.NickName = "Old Line State";
            state1.Population = 5633597;
            state1.Cities = citylist1;

            stateList.Add(state1);

            List<City> citylist2 = new List<City>();
            citylist2.Add(new City("Los Angeles", 3833995));
            citylist2.Add(new City("Sacramento", 502743));
            citylist2.Add(new City("San Francisco", 808976));
            citylist2.Add(new City("San Diego", 1279329));
            State state2 = new State();
            state2.Name = "California";
            state2.NickName = "Golden State";
            state2.Population = 36756666;
            state2.Cities = citylist2;

            stateList.Add(state2);

            List<City> citylist3 = new List<City>();
            citylist3.Add(new City("Houston", 2242193));
            citylist3.Add(new City("Dallas", 1279910));
            citylist3.Add(new City("Austin", 757688));
            citylist3.Add(new City("San Antonio", 1351305));
            State state3 = new State();
            state3.Name = "Taxes";
            state3.NickName = "Lone Star State";
            state3.Population = 2432697;
            state3.Cities = citylist3;

            stateList.Add(state3);

            DataContext = stateList;
        }
    }

    public class City
    {
        public City(String name, int population)
        {
            Name = name;
            Population = population;
        }

        public int Population
        { get; set; }

        public String Name
        { get; set; }
    }

    public class State
    {
        public State()
        {
            this.Cities = new List<City>();
        }

        public String Name
        { get; set; }

        public String NickName
        { get; set; }

        public int Population
        { get; set; }

        public List<City> Cities
        { get; set; }
    }
}

This is the output of the program.

HorizontalTreeView

Advertisements

Responses

  1. […] saw few interesting examples of tree control here and here. Now we are going to use uniform grid panel in tree control. Here is a XAML code to use uniform […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: