Hello Silverlight


"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

  • Visual Studio
  • Expression Blend
  • Deep Zoom Composer
  • Silverlight Tools for Visual Studio 2008

 

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.

Up Next
    Ebook Download
    View all
    Learn
    View all