ListView xaml uwp中缺少垂直滚动答案

【问题标题】：missing vertical scroll within ListView xaml uwpListView xaml uwp中缺少垂直滚动
【发布时间】：2016-02-19 09:15:26
【问题描述】：

我是UWP新手，需要用SplitView做一个抽屉式导航，所以我的基本布局结构如下。问题是我没有列表项的垂直滚动，也许我错过了一些参数，感谢任何帮助。

 <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>

【问题讨论】：

记住一点很简单，堆栈面板会阻止滚动。

标签： xaml win-universal-app

【解决方案1】：

首先将StackPanel改为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>

如果这没有帮助尝试设置ScrollViewer.VerticalScrollBarVisibility="Visible"

更新

如果您想在ListView 上方放置一些元素，请使用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>

它是如何工作的：

【讨论】：

是的，它可以工作，但如果我需要将Button(toogle 按钮) 放在顶部，那么ListView 我必须使用这个StackPanel 将元素按所需顺序放置，因为Grid 只是将我的按钮放在中间，xaml 不提供任何 below 参数
正如@Vagif Abilov 提到的here 这种方法不能按预期工作，如果删除Grid.RowDefinitions 滚动有效但列表覆盖按钮
已修复它，因此删除Grid.RowDefinitions 并将Margin="0,myButtonHeight,0,0" 设置为我的“ListView”，现在列表位于按钮下方，不是最佳解决方案，但正在运行。无论如何，我会把你的答案标记为正确的。
@VasileDoe 我不知道你做错了什么，但我没有任何问题。我更新了答案并放了图片
对不起。如何制作 GIF 动画？

【解决方案2】：

StackPanel 已经有一个滚动查看器。只需在 listView 中设置高度，滚动条就会出现。没有高度列表视图不明白它在屏幕上。这样你就不需要使用网格了。它对我有用！

【讨论】：