7
votes

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>
2
Simple thing to remember, Stack Panel kills scrolling. - NSNoob

2 Answers

15
votes

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

3
votes

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!