带有 ScroolViewer 的 UWP 网格行跨度答案

【问题标题】：UWP Grid RowSpan with ScroolViewer带有 ScroolViewer 的 UWP 网格行跨度
【发布时间】：2016-08-17 23:13:30
【问题描述】：

如果您将此代码粘贴到新 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>

【问题讨论】：

所以你想要第二张图片吗？
我想要第一张图片，但橙色网格应该像第二张图片一样结束。我不知道为什么要添加额外的空间...对我来说这是度量计算中的错误

标签： xaml win-universal-app uwp-xaml

【解决方案1】：

我找到了解决方法。由于第一行不会扩展或更改，因此我将第一行的MaxHeight 属性设置为运行时该行的实际高度。

对于第二个问题，将滚动查看器的 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

【讨论】：