Scrolling of GridView on Windows Store Apps

StackOverflow https://stackoverflow.com/questions/22532599

  •  18-06-2023
  •  | 
  •  

Question

I have the following design concept for a Windows Store App, but I'm stuck at the best way to implement this:

Initial view when page is loaded

The red rectangle indicates the view of the page on an actual device. The page consist of a header Grid on the left, and a GridView on the right. What I want to achieve is, when the user performs a swipe gesture, instead of scrolling on the GridView, I hope that the entire page is scrolled, just like this:

enter image description here

I have managed to achieve this by using the following method:

<ScrollViewer HorizontalScrollMode="Enabled">
      <Grid>
          <Grid.ColumnDefinitions>
                <ColumnDefinition Width="600" />
                <ColumnDefinition Width="*" />
          </Grid.ColumnDefinitions>
          <Grid x:Name="LeftHeaderPanel" />
          <GridView Grid.Column="1"  ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.VerticalScrollMode="Disabled" />
      </Grid>
</ScrollViewer>

However, for some reason unknown to me, the GridViewItems within the GridView are displayed like a StackPanel after I set it this way, which means that the items no longer stack horizontally -- instead they now stacked vertically.

I have also discovered that by setting the Height attribute on the GridView control will solve the problem, but I'm trying to avoid the need to explicitly specify the height of my control. Is there any way out? Thanks!

Was it helpful?

Solution

Try this : below code works for me

Use HorizontalScrollBarVisibility and VerticalScrollBarVisibility instead of HorizontalScrollMode VerticalScrollMode

<ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="600" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid x:Name="LeftHeaderPanel" />
            <GridView Grid.Column="1"  ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled"/>
        </Grid>
 </ScrollViewer>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top