XAML 列表视图滚动答案

【问题标题】：XAML Listview scrollingXAML 列表视图滚动
【发布时间】：2015-04-16 22:52:14
【问题描述】：

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

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

这是屏幕截图的链接。底部的列表其实就是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>

请指教！

【问题讨论】：

标签： xaml listview scroll

【解决方案1】：

ListView 所在的网格行无法确定高度。

<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”和“收藏按钮”。

StackPanel "ListView" 将填满剩余空间。

更新

@Sumchans 好的，我已经厌倦了复制您的问题，而且弹出窗口似乎不在同一个可视化树中（有人可能会对此进行纠正）。您需要以某种方式将“弹出”的高度设置为 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>

【讨论】：

@Sumchans 您能否更新您的问题以显示新代码或创建一个复制问题的小程序，我会看看。
感谢 Steveybrown 的详细解释。我将整个 XAML 更改为您在此处提到的那个。它使代码更加整洁和可读，但它并没有解决我的问题。 listviews 的高度仍然越过屏幕的底部边缘，这是我的主要问题。滑块就像锁定在该位置。你可以通过输入一个特定的数字来移动它，但是当我尝试将它拖到我想要的位置时，它不允许我这样做。我在这里考虑不同的屏幕尺寸，这就是为什么我不想在每个设置中输入一个特定的数字。
另外我正在尝试将弹出窗口设置为加载时的中心，并且即使它增长也保持中心位置。
我已经更新了代码，为了使弹出窗口居中你可以使用link的元素如果这不起作用，请你提供一个重现问题的小程序，我会看看吧。
可以吗，如果我把正在进行的整个工作交给你。只有一个 XAML 文件。 onedrive.live.com/…

【解决方案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}"

【讨论】：

谢谢micbobo，我试试看。
嗨 micbobo，我试过你的代码，现在发生的事情是列表视图根本没有展开。它只是锁定在一个固定的高度。
是的，我认为这就是您想要的。占据整个第 4 行的列表视图能够向下滚动项目？另外，当它所在的堆栈面板位于第 4 行 @Sumchans 时，为什么列表视图会影响到第 1 行？
嗨 micbobo，我刚刚将 maxheight 属性添加到列表视图中，现在可以了。我的意图是将具有列表视图的弹出窗口居中，并且即使数据变大也保持居中。我非常感谢详细的解释。