apply gradient color to rowdefinition

Question

I want to apply a gradient to rowdefinition i.e each grid row should have that gradient apply to it,

How can we achieve this?

Answer 1

You have to put a UIElement into each row first. Then you can apply a gradient to it as background - like this:

 <Grid x:Name="LayoutRoot" Background="White" ShowGridLines="True">
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid Grid.Row="0">
        <Grid.Background>
            <LinearGradientBrush>
                <LinearGradientBrush.GradientStops>
                    <GradientStop Offset="0" Color="Gray"/>
                    <GradientStop Offset="1" Color="Black"/>
                </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
        </Grid.Background>
    </Grid>
    <Grid Grid.Row="1">
        <Grid.Background>
            <LinearGradientBrush>
                <LinearGradientBrush.GradientStops>
                    <GradientStop Offset="0" Color="Black"/>
                    <GradientStop Offset="1" Color="Gray"/>
                </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
        </Grid.Background>
    </Grid>
</Grid>

Thanks, Stefan Wick

Answer 2

RowDefinition has 3 Properties - Height, MaxHeight and MinHeight,

If you want to add a gradient / solid color to the row, add another object say canvas

EG:

<Grid x:Name="LayoutRoot" ShowGridLines="True">

<Grid.RowDefinitions>

<RowDefinition Height="100"/>

<RowDefinition Height="100"/>

<RowDefinition Height="100"/>

</Grid.RowDefinitions>

<Canvas Grid.Row="0" Background="AliceBlue"></Canvas>

<Canvas Grid.Row="1" Background="LightBlue"></Canvas>

<Canvas Grid.Row="2" Background="LightCyan"></Canvas>

</Grid>