Windows 8 windows 8集线器页面上的多个网格视图_Windows 8_Windows Runtime_Winrt Xaml

Windows 8 windows 8集线器页面上的多个网格视图

windows-8 windows-runtime

Windows 8 windows 8集线器页面上的多个网格视图,windows-8,windows-runtime,winrt-xaml,Windows 8,Windows Runtime,Winrt Xaml,我目前正在为我的应用程序构建一个中心页面。此页面设计为具有多个列，每个列下面都有一个标题和一个gridview。但是，每个列gridview都填充了来自我的视图模型的不同数据集。我成功地填充了网格视图，但我看到的是水平滚动不起作用，因此我无法查看中心页面上的所有信息。基本上，用户不能水平平移使用分组数据gridview是实现这一目标的唯一方法吗我还应该说，我曾尝试使用Scrollviewer，但它似乎将我的gridview压缩了，因为它只在每个gridview的一列中显示我的数据请参阅下面

我目前正在为我的应用程序构建一个中心页面。此页面设计为具有多个列，每个列下面都有一个标题和一个gridview。但是，每个列gridview都填充了来自我的视图模型的不同数据集。我成功地填充了网格视图，但我看到的是水平滚动不起作用，因此我无法查看中心页面上的所有信息。基本上，用户不能水平平移

使用分组数据gridview是实现这一目标的唯一方法吗

我还应该说，我曾尝试使用Scrollviewer，但它似乎将我的gridview压缩了，因为它只在每个gridview的一列中显示我的数据

请参阅下面我当前的XAML代码。谢谢并期待您的回复

<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>

设计指南非常小心地指出了将多个控件嵌套在彼此内部的问题，这些控件以相同甚至不同的方向滚动。不仅一个控件从另一个控件获取事件时会出现问题，而且内容移动的方式可能无法确定，并且会让用户感到沮丧

听起来您可能正在尝试在Windows Phone上实现类似于全景控件的功能？目前在Windows 8上没有这样的控件。创建全景图是为了通过模拟更宽的屏幕在小屏幕上显示大量数据。带有停止点的ScrollViewer可以在Windows 8中执行类似的操作，但不完全相同

我会花一些时间坐下来思考屏幕的设计，确保这就是你想要的交互。看看像《今日美国》这样的应用程序，看看它们是如何在主页上处理分组的。当然，他们名单上的每一项都是新闻

没有规则规定每个组中的每个项目都必须是相同的类型。您可以创建一个包含不同对象类型的大型集合，并通过某个共享键对它们进行分组。您还可以手动创建组，只需创建组集合

如果您采用这两种方法中的任何一种，诀窍就是告诉GridView为不同的对象类型使用不同的数据模板。这是使用DataTemplateSelector完成的。下面是一篇关于在WinRT中使用DataTemplateSelector的好博客：

嘿，杰瑞德，谢谢你的回复。你提到的一切都是我思考的过程。我试图避免创建自定义的分组集合，但这样做似乎值得付出额外的努力。这样，我也可以遵守设计指南。我将查看您发送给我的datatemplateselector链接。再次感谢，没问题。您可能希望使用网格模板创建一个新项目，并查看SampleDataSource.cs。在该文件中，您将找到一个名为SampleDataGroup的类。组只有项目，所以不需要太复杂。也可以使用LINQ:Groups=from i在musicItems group i by i.Artister to g orderby g动态创建组。键选择g；更多信息：嗨，杰瑞德，谢谢你的回复。你提到的一切都是我思考的过程。我试图避免创建自定义的分组集合，但这样做似乎值得付出额外的努力。这样，我也可以遵守设计指南。我将查看您发送给我的datatemplateselector链接。再次感谢，没问题。您可能希望使用网格模板创建一个新项目，并查看Sa mpleDataSource.cs。在该文件中，您将找到一个名为SampleDataGroup的类。组只有项目，所以不需要太复杂。也可以使用LINQ:Groups=from i在musicItems group i by i.Artister to g orderby g动态创建组。键选择g；更多信息请点击此处：