在WinRT XAML中的GridView项目组内垂直滚动

时间:2012-06-21 09:41:01

标签: windows xaml gridview windows-runtime vertical-scrolling

我使用GridView在WinRT XAML应用程序中显示不同项目组的组。一切都运作良好,除了ItemsPanelTemplate使用一个包装网格,当它在空间外时垂直堆叠我的项目。

所以,我尝试使用StackPanel,就像这样:

<GroupStyle.Panel>
    <ItemsPanelTemplate>
        <StackPanel Orientation="Vertical" Visibility="Visible" />
    </ItemsPanelTemplate>
</GroupStyle.Panel>

项目是垂直堆叠的,这很好,但现在的问题是我无法滚动它们,并且它们不适合屏幕。所以我尝试启用垂直滚动:

<GroupStyle.Panel>
    <ItemsPanelTemplate>
        <StackPanel Orientation="Vertical" Visibility="Visible" 
                    ScrollViewer.VerticalScrollBarVisibility="Visible"
                    ScrollViewer.VerticalScrollMode="Enabled"/>
    </ItemsPanelTemplate>
</GroupStyle.Panel>

但这不起作用。 有关如何在GridView组内完成垂直滚动的任何建议吗?

编辑1:

我也试过这个:

<GroupStyle.Panel>
    <ItemsPanelTemplate>
        <ScrollViewer VerticalScrollBarVisibility="Visible"
                      HorizontalScrollMode="Disabled" 
                      ZoomMode="Disabled" 
                      VerticalScrollMode="Enabled">
              <StackPanel Orientation="Vertical" Visibility="Visible" />
         </ScrollViewer>
     </ItemsPanelTemplate>
 </GroupStyle.Panel>

这会破坏调试器,因为ItemsPanelTemplate需要一个面板作为子项。

4 个答案:

答案 0 :(得分:10)

好的,我终于解决了!可能涉及的人:

<GroupStyle.ContainerStyle>
    <Style TargetType="GroupItem">
        <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="GroupItem">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <ContentPresenter Content="{TemplateBinding Content}" Grid.Row="0"/>
                    <ItemsControl x:Name="ItemsControl2" ItemsSource="{Binding GroupItems}" Grid.Row="1">
                        <ItemsControl.Template>
                        <ControlTemplate>
                            <ScrollViewer x:Name="ScrollViewer" VerticalScrollBarVisibility="Hidden"                                                  VerticalScrollMode="Enabled" HorizontalScrollBarVisibility="Disabled"                                                  HorizontalScrollMode="Disabled">
                            <ItemsPresenter />
                            </ScrollViewer>
                        </ControlTemplate>
                        </ItemsControl.Template>
                    </ItemsControl>
                </Grid>
           </ControlTemplate>
       </Setter.Value>
       </Setter>
   </Style>
</GroupStyle.ContainerStyle>

使用网格确保ScrollViewer正确缩放非常重要。

答案 1 :(得分:2)

这个怎么样?

它呈现如下元素:
项目1项目2
第3项第4项

<ListView Width="200">
    <ListBoxItem>
        <TextBlock>Item 1</TextBlock>
    </ListBoxItem>
    <ListBoxItem>
        <TextBlock>Item 2</TextBlock>
    </ListBoxItem>
    <ListBoxItem>
        <TextBlock>Item 3</TextBlock>
    </ListBoxItem>
    <ListBoxItem>
        <TextBlock>Item 4</TextBlock>
    </ListBoxItem>
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
</ListView>

答案 2 :(得分:0)

我会将您的元素直接放在滚动查看器中。像这样:

<GroupStyle.Panel>
 <ItemsPanelTemplate>
      <ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollMode="Disabled" ZoomMode="Disabled" VerticalScrollMode="Enabled">
            <StackPanel Orientation="Vertical" Visibility="Visible" />
      </ScrollViewer>
 </ItemsPanelTemplate>

我希望这有帮助, 兰斯

答案 3 :(得分:0)

您可能还想将ScrollViewer的ZoomMode设置为Disabled:)

此致