"Hello Silverlight" sample: In this introductory article, we will walk through a Hello World type of sample in Silverlight style!
Article Objectives:
-
Summarize Silverlight and Silverlight tools
-
Display a "colorful" Hello message
-
Animate the Hello message
Silverlight
Wikipedia definition: "Microsoft Silverlight is a programmable web browser plugin that enables features such as animation, vector graphics and audio-video playback that characterize rich Internet applications."
Silverlight Tools
Getting Started
In this example we will run through a basic "Hello World" type of sample in Silverlight style. This sample has been created using Visual Studio 2008.
Step 1 - Hello Silverlight
We will first add a StackPanel which will provide a simple layout for our control(s).
Then we insert a TextBlock Control which is used to display our text message - Specify the Font Family and FontSize values
<StackPanel x:Name="mainPanel">
<TextBlock x:Name="tbkHello" FontFamily="Verdana" FontSize="32">Hello Silverlight</TextBlock>
</StackPanel>
Image: Step 1 viewed in browser
Step 2 - Add a splash of color
Use a LinearGradientBrush for the TextBlock forecolor
<StackPanel x:Name="mainPanel">
<TextBlock x:Name="tbkHello" FontFamily="Verdana" FontSize="32">Hello Silverlight
<TextBlock.Foreground>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Violet" Offset="0.0" />
<GradientStop Color="Indigo" Offset="0.15" />
<GradientStop Color="Blue" Offset="0.3" />
<GradientStop Color="Green" Offset="0.45" />
<GradientStop Color="Yellow" Offset="0.6" />
<GradientStop Color="Orange" Offset="0.75" />
<GradientStop Color="Red" Offset="1" />
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
</StackPanel>
Image: Step 2 viewed in browser
Step 3 - Add our first Animation
In this step, the text will be displayed when the animation is played. So initially, we make our Text invisible by setting the Opacity value of the textblock.
We add a Storyboard object which serves as a container for the Animation objects. Make the Storyboard available to the TextBlock by making it (the Storyboard) a resource of the StackPanel. Now we can add a DoubleAnimation object which we will use to animate the Opacity of the TextBlock. Increasing the opacity of the TextBlock within the animation will make the control visible to the end user as the animation is played out.
<StackPanel x:Name="mainPanel">
<StackPanel.Resources>
<Storyboard x:Name="sbAnim">
<DoubleAnimation Storyboard.TargetName="tbkHello" Storyboard.TargetProperty="Opacity"
From="0.0" To="1.0" Duration="0:0:3"></DoubleAnimation>
</Storyboard>
</StackPanel.Resources>
<TextBlock x:Name="tbkTitle" FontFamily="Verdana" FontSize="20" TextDecorations="underline">Hello Silverlight Application <LineBreak></LineBreak></TextBlock>
<Button x:Name="btnStartAnim" Click="btnStartAnim_Click" Content="Hello" Width="100"></Button>
<TextBlock x:Name="tbkHello" FontFamily="Verdana" FontSize="32" Opacity="0.0">Hello Silverlight
<TextBlock.Foreground>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Violet" Offset="0.0" />
<GradientStop Color="Indigo" Offset="0.15" />
<GradientStop Color="Blue" Offset="0.3" />
<GradientStop Color="Green" Offset="0.45" />
<GradientStop Color="Yellow" Offset="0.6" />
<GradientStop Color="Orange" Offset="0.75" />
<GradientStop Color="Red" Offset="1" />
</LinearGradientBrush>
</TextBlock.Foreground></TextBlock>
</StackPanel>
In the code behind for this page, we add the event handler code for the Button to start the animation(s) when the button is clicked.
private void btnStartAnim_Click(object sender, RoutedEventArgs e)
{
sbAnim.Begin();
}
Animations can also be applied to Transforms. In the following code, we apply animation effect to the Scale transform, giving the zoom effect.
<StackPanel x:Name="mainPanel">
<StackPanel.Resources>
<Storyboard x:Name="sbAnim">
<DoubleAnimation Storyboard.TargetName="tbkHello"
Storyboard.TargetProperty="Opacity"
From="0.0" To="1.0" Duration="0:0:3">
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="tfm_ScaleXYtxbAnim"
Storyboard.TargetProperty="ScaleX" From="1.0" To="3.0" Duration="0:0:3" />
<DoubleAnimation Storyboard.TargetName="tfm_ScaleXYtxbAnim"
Storyboard.TargetProperty="ScaleY" From="1.0" To="3.0" Duration="0:0:3" />
</Storyboard>
</StackPanel.Resources>
<TextBlock x:Name="tbkTitle" FontFamily="Verdana" FontSize="20" TextDecorations="underline">Hello Silverlight Application <LineBreak></LineBreak></TextBlock>
<Button x:Name="btnStartAnim" Click="btnStartAnim_Click" Content="Hello" Width="100"></Button>
<TextBlock x:Name="tbkHello" FontFamily="Verdana" FontSize="32" Opacity="0.0">Hello Silverlight
<TextBlock.Foreground>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Violet" Offset="0.0" />
<GradientStop Color="Indigo" Offset="0.15" />
<GradientStop Color="Blue" Offset="0.3" />
<GradientStop Color="Green" Offset="0.45" />
<GradientStop Color="Yellow" Offset="0.6" />
<GradientStop Color="Orange" Offset="0.75" />
<GradientStop Color="Red" Offset="1" />
</LinearGradientBrush>
</TextBlock.Foreground>
<TextBlock.RenderTransform>
<ScaleTransform ScaleX="3.0" ScaleY="3.0" x:Name="tfm_ScaleXYtxbAnim"/>
</TextBlock.RenderTransform>
</TextBlock>
</StackPanel>
Video - Final result for this sample
Conclusion:
In this article, we built a basic Silverlight sample which displays a Hello message.