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
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
<Button Height="25" Width="150" Name="btn1" Background="BlueViolet"
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
Public Sub New()
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
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
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