在WinRT XAML中的GridView组内的垂直滚动 [英] Vertical scrolling inside GridView group of items in WinRT XAML

问题描述

我使用GridView在WinRT XAML应用程序中显示不同组项目。一切正常，除了ItemsPanelTemplate使用了一个包裹网格，当它的空间不足时，它会垂直堆叠我的物品。

所以，我尝试使用StackPanel，如下所示：

/ p>

 < GroupStyle.Panel> 
< ItemsPanelTemplate> 
< StackPanel Orientation =VerticalVisibility =Visible/> 
< / ItemsPanelTemplate> 
   

这些项目是垂直堆叠的，这很好，但问题是现在我无法滚动他们，他们不适合在屏幕上。所以我尝试启用垂直滚动功能：

 < GroupStyle.Panel> 
< ItemsPanelTemplate> 
< StackPanel Orientation =VerticalVisibility =Visible
 ScrollViewer.VerticalScrollBarVisibility =Visible
 ScrollViewer.VerticalScrollMode =Enabled/> 
< / ItemsPanelTemplate> 
   

但这不起作用。
如何在GridView组中完成垂直滚动的任何建议？

编辑1：

我也试过这个：

 < GroupStyle.Panel> 
< ItemsPanelTemplate> 
< ScrollViewer VerticalScrollBarVisibility =Visible
 Horizo​​ntalScrollMode =Disabled
 ZoomMode =Disabled
 VerticalScrollMode =Enabled> 
< StackPanel Orientation =VerticalVisibility =Visible/> 
< / ScrollViewer> 
< / ItemsPanelTemplate> 
   

这打破了调试器，因为ItemsPanelTemplate需要面板作为子元素。

解决方案

好的，我终于解决了！可能涉及的人：

 < GroupStyle.ContainerStyle> 
< Style TargetType =GroupItem> 
< Setter Property =Template> 
< Setter.Value> 
< ControlTemplate TargetType =GroupItem> 
<网格> 
< Grid.RowDefinitions> 
< RowDefinition Height =Auto/> 
< RowDefinition Height =*/> 
< /Grid.RowDefinitions> 
< ContentPresenter Content ={TemplateBinding Content}Grid.Row =0/> 
< ItemsControl x：Name =ItemsControl2ItemsSource ={Binding GroupItems}Grid.Row =1> 
< ItemsControl.Template> 
< ControlTemplate> 
< ScrollViewer x：Name =ScrollViewerVerticalScrollBarVisibility =HiddenVerticalScrollMode =EnabledHorizo​​ntalScrollBarVisibility =DisabledHorizo​​ntalScrollMode =Disabled> 
< ItemsPresenter /> 
< / ScrollViewer> 
< / ControlTemplate> 
< /ItemsControl.Template> 
< / ItemsControl> 
< / Grid> 
< / ControlTemplate> 
 < / Setter> 
< / style> 
   

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

I am using GridView for displaying groups of different sets of items in a WinRT XAML app. Everything works well, except that the ItemsPanelTemplate uses a wrapping grid which stacks my items vertically when it's out of space.

So, I tried to use StackPanel, like this:

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

The items are stacked vertically, and that's great, but the problem is now that I can't scroll them, and they don't fit on the screen. So I tried enabling vertical scrolling:

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

But that doesn't work. Any suggestions how to accomplish vertical scrolling inside GridView group?

EDIT 1:

I have also tried this:

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

This breaks the debugger as the ItemsPanelTemplate needs a panel as a child.

解决方案

OK, I finally solved it! To whom it may concern:

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

It's important that you use the Grid to make sure that the ScrollViewer scales correctly.

这篇关于在WinRT XAML中的GridView组内的垂直滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！