Scrolling vertically within a group of GridView items in WinRT XAML

Question

I use GridView to display groups of different sets of elements in a WinRT XAML application. Everything works well, except that the ItemsPanelTemplate uses a wrapping grid that removes my elements vertically when it leaves space.

So, I tried using a StackPanel, for example:

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

Elements are arranged vertically, which is great, but the problem is that I cannot scroll them, and they do not fit on the screen. So I tried to enable vertical scrolling:

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

But that does not work. Any suggestions on how to do vertical scrolling inside a GridView group?

EDIT 1:

I 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 off the debugger, because the ItemsPanelTemplate needs a panel as a child.

Answer 1

OK, I finally decided! Who can it relate to:

 <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 is important that you use the Grid to make sure ScrollViewer scales correctly.

Answer 2

How about this?

It displays the following items:
Paragraph 1 Paragraph 2
Paragraph 3 Paragraph 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> 

Answer 3

I would place your items inside the scroll viewer directly. Like this:

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

Hope this helps, Spear

Answer 4

You can also set the ZoomMode ScrollViewer parameter to Disabled :)

Hi