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.

Using Barcode encoder for .NET Control to generate, create Matrix image in .NET applications.

www.OnBarcode.com

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>

Using Barcode encoder for iPad Control to generate, create Code 128 Code Set A image in iPad applications.

www.OnBarcode.com

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.

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.