Posted by: Zeeshan Amjad | June 28, 2010

Using UniformGrid in Tree control


We 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 grid as an item panel.

<TreeView.ItemsPanel>
	<ItemsPanelTemplate>
		<UniformGrid/>
	</ItemsPanelTemplate>
</TreeView.ItemsPanel>

Similarly we are using uniform grid with item tree level. To do this we define style for treeviewitem and also define uniform grid there. Here is a style of it.

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

Rest of the code is very similar to the previous codes. 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="UniformGrid Tree View" Height="400" Width="600">
    <Window.Resources>
        <Style TargetType="{x:Type TreeViewItem}">
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <UniformGrid Margin="2"/>                        
                    </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.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid/>
                </ItemsPanelTemplate>
            </TreeView.ItemsPanel>
            
            <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>

C# code of the program is also same. 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; }
    }
}

Here is the output of this program.

UniformGridTreeViewOutput

Advertisements

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: