Professional Documents
Culture Documents
What is XAML ?
XAML stands for eXtended Application Markup Language. XAML contain XML that is
used to declaratively specify the user interface for Silverlight or WPF applications.
For example, if you need to display a rectangle, this is the XAML you need to use:
When the above xaml is executed, it will display a rectangle filled with red color. You
may notice is that XAML is very similar to HTML in nature.
Figure 2
Files created by Visual Studio by default
When we create a new Silverlight application using Visual Studio 2008, it creates
several files by default. See the solution explorer immediately after creating a new Silverlight
project with a host website (Figure 3)
Figure 3
We will analyse some of the files.
AppManifest.xml
This file defines the assemblies that are deployed to the client applications
App.xaml
App.xaml is a file used by Silverlight applications to declare shared resources like
brushes, various style objects etc. Also, the code behind file of app.xaml is used to handle
global application level events like Application_Startup, Application_Exit and
Application_UnhandledException. (Similar to Global.asax file for ASP.NET applications)
When Visual Studio creates the app.xaml file automatically, it creates few event
handlers with some default code. You can change the code appropriately.
private void Application_Startup(object sender, StartupEventArgs
e)
{
}
private void Application_Exit(object sender, EventArgs e)
{
}
private void Application_UnhandledException(object sender,
ApplicationUnhandledExceptionEventArgs e)
{
}
For ASP.NET developers, the above code will look familiar. This is similar to the
aplication level event handlers in Global.asax.
Page.xaml file
When you create a Silverlight project using Visual Studio 2008, it creates a default
xaml file called "Page.xaml". This is just a dummy start page created by Visual Studio and it
does not contain any visible UI elements. The default content of the page.xaml file looks like
this:
<UserControl x:Class="MySilverlightApp.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White"></Grid>
</UserControl>
The above code shows a user control and a Grid control. The UserControl is a high
level control that holds all other UI elements in a xaml file.
The Grid control is used as a layout panel and it can hold other UI elements. All UI
elements in a .xaml control must be placed within a layout panel. There 3 different
types of layout panels available in Silverlight 2.0. You will learn more about layout controls in
a later chapter.
When you compile your Silverlight Application project, it will compile all .xaml files and
various other resources in to a single assembly file. This assembly file will have the
extension .xap and will have the same file name as your project name.
To place your Silverlight control in a web page, you must refer to this .xap file in your
web page. When the .xap file is referred in a web page, the default .xaml page will be shown.
Based on user actions, you may open or close various .xaml files included in your .xap
assembly (Silverlight Application project).
Most of the stuff above look familiar to ASP.NET developers. Some of the lines that
need some attention are:
The second line defines the Silverlight control to be hosted in the web page. The
attribute "Source" defines the .xap file to be used by the web page. This .xap file contains the
XAML and code from your .xaml files and will be executed by the Silverlight plugin.
In the current sample, you have just one xaml file called Page.xaml. When you
compile the solution, this file is compiled into a special file (MySilverlightApp.xap) with the
extension .xap.
InitParameters="PageName=Page1"
Here we are setting the property "InitParameters" with a key-value pair indicating
which xaml page we want to open by default.
Now, we will read this property in the App.xaml file and set the appropriate page to
the Application.RootVisual property. Here is the sample code to use in the App.xaml.cs to
achieve this:
private void Application_Startup(object sender, StartupEventArgs e)
{
IDictionary parameters = e.InitParams;
if (parameters == null)
{
// No parameter passed.. open the default xaml
this.RootVisual = new DefaultPage();
}
else if (parameters["PageName"] == "Page1")
{
this.RootVisual = new Page1();
}
else if (parameters["PageName"] == "Page2")
{
this.RootVisual = new Page2();
}
else
{ // Open the default xaml
this.RootVisual = new DefaultPage();
}
}
Layout controls in Silverlight
There are 3 different types of layout panels provided by Silverlight. The Grid control is
one of them.
These are the 3 different types of layout panels provided by Silverlight:
1. Canvas - Position child elements absolutely in x,y space.
2. StackPanel - Position child elements relative to one another in horizontal or vertical stacks.
3. Grid - Position child elements in rows and columns.
You have to add a layout panel to every xaml page we create. All other UI elements must be
added inside one of the layout panels. Each page can have exactly one layout panel control.
Figure 5
How to display image in a Silverlight control ?
In Silverlight, the image control can be used to display images. The usage is pretty
straight forward. The syntax of using Image control is shown below:
<Grid x:Name="Layout" Width="250" Height="250" Background="GREEN" >
<Image x:Name="MyImage" Source="~/basket.jpg" Stretch="Uniform" >
</Image>
</Grid>
Image.stretch Property
The Stretch attribute can have the following values:
1. None
This will do no modification on the size of the image. If the image size is more than
the size of the container, then the image will be cut to fit in the container.
2. Fill
In this case, the image will be expanded to fill the region of the container. The aspect
ratio (proportion of width and height) will not be maintained.
3. Uniform
This is the default value. In this case, the image will be resized to fit the container, but
the aspect ratio will be maintained. So, there may be blank space in the container depending
on the width and height of the image and container.
4. UniformToFill
In this case, the image will be resized and will fill the container, but aspect ratio will be
maintained by trimming some portion of the image if required.
Width and Height properties
The width and height properties of the image can be used to override the stretch
property. If width and height properties are specified, then Stretch property will be ignored.
Image.Clip property
The clip property of Image control can be used in Silverlight to make certain portion of
the image visible and hide some part of it.
See an example of how to display an image in a elliptical form:
<Grid x:Name="Layout" Width="200" Height="220" Background="YELLOW" >
<Image x:Name="MyImage" Source=" Images/AppleTree.png"
Stretch="Fill">
<Image.Clip>
<EllipseGeometry x:Name="Ellipse" RadiusX="100"
RadiusY="100" Center="100,110"/>
</Image.Clip>
</Image>
</Grid>
The above code will produce an image(Figure 6) like this:
Figure 6
How to drag and move an image or object in Silverlight ?
The control that you like drag or move with the mouse can be embedded within a
Border control and then handle the mouse down, up and move events to make the object
move within your layout panel.
See sample .xaml code:
<Canvas x:Name="LayoutRoot" Background="White">
<Border x:Name="border1" Canvas.Top="100" Canvas.Left="10"
MouseLeftButtonDown="border1_MouseLeftButtonDown"
MouseLeftButtonUp="border1_MouseLeftButtonUp"
MouseMove="border1_MouseMove">
<Image x:Name="MyImage" Source="images/Basket.png"
Stretch="Uniform" ></Image>
</Border>
</Canvas>
In the above code, a Border control is placed in the Canvas. The most important code
to note is:
MouseLeftButtonDown="border1_MouseLeftButtonDown"
MouseLeftButtonUp="border1_MouseLeftButtonUp"
MouseMove="border1_MouseMove"
See the code for the code behind class:
public partial class Page : UserControl
{
// Global variable to indicate if user has clicked border
// and started/stopped moving.
private bool moving = false;
public Page()
{
InitializeComponent();
}
Xaml1.InitParameters = "City=Houston,State=Texas,Country=USA";
How to retrieve the InitParameters value ?
The value you pass to a Silverlight control through the InitParameters property can be
retrieved from the Application_Startup even handler in the App.xaml page.
private void Application_Startup(object sender, StartupEventArgs e)
{
IDictionary parameters = e.InitParams;
this.RootVisual = new Page1();
Now, in most cases, you may want to pass this value to the xaml page itself instead of doing
anything with in it the App.xaml.
Pass parameters from App.xaml to other pages
To pass the parameters from the App.xaml pages to other pages, you must modify the
constructor of xaml page class to accept parameters.