如果将此代码粘贴到新的UWP应用的主页上(或查看第一张图片),您会看到橙色网格占用的空间超过了所需的空间(VerticalAlignment
设置为顶部)。为了使其正常工作,必须将该网格的第二行高度设置为Auto
(请参见第二张图片)。问题是我想给第二行/最后一行额外的空间,而不是将其分配到所有行上。
将控件放在其自己的网格内的左列中是可行的(显然,因为没有行跨度),但是我不能这样做,因为当屏幕变窄时,右列中的堆栈面板进入了左列中的一行。
第二个问题是,如果单击橙色/绿色/黄色空间,焦点将始终移至第一行(黄色)中的文本框。
更新:没有滚动查看器,两个问题都已解决,但我显然需要它。
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ScrollViewer Background="DarkGreen" VerticalScrollBarVisibility="Auto">
<Grid Background="DarkOrange" Margin="10" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Background="Yellow">
<TextBlock Text="Title" />
<TextBox Margin="20" />
</StackPanel>
<Grid Grid.Row="1" Background="DeepPink" VerticalAlignment="Top">
<ListView Margin="10" VerticalAlignment="Top">
<ListView.Items>
<TextBlock Text="Item1" />
</ListView.Items>
</ListView>
</Grid>
<StackPanel Grid.Column="1" Grid.RowSpan="2" Background="Blue" VerticalAlignment="Top">
<StackPanel>
<TextBlock Text="Title1" />
<GridView Margin="0,10,0,0">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="4" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.Items>
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
</GridView.Items>
</GridView>
</StackPanel>
<StackPanel>
<TextBlock Text="Title2" />
<GridView Margin="0,10,0,0">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="4" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.Items>
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
</GridView.Items>
</GridView>
</StackPanel>
</StackPanel>
</Grid>
</ScrollViewer>
</Grid>
最佳答案
我找到了解决方法。由于第一行不会扩展或更改,因此在运行时我将第一行的MaxHeight
属性设置为等于该行的实际高度。
对于第二个问题,如下所示,将scrollviewer的IsTabStop
属性设置为True
:
https://social.msdn.microsoft.com/Forums/windowsapps/en-US/32e026dd-8338-4c19-a7d6-1bb8797044b3/first-input-control-in-the-scroll-viewer-is-always-getting-focused?prof=required