Windows 8 Grid View control metro UI app

Hi Guys,

Following will help you to create Grid View control in Windows 8 metro UI apps XAML.

Step 1:

 Create User Control resources and the following 

   <CollectionViewSource x:Name="cvsItemSource" IsSourceGrouped="True"/>

 

Step 2:

  <GridView  x:Name="grdView"  BorderThickness="0" VerticalAlignment="Stretch"

                                           ItemsSource="{Binding Source={StaticResource cvsItemSource}}" 

                                             >

                                        <GridView.ItemTemplate>

                                            <DataTemplate x:Name="MainPage">

                                                         Here Is the template you want to display. 

                                            </DataTemplate>

                                        </GridView.ItemTemplate>

                                        <GridView.GroupStyle>

                                            <GroupStyle>

                                                <GroupStyle.Panel>

                                                    <ItemsPanelTemplate>

                                                        <VariableSizedWrapGrid Orientation="Vertical" MaximumRowsOrColumns="2" Margin="0,0,0,0"/>

                                                    </ItemsPanelTemplate>

                                                </GroupStyle.Panel>

                                                <GroupStyle.HeaderTemplate>

                                                    <DataTemplate>

                                                        <TextBlock Margin="0,0,0,0"  Text="Title of the group" FontSize="25" Height="33" Foreground="#ffe1c4" />

                                                    </DataTemplate>

                                                </GroupStyle.HeaderTemplate>

                                            </GroupStyle>

                                        </GridView.GroupStyle>

                                        <GridView.ItemsPanel>

                                            <ItemsPanelTemplate>

                                                <StackPanel Orientation="Horizontal" />

                                            </ItemsPanelTemplate>

                                        </GridView.ItemsPanel>

                                    </GridView>

Step 3:

Assign your item collection to the Item Source as follows:

cvsItemSource.Source = Your Collections;