带水平堆栈面板的列表视图不滚动 windows 10 个通用应用程序

Question

我正在尝试构建一个 4 列列表视图以在 Windows 通用应用程序中显示一些数据。我有以下列表视图，但列表视图不会垂直滚动，尽管有数据可供滚动。我不确定我做错了什么。任何指点或帮助表示赞赏..

XAML代码

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ChennaiTrains"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ViewModel="using:ChennaiTrains.ViewModel"
    xmlns:Model="using:ChennaiTrains.Model"
    x:Class="ChennaiTrains.MainPage"
    xmlns:c="using:ChennaiTrains.Controls"
    mc:Ignorable="d" Loaded="Page_Loaded">

    <Page.BottomAppBar>
        <CommandBar>
            <AppBarButton Icon="Find" Click="AppBarButton_Click"/>
        </CommandBar>
    </Page.BottomAppBar>
    <Page.Background>
        <ImageBrush ImageSource="..\Assets\Images\marina.jpg" Stretch="UniformToFill"></ImageBrush>
    </Page.Background>

    <Grid>

       <Grid x:Name="body">
            <StackPanel>
            <Grid x:Name="titlebar">
            <StackPanel Orientation="Horizontal" Background="Transparent">
                <Button x:Name="menu"
                              VerticalAlignment="{x:Bind VerticalContentAlignment}"
                              HorizontalAlignment="{x:Bind HorizontalContentAlignment}"
                             FontSize="30"
                              FontFamily="Segoe MDL2 Assets"
                              Content="&#xE700;" Click="HamburgerButton_Click"
                          Background="Transparent" Height="42" Visibility="Visible"/>
                <TextBlock x:Name="content"
                      FontSize="25"
                     Text="Chennai Compass" Height="42" Visibility="Visible"
                    VerticalAlignment="{x:Bind VerticalContentAlignment}"
                    HorizontalAlignment="{x:Bind HorizontalContentAlignment}" Margin="0"/>
            </StackPanel>
            </Grid>
            <SplitView x:Name="MySplitView"
        DisplayMode="Inline"
        OpenPaneLength="150"
        CompactPaneLength="50"
        IsPaneOpen="False" Background="Transparent" BorderBrush="Black">
                <SplitView.Pane>

                    <StackPanel Background="Transparent">

                       <!-- <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;"

                    Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click" /> -->

                        <StackPanel Orientation="Horizontal" Background="Transparent">

                            <Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content="&#xE825;"

                        Width="50" Height="50" Background="Transparent" Visibility="Collapsed"/>

                            <TextBlock Text="Button 1" FontSize="18" VerticalAlignment="Center" Visibility="Collapsed" />

                        </StackPanel>

                        <StackPanel Orientation="Horizontal" Background="Transparent">

                            <Button x:Name="MenuButton2" FontFamily="Segoe MDL2 Assets" Content="&#xE10F;"

                        Width="50" Height="50" Background="Transparent" Visibility="Collapsed"/>

                            <TextBlock Text="Button 2" FontSize="18" VerticalAlignment="Center" Visibility="Collapsed" />

                        </StackPanel>

                        <StackPanel Orientation="Horizontal" Background="Transparent">

                            <Button x:Name="MenuButton3" FontFamily="Segoe MDL2 Assets" Content="&#xE1D6;"

                        Width="50" Height="50" Background="Transparent" Visibility="Collapsed"/>

                            <TextBlock Text="Button 3" FontSize="18" VerticalAlignment="Center" Visibility="Collapsed" />

                        </StackPanel>

                    </StackPanel>
                </SplitView.Pane>
                <Grid>
                    <AutoSuggestBox AllowDrop="True" x:Name="fromTextBox"
                PlaceholderText="Enter the starting point"
                QueryIcon="Find" TextChanged="DestinationBox_TextChanged"
                SuggestionChosen="AutoSuggestBox_SuggestionChosen"
                QuerySubmitted="AutoSuggestBox_QuerySubmitted"    
                TextMemberPath="StationName"
                >
                        <AutoSuggestBox.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Margin="2">
                                    <TextBlock Text="{Binding StationName}" />
                                </StackPanel>
                            </DataTemplate>
                        </AutoSuggestBox.ItemTemplate>
                        <AutoSuggestBox.DataContext>
                            <ViewModel:AutoSuggestBoxVM/>
                        </AutoSuggestBox.DataContext>
                    </AutoSuggestBox>

                    <AutoSuggestBox x:Name="DestinationBox"
                QueryIcon="Find"
                DisplayMemberPath="{Binding StationList.StationName}"
                TextMemberPath="StationName"
                TextChanged="DestinationBox_TextChanged"
                SuggestionChosen="DestinationBox_SuggestionChosen"
                PlaceholderText="Enter the destination" Margin="0,60,0,0">
                        <AutoSuggestBox.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Margin="2">
                                    <TextBlock Text="{Binding StationName}" />
                                </StackPanel>
                            </DataTemplate>
                        </AutoSuggestBox.ItemTemplate>
                        <AutoSuggestBox.DataContext>
                            <ViewModel:AutoSuggestBoxVM/>
                        </AutoSuggestBox.DataContext>
                    </AutoSuggestBox>

                        <Grid x:Name="resultGrid"  Margin="0,140,2,0">

                            <ListView x:Name="resultsList" ScrollViewer.VerticalScrollBarVisibility="Auto"
   ScrollViewer.VerticalScrollMode="Enabled" >
                              <ListView.ItemContainerStyle>
                        <Style TargetType="ListViewItem">
                            <Setter Property="Margin" Value="5"/>
                            <Setter Property="Padding" Value="15"/>
                        </Style>
                    </ListView.ItemContainerStyle>
                            <ListView.Resources>
                                <DataTemplate x:Key="TimeTemplate">


                                            <Grid Background="Transparent">
                                                <Grid.RowDefinitions>
                                                    <RowDefinition Height="Auto" />
                                                    <RowDefinition Height="*"/>
                                                </Grid.RowDefinitions>
                                                <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" Grid.Row="0">

                                                    <TextBlock Text="Start at:" Margin="0,0,5,0"></TextBlock>
                                                    <TextBlock x:Name="startAt"  Text="{Binding Time}" />
                                                    <TextBlock FontFamily="Segoe MDL2 Assets" Margin="20,0,5,0" Text="&#xE121;">

                                                    </TextBlock>
                                                    <TextBlock x:Name="duration" Text="{Binding Duration}"/>
                                                    <TextBlock Text="Reach by:" Margin="-212,35,0,0"></TextBlock>
                                                        <TextBlock x:Name="EndPoint" Margin="-145,35,0,0" Text="{Binding DestinationTime}"  />
                                                        <TextBlock FontFamily="Segoe MDL2 Assets"
                                                               Text="&#xEB4D;"
                                                               Margin="-75,35,0,0"></TextBlock>
                                                        <TextBlock x:Name="trainType" Margin="-55,35,0,0" Text="{Binding TrainType}"  />
                                                    </StackPanel>

                                            </Grid>



                                </DataTemplate>
                            </ListView.Resources>
                            <ListView.HeaderTemplate>
                                <DataTemplate>
                                    <TextBlock x:Name="headerText" Text="Next available Trains"/>
                                </DataTemplate>
                            </ListView.HeaderTemplate>
                            <ListView.ItemTemplate>
                                <StaticResource ResourceKey="TimeTemplate"/>
                            </ListView.ItemTemplate>
                            <ListView.DataContext>
                                <Model:ResultListModel/>
                            </ListView.DataContext>
                        </ListView>
                    </Grid>
                </Grid>
            </SplitView>
          </StackPanel>
        </Grid>
    </Grid>
</Page>

Answer 1

您的问题是包含 titlebar 和 SplitView 的 StackPanel。 StackPanel 中的内容并不局限于任何 space，它会一直延伸下去。在您的情况下，这意味着 SplitView 并且因此其中的 ListView 永远伸展。如果不受限制，ListView 认为它不需要滚动。

解决方法是改用 Grid 和 Rows。我会将 Grid RowDefinitions 添加到您的 body Grid 中，第 0 行中的 titlebar 和第 1 行中的 SplitView 并删除 [=21= 中的 StackPanel ].这将使您的滚动工作。解释你的代码，行定义看起来像这样

    <Grid x:Name="body">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>

        <Grid x:Name="titlebar" Grid.Row="0">
        </Grid>

        <SplitView x:Name="MySplitView" Grid.Row="1">
        </SplitView>

    </Grid>

带水平堆栈面板的列表视图不滚动 windows 10 个通用应用程序

Listview with Horizontal stack panel not scrolling windows 10 universal app

windows

win-universal-app

windows-10