locked
Horizontal scroll page with multiple GridViews RRS feed

  • Question

  • I have a page with multiple GridViews sitting side by side.  I want the page to scroll horizontally when there is too much data, but I cannot figure it out.  I've tried a number of things, but most things I try seem to convert the GridViews to scroll vertically instead of horizontally.

    I have a simple sample application which demonstrates the issue below (it is WinRT, but I assume WPF/SL work the same).

    https://skydrive.live.com/redir?resid=794B8965421433E3!219

    Any thoughts on how I can accomplish the horizontal scroll?

    In case people prefer to see code here instead of downloading the full sample below is my XMAL

    <common:LayoutAwarePage
        x:Name="pageRoot"
        x:Class="ScrollTest.GroupedItemsPage"
        DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:ScrollTest"
        xmlns:data="using:ScrollTest.Data"
        xmlns:common="using:ScrollTest.Common"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Page.Resources>
    
            <!--
                Collection of grouped items displayed by this page, bound to a subset
                of the complete item list because items in groups cannot be virtualized
            -->
            <CollectionViewSource
                x:Name="groupedItemsViewSource"
                Source="{Binding Groups}"
                IsSourceGrouped="true"
                ItemsPath="TopItems"
                d:Source="{Binding AllGroups, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"/>
        </Page.Resources>
    
        <!--
            This grid acts as a root panel for the page that defines two rows:
            * Row 0 contains the back button and page title
            * Row 1 contains the rest of the page layout
        -->
        <Grid Style="{StaticResource LayoutRootStyle}" >
            <Grid.RowDefinitions>
                <RowDefinition Height="140"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
    
            <!-- Back button and page title -->
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
                <TextBlock x:Name="pageTitle" Grid.Column="1" Text="Scroll Test" Style="{StaticResource PageHeaderTextStyle}"/>
            </Grid>
    
    
            <Grid Grid.Row="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
    
                <Grid Grid.Column="0" >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
    
                    <StackPanel Orientation="Horizontal" Grid.Row="0">
                        <TextBlock Text="Gridview 1" Style="{StaticResource GroupHeaderTextStyle}" />
                    </StackPanel>
    
                    <GridView Grid.Row="1"
                        x:Name="relatedPartiesGridView"
                        AutomationProperties.AutomationId="RelatedPartiesGridView"
                        AutomationProperties.Name="Grouped Items"
                        ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
                        ItemTemplate="{StaticResource Standard250x250ItemTemplate}"                          
                        IsSwipeEnabled="false">
    
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <VariableSizedWrapGrid Orientation="Vertical"/>
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
    
                    </GridView>
                </Grid>
    
                <Grid Grid.Column="1" >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
    
                    <TextBlock Grid.Row="0" Text="Gridview 2" Style="{StaticResource GroupHeaderTextStyle}" />
    
                    <GridView Grid.Row="1"
                        x:Name="addressGridView"
                        AutomationProperties.AutomationId="AddressGridView"
                        AutomationProperties.Name="Grouped Items"
                        ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
                        ItemTemplate="{StaticResource Standard250x250ItemTemplate}"                          
                        IsSwipeEnabled="false">
    
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <VariableSizedWrapGrid Orientation="Vertical"/>
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
    
                    </GridView>
                </Grid>
    
                <Grid Grid.Column="2" >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
    
                    <TextBlock Grid.Row="0" Text="Gridview 3" Style="{StaticResource GroupHeaderTextStyle}" />
    
                    <GridView Grid.Row="1"
                        x:Name="phoneGridView"
                        AutomationProperties.AutomationId="PhoneGridView"
                        AutomationProperties.Name="Grouped Items"
                        ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
                        ItemTemplate="{StaticResource Standard250x250ItemTemplate}"                          
                        IsSwipeEnabled="false">
    
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <VariableSizedWrapGrid Orientation="Vertical"/>
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
    
                    </GridView>
                </Grid>
    
                <Grid Grid.Column="3" >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
    
                    <TextBlock Grid.Row="0" Text="Gridview 4" Style="{StaticResource GroupHeaderTextStyle}" />
    
                    <GridView Grid.Row="1"
                        x:Name="emailGridView"
                        AutomationProperties.AutomationId="EmailGridView"
                        AutomationProperties.Name="Grouped Items"
                        ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
                        ItemTemplate="{StaticResource Standard250x250ItemTemplate}"                          
                        IsSwipeEnabled="false">
    
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <VariableSizedWrapGrid Orientation="Vertical"/>
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
    
                    </GridView>
                </Grid>
    
    
            </Grid>
    
            <VisualStateManager.VisualStateGroups>
    
                <!-- Visual states reflect the application's view state -->
                <VisualStateGroup x:Name="ApplicationViewStates">
                    <VisualState x:Name="FullScreenLandscape"/>
                    <VisualState x:Name="Filled"/>
    
                    <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                    <VisualState x:Name="FullScreenPortrait">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                            </ObjectAnimationUsingKeyFrames>
    
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Padding">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="96,137,10,56"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
    
                    <!--
                        The back button and title have different styles when snapped, and the list representation is substituted
                        for the grid displayed in all other view states
                    -->
                    <VisualState x:Name="Snapped">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                            </ObjectAnimationUsingKeyFrames>
    
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Grid>
    </common:LayoutAwarePage>
    

    • Edited by ccarpediem Sunday, November 25, 2012 10:44 AM
    Saturday, November 24, 2012 8:27 PM