WynApse Home Page
Home    Blog    About    Contact       
Latest Article:


My Tags:
My Sponsors:







Lifetime Member:

Silverlight With Java Script Tutorial 02 - CreateObject and TextBlock Explanation





Where We Left Off

In Silverlight With Java Script Tutorial 01, I chose not to dig into some of the more complex things, but I'm going to do that this time, but I'm only going to dig into the things not discussed in the first tutorial. If you read the first one, you'll notice I'm using the same exact xaml for purposes of continuity.

Creating the Control

There are two ways of creating the Silverlight control on your page. The method described in the QuickStart is to modify Silverlight.js to include your custom "CreateMyControl" functions, each of which call Silverlight.createObject().

Personally, I don't like that method because it puts all my canvas instantiation in the Java Script file that I'm going to be changing next time a release is done. Maybe I'm wrong, and feel free to follow the QuickStart and let me know what I'm missing :)

Another departure I've made is instead of using createObject(), I'm using createObjectEx(). The 'Ex' version has more parameters, therefore is more complex, but gives you all the control available. If you get familiar with using the 'Ex' version from the start, then all your files can look similar, and you won't be caught short at some time later. Besides, you can accept defaults for many of the parameters when you're first starting.

createOjbectEx()

First let me display that line of code in all it's glory, then we'll look at it piece-by-piece:

<script>
Silverlight.createObjectEx({source: 'xaml/MyFirstSilverlightPage.xml', parentElement:pe1, id:'Ag1', properties:{width:'300', height:'100', background:'#00FFFFFF', isWindowless:'true', framerate:'24', version:'0.90.0'}, events:{onError:null, onLoad:null}, context:null});
</script>


You'll notice that the createObjectEx parameters are grouped in sections:

Silverlight.createObjectEx(
{source: 'xaml/SilverlightWithJSTutorial01.xml',
parentElement:pe1,
id:'Ag1',
properties:{
width:'300',
height:'100',
inplaceInstallPrompt:false,
background:'#00FFFFFF',
isWindowless:'true',
framerate:'24',
version:'0.90.0'
},
events:{
onError:null,
onLoad:null
},
context:null
}
);
source
This is the location/name of the xaml file for the canvas
parentElement
This is the var parameter defined inside the div tag for the control as the location of the control
id
This is the unique id for this canvas
width
The canvas width in pixels
height
The canvas height in pixels
inplaceInstallPrompt
Does the in-place isntall prompt display if there's an invalid version? defaults to false which means the standard install prompt appears .. see the SDK.
background
The background color of the control. This is an aRGB value where a is the opacity of the background. There is some interplay between this and the "isWindowless" which is next, but the basic intent is if this value is 00, it is transparent.
isWindowless
'true' or 'false' depending on your choice of having the control displayed as 'Windowless'. You can play back and forth between this and the opacity of the background, but my most common use is 00 for opacity and isWindowless 'true'
framerate
'24' is the normal frame rate for updates, play with this value at your own discretion
version
'0.90.0' denotes the Beta 01 build of the control
onError
A custom error event handler
onLoad
A custom onLoad handler that runs after all the xaml has been loaded and any Load= code run.
context
A 'contextual' parameter passed to the onLoad event.
For deeper explanation of the above, please refer to the Microsoft Silverlight Reference. In a later tutorial, I intend to work through onLoad and the context value, but without that in front of you now, the SDK is the best resource.


The XAML

The xaml file for the canvas at the top of this page contains a single TextBlock as shown here:

<Canvas 
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<TextBlock FontSize="36" Canvas.Left="17" Canvas.Top="10" Foreground="Blue">Hello Silverlight</TextBlock>

</Canvas>


There is only one line in the XAML file that is beyond the 'required', and that is the TextBlock.

The following details the TextBlock parameters used in the xaml on this page:
FontSize
The font size in pixels. The default is 14.666 which is 11 pts.
Canvas.Left
A Double value representing the offset from the left-hand side of the container Canvas. The default is 0.0
Canvas.Top
A Double value representing the offset from the top of the container Canvas. The default is 0.0
Foreground
The foreground color of the text. This is actually a brush value, and is undefined as default. Default text displays in Black.
One other parameter could have been used and that is Text="Hello Silverlight!", but in this particular case, the option was taken to use a syntax more familiar to html developers.

This is only 5 of the 26 Properties available for the TextBlock. I think it would be counterproductive to have a list here of Properties that are well listed already in the Microsoft documentation. As I use various properties and methods in other Tutorials, we will eventually work our way through the list.

For a complete break-out of the TextBlock, please refer to the Microsoft Silverlight Reference.

Next Time

I think next time I'll talk about Rectangles, and turning Text into links... so that'll get us into just a bit of Java Script.

Have fun and keep it simple!



Microsoft MVP

Member of WPF and Silverlight Insiders
Silverlight Control
Creative Commons License

Copyright © 2006-2014, WynApse