Fixed header and footer outside scrollview

Question

I have a grid that has a header, content and a footer:

<Grid.RowDefinitions>
        <RowDefinition Height="55"/> <!--HEADER-->
        <RowDefinition Height="*"/> <!--CONTENT-->
        <RowDefinition Height="55"/> <!--FOOTER-->
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="30"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="30"/>
    </Grid.ColumnDefinitions>
 <Rectangle Grid.Row="0" Grid.ColumnSpan="3"></Rectangle>
 <ScrollViewer Grid.Row="1" Grid.Column="1" >
    <Grid>
    ...
    </Grid>
 </ScrollViewer>
 <Rectangle Grid.Row="3" Grid.ColumnSpan="3"></Rectangle>
</Grid>

I want to have it so that the header and footer are fixed and the content is scrollable. Within the second nested grid there is a lot of content, hence the scroll view. When I run the application, the scrollviewer still scrolls with the header and footer! I can't figure out what I'm doing wrong, is there a better layout I should be using?

Please let me know! I'd rather not use C#.

Thanks!

Answer 1

Unless you are doing something strange either around the XAML you have posted or inside the nested Grid object, your XAML works as you intended. I very slightly modified your XAML, just to visibly show your header and footer, and to add some content to your inner grid.

<Grid>
    <Grid.RowDefinitions>
    <RowDefinition Height="55"/><!--HEADER-->
    <RowDefinition Height="*"/><!--CONTENT-->
    <RowDefinition Height="55"/><!--FOOTER-->
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="30"/>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Row="0" Grid.ColumnSpan="3" Height="55" Fill="Red"/>
<ScrollViewer Grid.Row="1" Grid.Column="1" >
    <Grid >
      <ListBox ItemsSource="{Binding Path=myItems, FallbackValue='123456789abcdefghijklmno'}"/>
    </Grid>
</ScrollViewer>
<Rectangle Grid.Row="3" Grid.ColumnSpan="3" Height="55" Fill="Blue"/>
</Grid>

Shown below is the result. Your ScrollViewer scrolls just fine while leaving the header and footer in place. I'm not sure what else you have going on in your window, but this is the only XAML in the window I used for testing, and it works perfectly. As a note, I limited the height of the window to '400' so the inner grid did not continue to grow since it's height was set to *. You can achieve the same result by setting a maximum height on your outer Grid.