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,
[Click image for full size]
Special thanks to Ian Griffiths for helping me figure out the styling solution.
I see a lot of interesting content on your blog.
You have to spend a lot of time writing, i know how to save
you a lot of time, there is a tool that creates unique,
SEO friendly posts in couple of seconds, just type in google – k2 unlimited
content
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”.
Explained in a simple manner to understand very easily..
Thank you
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!
I want manual steps about grid and split view for application development(Java script).
Can you send me…?
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.
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.
Oops, ignore the above post. Wrong site.
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