locked
apply gradient color to rowdefinition RRS feed

  • 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?

    Thursday, February 26, 2009 11:43 PM

Answers

  • 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
    Friday, February 27, 2009 12:30 AM
  • 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>

    Friday, February 27, 2009 12:31 AM

All replies

  • 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
    Friday, February 27, 2009 12:30 AM
  • 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>

    Friday, February 27, 2009 12:31 AM