windows 8 multiple grid views on hub page

Question

I am currently building a hub page for my application. This page is designed to have multiple columns, each with a header and a gridview below. However, each column (gridview) is populated with a different set of data from my view model. I am successfully populating the grid views, but what i'm seeing is that the horizontal scrolling does not work so I can never view all of the information on the hub page. Basically, users can't horizontally pan.

Is working with grouped data (gridview) the only way to achieve this?

I should also say that I tried using a Scrollviewer, but it seemed to scrunch up my gridviews, where it only showed my data in one column (per gridview).

Please see below at my current XAML code. Thanks & look forward to your responses.

<common:LayoutAwarePage
x:Name="pageRoot"
x:Class="CongressWatch.MainPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
IsTabStop="false"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CongressWatch"
xmlns:common="using:CongressWatch.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Page.Resources>
    <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
    <x:String x:Key="AppName">congress watch</x:String>
</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="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}"/>
    </Grid>

    <Grid Grid.Row="1" Margin="0,-3,0,0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <TextBlock x:Name="txtHeadingLegislators" 
                   HorizontalAlignment="Left" 
                   TextWrapping="Wrap" 
                   Text="legislators" 
                   Margin="120,0,0,20"
                   VerticalAlignment="Top" 
                   Style="{StaticResource PageSubheaderTextStyle}"/>
        <GridView 
            x:Name="grdViewLegislators" 
            Grid.Row="1" 
            Margin="120,0,0,50"
            ItemsSource="{Binding Legislators, Mode=TwoWay}"
            IsItemClickEnabled="True"
            SelectionMode="None"
            ItemClick="grdViewLegislators_ItemClick" 
            ItemTemplate="{StaticResource LegislatorGVDataItemTemplate}"/>
        <TextBlock x:Name="txtHeadingCommittees" 
                   Grid.Column="1"
                   HorizontalAlignment="Left" 
                   TextWrapping="Wrap" 
                   Text="committees" 
                   Margin="80,0,0,20"
                   VerticalAlignment="Top" 
                   Style="{StaticResource PageSubheaderTextStyle}"/>
        <GridView 
            x:Name="grdViewCommittees" 
            Grid.Row="1" 
            Grid.Column="1"
            Margin="80,0,0,50"
            ItemsSource="{Binding Committees, Mode=TwoWay}"
            IsItemClickEnabled="True"
            SelectionMode="None"
            ItemClick="grdViewCommittees_ItemClick" 
            ItemTemplate="{StaticResource CommitteeGVDataItemTemplate}"/>
        <TextBlock x:Name="txtHeadingBills" 
                   Grid.Column="2"
                   HorizontalAlignment="Left" 
                   TextWrapping="Wrap" 
                   Text="bills" 
                   Margin="80,0,0,20"
                   VerticalAlignment="Top" 
                   Style="{StaticResource PageSubheaderTextStyle}"/>
    </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>
                </Storyboard>
            </VisualState>

            <!-- The back button and title have different styles when snapped -->
            <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>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Grid>

Answer 1

The design guidelines are very careful to call out problems with nesting multiple controls inside each other that scroll in the same or even different directions. Not only can you have problems with one control taking events from another, the way the content moves can be undetermined and frustrating for users.

It sounds like you might be trying to implement something similar to the Panorama control on Windows Phone? There is currently no control that works like this on Windows 8. Panorama was created to fit a large amount of data on a small screen by simulating a wider screen. ScrollViewer with stop points can do something similar in Windows 8, but not identical.

I'd take some time to just sit and think about the design of the screen and make sure that's the interaction you want. Take a look at apps like USA Today and see how they deal with grouping on the home page. Granted, every item in their list is a news article.

There is no rule that says every item in every group has to be the same type. You can create one large collection that contains different object types and group them by some shared key. You can also manually create groups and just have a collection of groups.

If you follow either of those approaches, the trick is to tell the GridView to use different data templates for different object types. This is accomplished using a DataTemplateSelector. Here is a good blog post on using DataTemplateSelectors in WinRT:

http://www.comyoucom.com/implementing-a-custom-datatemplateselector-in-winrt/