ScrollViewer 中是否可以有非滚动行？答案

【问题标题】：Is it possible to have a non scrolling row within a ScrollViewer?ScrollViewer 中是否可以有非滚动行？
【发布时间】：2012-12-30 21:19:44
【问题描述】：

由于我需要在 Scroll Viewer 中包含我的页面的一部分（但不是全部），所以我有一个 winrt-xaml 布局，如下所示：

<Page>
    <StackPanel>
        <Grid>
        </Grid>

        <ScrollViewer>
            <Grid>
            </Grid>
        </ScrollViewer>
    </StackPanel>
</Page>

我有第二个网格的列标题，它位于滚动查看器内。如果我将列标题放在网格之外（将它们放在外部网格的最后一行），即使不是不可能，也很难使它们与内部网格中的列对齐。但如果我将它们留在内部网格中（在 ScrollViewer 内），它们可以滚动到视线之外。

SO：是否可以将第一行冻结到位？或者，OTOH，毕竟，是否可以轻松地将“Grid1”（外部网格）中的列宽与“Grid2”（内部网格）中的列宽无缝对齐？

更新

我不明白为什么，但是在 Juan 的回答中使用选项 #2 并不能正常工作。唯一的问题是“经度”和“颜色”标签都显示在它们应该在的右侧 - 所有其他标签都完美对齐，并且它们的水平对齐属性设置为“左”，所以我没有不明白为什么这两个人不合作。这是xml：

组的名字

<TextBlock Foreground="Yellow" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="1" FontSize="28" VerticalAlignment="Center" HorizontalAlignment="Center">Title</TextBlock>
<TextBlock Foreground="Yellow" Grid.Row="2" Grid.Column="1" FontSize="28" VerticalAlignment="Center">Address</TextBlock>
<TextBlock Foreground="Yellow" Grid.Row="2" Grid.Column="3" FontSize="28" VerticalAlignment="Center" HorizontalAlignment="Left" >Latitude</TextBlock>
<TextBlock Foreground="Yellow" Grid.Row="2" Grid.Column="5" FontSize="28" VerticalAlignment="Center" HorizontalAlignment="Left">Longitude</TextBlock>
<TextBlock Foreground="Yellow" Grid.Row="2" Grid.Column="6" Grid.ColumnSpan="2" FontSize="28" VerticalAlignment="Center">Color</TextBlock>
</Grid>

        <StackPanel Orientation="Horizontal" Grid.Row="0">
            <TextBlock x:Name="textBlockLocation1" FontSize="20" Margin="4" HorizontalAlignment="Right">Location 1</TextBlock>
            <TextBox x:Name="textBoxTitle1" Margin="4" MinWidth="200"></TextBox>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Grid.Row="1">
            <TextBlock x:Name="textBlockLocation2" FontSize="20" Margin="4" HorizontalAlignment="Right">Location 2</TextBlock>
            <TextBox x:Name="textBoxTitle2" Margin="4" Width="200"></TextBox>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Grid.Row="2">
            <TextBlock x:Name="textBlockLocation3" FontSize="20" Margin="4" HorizontalAlignment="Right">Location 3</TextBlock>
            <TextBox x:Name="textBoxTitle3" Margin="4" Width="200"></TextBox>
        </StackPanel>

        <StackPanel Orientation="Horizontal" Grid.Row="3">
            <TextBlock x:Name="textBlockLocation4" FontSize="20" Margin="4" HorizontalAlignment="Right">Location 4</TextBlock>
            <TextBox x:Name="textBoxTitle4" Margin="4" Width="200"></TextBox>
        </StackPanel>

        <StackPanel Orientation="Horizontal" Grid.Row="4">
            <TextBlock x:Name="textBlockLocation5" FontSize="20" Margin="4" HorizontalAlignment="Right">Location 5</TextBlock>
            <TextBox x:Name="textBoxTitle5" Margin="4" Width="200"></TextBox>
        </StackPanel>

        <StackPanel Orientation="Horizontal" Grid.Row="5">
            <TextBlock x:Name="textBlockLocation6" FontSize="20" Margin="4" HorizontalAlignment="Right">Location 6</TextBlock>
            <TextBox x:Name="textBoxTitle6" Margin="4" Width="200"></TextBox>
        </StackPanel>

        <StackPanel Orientation="Horizontal" Grid.Row="6">
            <TextBlock x:Name="textBlockLocation7" FontSize="20" Margin="4" HorizontalAlignment="Right">Location 7</TextBlock>
            <TextBox x:Name="textBoxTitle7" Margin="4" Width="200"></TextBox>
        </StackPanel>

        <StackPanel Orientation="Horizontal" Grid.Row="7">
            <TextBlock x:Name="textBlockLocation8" FontSize="20" Margin="4" HorizontalAlignment="Right">Location 8</TextBlock>
            <TextBox x:Name="textBoxTitle8" Margin="4" Width="200" LostFocus="CheckForAllRecordsValid" ></TextBox>
        </StackPanel>

        <TextBox x:Name="textBoxAddress1" Grid.Row="0" Grid.Column="1" MinWidth="240" Margin="4"></TextBox>
        <TextBox x:Name="textBoxAddress2" Grid.Row="1" Grid.Column="1" Margin="4"></TextBox>
        <TextBox x:Name="textBoxAddress3" Grid.Row="2" Grid.Column="1" Margin="4"></TextBox>
        <TextBox x:Name="textBoxAddress4" Grid.Row="3" Grid.Column="1" Margin="4"></TextBox>
        <TextBox x:Name="textBoxAddress5" Grid.Row="4" Grid.Column="1" Margin="4"></TextBox>
        <TextBox x:Name="textBoxAddress6" Grid.Row="5" Grid.Column="1" Margin="4"></TextBox>
        <TextBox x:Name="textBoxAddress7" Grid.Row="6" Grid.Column="1" Margin="4"></TextBox>
        <TextBox x:Name="textBoxAddress8" Grid.Row="7" Grid.Column="1" Margin="4" LostFocus="CheckForAllRecordsValid" ></TextBox>

        <TextBox x:Name="textBoxLatitude1" Grid.Row="0" Grid.Column="3" Margin="4" MinWidth="120"></TextBox>
        <TextBox x:Name="textBoxLatitude2" Grid.Row="1" Grid.Column="3" Margin="4" ></TextBox>
        <TextBox x:Name="textBoxLatitude3" Grid.Row="2" Grid.Column="3" Margin="4" ></TextBox>
        <TextBox x:Name="textBoxLatitude4" Grid.Row="3" Grid.Column="3" Margin="4" ></TextBox>
        <TextBox x:Name="textBoxLatitude5" Grid.Row="4" Grid.Column="3" Margin="4" ></TextBox>
        <TextBox x:Name="textBoxLatitude6" Grid.Row="5" Grid.Column="3" Margin="4" ></TextBox>
        <TextBox x:Name="textBoxLatitude7" Grid.Row="6" Grid.Column="3" Margin="4" ></TextBox>
        <TextBox x:Name="textBoxLatitude8" Grid.Row="7" Grid.Column="3" Margin="4" LostFocus="CheckForAllRecordsValid" ></TextBox>

        <TextBox x:Name="textBoxLongitude1" Grid.Row="0" Grid.Column="5" Margin="4" MinWidth="120"></TextBox>
        <TextBox x:Name="textBoxLongitude2" Grid.Row="1" Grid.Column="5" Margin="4"></TextBox>
        <TextBox x:Name="textBoxLongitude3" Grid.Row="2" Grid.Column="5" Margin="4"></TextBox>
        <TextBox x:Name="textBoxLongitude4" Grid.Row="3" Grid.Column="5" Margin="4"></TextBox>
        <TextBox x:Name="textBoxLongitude5" Grid.Row="4" Grid.Column="5" Margin="4"></TextBox>
        <TextBox x:Name="textBoxLongitude6" Grid.Row="5" Grid.Column="5" Margin="4"></TextBox>
        <TextBox x:Name="textBoxLongitude7" Grid.Row="6" Grid.Column="5" Margin="4"></TextBox>
        <TextBox x:Name="textBoxLongitude8" Grid.Row="7" Grid.Column="5" Margin="4" LostFocus="CheckForAllRecordsValid"></TextBox>

        <ComboBox x:Name="cmbxColor1" Grid.Row="0" Grid.Column="6" Margin="4,4,0,4" MinWidth="200" Height="36" HorizontalAlignment="Left" SelectionChanged="CmbxColor1_OnSelectionChanged"/>
        <ComboBox x:Name="cmbxColor2" Grid.Row="1" Grid.Column="6" Margin="4,4,0,4" MinWidth="200" Height="36" HorizontalAlignment="Left"/>
        <ComboBox x:Name="cmbxColor3" Grid.Row="2" Grid.Column="6" Margin="4,4,0,4" MinWidth="200" Height="36" HorizontalAlignment="Left"/>
        <ComboBox x:Name="cmbxColor4" Grid.Row="3" Grid.Column="6" Margin="4,4,0,4" MinWidth="200" Height="36" HorizontalAlignment="Left"/>
        <ComboBox x:Name="cmbxColor5" Grid.Row="4" Grid.Column="6" Margin="4,4,0,4" MinWidth="200" Height="36" HorizontalAlignment="Left"/>
        <ComboBox x:Name="cmbxColor6" Grid.Row="5" Grid.Column="6" Margin="4,4,0,4" MinWidth="200" Height="36" HorizontalAlignment="Left"/>
        <ComboBox x:Name="cmbxColor7" Grid.Row="6" Grid.Column="6" Margin="4,4,0,4" MinWidth="200" Height="36" HorizontalAlignment="Left"/>
        <ComboBox x:Name="cmbxColor8" Grid.Row="7" Grid.Column="6" Margin="4,4,0,4" MinWidth="200" Height="36" HorizontalAlignment="Left" LostFocus="CheckForAllRecordsValid" />

        <TextBlock Grid.Row="0" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Margin="7,10,6,10" >or</TextBlock>
        <TextBlock Grid.Row="1" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Margin="7,10,6,10">or</TextBlock>
        <TextBlock Grid.Row="2" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Margin="7,10,6,10">or</TextBlock>
        <TextBlock Grid.Row="3" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Margin="7,10,6,10">or</TextBlock>
        <TextBlock Grid.Row="4" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Margin="7,10,6,10">or</TextBlock>
        <TextBlock Grid.Row="5" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Margin="7,10,6,10">or</TextBlock>
        <TextBlock Grid.Row="6" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Margin="7,10,6,10">or</TextBlock>
        <TextBlock Grid.Row="7" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Margin="7,10,6,10">or</TextBlock>

        <TextBlock Grid.Row="0" Grid.Column="4" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Margin="6,10">and</TextBlock>
        <TextBlock Grid.Row="1" Grid.Column="4" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Margin="6,10">and</TextBlock>
        <TextBlock Grid.Row="2" Grid.Column="4" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Margin="6,10">and</TextBlock>
        <TextBlock Grid.Row="3" Grid.Column="4" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Margin="6,10">and</TextBlock>
        <TextBlock Grid.Row="4" Grid.Column="4" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Margin="6,10">and</TextBlock>
        <TextBlock Grid.Row="5" Grid.Column="4" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Margin="6,10">and</TextBlock>
        <TextBlock Grid.Row="6" Grid.Column="4" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Margin="6,10">and</TextBlock>
        <TextBlock Grid.Row="7" Grid.Column="4" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Margin="6,10">and</TextBlock>
    </Grid>
</ScrollViewer>

更新 2

由于我仍然有对齐问题（上面的网格列并不总是与下面的网格列在宽度上对齐），因此我应要求在此处发布我的 Grid XAML。一、顶格：

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="320"></ColumnDefinition>
        <ColumnDefinition Width="{Binding ElementName=Col1Grid2, Path=ActualWidth}"></ColumnDefinition>
        <ColumnDefinition Width="{Binding ElementName=Col2Grid2, Path=ActualWidth}"></ColumnDefinition>
        <ColumnDefinition Width="{Binding ElementName=Col3Grid2, Path=ActualWidth}"></ColumnDefinition>
        <ColumnDefinition Width="{Binding ElementName=Col4Grid2, Path=ActualWidth}"></ColumnDefinition>
        <ColumnDefinition Width="{Binding ElementName=Col5Grid2, Path=ActualWidth}"></ColumnDefinition>
        <ColumnDefinition Width="{Binding ElementName=Col6Grid2, Path=ActualWidth}"></ColumnDefinition>
    </Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="120"></RowDefinition>
    <RowDefinition Height="Auto"></RowDefinition>
    <RowDefinition Height="Auto"></RowDefinition>
    <RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>

...现在，第二个（内部）网格：

<Grid x:Name="gridDynamicRowsParent">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="320"></ColumnDefinition>
        <ColumnDefinition x:Name="Col1Grid2" Width="Auto"></ColumnDefinition>
        <ColumnDefinition x:Name="Col2Grid2" Width="Auto" />
        <ColumnDefinition x:Name="Col3Grid2" Width="Auto"></ColumnDefinition>
        <ColumnDefinition x:Name="Col4Grid2" Width="Auto"></ColumnDefinition>
        <ColumnDefinition x:Name="Col5Grid2" Width="Auto"></ColumnDefinition>
        <ColumnDefinition x:Name="Col6Grid2" Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
    <RowDefinition Height="*"></RowDefinition>
    <RowDefinition Height="*"></RowDefinition>
    <RowDefinition Height="*"></RowDefinition>
    <RowDefinition Height="*"></RowDefinition>
    <RowDefinition Height="*"></RowDefinition>
    <RowDefinition Height="*"></RowDefinition>
    <RowDefinition Height="*"></RowDefinition>
    <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>

此外，控件是“橡胶”——当我输入的值不够宽时，它们会横向扩展以容纳一些额外的空间；我不想要这个 - 控件（TextBoxes）应该保持相同的宽度......

【问题讨论】：

标签： xaml winrt-xaml windows-store-apps scrollviewer non-scrolling

【解决方案1】：

您可以针对您的情况尝试两种不同的方法：

为列创建一个 SharedSizeGroup（see this article -one between a lot out there- 例如）

为第二个网格中的列命名并设置第一个网格中的列以将它们的 Width 绑定到相应列的 ActualWidth 属性，如下所示：

<Page>
     <StackPanel>
         <Grid Name="Grid1">
            <Grid.ColumnDefinitions>
               <ColumnDefinition Width="{Binding ElementName=Col1Grid2, Path=ActualWidth}"/>
               <ColumnDefinition/>
            </Grid.ColumnDefinitions>

      <ScrollViewer>
        <Grid Name="Grid2">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Name="Col1Grid2" Width="*"/>
                    <ColumnDefinition Name="Col2Grid2" Width="Auto"/>
                </Grid.ColumnDefinitions>
      </ScrollViewer>
   </StackPanel>
 </Page>

看看您是否可以使用这些选项中的任何一个获得所需的行为。祝你好运！

【讨论】：

感谢您选择我的答案并给予支持。您使用了哪种方法？
#2，几乎起作用了；不过，我仍然有一些奇怪的行为，其中两个文本块没有对齐；我更新了我的帖子\问题。
@ClayShannon 我唯一看到的是“颜色”文本块没有向左对齐，但“经度”实际上是......我想它们很标准，但尝试发布网格的列定义
好的，我将列定义附加到我的原始帖子中。
他们不是因为滚动查看器的滚动条而对齐的吗？如果没有，请确保包含第二个网格的滚动查看器将其 Padding 设置为 0，因为没有一个网格具有其 Margin 属性设置（可能将 Padding 和 Margin 显式设置为 0？）。