Click here to Skip to main content
13,091,417 members (55,820 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

6.2K views
2 bookmarked
Posted 24 Oct 2012

Transposing GridView for Portrait Mode

, 24 Oct 2012
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 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.

You may also be interested in...

Comments and Discussions

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