Reader Level:

Gradient Effect in Silverlight

By Rahul Saxena on May 19, 2010
In this article I am going to show how we can show 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"






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



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



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

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

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


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

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


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

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



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

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





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

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


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

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


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

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

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





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

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


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

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



                    <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"/>










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


Image 1.

Rahul Saxena
Rahul Saxena

Rahul K Saxena is working as a Technical Analyst in Noida, India. He is Masters in Computers Application. Here in the IT industry for more than 6+ years and his main technical skills include SharePoint 2010, MOSS 2007, ... Read more



Custom Software Development
MCN is your source for developing solutions involving websites, mobile apps, cloud-computing, databases, BI, back-end services and processes and client-server applications.

Trending up