Absolute GradientStops in LinearGradientBrushes

Question

How can I go about specifying absolute Offsets for the GradientStops in my LinearGradientBrush?

I have a GridView with a LinearGradientBrush as the background:

<Grid.Background>
    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
        <LinearGradientBrush.GradientStops>
            <GradientStop Offset="0" Color="White" />
            <GradientStop Offset="0.25" Color="White" />
            <GradientStop Offset="0.4" Color="WhiteSmoke" />
        </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>
</Grid.Background>

When the grid is at its default size, the white area of the gradient is about 60 pixel units tall. When I resize the grid, the gradient stretches and the white area gets larger. How can I keep the white area the same height, but stretch the rest of the gradient?

The white area corresponds to one row in the grid, so if there's a way to make the gradient span every row but the first one, that would work just fine.

Answer 1

As far as I know, you cannot mix relative and absolute gradient stops as you describe.

A solution like this should work for the case you describe however (I assume you have three columns and five rows, so substitute your own values):

<Rectangle Grid.ColumnSpan="3" Fill="White" />
<Rectangle Grid.ColumnSpan="3" Grid.Row="1" Grid.RowSpan="4">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
            <GradientStop Offset="0" Color="White" />
            <GradientStop Offset="0.4" Color="WhiteSmoke" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>
<!-- define the rest of the items in your Grid here -->

This will fill the background in the way you describe, and as long as you list the other contents of the grid after the two rectangles, they will appear on top.

Of course this requires you to know the number of rows and columns in the grid. If that is dynamic, you may be able to achieve the same result using value converters.

Answer 2

I ended up splitting the Grid into multiple Grids to get the effect I wanted. The top grid had a white background, the middle had the gradient, and the bottom had the end color.