ptg
// The RootVisual cannot be modified here since it will be
// used in the startup page animation. Defer initialization to
// the startup event after your application has loaded.
//
this.Startup += this.A pplication_Startup;
// You can also connect event handlers for shutdown and error
// handling
//
// this.Exit += this.A pplication_Exit;
// this.UnhandledException += this.A pplication_Unhandled;
}
private void A pplication_Startup(
object sender,
StartupEventA rgs e
)
{
// Create a hello world TextBlock
TextBlock textBlock = new TextBlock();
textBlock.Text = "Hello World";
// Create a container canvas
Canvas canvas = new Canvas();
canvas.Children.A dd(textBlock);
// Set the application root to display the canvas
this.RootVisual = canvas;
}
}
}
In this example, the entry point is the
HelloWorld.A pp
constructor that
public partial class A pp : A pplication
{
public A pp()
{
System.Windows.A pplication.LoadComponent(
this,
new System.Uri(
"/HelloWorld;component/A pp.xaml",
System.UriKind.Relative
)
);
}
}
}
Here is the XAML file that corresponds to the sample application in the
previous code example:
<A pplication
xmlns=" />xmlns:x="
x:Class="HelloWorld.A pp"
>
<A pplication.RootVisual>
<Canvas>
<TextBlock Text="Hello World"/>
Application Components 19
PERFORMANCE TIP
You may expect instantiating objects from code to be faster than
parsing XAML, but XAML is faster in most cases. The reason XAML
is faster is that the XAML parser does not create the API objects you
use to interact with elements, but instead only creates an internal
representation. After you start interacting with elements from code,
within the scope of the XAML tag. This property syntax enables you to set
a property to a tree of objects rather than a simple string-based value.
The previous XAML is equivalent to
• Constructing the
A pplication
object. The
x:Class
property
indicates that this object is defined by the
HelloWorld.A pp
class. All
event handlers specified in the XAML file refer to methods on the
HelloWorld.A pp
class
• Constructing the
Canvas
element
• Setting the
A pplication.RootVisual
property to the
Canvas
element
• Constructing the
TextBlock
element
• Setting the
TextBlock
element as a child of the
Canvas
element
xmlns:x="
EntryPointA ssembly="HelloWorld"
EntryPointType="HelloWorld.A pp"
RuntimeVersion="3.0.40624.0"
>
<Deployment.Parts>
<A ssemblyPart Source="HelloWorld.dll" />
</Deployment.Parts>
<Deployment.OutOfBrowserSettings>
<OutOfBrowserSettings ShortName="Hello World" >
<OutOfBrowserSettings.WindowSettings>
<WindowSettings Title="Hello World"/>
</OutOfBrowserSettings.WindowSettings>
<OutOfBrowserSettings.Blurb>
Description of your Silverlight application
</OutOfBrowserSettings.Blurb>
</OutOfBrowserSettings>
</Deployment.OutOfBrowserSettings>
</Deployment>
Now that you have set your out of browser settings, an end user can
install your application from the right-click menu as shown in Figure 2.3.
The only prompt the end user sees is one that asks which shortcuts to cre-
ate. For example, on Windows operating systems, the prompt is the one
shown in Figure 2.4. When the end-user runs that application, it runs with-
out the browser chrome as shown in Figure 2.5.
Even when you run an application outside the Web browser, Silverlight
downloads new versions of your application automatically if you
update the version on your Web server. Of course, you can also run the
application if a network connection is not present. You can detect if
your application is running outside the Web browser by checking the
space that indicates that all built-in Silverlight types are available. For
example, to use the
Canvas
element and
TextBlock
element in our previous
example:
<A pplication
xmlns=" />xmlns:x=" />x:Class="HelloWorld.A pp"
>
<A pplication.RootVisual>
<Canvas>
<TextBlock Text="Hello World"/>
</Canvas>
</A pplication.RootVisual>
</A pplication>
Application Components 23
Figure 2.5: Application running outside the Web browser
From the Library of Lee Bogdanoff
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
ptg
In addition to the basic client namespace, the
"rosoft.
com/winfx/2006/xaml"
namespace is optionally available for particular prop-
erties and special values. For example, to name an object, you can set the
Name
property from this special namespace:
<A pplication
xmlns=" />xmlns:x=" />x:Class="HelloWorld.A pp"
</A pplication>
Type Converters
The property values seen in the example XAML files were XML attribute
strings; however, the actual properties are strongly typed and can be a
Chapter 2: Applications
24
From the Library of Lee Bogdanoff
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
ptg
Application Components 25
Figure 2.6: Example path
Double
,
Point
, or some other type. For example, the XAML to draw the
path is shown in Figure 2.6.
<Canvas xmlns=" /><Path
StrokeThickness="10"
Stroke="Black"
Fill="Red"
Data="M 14,16
C 14,16 -8,256 64,352
C 136,448 185,440 247,336
C 309,233 448,416 448,416
L 436,224
Z"
/>
</Canvas>
The type of the
Data
PathGeometry "M 10,10 L 100,100"
Event Handlers
To make your XAML interactive, you can connect an event handler from
your XAML file. For example, if you have a Silverlight
Button
, you can
connect the
Click
property to an event handler on your
HelloWorld.A pp
class:
<A pplication
xmlns=" />xmlns:x=" />x:Class="HelloWorld.A pp"
>
<A pplication.RootVisual>
<Canvas>
<Button Content="Hello World" Click="Button_Click"/>
</Canvas>
</A pplication.RootVisual>
</A pplication>
The event handler can access the object that sent the event through the
sender
parameter:
namespace HelloWorld
{
public partial class A pp : A pplication
{
private void Button_Click(object sender, RoutedEventA rgs e)
{
Button button = (Button)sender;
To let the XAML parser know how to find
MyEllipse
from XAML, add
an
xmlns
attribute indicating the assembly and namespace, and instantiate
the element using that namespace:
<A pplication
xmlns=" />xmlns:x=" />xmlns:myTypes="clr-namespace:HelloWorld;assembly=HelloWorld"
x:Class="HelloWorld.A pp"
>
<A pplication.RootVisual>
<Canvas>
<myTypes:MyEllipse />
</Canvas>
Application Components 27
From the Library of Lee Bogdanoff
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
ptg
</A pplication.RootVisual>
</A pplication>
Because
MyEllipse
inherits from the
Canvas
element, it can be contained
in other
Canvas
elements and Silverlight will draw the contents of the
Children
The new
FillColor
property is accessible from XAML and Silverlight
parses that property using the
Brush
type converter:
<A pplication
xmlns=" />Chapter 2: Applications
28
From the Library of Lee Bogdanoff
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
ptg
xmlns:x=" />xmlns:myTypes="clr-namespace:HelloWorld;assembly=HelloWorld"
x:Class="HelloWorld.A pp"
>
<A pplication.RootVisual>
<Canvas>
<myTypes:MyEllipse FillColor="Blue"/>
</Canvas>
</A pplication.RootVisual>
</A pplication>
Another common mechanism to define a custom element is to use another
XAML file. For example, in the previous example, the
MyEllipse
element cre-
ated a set of elements that are also expressible in XAML. To define
MyEllipse
in XAML, first inherit from the
UserControl
class and load a XAML file:
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
ptg
Then, define the
MyEllipse.xaml
file to instantiate the initial elements:
<UserControl
x:Class="HelloWorld.MyEllipse"
xmlns=" />xmlns:x=" />>
<Ellipse
x:Name="myEllipse"
Fill="Red"
Width="100"
Height="100"
/>
</UserControl>
The primary advantage of using a XAML file to define the content for
the element is that you can now edit this file using a visual design tool such
as Expression Blend. As long as the named objects remain, any other part of
the XAML can change without requiring the code to change. For example,
you can add a border element around the
Ellipse
element and the
MyEllipse
element will continue to work.
XAP Package
As previously discussed, your application code, XAML files, data files, and
manifest can all be packaged in a ZIP file with a .XAP extension for deploy-
ment purposes. To build a XAP, you can build it manually by using the
Windows ZIP tool; however, the simplest method to create packages is to
create a Silverlight project in Visual Studio. See verlight.
image.Source = new BitmapImage(
new Uri("/silverlight.png", UriKind.Relative)
);
For XAML files, the
LoadComponent
API loads the XAML file and initializes
the object instance from that XAML file. For example, to load an application
object:
System.Windows.A pplication.LoadComponent(
this,
new System.Uri(
"/HelloWorld;component/A pp.xaml",
System.UriKind.Relative
)
);
The relative URI specified for loading a component requires a special
syntax that specifies both the namespace and the path to the XAML
component.
Application Components 31
PERFORMANCE TIP
The XAP file both produces a smaller download size and reduces the
number of download requests when loading your application. On
some Internet connections, the latency for a download request can be
50ms or higher. For example, 20 to 100 download requests can increase
your application load time by several seconds. Using a XAP enables
you to have one download request for all the files initially used in your
application.
You can also load assemblies on-demand for components of your
application that are not always needed.
From the Library of Lee Bogdanoff
• A rendering system for drawing your application contents to the
screen
This section discusses each of these components in more detail.
Chapter 2: Applications
32
From the Library of Lee Bogdanoff
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
ptg
Silverlight Plug-In
The Silverlight plug-in is the primary entry point for Silverlight. The
plug-in has a
source
property for referencing the XAP to load in the
HTML page:
<body>
<object
data="data:application/x-silverlight,"
type="application/x-silverlight-2"
width="100%"
height="100%"
>
<param name="source" value="HelloWorld.xap"/>
</object>
</body>
In addition to the
source
property, there are a number of other useful
properties such as an
onError
property to specify an error handler for view-
The main loop for your application is within the Web browser itself, and
not the Silverlight runtime. Silverlight responds to draw requests, input
events, and timer events. In response to these events, Silverlight invokes
your event handlers. If your application code takes significant time in
response to an event, it is possible for you to cause the Web browser to
become unresponsive.
Chapter 2: Applications
34
PERFORMANCE TIP
Application code invoked from Silverlight event handlers will be on
the same execution thread as the Web browser. Waiting for a long dura-
tion operation such as a network request can cause the Web browser to
become unresponsive. You should make asynchronous requests and
never block the execution thread waiting for the result. Silverlight calls
back your code for asynchronous operations and you can continue
execution at that point.
PERFORMANCE TIP
Silverlight begins downloading components and running your appli-
cation as soon as the Silverlight plug-in object is loaded. To improve
the load times of your Web page, instantiate the Silverlight plug-in as
early as possible in your Web page logic.
PERFORMANCE TIP
If you no longer need the Silverlight control to run, free the reference
in JavaScript to free all resources consumed by the Silverlight runtime
by removing the plug-in object through the HTML DOM (document
object model) and setting all references to null.
Downloader
Early during the startup process, the Silverlight runtime downloads your
application XAP. If that XAP contains references to other files on your Web
From the Library of Lee Bogdanoff
test on high latency connections to ensure you get acceptable applica-
tion performance. If download latency results in long load times,
minimize the number of separate download requests to improve your
application load speed.
From the Library of Lee Bogdanoff
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
ptg
.NET Common Language Runtime
You can write your code in a number of .NET common language runtime
languages including C#. All the features you expect such as secure execu-
tion of code, garbage collection, type safety, and the basic class libraries are
all present. Some libraries have a subset of functionality from those from
the full .NET runtime; however, the basic functionality is present for use in
your application.
In addition to the .NET runtime components, you can also use the .NET
tools such as the language compilers, debuggers, profilers, and other .NET
tools to develop your Silverlight applications.
Element Tree
As demonstrated in our sample applications, the basic model to display
content is to
• Construct a tree of elements through code or XAML
• Write code to respond to events that can manipulate that tree of
elements
All Silverlight display and user interface features operate on this
concept of building a tree and manipulating it. For example, to draw an
ellipse, you need to construct an
Ellipse
element and add it to the element
tree. Silverlight does not have a
DrawEllipse
<EventTrigger.A ctions>
<BeginStoryboard>
<Storyboard>
<DoubleA nimation
Storyboard.TargetName="rect1"
Storyboard.TargetProperty="(Canvas.Left)"
From="0"
To="300"
Duration="0:0:5"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.A ctions>
</EventTrigger>
</Canvas.Triggers>
<Rectangle x:Name="rect1" Width="100" Height="100" Fill="Red"/>
</Canvas>
Chapter 6, “Animation,” discusses the animation system in more detail.
Under the Hood 37
From the Library of Lee Bogdanoff
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.