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>

What exactly is your result? You say "the inner grid does not resize or display the scrollbars appropriately", but from your explanation, I think you do not want it to resize, do you? My understanding of your description is that you want the Grid to be displayed in its actual size, across the boundaries of your Window, and that scroll bars are added to it, so that the user can scroll the viewable part. Is that right?! — gehho

gehho gehho · Accepted Answer · 2010-04-27T15:41:38

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.

Scrollable Grid in WPF/Silverlight

1 Answers