Click here to Skip to main content
11,432,427 members (68,799 online)
Click here to Skip to main content
Technical Blog

Tagged as

Transposing GridView for Portrait Mode

, 24 Oct 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
Transposing GridView for Portrait mode.

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

landscape

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

portrait

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>

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

John Michael Hauck
Software Developer (Senior) LECO Corporation
United States United States
John Hauck has been developing software professionally since 1981, and focused on Windows-based development since 1988. For the past 17 years John has been working at LECO, a scientific laboratory instrument company, where he manages software development. John also served as the manager of software development at Zenith Data Systems, as the Vice President of software development at TechSmith, as the lead medical records developer at Instrument Makar, as the MSU student who developed the time and attendance system for Dart container, and as the high school kid who wrote the manufacturing control system at Wohlert. John loves the Lord, his wife, their three kids, and sailing on Lake Michigan.
Follow on   Twitter

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150428.2 | Last Updated 24 Oct 2012
Article Copyright 2012 by John Michael Hauck
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid