How To Use Hierarchical DataTemplate in WPF

Hi all

I am going to show you a simple example of how to use Hierarchical DataTemplates in a tree view for an easy display of hierarchical Data. The Example shows the links in a WebPage recursively. First we will create the data model that we want to show, note that we have two seperate models, one for the root element and one for the acctual data.

    public class WebPage
    {
        public string Href { get; set; }
        public string PageTitle { get; set; }
        public List<WebPage> LinksInPage { get; set; }
    }

    public class Root
    {
        public string Title { get; set; }
        public string Url { get; set; }
        public List<WebPage> WebPages { get; set; }
    }

We have to create a root object and the accrual data object as separate classes. the data template for each one will look like this:

        <HierarchicalDataTemplate DataType="{x:Type data:Root}"
                                  ItemsSource="{Binding Path=WebPages}">
            <Border BorderBrush="Black"
                    BorderThickness="2"
                    CornerRadius="10">
                <StackPanel>
                    <TextBlock Margin="10,0,0,0"
                               Text="{Binding Title}"></TextBlock>
                </StackPanel>
            </Border>
        </HierarchicalDataTemplate>
       
        <HierarchicalDataTemplate DataType="{x:Type data:WebPage}"
                                  ItemsSource="{Binding Path=LinksInPage}">
            <Border BorderBrush="Black"
                    BorderThickness="2"
                    CornerRadius="10">
                <StackPanel>
                    <TextBlock Margin="10,0,0,0"
                               Text="{Binding PageTitle}"></TextBlock>
                    <TextBlock Margin="10,0,0,0"
                               Text="{Binding Href}"></TextBlock>
                </StackPanel>
            </Border>
        </HierarchicalDataTemplate>

In the constructor of the window we will create the hierarchy of the data in code and provide the tree view with the  DataContext

public Window1()
        {
            InitializeComponent();
            Root r = new Root();
            r.WebPages = new List<WebPage>();
            r.Title = "HomePage";
            r.Url = @"http://www.HomePage.com";

            WebPage link1 = new WebPage();
            link1.Href = @"http://www.HomePage.com/link1";
            link1.PageTitle = "link1";
            r.WebPages.Add(link1);

            WebPage Link2 = new WebPage();
            Link2.Href = @"http://www.HomePage.com/Link2";
            Link2.PageTitle = "Link2";
            r.WebPages.Add(Link2);

            WebPage Link3 = new WebPage();
            Link3.Href = @"http://www.HomePage.com/Link2/Link3";
            Link3.PageTitle = "Link3";
            Link2.LinksInPage = new List<WebPage>();
            Link2.LinksInPage.Add(Link3);

            WebPage Link4 = new WebPage();
            Link4.Href = @"http://www.HomePage.com/Link2/Link4";
            Link4.PageTitle = "Link4";
            Link2.LinksInPage.Add(Link4);

            WebPage Link5 = new WebPage();
            Link5.Href = @"http://www.HomePage.com/link1/Link5";
            Link5.PageTitle = "Link5";
            link1.LinksInPage = new List<WebPage>();
            link1.LinksInPage.Add(Link5);

            WebPage Link6 = new WebPage();
            Link6.Href = @"http://www.HomePage.com/link2/Link3/Link6";
            Link6.PageTitle = "Link6";
            Link3.LinksInPage = new List<WebPage>();
            Link3.LinksInPage.Add(Link6);

            treeView1.DataContext = r;
        }

To finish we will define the TreeView in Xaml:

    <Grid Background="LightSkyBlue">
        <TreeView Margin="0,0,15,0" Name="treeView1" Background="LightSkyBlue">
            <TreeViewItem ItemsSource="{Binding Path=WebPages}"
                          Header="{Binding Title}"></TreeViewItem>
        </TreeView>
    </Grid>

Notice that we provide the TreeView with one TreeViewItem, thats the root The result is this display:

You can download the Source code here:
http://www.filefactory.com/file/2e5dfd/

Enjoy

Amit

How To Use Microsoft Expression Blend to Modify a Control

Hi all

Say you absolutely have to change the Button of a Combobox to a circle instead of an arrow - you just have to!!!!

Here comes Microsoft Expression Blend to the rescue, If you code in WPF and don't have it yet, you can get it here:

http://www.microsoft.com/expression/products/download.aspx?key=blend2preview

Its the beta of blend 2 but believe me when I say it feels like no beta.

Ill wait here while you download and install...

Done? Great let's start:

Open up a new project and throw in a combobox. Right click on the combobox, you should get the following context menu:

We want to press on edit a copy (picture above), which will open the next menu:

 

This is Microsoft Blend's way of saying: I am going to create a new style, where would you like me to put it?

Press ok if you want it in the window's resources or select a resource dictionary if you want it to be placed there, for the sake of the example lets press OK. Now we have created a custom Combobox style. Lets right click on the Combobox toggle button, this menu pops:

We are going to select the edit template option (picture above) and that's it: we can now do whatever we want to the toggle button, like put in a red circle instead of the arrow. To do that, select the arrow by using the Direct select option from the toolbar on the left (second from top) and delete it. Insert an ellipse where the arrow used to be, and paint it red. The result is this beautiful Combobox that function exactly like the original, except it has a red circle and not an arrow:

In the same manner you can do whatever you want to any control. If you wish to see the code that Microsoft Blend wrote for you, just check out Window1.xaml or the resource dictionary you specified before

Please comment if you are experiencing problems I'll be happy to help

Enjoy

Amit