Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 689
Vasile Doe Avatar asked Feb 19 '16 09:02

Vasile Doe


2 Answers

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

like image 122
Andrii Krupka Avatar answered Feb 27 '23 07:02

Andrii Krupka


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!

like image 22
Antoni Avatar answered Feb 27 '23 08:02

Antoni