SILVERLIGHT INTRODUCTION in VB.NET

Maker QR in VB.NET SILVERLIGHT INTRODUCTION

Figure 14-8. Laying out items with the StackPanel Try changing the Orientation of the StackPanel to Horizontal to see how it affects the positioning of the squares. StackPanel is a very useful control and is very flexible. It is used extensively to perform tasks such as laying out lists of elements and creating menus.

The Grid layout control allows you to define a grid strucure to place individual elements within and is in some ways similar to an HTML table. You will create a 2 x 2 grid and some colored rectangles and then position them within the grid: 1. 2. 3. Right-click the Layout folder and select Add New Item Silverlight User Control. Name it GridTest. Enter the following XAML between the Grid tags (note that the Grid was defined first, and then the Grid.Row and Grid.Column attached properties are added to position the elements): <Grid.RowDefinitions> <RowDefinition Height="150"></RowDefinition> <RowDefinition Height="150"></RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="300"></ColumnDefinition> <ColumnDefinition Width="300"></ColumnDefinition> </Grid.ColumnDefinitions>

<Rectangle Fill="blue" Grid.Row="0" Grid.Column="0" Width="100" Height="100"></Rectangle> <Rectangle Fill="Red" Grid.Row="0" Grid.Column="1" Width="100" Height="100"></Rectangle> <Rectangle Fill="Yellow" Grid.Row="1" Grid.Column="0" Width="100" Height="100"></Rectangle> <Rectangle Fill="Green" Grid.Row="1" Grid.Column="1" Width="100" Height="100"></Rectangle> 4. 5. Let s add the ability to navigate to this page on the main menu. Open ~/MainMenu.xaml.cs. Add the following code to the MainMenu_Loaded() method: this.cmdGrid.Click += new RoutedEventHandler(cmdGrid_Click); 6. Add the following event handler: void cmdGrid_Click(object sender, RoutedEventArgs e) { PageNavigator.LoadPage(new Layout.GridTest()); } 7. Press F5 to run the application you should see a page like Figure 14-9.

Silverlight allows you to animate objects both declaratively and programmatically. Animation is perhaps easier to understand programmatically, so you will create a very simple animation to move a rectangle across a screen and at the same time change its transparency by modifying its opacity. You will use a Storyboard class to create an animation. The Storyboard defines what will happen within the animation (the story) and contains features to start, stop, and repeat the animation. The storyboard has a property called Interval that is a timer that allows you to perform the animation. In the example when the storyboard interval occurs, you will increment the x and y position of the rectangle and increase the opacity.

Let's start the example: 1. 2. 3. 4. 5. Create a new folder called Animation within your project. Right-click this folder Add New Item Silverlight User Control. Call it Animation. Remove the d:DesignHeight="300" d:DesignWidth="400" properties from the user control tag. Replace the Grid tags with the following XAML: <Canvas Width="900" Height="700" Background="AliceBlue"> <Rectangle Width="52" Height="52" Stroke="#FF000000" Opacity="0" Fill="Red" x:Name="rectAnimation" RadiusX="10" RadiusY="10" /> </Canvas> 6. Open ~/Animation/Animation.xaml.cs and enter the following code: public partial class Animation : UserControl { Storyboard StoryBoard = new Storyboard(); int Count = 0; public Animation() { this.Loaded += new RoutedEventHandler(Animation_Loaded); StoryBoard.Completed += new EventHandler(StoryBoard_Completed); InitializeComponent(); } public void Animation_Loaded(object sender, RoutedEventArgs e) { StoryBoard.Duration = TimeSpan.FromMilliseconds(10); StoryBoard.Begin(); } void StoryBoard_Completed(object sender, EventArgs e) { Canvas.SetTop(rectAnimation, Count); Canvas.SetLeft(rectAnimation, Count); rectAnimation.Opacity = 0.001 * Convert.ToDouble(Count);

Count += 1; StoryBoard.Begin(); if (Count == 100) StoryBoard.Stop(); } } } 7. 8. Now edit MainMenu so you can navigate to this page. Open ~/MainMenu.xaml.cs. In the MainMenu_Loaded() method add a handler for the animation button: this.cmdAnimation.Click += new RoutedEventHandler(cmdAnimation_Click); 9. Add the code to load Animation.xaml when the animation button is clicked: void cmdAnimation_Click(object sender, RoutedEventArgs e) { PageNavigator.LoadPage(new Animation.Animation()); } 10. Press F5 to run the application. When the page is loaded you should see a rectangle move diagonally across the screen. Note that you incremented the Opacity value using the following code: rectAnimation.Opacity = 0.001 * Convert.ToDouble(Count); However, when you incremented the Left and Top properties, you had to increment the values using the following syntax: Canvas.SetTop(rectAnimation, Count); Canvas.SetLeft(rectAnimation, Count); This is because Opacity is not an attached property, but Top and Left are.