CODEWITHSUNDEEP
gridviewuwp
FVen
FVen

Reputation: 53

How can I have a gridview work horizontally in UWP?

I have a Gridview where I want items to be grouped and flow horizontally. The groups are still vertically scrolling. How can I fix this?

Upvotes: 0

Views: 2830

Answers (2)

Martin Tirion
Martin Tirion

Reputation: 1236

The ItemsPanelTemplate is the one that determines the layout of items. Usually an ItemsWrapGrid is used for a GridView. That control has a property called MaximumRowsOrColumns. Set that to the number of rows you want as a max on a page. The data is then always in a horizontal layout. You can add something like this:

        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <ItemsWrapGrid MaximumRowsOrColumns="3"/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>

Upvotes: 3

Grace Feng
Grace Feng

Reputation: 16652

The groups are still vertically scrolling. How can I fix this?

I think you have done the "group-items" part work. So your problem is how to make the grouped items lay horizontal and make the GridView can horizontally scroll. To do this, you can set the ItemsWrapGrid of the GridView to vertical Orientation, for example like this:

<GridView ItemsSource="{Binding Source={StaticResource cvs}}" ScrollViewer.HorizontalScrollBarVisibility="Visible"
          ScrollViewer.HorizontalScrollMode="Enabled">
    <GridView.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <TextBlock x:Name="Header" FontSize="15" FontWeight="Bold" Text="{Binding Key}" />
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
        </GroupStyle>
    </GridView.GroupStyle>
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid Orientation="Vertical" />
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
</GridView>

Upvotes: 1

Related Questions