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>
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:
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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With