Layout question

I want the contents to fit the screen, with the datagrids to have scrollbars if the content doesn't fit.

This is what I got

<Grid x:Name="panelMain"><Grid.RowDefinitions><RowDefinition Height="150"/><RowDefinition Height="Auto"/></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="300"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><!-- main grid row 0 banner --><!-- goes across the top of the screen --><StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"><StackPanel.Background><!-- banner bg image here --></StackPanel.Background><!-- banner content here --></StackPanel><!-- main grid row 1 data content --><StackPanel Orientation="Vertical" Margin="0" Grid.Row="1" Grid.Column="0"><!-- list of buttons/options here --></StackPanel><!-- CONTENT HERE --></Grid> <!-- end main grid -->

The <!-- CONTENT HERE --> section will contain the content that could overlow the size of the page.

Example content 

<StackPanel Grid.Row="1" Grid.Column="1" Name="panelPO" Orientation="Vertical" Visibility="Visible" Margin="0,0,20,20"><TextBlock Text="Purchase Orders - BERT" FontWeight="SemiBold" FontSize="16" DockPanel.Dock="Top"></TextBlock><DataGrid DockPanel.Dock="Top" Margin="0,10,0,0" Name="gridPO" AlternatingRowBackground="#FFDDDDDD" AreRowDetailsFrozen="True" CanUserReorderColumns="False" FontSize="12" ItemsSource="{Binding}" AutoGenerateColumns="False"><DataGrid.Columns><DataGridTextColumn Header="Customer" Binding="{Binding CustomerName}" /><DataGridTextColumn Header="PO #" Binding="{Binding Ponum}" /><DataGridTextColumn Header="Part #" Binding="{Binding CustID}" /><DataGridTextColumn Header="Label #" Binding="{Binding Label}" /><DataGridTextColumn Header="Qty" Binding="{Binding Qty}" /><DataGridTextColumn Header="Due Date" Binding="{Binding Due}" /></DataGrid.Columns></DataGrid><TextBlock Text="Purchase Orders - Email" FontWeight="SemiBold" FontSize="16" DockPanel.Dock="Top"></TextBlock><DataGrid DockPanel.Dock="Top" Margin="0,10,0,0" Name="gridPOEmails" AlternatingRowBackground="#FFDDDDDD" AreRowDetailsFrozen="True" CanUserReorderColumns="False" FontSize="12" ItemsSource="{Binding}" AutoGenerateColumns="False"><DataGrid.Columns><DataGridTextColumn Header="Subject" Binding="{Binding Subject}" /><DataGridTextColumn Header="Received" Binding="{Binding DateReceived}" /><DataGridTextColumn Header="Importance" Binding="{Binding Importance}" /></DataGrid.Columns></DataGrid></StackPanel><stackpanel visibility="collapsed">
<!-- more content -->
</stackpanel>
<stackpanel visibility="collapsed">
<!-- more content -->
</stackpanel>
<stackpanel visibility="collapsed">
<!-- more content -->
</stackpanel>
<stackpanel visibility="collapsed">
<!-- more content -->
</stackpanel>

So I have a bunch of stackpanels that get their visibility toggled depending on the button the user click (only one visible at a time).  However, some of the stackpanels are larger than the space due to large # of rows in the datagrids.  The content just goes off the screen.  I would like the datagrids to size to the grid size, and add scrollbars if needed.

I've tried other controls, dockpanel, scrollviewer, content just goes off the screen, any ideas?