Tuesday, January 25, 2011

Create a Whimsical Animated Silverlight Background

Silverlight Version of the Tutorial
image_thumb_8.png

I made a new project in Visual Studio.
and set up my main page to host a Canvas at 640x480 and set the background to the same gradient used in the Flash example;
image_thumb_3.png

from a XAML perspective this is;

<UserControl
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:local="clr-namespace:SilverlightApplication4"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 mc:Ignorable="d"
 x:Class="SilverlightApplication4.MainPage">
 <Canvas
   x:Name="LayoutRoot"
   Width="640"
   Height="480">
   <Canvas.Background>
     <RadialGradientBrush>
       <GradientStop
         Color="#FF1F63B4"
         Offset="1" />
       <GradientStop
         Color="#FF02C7FB" />
     </RadialGradientBrush>
   </Canvas.Background>
 </Canvas>
</UserControl>

and then figured that I would try and encapsulate as much of my drawing code into a UserControl so I added a new user control into the project and then drew an Ellipse onto my control before editing its XAML to add a few bits and pieces that Visual Studio can’t easily add;

Read more: Mike Taulty's Blog