XAML 列表视图滚动

Question

我在列表视图控件上滚动时遇到了一个小问题。

我试图在列表视图中的列表到达设备底部边缘时打开滚动选项。现在列表视图出现在我的应用程序的弹出控件上，我尝试了将列表视图的高度绑定到主页网格等设置，但没有用。

这是屏幕截图的 link。最下面的列表其实就是listview控件。

这里是 XAML，它有列表视图和弹出控件上的其他控件：

<Popup x:Name="setShiftPopup" Width="350" Height="Auto">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Border x:Name="borderMainPopup" Grid.Row="0" Grid.RowSpan="5" Background="#FFE4E4E4" CornerRadius="15" BorderThickness="2"/>
                <Border Grid.Row="0" Background="#FF0B6CF8" BorderThickness="2" Margin="0,0,-2,0" CornerRadius="10"/>
                <StackPanel x:Name="Header" Grid.Row="0">
                    <TextBlock x:Name="tbSelectedDatePopup" Grid.Row="0" Margin="21,10,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" FontSize="20" Foreground="#FFF7F0EF"/>
                </StackPanel>
                <StackPanel x:Name="SliderOne" Grid.Row="1" Orientation="Vertical">
                    <Slider x:Name="sliderShiftStartPopup" ValueChanged="sliderShiftStartEndPopup_ValueChanged" Margin="48,26,44,9.5" Maximum="48" LargeChange="0" SmallChange="0" Style="{StaticResource SliderShiftStartStyle}" FontFamily="Global User Interface"/>

                </StackPanel>
                <StackPanel x:Name="SliderTwo" Grid.Row="2">
                    <Slider x:Name="sliderShiftEndPopup" ValueChanged="sliderShiftStartEndPopup_ValueChanged"  Grid.Row="1" Margin="48,13.5,44,80.333" Maximum="48" LargeChange="0" SmallChange="0" Style="{StaticResource SliderShiftEndStyle}" FontFamily="Global User Interface" Value="48"/>
                </StackPanel>
                <StackPanel x:Name="Favbutton" Grid.Row="3">
                    <Button x:Name="btnAddToFas" Click="btnAddToFas_Click" Grid.Column="0"  Grid.ColumnSpan="2" HorizontalAlignment="Stretch" Style="{StaticResource btnOnPopup}"/>
                </StackPanel>
                <StackPanel x:Name="ListView" Grid.Row="4">
                    <ListView x:Name="lvFASList" ItemsSource="{Binding theFasListOC}" Foreground="Red" FontSize="40" Grid.Row="1" ShowsScrollingPlaceholders="False">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock x:Name="theShift" Text="{Binding theShift}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="17"/>
                                    <Button x:Name="btnDeleteShift" Click="btnDeleteShift_Click" Content="X" HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Height="Auto" FontFamily="Global User Interface"/>
                                </StackPanel>
                             </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </StackPanel>
            </Grid>
        </Popup>

请指教！

Answer 1

您的ListView 所在的Grid Row 无法确定高度。

<Popup x:Name="setShiftPopup" Width="350" Height="Auto">
    <Grid Width="{Binding ElementName=setShiftPopup, Path=Width}" Height="{Binding ElementName=setShiftPopup, Path=Height}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Border x:Name="borderMainPopup" Grid.Row="0" Grid.RowSpan="2" Background="#FFE4E4E4" Width="{Binding Width, ElementName=setShiftPopup}" Height="{Binding Height, ElementName=setShiftPopup}" CornerRadius="15" BorderThickness="2">
            <Grid Margin="8.333,67.333,7.5,7.5">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto" MinHeight="160.833"/>
                    <RowDefinition Height="Auto" MinHeight="68.357"/> // Overflowing due to this set of Auto. 
                </Grid.RowDefinitions>
                <Slider x:Name="sliderShiftStartPopup" ValueChanged="sliderShiftStartEndPopup_ValueChanged" Grid.Row="0" Margin="48,26,44,9.5" Maximum="48" LargeChange="0" SmallChange="0" Style="{StaticResource SliderShiftStartStyle}" Grid.RowSpan="1" FontFamily="Global User Interface"/>
                <Slider x:Name="sliderShiftEndPopup" ValueChanged="sliderShiftStartEndPopup_ValueChanged"  Grid.Row="1" Margin="48,13.5,44,80.333" Maximum="48" LargeChange="0" SmallChange="0" Style="{StaticResource SliderShiftEndStyle}" FontFamily="Global User Interface" Value="48"/>
                <Grid x:Name="gridFASListAndSetButtons" Grid.Row="1" Margin="0,85.5,0,-5.31" Grid.RowSpan="2">
                    <Grid.RowDefinitions>
                        <RowDefinition/> // This row does not have a set height and it cant be determined from the parent
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Grid Grid.Row="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Button x:Name="btnAddToFas" Click="btnAddToFas_Click" Grid.Column="0"  Grid.ColumnSpan="2" HorizontalAlignment="Stretch" Style="{StaticResource btnOnPopup}"/>
                    </Grid>
                    <ListView x:Name="lvFASList" ScrollViewer.VerticalScrollBarVisibility="Auto" ItemsSource="{Binding theFasOC}" Foreground="Red" FontSize="40" Grid.Row="1" ShowsScrollingPlaceholders="False">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                               <Grid>
                                  <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                  </Grid.ColumnDefinitions>
                                  <TextBlock Grid.Column="0" x:Name="theShift" Text="{Binding theShift}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="17"/>
                                  <Button Grid.Column="1" x:Name="btnDeleteShift" Content="X" HorizontalAlignment="Center" VerticalAlignment="Center" Width="50" Height="50"/>
                                </Grid>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </Grid>
            </Grid>
        </Border>
        <Border Grid.Row="0" Width="{Binding Width, ElementName=borderMainPopup}" Height="Auto" BorderThickness="2" Margin="0,0,-2,0">
            <Border.Background>
                <SolidColorBrush Color="#FF0B6CF8"/>
            </Border.Background>
            <TextBlock x:Name="tbSelectedDatePopup" Grid.Row="0" Margin="21,10,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" FontSize="20" Foreground="#FFF7F0EF"/>
        </Border>
    </Grid>
</Popup>

这里是一些应该有用的简化代码，如果您还有问题，请告诉我。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/> // For the header
        <RowDefinition Height="Auto"/> // Slider one
        <RowDefinition Height="Auto"/> // Slider two
        <RowDefinition Height="Auto"/> // Favs button
        <RowDefinition Height="*"/> // Listview
    </Grid.RowDefinitions>

    <StackPanel x:Name="Header" Grid.Row="0">


    </StackPanel>
    <StackPanel x:Name="SliderOne" Grid.Row="1">


    </StackPanel>
    <StackPanel x:Name="SliderTwo" Grid.Row="2">


    </StackPanel>

    <StackPanel x:Name="Favbutton" Grid.Row="3">


    </StackPanel>

    <StackPanel x:Name="ListView" Grid.Row="3">
        // Your ListView
    </StackPanel>

</Grid>

网格可以放在每个 StackPanel 中，或者您可以将 StackPanel 换成网格。这个xaml会给你一个类似于下图的布局，图中每个蓝色单元格的高度将由每个蓝色StackPanel中内容的累积高度决定，即"Header"，"SliderOne"、"SliderTwo" 和 "Favbutton"。

StackPanel "ListView" 将填充剩余的 space。

更新

@Sumchans 好吧，我已经厌倦了复制你的问题，而且 Popup 似乎不在同一个可视化树中（有人可能会就此纠正我）。您需要以某种方式将 'Popup' 的高度设置为 Auto 以外的其他值，以达到您想要的结果。

实现此目的的一种方法是将高度绑定到最外层的元素。很可能是一个网格，见下文。

<Grid x:Name="MyMostOuterControl" >


... <!-- The rest of you controls -->


<Popup x:Name="setShiftPopup" Width="350" Height="{Binding ActualHeight, ElementName=MyMostOuterControl}">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Border x:Name="borderMainPopup" Grid.Row="0" Grid.RowSpan="5" Background="#FFE4E4E4" CornerRadius="15" BorderThickness="2"/>
                <Border Grid.Row="0" Background="#FF0B6CF8" BorderThickness="2" Margin="0,0,-2,0" CornerRadius="10"/>
                <StackPanel x:Name="Header" Grid.Row="0">
                    <TextBlock x:Name="tbSelectedDatePopup" Grid.Row="0" Margin="21,10,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" FontSize="20" Foreground="#FFF7F0EF"/>
                </StackPanel>
                <StackPanel x:Name="SliderOne" Grid.Row="1" Orientation="Vertical">
                    <Slider x:Name="sliderShiftStartPopup" ValueChanged="sliderShiftStartEndPopup_ValueChanged" Margin="48,26,44,9.5" Maximum="48" LargeChange="0" SmallChange="0" Style="{StaticResource SliderShiftStartStyle}" FontFamily="Global User Interface"/>

                </StackPanel>
                <StackPanel x:Name="SliderTwo" Grid.Row="2">
                    <Slider x:Name="sliderShiftEndPopup" ValueChanged="sliderShiftStartEndPopup_ValueChanged"  Grid.Row="1" Margin="48,13.5,44,80.333" Maximum="48" LargeChange="0" SmallChange="0" Style="{StaticResource SliderShiftEndStyle}" FontFamily="Global User Interface" Value="48"/>
                </StackPanel>
                <StackPanel x:Name="Favbutton" Grid.Row="3">
                    <Button x:Name="btnAddToFas" Click="btnAddToFas_Click" Grid.Column="0"  Grid.ColumnSpan="2" HorizontalAlignment="Stretch" Style="{StaticResource btnOnPopup}"/>
                </StackPanel>
                <StackPanel x:Name="ListView" Grid.Row="4">
                    <ListView x:Name="lvFASList" ItemsSource="{Binding theFasListOC}" Foreground="Red" FontSize="40" Grid.Row="1" ShowsScrollingPlaceholders="False">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock x:Name="theShift" Text="{Binding theShift}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="17"/>
                                    <Button x:Name="btnDeleteShift" Click="btnDeleteShift_Click" Content="X" HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Height="Auto" FontFamily="Global User Interface"/>
                                </StackPanel>
                             </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </StackPanel>
            </Grid>
        </Popup>
</Grid>

Answer 2

我认为问题出在您没有为您的列表视图设置正确的高度。你说当你的列表视图在弹出窗口中时，你试图给它提供主页的高度？

如果列表视图在弹出窗口中，您需要为其指定弹出窗口的高度。否则，它将太大，您将无法访问最后的元素。

我还注意到您的列表视图是一行的一部分。假设您的弹出窗口的高度为 1200，堆栈面板的前 4 行总高度为 600。您的列表视图（以及最后一行）将需要的高度为600 或更少。

您需要确定列表视图所需的确切高度。在这种情况下，由于您的行的高度为“*”，我建议您这样做：

<Grid x:Name = "GridListView" Grid.Row = "4">
    <StackPanel x:Name="ListView">
        <ListView x:Name="lvFASList" ItemsSource="{Binding theFasListOC}" Foreground="Red" FontSize="40" Grid.Row="1" Height ="{Binding ElementName=GridListView, Path=ActualHeight}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock x:Name="theShift" Text="{Binding theShift}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="17"/>
                        <Button x:Name="btnDeleteShift" Click="btnDeleteShift_Click" Content="X" HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Height="Auto" FontFamily="Global User Interface"/>
                    </StackPanel>
                 </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackPanel>
</Grid>

几乎可以让您获得列表视图所在的网格的高度（这就是您将堆栈面板放在新网格中的原因 <Grid Grid.Row ="4" x:Name="GridListView"）。然后对应设置高度Height="{Binding ElementName=GridListView, Path=ActualHeight}"

XAML 列表视图滚动

XAML Listview scrolling

xaml

listview

scroll