Is it possible to have a non scrolling row within a ScrollViewer? - xaml

Question

Since I need to have a portion (but not all) of my page in a Scroll Viewer, I've got a winrt-xaml layout like so:
<Page>
<StackPanel>
<Grid>
</Grid>
<ScrollViewer>
<Grid>
</Grid>
</ScrollViewer>
</StackPanel>
</Page>
I have column titles for the second grid, which is inside the scroll viewer. If I put the column titles outside the grid (placing them in the last row of the outer grid) it is difficult if not impossible to make them align with the columns in the inner grid. But if I leave them in the inner grid (inside the ScrollViewer) they can scroll out of sight.
SO: is it possible to freeze that first row into place? Or, OTOH, is if, after all, readily doable to have the column widths in "Grid1" (the outer grid) align seamlessly with the column widths in "Grid2" (the inner grid)?
UPDATE
I can't see why, but it's not quite working, using option #2 in Juan's answer. The only problem is that both the "Longitude" and the "Color" labels are displayed way to the right of where they should be - all the others align perfectly, and their horizontal alignment property is set to "Left," so I don't see why these two are not cooperating. Here's the xaml:
Group Name
<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>
UPDATE 2
Since I'm still having an alignment problem (the grid columns above don't always align, width-wise, with the grid columns below), I'm posting here, as requested, my Grid XAML. First, the top grid:
<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>
...now, the second (inner) grid:
<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>
Also, the controls are "rubbery" - when I enter a value for which they are not wide enough, they will expand sideways to accommodate some of the additional space; I don't want this - the controls (TextBoxes) should remain the same width...

Answer 1

You can try two different approaches for your case:
Create a SharedSizeGroup for the columns (see this article -one between a lot out there- as example )
Name the columns in the second grid and set the columns in the first grid to bind their Width to the ActualWidth property of the corresponding columns, something like this:
<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>
See if you can get the desired behavior with any of these options. Good luck!