Silverlight 3 introduced the ability for a Silverlight application to run out of browser.   In my previous post Creating a Silverlight Out Of Browser Application  I outlined a basic example of how to create an out of browser application.

 

It is often useful to detect if the application is running in the browser or out of browser.   To detect if the application is running out of browser you can use the App.Current.IsRunningOutOfBrowser property as follows:

 

For this example, I am using Visual Studio 2010 and Silverlight 4.

Start by creating a new Silverlight 4 application called OutOfBrowserApp.  Update MainPage.xaml with the following XAML.

 

Right click on the OutOfBrowserApp Silverlight project and select Properties.  Check the check box that is labeled “Enable running application out of the browser”.

 

 

If you click the out of browser settings button, you can configure the Window title, Window size,  Window style, Window location, short cut icons, and short cut information.   Here is what the settings dialog should look like:

 

 

After changing the settings click ok.

Save the project and launch in a browser.   Right click in the application and click “Install My Out of browser application onto this computer”.

 

 

A confirmation box will be show giving you the option to save a short cut to the app in the Start Menu or the Desktop.

 

 

Once you click ok, the application will re-launch out of browser.   You can uninstall the application by simply right clicking anywhere in the application window and selecting “Remove Application…”

 

In my last post we looked at how to use the stackpanel to build stacked layouts where controls either flow vertically or horizontally.   In this article we will go over the Canvas control.   The canvas is probably the most basic layout control.  It simply provides a container in which child controls may be positioned absolutely.

 

In this example, we are using Silverlight 4 and Visual Studio Web Developer 2010.

 

Begin by creating a new Silverlight project called CanvasSample.  Then modify MainPage.xaml to look like Figure 1.  In the xaml we are adding a canvas and a text block inside the canvas.  Pay close attention to the HorizontalAlignment and VerticalAlignment attributes.  Notice we set them to center.

 

Figure 1

 

If you run the application you will see something that looks like Figure 2.  Note that even though we set the TextBlock to center it is position in the upper left.   Adding HorizontalAlignment and VerticalAlignment attributes to a control contained in a Canvas will not have an effect on its positioning.

 

Figure 2

 

Now  modify the XAML to look like Figure 3.  Note we have removed the HorizontalAlignment and VerticalAlignment attributes off of the TextBlock and added them to the Canvas. 

 

Figure 3 – Canvas with Horizontal and Vertical Alignment set to center

 

You might expect that this XAML would result in the Canvas being auto sized to the size of its child controls, but this is not the case.  If you run the app you will see something similar to Figure 4 below.  Notice that the TextBlock is slightly off center and that our canvas’s red background doesn’t show.  This is because the Canvas has a Width=0 and a height=0 because it will not auto size to it’s child controls even when Width=“Auto” is set.  The TextBlock is positioned with its top left corner and the top left most part of the canvas hence the reason for being off center.

 

Figure 4

 

Now modify the XAML so that it looks like Figure 5 setting a fixed width and height on the canvas.

 

Figure 5 – Canvas with fixed width and height centered

Now if you run your application you should see something that looks like Figure 6.  The canvas is now centered within its parent.  Setting the width and height allows the canvas to be centered correctly

 

Figure 6

 

The next thing we need to explore is position child controls within the canvas itself.   The canvas control is intended primarily for positioning child controls absolutely by giving each control an offset from the top and left of the canvas.  If you are wanting to create a fluid or proportional layout you are probably better off using the StackPanel or Grid control.  To set the X offset of a child control you add the Canvas.Left attribute on the control and specify a pixel value.  To set the Y offset you use the Canvas.Top attribute.  

 

It is also important to note that when you are positioning controls using absolute coordinates that controls might overlap.  Each control has a Canvas.ZIndex property that specifies which controls will be drawn first.  The ZIndex can be though of like a layer controls with lower ZIndexs will be drawn first and controls with higher ZIndexs will be drawn over controls with smaller ZIndexs.   If no ZIndex is assigned controls will be “layered” in the order they appear in the XAML that is controls appearing last in XAML will have an implicitly higher ZIndex.

 

To try this out – modify your xaml again to look like Figure 7.  Note how we have added two TextBlocks and set their Canvas.Top and Canvas.Left.

 

Figure 7 – Setting positioning of controls within a canvas

When you run the application it should look something like Figure 8.  Notice how the white TextBlock is drawn over the black TextBlock giving a drop shadow look.  Because we didn’t specify ZIndexs on the TextBlocks the one with the White Foreground is drawn on top because it appeared last in the XAML.

 

Figure 8

 

Now,  if you give the first TextBlock a Canvas.ZIndex=“2” and the second one a Canvas.ZIndex=“1” as shown in Figure 9.  You will see the black text drawn on top.

 

Figure 9 – Canvas child controls with ZIndexs set

 

Now run the app and you will see that the text blocks are drawn in a different order as in Figure 10.

 

Figure 10

 

In this post we have given a detailed look at the Silverlight Canvas layout control.   To recap remember that HorizontalAlignment and VerticalAlignment will have no effect on child controls added to a Canvas.  Also, remember that the Canvas will not auto size to the size of its children.   The Canvas by default will scale to fit it’s parent container and you may set HorizontalAligment=“Stretch” or VerticalAlignment=“Stretch” to make the canvas stretch horizontally or vertically.  Without an fixed width or height the HorizontalAlignment and VerticalAligment of the Canvas control might behave different that expected when set to something other than Stretch.  With no width or height set the width and height will be 0 by default unless the alignments are set to stretch.  Controls are positioned inside a canvas by specifying their absolute position using Canvas.Top and Canvas.Left.

 

© Copyright 2010 – SilverlightConnection.com

In this post I will cover yet another key Silverlight layout control – the Stack Panel.   The StackPanel was introduced in Silverlight 2 and it is useful for creating layouts in which controls need to be “stacked” vertically or horizontally.

 

In this post I will not go into detail on how to create the project.  If you need guidance creating the project please see the post Getting Started with Silverlight 4.0, which walks thru setting up a Silverlight 4 environment and creating your first project.

 

To begin, create a new Silverlight project called StackPanelSample.  Double click on MainPage.xaml in your solution explorer to edit the xaml for the application.  Change the contents of MainPage.Xaml so that it looks like the XAML in Figure 1 below:

 

Figure 1

In the code above, we added a  StackPanel by using the tag.   The Orientation=“Vertical” attribure in the stack panel tag specifies the direction in which controls will be stacked.  When vertical orientaion is set the first control will be on top and subsequent controls will be always be added below the previous control.    The stack panel controls the layout of all the controls between the start tag and end tag.    If you compile your project and view your test page your application should look like Figure 2.

 

Figure 2

 

 

You can add any user interface control you want to the stack panel and it will control its positioning.   Note in the previous example we gave the TextBlocks a 5 pixel Margin with the Margin=5 attribute.  The margin specifies the spacing around a control.

Another use of the stack panel is for horizontal layouts.   If you change Orientation=“Vertical” to Orientation=“Horizontal” as shown in Figure 3, the TextBlocks will be stacked side by side.  When set to use horizontal orientation, controls are displayed left to right in the order they appear in the XAML inside the StackPanel.

 

Figure 3

Now if you compile and open your test page you should see an application that looks like the one in Figure 4 below:

 

Figure 4

 

By default the StackPanel’s width will stretch to fit its container even if you set its width to Width=“Auto”.   Width=“Auto” will only have an effect if you set the HorizontalAlignment to something than stretch.  Possible HorizontalAlignment values are (Stretch, Center, Left, Right).  The same is true for the StackPanel’s height, by default its height will stretch to fill its parent container unless you specify a VerticalAlignment other than Stretch.   Possible values for VerticalAlignment are Stretch, Center, Top, and Bottom.   It is important to note, however, that HorizontalAlignment and VerticalAlignment are not specific to the StackPanel any control can be decorated with these attributes to control how a control is positioned in its parent.

 

In this post we’ve demonstrated how the StackPanel can be used to layout UI controls either flowing vertically down the screen or horizontally across the screen from left to right.

Another Silverlight blog is now up and running.   I hope to be posting a set of Silverlight quickstart tutorials in the days and weeks to come.