WPF Menu Databinding

This article is written by Pon Saravanan  on 28-Feb-10 Last modified on :01-Mar-10

DataBinding WPF Menu with Dataset

For a complete working application Menu is a best known choice for navigation. Whatever other navigations such as toolbar, tabs etc... are optional and will add value for the application . It is a great control to display hierarchically organized data.  One of the basic thing to be noted is we need to use HierarchicalDataTemplate for loading hierarchical data.

HierarchicalDataTemplate in mapping data

For WPF Menu to understand the hierarchy of the data, we need to define releationships in the HierarchicalDataTemplate. It will work ONLY if the dataset given is the Relational Database with proper relationships added. And give a name that describes the relationships well (for readability). Add a TextBlock for displaying the header table information. In this article we refer categories as the Header. Remember to provide a unique Key for the object also.

ItemsSource in HierarchicalDataTemplate

The given relationship name can be specified here as {Binding RelationshipName}

ItemTemplate in HierarchicalDataTemplate

This is the child template reference. So the child template name which has to be created and referred here as {StaticResource CreatedChildTemplateName}.

Creating Templates for MenuItems

For displaying data in Menu Items we have to create a DataTemplate. So later on if a label has to be added. Then we can add it to this template and bind accordingly. Remember to provide a unique Key for the template. Then we can use this key for referring it in ItemTemplate of the HierarchicalDataTemplate.

Configure Menu to use the Mapped ItemsSource

After placed the Menu, there are few things we may need to configure it to bind the hierarchical template.

ItemsSource in Menu

Here is the Parent Table we need to specify in our case it is Categories Table. This is the table name we have to give while preparing the relational dataset (either in the query or later adding as a table name in the dataset which ever is relevant in your case but it is important)

ItemTemplate in Menu

This is the Created HierarchicalDataTemplate x:key we need to pass along with such as {StaticResource CategoryTemplate}. Please note that the dataset is already passed as DataContext in code behind.

Screen Capture

Source Code


<Window x:Class="Window1"
    Title="Window1" Height="400" Width="550">
        <DataTemplate x:Key="ProductTemplate" >
            <TextBlock Text="{Binding ProductName}"></TextBlock>
        <HierarchicalDataTemplate x:Key="CategoryTemplate"
                      ItemsSource="{Binding ChildrenRelationship}"
                      ItemTemplate="{StaticResource ProductTemplate}">
            <TextBlock Text="{Binding CategoryName}"></TextBlock>
        <Button HorizontalAlignment="Left"  Name="Button1"
                Width="75" Height="23" VerticalAlignment="Bottom">
        <Menu Margin="10,10,21,30" Name="Menu1"
                  ItemsSource="{Binding Categories}"
                  ItemTemplate="{StaticResource CategoryTemplate}" />


Imports System.Data.SqlClient
Imports System.Data
Imports System.Xml
Imports System.IO
Class Window1
    Private NwindConnection As String = "Data Source=.\SQLEXPRESS;" & _
            "Initial Catalog=Northwind;Persist Security Info=True;" & _
            "Integrated Security = True"
    Function GetRelationalData() As DataSet
        Dim NwindCon = New SqlConnection(NwindConnection)
        Dim CategoryAdapter As SqlDataAdapter = New  _
            SqlDataAdapter("SELECT CategoryID,CategoryName FROM Categories", NwindCon)
        Dim ProductsAdapter As SqlDataAdapter = New  _
            SqlDataAdapter("SELECT CategoryID,ProductID,ProductName FROM Products", NwindCon)
        Dim ProductData As DataSet = New DataSet()
        CategoryAdapter.Fill(ProductData, "Categories") 'fill Categories
        ProductsAdapter.Fill(ProductData, "Products") 'fill products
        Dim CategoryRelation As DataRelation
        CategoryRelation = New DataRelation("ChildrenRelationship", _
        ProductData.Tables("Categories").Columns("CategoryID"), _
        ProductData.Tables("Products").Columns("CategoryID"), True)
        CategoryRelation.Nested = True
        Return ProductData
    End Function
    Private Sub Button1_Click(ByVal sender As System.Object, _
                              ByVal e As RoutedEventArgs) Handles Button1.Click
    End Sub
    Private Sub BindData()
        Menu1.DataContext = GetRelationalData()
    End Sub
End Class


Captcha Image
For you specially:  
Captcha Text Enter the text in the image.(Not Case sensitive)    

Spam Bot Trap


Select Theme