GridView Control in Windows 8

While ListBox and ComboBox continue to work in Windows 8, their use is discouraged. They are not designed well for touch input and there are new and more powerful controls in WinRT that you can use instead; specifically the ListView and the GridView. 

ListView and GridView both derive from ListViewBase, and neither adds any properties, methods or events; thus they are nearly identical.  The key difference is that ListView is typically used for vertical scrolling, while GridView makes a grid that is typically scrolled horizontally.

Creating a demo program to illustrate GridView is nearly trivial.  We’ll divide our page’s Grid (not to be confused with GridView) into rows and columns. In the left column we’ll add two buttons: Add and Insert. In the right hand column we’ll add the GridView.

<Grid Background="{StaticResource ApplicationPageBackgroundBrush}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="3*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Button Name="Add"
            Content="Add"
            Grid.Row="0"
            Grid.Column="0" 
            Click="Add_Click_1"/>
    <Button Name="Insert"
            Content="Insert"
            Grid.Row="1"
            Grid.Column="0"
            Click="Insert_Click_1" />
    <GridView Name="xGridView"
              Grid.RowSpan="4"
              Grid.Column="1"
              Grid.Row="0" />

</Grid>

The event handler for both the add button and the insert button are nearly intuitive,

 

private int counter = 1;

private void Add_Click_1( object sender, RoutedEventArgs e )
 {
     xGridView.Items.Add( "Item " + counter++ );
 }

 private void Insert_Click_1( object sender, RoutedEventArgs e )
 {
     xGridView.Items.Insert( 0, "Item " + counter++ );
 }

Clicking Add and/or Insert a number of times will fill the first column of the grid, and then the second column will begin to fill.  Unfortunately, the grid will size all the items based on the size of the first item, and things get crowded quickly.  We can fix this by adding a style,

 <GridView Name="xGridView"
           Grid.RowSpan="4"
           Grid.Column="1"
           Grid.Row="0" >
     <GridView.ItemContainerStyle>
         <Style TargetType="ListViewItem">
             <Setter Property="Width"
                     Value="150" />
         </Style>
     </GridView.ItemContainerStyle>
 </GridView>

Now when the grid is populated there is a bit more breathing room between the columns and nothing is truncated,

GridView

[Click image for full size]

 

Special thanks to Ian Griffiths for helping me figure out the styling solution.

Share

About Jesse Liberty

Jesse Liberty is a Master Consultant for Falafel Software, and has three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Technical Evangelist for Telerik and for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS.
This entry was posted in Essentials, Mini-Tutorial, Windows 8 and tagged . Bookmark the permalink.

8 Responses to GridView Control in Windows 8

  1. Tabrej says:

    Great tutorial…
    But TargetType=”ListViewItem” was break in VS2012 for Windows 8 with .NET v4.5 in case any body else is getting the same error place change it to TargetType=”GridViewItem”.

  2. Prasanna says:

    Explained in a simple manner to understand very easily..

    Thank you

  3. eduardo lorenzo says:

    Hi Jessie,

    Great work. Am a fan, with a question.

    Am currently using the gridview to display and select (swipedown) data; displayed as icons. Hooked it up to the SelectionChanged event and works well. However, when using a keyboard (on Windows 8 powered desktop), just the arrow keys fires the selectionChanged and I don’t want that. Is there a workaround here?

    Thanks in advance!

  4. sankar says:

    I want manual steps about grid and split view for application development(Java script).
    Can you send me…?

  5. Dele Olowoyo says:

    I am currently developing a sample win 8 metro application. I’m looking for my main hub page to have multiple gridviews (3) each with it’s own datasource. I would like to have each of these gridviews in its own column with a header, however, my page doesn’t seem to horizontally scroll when I layout my page like this.

    Is it even possible to have multiple (non-grouped) gridviews on one page, or do I have to have one grouped gridview for my page to horizontally pan?

    Thanks for any insight you can provide.

  6. Frostie says:

    Great to see a focus on intuitive app development with the implementation of HTML5 in W8 apps.

    One undoubtedly important thing these RSS reader apps need, is; article titles in the live tiles.

  7. Fredrik says:

    Great post.

    One thing that annoys me a bit when have working with ListViews and GridViews though, is that they tend to get really slow rendering when handling alot? of items (like > 150). I don’t know why this happens and I’m not sure that the controls are the ones to blame. I use a viewmodel that binds to the ItemSource of the control and for some reason when assigning a list of, lets say, 200 items the control takes about 3-4 secs to render.

    Another thing that I find disturbing is that both the ListView and GridView have build in styles that can’t be overridden. For example it seems impossible to remove the margin between the items unless you specify an ItemContainerStyle with negative margins to “force” the items together.

    Any reflections on this?

    Regards
    Fredrik

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>