Transposing GridView for Portrait Mode

If your landscape mode uses a GridView to achieve a look like this…

… you might be wondering out how to make it look like this:

The trick is not to use a GridView, but rather use a ListView with an ItemsPanel that is a WrapGrid with Horizontal Orientation. That is, replace this:

For Landscape Views

<ScrollViewer
    x:Name="MyLandscape"
    Style="{StaticResource HorizontalScrollViewerStyle}">
    <GridView
        ItemsSource="{Binding}"
        ItemTemplate="{StaticResource DataTemplate1}" />
</ScrollViewer>

With this:

For Portrait Views

<ScrollViewer
    x:Name="MyPortrait"
    Style="{StaticResource VerticalScrollViewerStyle}">
    <ListView
        ItemsSource="{Binding}"
        ItemTemplate="{StaticResource DataTemplate1}">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapGrid
                    Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
    </ListView>
</ScrollViewer>

Again, the major changes are to replace GridView with ListView and to use a WrapGrid with horizontal orientation as the items panel.

Below is the entire working MainPage.xaml,cs and MainPage,xaml, including the wiring to make the switch between the GridView and ListView automatic.  Here are some things to notice:

1. The constructor creates an array of 30 integers as the data to display.
2. I capture window resize events with OnCurrentSizeChanged.
3. In response to size changes, I set the visual state to ApplicationView.Value.  This ends up being one of the four ApplicationViewState enum values:
   • FullScreenLandscape
   • Filled
   • Snapped
   • FullScreenPortrait
4. Create four corresponding visual states in MainPage.xaml.  These can be configured to set the Visibility of your user interface elements as desired.  In this case, the storyboard associated with FullScreenPortrait hides the GridView and Shows the ListView.
5. It is a personal preference that I like to initialize the ListView as collapsed, so I can see the controls for Landscape by itself in the designer.

MainPage.xaml.cs

using System.Linq;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace App1
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            Window.Current.SizeChanged += OnCurrentSizeChanged;
            DataContext = Enumerable.Range(1, 30);
        }

        private void OnCurrentSizeChanged(
            object sender,
            Windows.UI.Core.WindowSizeChangedEventArgs e)
        {
            VisualStateManager.GoToState(
                this,
                ApplicationView.Value.ToString(),
                false);
        }
    }
}

 

MainPage.xaml

<Page
    x:Class="App1.MainPage"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <DataTemplate
            x:Key="DataTemplate1">
            <Border
                Width="200"
                Height="200"
                Background="Gray">
                <TextBlock
                    FontSize="50"
                    VerticalAlignment="Center"
                    HorizontalAlignment="Center"
                    Text="{Binding}" />
            </Border>
        </DataTemplate>
    </Page.Resources>
    <Grid
        Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup
                x:Name="VisualStateGroup">
                <VisualState
                    x:Name="FullScreenLandscape" />
                <VisualState
                    x:Name="Filled" />
                <VisualState
                    x:Name="Snapped" />
                <VisualState
                    x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames
                            Storyboard.TargetProperty="Visibility"
                            Storyboard.TargetName="MyLandscape">
                            <DiscreteObjectKeyFrame
                                KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames
                            Storyboard.TargetProperty="Visibility"
                            Storyboard.TargetName="MyPortrait">
                            <DiscreteObjectKeyFrame
                                KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <ScrollViewer
            x:Name="MyLandscape"
            Style="{StaticResource HorizontalScrollViewerStyle}">
            <GridView
                ItemsSource="{Binding}"
                ItemTemplate="{StaticResource DataTemplate1}" />
        </ScrollViewer>
        <ScrollViewer
            x:Name="MyPortrait"
            Style="{StaticResource VerticalScrollViewerStyle}"
            Visibility="Collapsed">
            <ListView
                ItemsSource="{Binding}"
                ItemTemplate="{StaticResource DataTemplate1}">
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapGrid
                            Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
            </ListView>
        </ScrollViewer>
    </Grid>
</Page>