Gradient Effect in Silverlight

In this article I am going to show how we can show graident effect in silverlight. This is my XAML code in which I am going to show gradient effect.

<UserControl x:Class="GradientEffectInSilverlight.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d"

    d:DesignHeight="500" d:DesignWidth="400">

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="100"></RowDefinition>

            <RowDefinition Height="110"></RowDefinition>

            <RowDefinition Height="20"></RowDefinition>

            <RowDefinition Height="130"></RowDefinition>

            <RowDefinition Height="20"></RowDefinition>

            <RowDefinition Height="100"></RowDefinition>

            <RowDefinition Height="200"></RowDefinition>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="100"></ColumnDefinition>

            <ColumnDefinition Width="160"></ColumnDefinition>

            <ColumnDefinition Width="*"></ColumnDefinition>

        </Grid.ColumnDefinitions>

        <Grid Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center">

            <TextBlock Text="Rectangle Gradient" HorizontalAlignment="Center"></TextBlock>

        </Grid>

        <Grid Grid.Row="1" Grid.Column="2">

            <Rectangle Width="200" Height="100">

                <Rectangle.Fill>

                    <RadialGradientBrush>

                        <GradientStop Color="White" Offset="1" />

                        <GradientStop Color="LightSkyBlue" Offset="0.50" />

                    </RadialGradientBrush>

                </Rectangle.Fill>

            </Rectangle>

        </Grid>

        <Grid Grid.Row="3" Grid.Column="1">

            <TextBlock Text="Ellipse Gradient"></TextBlock>

        </Grid>

        <Grid Grid.Row="3" Grid.Column="2">

            <Ellipse Height="120" Width="160" StrokeThickness="2">

                <Ellipse.Fill>

                    <LinearGradientBrush StartPoint='0.1,0.06' EndPoint='0.5,0.6'>

                        <GradientStop Color='DarkOliveGreen' Offset='0'/>

                        <GradientStop Color='CadetBlue' Offset='1'/>

                    </LinearGradientBrush>

                </Ellipse.Fill>

            </Ellipse>

        </Grid>

        <Grid Grid.Row="5" Grid.Column="1">

            <TextBlock Text="Rectangle Gradient Again"></TextBlock>

        </Grid>

        <Grid Grid.Row="5" Grid.Column="2">

            <Rectangle Width="200" Height="100">

                <Rectangle.Fill>

 

                    <LinearGradientBrush >

                        <GradientStop Color="Bisque" Offset="0.0"/>

                        <GradientStop Color="Orange" Offset="0.143"/>

                        <GradientStop Color="Yellow" Offset="0.286"/>

                        <GradientStop Color="DarkTurquoise"  Offset="0.429"/>

                        <GradientStop Color="Blue"  Offset="0.572"/>

                        <GradientStop Color="DarkGray" Offset="0.715"/>

                        <GradientStop Color="Violet" Offset="1.0"/>

                    </LinearGradientBrush>

                </Rectangle.Fill>

            </Rectangle>

        </Grid>

 

        <!---->

    </Grid>

</UserControl>

 

When we run the application then gradient effect will be seen like below.

Image 1.