This is where the UI design is going to take place. If you click on MainPage.XAML you will see the XAML page as shown in the next figure.

XAML is a very powerful declarative language (Microsoft caught up with Adobe Flex) and Visual Studio has a terrific WYSIWYG editor. If you are new to XAML you will see what looks like a visual design interface is really a preview screen of the design. You cannot drag and drop objects on to it. Whatever object you declare in the XAML code is readily seen on refreshing this preview.

Further, you can drag an object from the toolbox and drop it on the XMAL page. Another way to bring in an object is to just type < and hit the enter key, you have intellisense to depend upon as shown in the next figure. Don't worry about the bunch of errors and wiggly lines. They will go away once the XML is properly terminated.

Build the XAML Objects for this tutorial

Lay down the following XAML controls on the XMAL page either manually with intellisense support or drag and drop from the Toolbox | Silverlight XAML Controls list. I recommend that you take the manual route as you will get to see more details of what you are doing. The <StackPanel/> is a container which is first placed inside the grid [Between <Grid> and </Grid>]. Then you can place the Button, TextBox and ListBox in that order. Follow this up by adding attributes like width, height, background etc. Again use intellisense support. For example, for the button, after typing 'n' if you click the enter key, you get the drop-down to choose the attribute. When you are done you will see the MainPage as shown in the next figure.

The TextBox and the ListBox have their XAML specific names like "x:Name='txt1'" and "x:Name='rst'". You may also notice that these are in the XMAL schemas which is referenced in the <UserControl/> at the very beginning. The various colors are only for effect. You may choose your own attribute values. After building the web project and browse the HTML (or ASPX) page you see the controls that you placed in your MainPage as shown in the next figure. In the next section we will be adding a click event to the button shown in the above figure.

Adding a Click event to the button

This is very simple. Just insert a Click from the intellisense by typing it in the <Button/> control as shown in the following snippet.

Listing 2

<Button Height="25" Width="150" Name="btn1" Background="BlueViolet" 

BorderBrush="Salmon" Click="btn1_Click"> 

After inserting the Click event as above if you build the project you would notice that there is a build error. This is because the click event is not completely configured.

Now click on the MainPage.xaml.vb page and add code to the btn1's click event as shown.

Listing 3: MainPage.XAML.vb

Partial Public Class MainPage
    Inherits UserControl
 
    Public Sub New()
        InitializeComponent()
    End Sub
    Private Sub btn1_Click(ByVal sender As System.Object, _
    ByVal e As System.Windows.RoutedEventArgs)
        txt1.Text = "Welcome to XAML"
        txt1.Text = txt1.Text & vbCrLf
        rst.Height = 50
        If btn1.Width = 150 Then
            btn1.Width = 300
        ElseIf btn1.Width > 150 Then
            btn1.Width = 150
        End If
    End Sub
 
End Class

You will notice that the click event changes the TextBox's text property, ListBox's height property and the toggles the Button's width. This is nothing new. Now the error you saw earlier goes away as you have added the event.

Build the project and verify that the click event brings about the changes you anticipate. You may need to clear the browser cache sometimes if your display does not show up properly. Notice that the project displays in its own local website and not the intranet site at port 80.

Adding animation to the project

There are a lot of details associated with animations in Silverlight. The animation in Silverlight 3.0 refers back to the System.Windows.Media.Animation namespace of which Double Animation is described in this tutorial. When you create a project make sure you look up this namespace and the classes related to animation in the Object Browser.

In addition to DoubleAnimation there are two other animations, the point animation and color animation. The way the animation progresses can be a linear change from one instant to another (From/To animation); specified values at discrete time intervals (Key/Frame animation); or values that depends on a function (Easing animation with 11 ready to use animations).