Monday, May 4, 2009

Create Hierarchical Grid using WPF. A sample Application Using WPF


This article explains the creation of the hierarchical grid using .net Windows presentation foundation concept. This also explains a sample application using WPF.

To do this, we need

  • Listview to display the items

  • Groupstyle Property to group items.

  • To get the number of items, define ContainerStyle for the GroupStyle and ItemCount will give the number of items in that category.

  • GridView to show the grid

The xaml code for the above sample looks like


<Window x:Class="WpfSampleApp.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Heirarchial Grid Sample" Height="300" Width="300">


<Grid>


<StackPanel xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'
xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'
xmlns:d='clr-namespace:System.Windows.Data;assembly=PresentationFramework'>
<StackPanel.Resources>
<XmlDataProvider x:Key="MyData" XPath="/Info">
<x:XData>
<Info xmlns="">
<Item ID="ISBN 45-F1" Name="Winner" Price="$32.05" Author="Aka" Catalog="Business"/>
<Item ID="ISBN 54-32" Name="C++ Inside" Price="$10.00" Author="John" Catalog="Language"/>
<Item ID="ISBN 14-A0" Name="Java Inside" Price="$9.00" Author="Tom" Catalog="Language"/>
<Item ID="ISBN 56-78" Name="Stock Market" Price="$8.50" Author="Bob" Catalog="Business"/>
<Item ID="ISBN AA-02" Name="Guideline for Health" Price="$19.00" Author="Lee" Catalog="Health"/>
<Item ID="ISBN A4-07" Name="C# Inside" Price="$8.50" Author="Bob" Catalog="Language"/>
</Info>
</x:XData>
</XmlDataProvider>
<CollectionViewSource x:Key='src' Source="{Binding Source={StaticResource MyData}, XPath=Item}">
<CollectionViewSource.GroupDescriptions>
<d:PropertyGroupDescription PropertyName="@Catalog" />
</CollectionViewSource.GroupDescriptions>
</CollectionViewSource>
</StackPanel.Resources>

<ListView ItemsSource='{Binding Source={StaticResource src}}' BorderThickness="0">
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Margin" Value="0,0,0,5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander IsExpanded="True" BorderBrush="#FFA4B97F" BorderThickness="0,0,0,1">
<Expander.Header>
<DockPanel>
<TextBlock FontWeight="Bold" Text="{Binding Path=Name}" Margin="5,0,0,0" Width="100"/>
<TextBlock FontWeight="Bold" Text="{Binding Path=ItemCount}"/>
</DockPanel>
</Expander.Header>
<Expander.Content>
<ItemsPresenter />
</Expander.Content>
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</ListView.GroupStyle>
<ListView.View>
<GridView>
<GridViewColumn Header="ID" DisplayMemberBinding="{Binding XPath=@ID}" Width="100" />
<GridViewColumn Header="Name" DisplayMemberBinding="{Binding XPath=@Name}" Width="140" />
<GridViewColumn Header="Price" DisplayMemberBinding="{Binding XPath=@Price}" Width="80" />
<GridViewColumn Header="Author" DisplayMemberBinding="{Binding XPath=@Author}" Width="80" />
</GridView>
</ListView.View>
</ListView>
</StackPanel>
</Grid></Window>



The Output of the above code looks like below



[WPFSample.JPG]