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