Click here to Skip to main content
Click here to Skip to main content

Tagged as

How to display data of one column in format of grid in Silverlight

, 29 Apr 2010 CPOL
Rate this:
Please Sign up or sign in to vote.
In real life there are cases where we need to display data like student name as a grid. i.e. student name should be displayed in first horizontally up to say 3 columns and after that names should be displayed in new row and so on. To create this layout Silverlight does not have any in-built control. You can use list-box control to display in names in a column but we cannot display names as a grid. For that we have to make use of ItemsControl and DataTemplate concept of Silverlight.
Using the code:
• Add an “ItemsControl” in XAML file and set “StackPanel” as the panel template for the control
<ItemsControl x:Name="icVertical" Margin="10,10,0,0" HorizontalAlignment="Center">
• Define “DataTemplate” to be used to display the data
<DataTemplate x:Key="innerDataTemplate">
            <Border BorderBrush="LightBlue" BorderThickness="1" Margin="10,10,10,10" >
                <StackPanel >
<TextBlock Text="{Binding}"></TextBlock>
• Define “DataTemplate” to be used as panel template for the internal items control
<ItemsPanelTemplate x:Key="innerItemsPanelTemplate">
                <StackPanel Orientation="Horizontal"></StackPanel>
• Now in the code, create a new ItemsControl control, set its data template as “innerDataTemplate” and panel template as “innerItemsPanelTemplate”. Set “ItemsSource” property of the newly created ItemsControl and add the control to the ItemsControl defined in the XAML
            int noOfColumns = 4; //no. of columns in a row
            List<XElement> listElements = (List<XElement>)result.Elements("FriendId").ToList();
            if (listElements.Count > 0)
                for (int i = 0; i <= listElements.Count / noOfColumns; i++)
                    ItemsControl itemControl = new ItemsControl();
                    //set data tamplate and panel template
                    itemControl.ItemTemplate = (DataTemplate)this.Resources["innerDataTemplate"];
                    itemControl.ItemsPanel = (ItemsPanelTemplate)this.Resources["innerItemsPanelTemplate"];
                    if (i == listElements.Count / noOfColumns)
                        //if this is the last row, calculate remaining data
                        int remainingElements = listElements.Count - (i * noOfColumns);
                        //set items source
                        itemControl.ItemsSource = listElements.GetRange(i * noOfColumns, remainingElements);
                        itemControl.ItemsSource = listElements.GetRange(i * noOfColumns, noOfColumns);
                    //add control to the parent control


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Grishma Shah
Software Developer
India India
No Biography provided

Comments and Discussions

-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141223.1 | Last Updated 30 Apr 2010
Article Copyright 2010 by Grishma Shah
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid