Here, below is the example of binding nested list in WPF. In below example, I am using nested item controls and WPF Expander to show nested list. On click of first item, it display sub list of selected item.
In these example , I bind itemscontrol using XmlDataProvider.
In given XML example, I have two types of list. First is groups list and second is particular group images list.
XML:
<?xml version="1.0"?>
<Groups>
<Group>
<Id>1</Id>
<Name>Group 1</Name>
<Images>
<ImageName>Image1</ImageName>
<ImageName>Image2</ImageName>
<ImageName>Image3</ImageName>
</Images>
</Group>
<Group>
<Id>2</Id>
<Name>Group 2</Name>
<Images>
<ImageName>Image4</ImageName>
<ImageName>Image5</ImageName>
<ImageName>Image6</ImageName>
<ImageName>Image7</ImageName>
</Images>
</Group>
<Group>
<Id>3</Id>
<Name>Group 3</Name>
<Images>
<ImageName>Image8</ImageName>
<ImageName>Image9</ImageName>
</Images>
</Group>
<Group>
<Id>4</Id>
<Name>Group 4</Name>
<Images>
<ImageName>Image10</ImageName>
<ImageName>Image11</ImageName>
<ImageName>Image12</ImageName>
<ImageName>Image13</ImageName>
<ImageName>Image14</ImageName>
<ImageName>Image15</ImageName>
<ImageName>Image16</ImageName>
</Images>
</Group>
</Groups>
In XAML:
First we have to provide the resources for grid if any. I use XmlDataProvider to bind xml data with ItemsControl.
<Grid.Resources>
<XmlDataProvider x:Key="groupConfigurationXmlDataProvider" Source="XmlFiles/ImagesConfiguration.xml" XPath="/Groups" />
</Grid.Resources>
In Grid, I use 2 items control one for main list and other for sub list and also use WPF Expander to show sub list.
<Grid>
<ItemsControl x:Name="GroupMenu" Grid.Column="0" Grid.Row="0" VerticalAlignment="Stretch" ItemsSource="{Binding Source={StaticResource groupConfigurationXmlDataProvider},XPath=Group}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch"></StackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Expander Template="{StaticResource SimpleExpanderTemp}" Name="NameExpander" OverridesDefaultStyle="True" Header="{Binding XPath=Name}" HorizontalAlignment="Left" VerticalAlignment="Top">
<ItemsControl ItemsSource="{Binding XPath=Images/ImageName}" Grid.Column="0" Grid.Row="1" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Border BorderThickness="25,0,0,0" BorderBrush="#009147">
<Button Content="{Binding XPath=.}" Style="{StaticResource ListButtonStyle}" HorizontalAlignment="Stretch" VerticalAlignment="Center" Click="Image_Click"/>
</Border>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Expander>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
Creating template for Expander that I use above
<ControlTemplate x:Key="SimpleExpanderTemp" TargetType="{x:Type Expander}">
<DockPanel >
<ToggleButton x:Name="ExpanderButton"
DockPanel.Dock="Top"
Template="{StaticResource SimpleExpanderButtonTemp}"
Content="{TemplateBinding Header}"
IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
OverridesDefaultStyle="True"
Padding="0,0" Height="70" FontSize="30" FontWeight="Light" Click="GroupToggleButton_Click" Tag="{Binding}" >
</ToggleButton>
<ContentPresenter x:Name="ExpanderContent"
Grid.Row="1"
Visibility="Collapsed"
DockPanel.Dock="Bottom"/>
</DockPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Setter TargetName="ExpanderContent" Property="Visibility" Value="Visible"/>
<Setter TargetName="ExpanderButton" Property="Foreground" Value="#009147"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
In Button, I use Content="{Binding XPath=.}" to display ImageName on button content because I have to show the same property that I provide in XPath.
Hope, this sample will help you. Thanks
0 Comment(s)