Monday, June 18, 2007

How to use gradient color brush in Silverlight

See Also: 1. Hello World Silverlight Example with <TextBlock> Tag
                     2How to display text with solid color brush
                     3. How to use gradient color brush in Silverlight

Download Source Code - How to use gradient brush in silverlight

If you don't have silverilght installed in your system first go through these articles otherwise please simply skip bellow articles

Silverlight prerequisites and installation for web application development

Silverlight Development Tools & Software
Silverlight plug-in Inplace and Indirect installation, How to
Hello World Silverlight Example with <TextBlock> Tag

Step 1. Open Visual Studio,

Step 2. Open New Silverlight Project

Now By Default you will get Page.xaml with the following code

<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007"

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

Loaded="Page_Loaded"

x:Class="SilverlightProject1.Page;assembly=
ClientBin/SilverlightProject1.dll
"
Width="640"
Height="480"
Background="White"
>

</
Canvas>

Step 3. To display a text message in silveright canvas we have tag called <TextBlock>


Find the following modified code after adding <TextBlock> tag with Foreground attribute (Solid Brush)

<Canvas
xmlns="http://schemas.microsoft.com/client/2007"

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

x:Name="parentCanvas"

Loaded="Page_Loaded"

x:Class="SilverlightProject1.Page;assembly=ClientBin/SilverlightProject1.dll"
Width="885"
Height="500"

Background="White"
>
  <TextBlock Text="Hello World with Solid brush" FontSize="50" Foreground="#FF0D2764"/>
<
TextBlock Text="Hello World with gradient brush" FontSize="50" Canvas.Left="8" Canvas.Top="161.368">
<
TextBlock.Foreground>
<
LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<
GradientStop Color="#FF141714" Offset="0"/>
<
GradientStop Color="#FFDD520E" Offset="0.37"/>
<
GradientStop Color="#FF0F2E6A" Offset="0.861"/>
</
LinearGradientBrush>
</
TextBlock.Foreground>
</
TextBlock>
</Canvas>

Step 4. Now Run the Application By Pressing F5 with debugging or Ctrl+F5 without debugging.


Download Source Code - How to use gradient brush in silverlight

See Also: 1. Hello World Silverlight Example with <TextBlock> Tag
                     2How to display text with solid color brush
                     3. How to use gradient color brush in Silverlight

2 comments:

Jaffe said...

Hey, landed on your blog, nice stuff. I found a cool new tool for our blogs... www.widgetmate.com It helps get latest news for our keywords directly on to our blog. I added it on mine. Worked like a charm.

Fabricio Amador said...

nada