Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I enable Scrollbars on a UWP GridView

Tags:

xaml

gridview

uwp

I have a UWP where I am loading from an XML file and showing it in a GridView and I am trying to enable Scrollbars in a way that allows me to stack and wrap items in all the available space like in the image below. The problem that I am having is that I cannot figure out how to enable the scrollbars so that I can scroll the boxes until I get to the end of the list.

enter image description here

So far I have got it to do what you see in the picture, which is wrapped the way I want but it fills all the available space and doesn't allow you to scroll vertically or horizontally (I only want to scroll one way but I have tried to see if I could go either way). Through a lot of trial and error I was able to get it to scroll one row or one column at a time to the end of the list but that is not the desired result either. Here is where I am with the XAML right now (trimmed down version of the screen shot).

<GridView x:Name="DataGrid1">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid Orientation="Horizontal"
                            ScrollViewer.HorizontalScrollBarVisibility="Visible"
                            ScrollViewer.VerticalScrollBarVisibility="Disabled" />
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
    <GridView.ItemTemplate>
        <DataTemplate>
            <Border Width="270"
                    Height="200"
                    Margin="5"
                    BorderBrush="Black"
                    BorderThickness="2">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="70" />
                        <ColumnDefinition Width="100*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>

                    <StackPanel Grid.Row="0"
                                Grid.Column="0"
                                Grid.ColumnSpan="2"
                                Background="#87CEFA">
                        <TextBlock Margin="2"
                                    HorizontalAlignment="Center"
                                    FontSize="16"
                                    FontWeight="Bold"
                                    Text="{Binding Company}" />
                    </StackPanel>

                    <TextBlock Grid.Row="1"
                                Grid.Column="0"
                                Margin="2"
                                HorizontalAlignment="Right"
                                FontWeight="Bold"
                                Text="Code: " />
                    <TextBlock Grid.Row="1"
                                Grid.Column="1"
                                Margin="2"
                                Text="{Binding Code}" />
                </Grid>
            </Border>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

So what do I need to do to enable the scrollbars the way that I want?

like image 593
Buck Hicks Avatar asked Mar 13 '23 15:03

Buck Hicks


1 Answers

Make sure your GridView is in a Grid and not a StackPanel. It does not expand in a StackPanel. To make it scroll in a StackPanel you have to specify the height of the GridView. This was the issue with mine :)

like image 153
Nitin Avatar answered Mar 24 '23 22:03

Nitin