Gradient Effect in Silverlight

Loading

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.