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

Question

我在WinRT XAML应用程序中使用GridView来显示不同集合的组。除了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需要一个面板作为子元素。

- Igor Ralic

Answer 1

好的，我终于解决了！对于可能感兴趣的人：

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

使用Grid来确保ScrollViewer正确缩放非常重要。

- Igor Ralic

---

你的滚动视图为什么无法正确缩放！我在网格中放置了一个水平流的ListView。整个ListView都会滚动，而不是单独的列。 - akshay2000

好的，没错。这就是你要做的事情。基本上，将你的滚动视图器停靠在网格中，这样它的高度就被设置了，你可以在其中滚动。 - Jerry Nixon

XamlCompiler 警告 WMC1500：'ContainerStyle' 已被弃用：ContainerStyle 在 Windows 8.1 之后的版本可能会被更改或不可用，并且不支持 ItemsControl.GroupStyle。 - Bos

谢谢您的回答，我还需要设置 Grid 的 MaxHeight 以使滚动条正常工作。 - Marc_Alx

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

- Luis Cantero

Answer 3

我会直接将你的元素放在一个滚动查看器中。就像这样：

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

希望这可以帮到你， Lance

- Lance McCarthy

---

谢谢您的回复。我也尝试过这个方法，但它会破坏调试器，因为ItemsPanelTemplate需要一个面板作为子元素。 - Igor Ralic

如果您添加一个额外的缓冲网格或StackPanel来容纳ScrollViewer，那么这应该可以满足模板要求，并且对用户来说看起来仍然是一样的。ItemsPanelTemplate > Stackpanel > Scrollviewer > Stackpanel - Lance McCarthy

@LanceMcCarthy 那也行不通。你仍然会遇到调试器中断。 - akshay2000

Answer 4

你还可以将ScrollViewer的ZoomMode设置为Disabled :)

谢谢！

- Jonathan ANTOINE