ListView无法滚动

时间:2018-09-11 10:42:07

标签: xaml listview layout uwp scrollbar

我有一个问题似乎很普遍,已经被问了很多,但是我找不到解决我问题的解决方案。

所以我尝试在一页中使用3个列表视图,所有列表都应有标题和说明图像,但不要在一个页面中设计全部3 个列表视图我将一个带有图片和标题的列表视图外包给一个控件,该页面用于我的页面。

将3个控件放置在网格中。 列表视图项满后,如果剩余空间不足,但不会显示,则滚动条应该可见。

我提供了一个沙箱项目,就像我正在处理的应用程序一样,在其中放置了控件等。 SampleProject

您只需要按Start即可填充列表视图。但是它们不显示滚动条。

谢谢!

编辑1: 根据要求,我在下面分享我的代码。如果您打开示例项目,则在进行第二次编辑之前无需进一步阅读。

包含列表视图的控件:

<Grid>
    <Grid x:Name="Section"
        HorizontalAlignment="Stretch">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid x:Name="grdTitleArea"
            HorizontalAlignment="Stretch"
            Height="50">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <BitmapIcon 
                VerticalAlignment="Center"
                HorizontalAlignment="Center"
                Tapped="grdTitleArea_Tapped"
                UriSource="ms-appx:///Assets/area.png"
                Height="40" />
            <TextBlock
                VerticalAlignment="Center"
                HorizontalAlignment="Stretch"
                Tapped="grdTitleArea_Tapped"
                Text="Area"
                Grid.Column="1" />
        </Grid>

        <!--<ScrollViewer 
            VerticalAlignment="Stretch"
            VerticalScrollBarVisibility="Auto"
            VerticalScrollMode="Enabled"
            HorizontalAlignment="Stretch"
            HorizontalContentAlignment="Stretch"
            HorizontalScrollBarVisibility="Hidden"
            HorizontalScrollMode="Disabled"
            >-->
            <ListView x:Name="ListView" 
                ScrollViewer.VerticalScrollBarVisibility="Visible"
                ScrollViewer.VerticalScrollMode="Auto"
                Grid.Row="1">
                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="HorizontalAlignment" Value="Stretch"/>
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                    </Style>
                </ListView.ItemContainerStyle>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Grid
                        VerticalAlignment="Stretch"
                        HorizontalAlignment="Stretch"
                        BorderThickness="1"
                        Margin="1"
                        Height="50">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <TextBlock Text="{Binding ActionDescription}"
                                   HorizontalAlignment="Stretch"
                                   VerticalAlignment="Stretch" />
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        <!--</ScrollViewer>-->
    </Grid>
</Grid>

包含3次以上控件的控件:

<Grid x:Name="ProgressControl">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <local:SynchronizeSettingsControl
                Visibility="Visible"
                x:Name="Settings" />
            <local:SynchronizeSectionControl
                x:Name="ActualAction"
                Visibility="Visible"
                Grid.Row="1" />
            <local:SynchronizeSectionControl
                x:Name="Error"
                Visibility="Visible"
                Grid.Row="2" />
            <local:SynchronizeSectionControl
                x:Name="Log"
                Visibility="Visible"
                Grid.Row="3" />
        </Grid>

包含控件的页面,该控件包含listview:

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="50" />
            <RowDefinition Height="*" />
            <RowDefinition Height="50"/>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Column="1" 
                Text="Demo" 
                HorizontalAlignment="Center" 
                VerticalAlignment="Center" />
        </Grid>
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Button Grid.Column="0" Width="70" 
                VerticalAlignment="Stretch" 
                Content="Useless Button" />
        </Grid>
        <Controls:SynchronizeControl
            x:Name="ctlSync"
            Grid.Row="2"
            VerticalAlignment="Stretch"
            HorizontalAlignment="Stretch" />
    <Button VerticalAlignment="Stretch" HorizontalAlignment="Stretch" 
            x:Name="btnStart" 
            Content="Start" 
            Tapped="btnStart_Tapped"
            Grid.Row="3" />            
    </Grid>

2 个答案:

答案 0 :(得分:3)

问题是您在页面中使用了Auto高度。这基本上意味着页面告诉local:SynchronizeSectionControl控件:“您可以使用任意高度”。

然后控件将*作为第二行的高度,这意味着“使用剩余的可用空间”。但是由于页面实际上提供了“无限的高度”,因此ListView的高度将尽可能地伸展以容纳所有项目,因此它不会滚动,因为它的高度足以显示所有内容,尽管它可以被截断并且不可见,因为窗口高度当然是有限的。

答案 1 :(得分:2)

问题是您使用了Auto属性作为控件中行的高度。

这很好用,因为您使用的控件使用了一定的空格。像一个按钮或类似的东西。但是,当控件可以无限期扩展时,空间分配就会搞砸了。

基本上,该控件以其最大尺寸显示,但延伸到其边界之外。

使用*作为“高度”值时,可以防止这种情况。 这将导致控件占用所有可用空间。您可以使用MaxHeight属性来进一步限制。

如果这样做,它将在必要时显示滚动查看器,甚至在更改窗口大小时也将调整大小。