Scrollable Grid in WPF/Silverlight

Question

I would like to build a WPF window which uses an outer Grid to split the screen into 4 parts. In the lower right quadrant, I would like to embed another Grid which is larger than the grid cell. I have been looking for ways to add a ScrollViewer (or use the Grid.ScrollViewer properties) but no matter what I try the inner grid does not resize or display the scrollbars appropriately.

I suspect it has something to do with not wrapping the inner grid with the correct panel with the appropriate sizing (and resizing) behavior which would force the inner grid to honor the scrollbars, instead of simply rendering too big (and being clipped by the other window).

The hosting window is defined like this:

<Window x:Class="GridScrollTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:GridScrollTest"
        Title="MainWindow" Height="350" Width="525">
    <Grid x:Name="OuterGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="100" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <local:SSControl x:Name="Sheet" 
                         Grid.Row="1" Grid.Column="1"
                         HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Yellow" />
        <Canvas Grid.Row="0" Grid.Column="0" Background="LightGreen" />
        <Canvas Grid.Row="1" Grid.Column="0" Background="LightBlue" />
        <Canvas Grid.Row="0" Grid.Column="1" Background="LightCoral" />
    </Grid>
</Window>

And the referenced SSControl:

<UserControl x:Class="GridScrollTest.SSControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    Height="270" Width="600">
    <ScrollViewer 
        HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
        CanContentScroll="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
        <Grid x:Name="CellGrid" ShowGridLines="False" 
              >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="100" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="30"  />
                <RowDefinition Height="30"  />
                <RowDefinition Height="30"  />
                <RowDefinition Height="30"  />
                <RowDefinition Height="30"  />
                <RowDefinition Height="30"  />
                <RowDefinition Height="30"  />
                <RowDefinition Height="30"  />
                <RowDefinition Height="30"  />
                <RowDefinition Height="30"  />
                <RowDefinition Height="30"  />
                <RowDefinition Height="30"  />
            </Grid.RowDefinitions>
        </Grid>
    </ScrollViewer>
</UserControl>

Answer 1

I do not know for sure, but after trying your code in Blend, I think your problem might be that you have set the ColumnDefinition.Width and RowDefinition.Height to Auto. Try setting them to * and remove the Height=270 and Width=600 for your user control. This way, the outer grid fills all the available space in the window, and the lower right cell has scroll bars.