Blog

Windows 8 Grid View control metro UI app

By Parin Turakhia Blogs | Windows Store Apps May 07, 2012
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;

COMMENT USING

PREMIUM SPONSORS

Hire Mobile & Web Developer on demand. 100% satisfaction. Try for 1 week or Money Back. Local and remote developers available all over USA.

Latest Blogs