Click here to Skip to main content
15,867,308 members
Articles / Desktop Programming / XAML
Tip/Trick

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

Rate me:
Please Sign up or sign in to vote.
5.00/5 (1 vote)
29 Apr 2010CPOL 8.1K   1  
Introduction:...
Introduction:
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">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel></StackPanel>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
      </ItemsControl>

• 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>
</StackPanel>
            </Border>
 </DataTemplate>

• Define “DataTemplate” to be used as panel template for the internal items control
<ItemsPanelTemplate x:Key="innerItemsPanelTemplate">
                <StackPanel Orientation="Horizontal"></StackPanel>
      </ItemsPanelTemplate>

• 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
icVertical.Items.Clear();
            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);
                    }
                    else
                    {
                        itemControl.ItemsSource = listElements.GetRange(i * noOfColumns, noOfColumns);
                    }
                    //add control to the parent control
                    icVertical.Items.Add(itemControl);
                }
    }

License

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


Written By
Software Developer
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
-- There are no messages in this forum --