Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to bind nested list in WPF

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 3.20k
    Comment on it

    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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: