GridView Items stretched vertically (fullscreen)

Question

I have a GridView which is bound to a collection of items. I'd like to style the items so that the fill the screen vertically. However I can't seem to find a way to do this.

Answer 1

Here you find 4 combinations to choose from for 'grouped' and 'non-grouped' items. It is essentially a matter of playing with horizontal and vertical orientation properties.
<Page
x:Class="App6.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App6"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<GridView Grid.Row="0" Grid.Column="0">
<GridView.ItemTemplate>
<DataTemplate>
<Grid Background="Green">
<TextBlock Text="{Binding}" Width="100"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
</Style>
</GridView.ItemContainerStyle>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.Items>
<x:String>10]</x:String>
<x:String>210]</x:String>
<x:String>3210]</x:String>
</GridView.Items>
</GridView>
<GridView Grid.Row="0" Grid.Column="1">
<GridView.ItemTemplate>
<DataTemplate>
<Grid Background="Green">
<TextBlock Text="{Binding}" Height="100"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
</Style>
</GridView.ItemContainerStyle>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.Items>
<x:String>10]</x:String>
<x:String>210]</x:String>
<x:String>3210]</x:String>
</GridView.Items>
</GridView>
<GridView x:Name="myGridView1" Grid.Row="1" Grid.Column="0">
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<!-- [Default is StackPanel Vertical] -->
<!--<VariableSizedWrapGrid Background="OliveDrab" Margin="2" Orientation="Horizontal" MaximumRowsOrColumns="2" />-->
<StackPanel Background="OliveDrab" Margin="2" Orientation="Horizontal" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding GroupName}" VerticalAlignment="Center" TextAlignment="Center" Foreground="Black" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Stretch" Width="100"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
<GridView.ItemTemplate>
<DataTemplate>
<Grid Background="Green">
<TextBlock Text="{Binding Path=ItemName}" />
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="Margin" Value="2"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
</Style>
</GridView.ItemContainerStyle>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" Background="Orange" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
<GridView x:Name="myGridView2" Grid.Row="1" Grid.Column="1">
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<!-- [Default is StackPanel Vertical] -->
<!--<VariableSizedWrapGrid Background="OliveDrab" Margin="2" Orientation="Vertical" MaximumRowsOrColumns="2" />-->
<StackPanel Background="OliveDrab" Margin="2" Orientation="Vertical" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding GroupName}" VerticalAlignment="Center" TextAlignment="Center" Foreground="Black" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Stretch" Width="100"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
<GridView.ItemTemplate>
<DataTemplate>
<Grid Background="Green">
<TextBlock Text="{Binding Path=ItemName}" />
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="Margin" Value="2"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
</Style>
</GridView.ItemContainerStyle>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical" Background="Orange" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</Grid>
</Page>
using System;
using System.Collections.Generic;
using System.Linq;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Navigation;
namespace App6
public sealed partial class MainPage : Page
public MainPage()
this.InitializeComponent();
protected override void OnNavigatedTo(NavigationEventArgs e)
CollectionViewSource collectionViewSource = new CollectionViewSource();
collectionViewSource.IsSourceGrouped = true;
collectionViewSource.ItemsPath = new PropertyPath("Items");
IList<Group> groupList = new List<Group>() { new Group() { GroupName = "A" }, new Group() { GroupName = "B" } };
groupList[0].Items = new List<Item>() { new Item() { ItemName = "A1", Group = groupList[0] } };
groupList[1].Items = new List<Item>() { new Item() { ItemName = "B1", Group = groupList[1] }, new Item() { ItemName = "B2", Group = groupList[1] } };
collectionViewSource.Source = groupList;
this.myGridView1.ItemsSource = collectionViewSource.View;
this.myGridView2.ItemsSource = collectionViewSource.View;
public class Group
public string GroupName { get; set; }
public List<Item> Items { get; set; }
public class Item
public Group Group { get; set; }
public string ItemName { get; set; }