我有一个问题似乎很普遍,已经被问了很多,但是我找不到解决我问题的解决方案。
所以我尝试在一页中使用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>
答案 0 :(得分:3)
问题是您在页面中使用了Auto
高度。这基本上意味着页面告诉local:SynchronizeSectionControl
控件:“您可以使用任意高度”。
然后控件将*
作为第二行的高度,这意味着“使用剩余的可用空间”。但是由于页面实际上提供了“无限的高度”,因此ListView
的高度将尽可能地伸展以容纳所有项目,因此它不会滚动,因为它的高度足以显示所有内容,尽管它可以被截断并且不可见,因为窗口高度当然是有限的。
答案 1 :(得分:2)
问题是您使用了Auto
属性作为控件中行的高度。
这很好用,因为您使用的控件使用了一定的空格。像一个按钮或类似的东西。但是,当控件可以无限期扩展时,空间分配就会搞砸了。
基本上,该控件以其最大尺寸显示,但延伸到其边界之外。
使用*
作为“高度”值时,可以防止这种情况。
这将导致控件占用所有可用空间。您可以使用MaxHeight
属性来进一步限制。
如果这样做,它将在必要时显示滚动查看器,甚至在更改窗口大小时也将调整大小。