Vasile Doe
Vasile Doe

Reputation: 1754

missing vertical scroll within ListView xaml uwp

am new in UWP and need to do a navigation drawer using SplitView, so my basic layout structure is mentioned below. The problem is that I don't have vertical scroll for list items, maybe I miss some params, any help is appreciated.

 <SplitView
    x:Name="MySplitView"
    DisplayMode="CompactOverlay"
    IsPaneOpen="True"
    CompactPaneLength="50"
    OpenPaneLength="280">

    <!--navigation drawer-->
    <SplitView.Pane>
        <StackPanel
            Background="Gray">

            <StackPanel>

                <ListView
                    x:Name="DrawerListOptions"
                    SelectionChanged="MySelectionChanged"
                    SelectionMode="Single"
                    ScrollViewer.VerticalScrollBarVisibility="Auto">

                    <ListView.ItemTemplate>
                        <DataTemplate>

                                    <TextBlock
                                        Text="{Binding Title}"
                                        FontSize="18"
                                        Margin="5,0,0,0" />


                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>

            </StackPanel>

        </StackPanel>

    </SplitView.Pane>

    <!--page stuff-->
    <SplitView.Content>
         <!--page code-->
    </SplitView.Content>

</SplitView>

Upvotes: 7

Views: 9560

Answers (2)

Antoni
Antoni

Reputation: 93

StackPanel has already a scrollviewer. Just set height in the listView and the scroller will come up. Without height listview doesn't understand that it goes at of the screen. This way you won't need to use a Grid. It worked for me!

Upvotes: 3

Andrii Krupka
Andrii Krupka

Reputation: 4306

At first, change StackPanel to Grid

    <SplitView x:Name="MySplitView"
               PaneBackground="Gray"
               DisplayMode="CompactOverlay"
               IsPaneOpen="True"
               CompactPaneLength="50"
               OpenPaneLength="280">

        <!--navigation drawer-->
        <SplitView.Pane>
            <Grid>
                <ListView x:Name="DrawerListOptions"
                            SelectionChanged="MySelectionChanged"
                            SelectionMode="Single"
                            ScrollViewer.VerticalScrollBarVisibility="Auto">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding Title}"
                                           FontSize="18"
                                           Margin="5,0,0,0" />
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
            </Grid>

        </SplitView.Pane>

        <!--page stuff-->
        <SplitView.Content>
            <!--page code-->
        </SplitView.Content>

    </SplitView>

If this does not help try to setup ScrollViewer.VerticalScrollBarVisibility="Visible"

UPDATE

If you want to place some elements above ListView use Grid.RowDefinitions

        <SplitView.Pane>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                <StackPanel>
                    <!--Other elements-->
                </StackPanel>

                <ListView x:Name="DrawerListOptions"
                          Grid.Row="1"
                          SelectionChanged="MySelectionChanged"
                          SelectionMode="Single"
                          ScrollViewer.VerticalScrollBarVisibility="Visible">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding Title}"
                                           FontSize="18"
                                           Margin="5,0,0,0" />
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
            </Grid>

        </SplitView.Pane>

How it works:

enter image description here

Upvotes: 15

Related Questions