Silverlight Knowledge Base

Finding and modifying XAML elements in JavaScript

• Professional Project Management Documentation
• How To Set Up Your Own Power Station In Your Back Yard

You can use the findName() function of the content attribute of a Silverlight XAML control to search through the content and find a specific XAML element that has been given a unique name using the x:Name attribute. For example, consider the following XAML element:

<TextBlock x:Name="appText" Canvas.Top="2 0" Canvas.Left="27" FontSize="12" Text="Silverlight Application"/>

You can use the following lines of code in JavaScript to access the appText TextBlock:

var control = document.getElementById("SilverlightControl"); var txtBlock = control.content.findName("appText");

After you use the findName() function to retrieve an XAML element, you have access to the attributes of the XAML element. For example, the following line of code sets the Text attribute of the txtBlock used earlier in this section:

txtBlock.Text = "New Text";

Silverlight also provides the getValue() and setValue() methods to get and set properties of the object. For example, the following line of code sets the Canvas.Left property for the txtBlock object:

txtBlock.setValue("Canvas.Left", 2 0);

To illustrate accessing and modifying XAML elements better, consider the XAML code in Listing 9.6. The code is simple and only defines a basic TextBlock control with the name appText and a Rectangle control named appBox.

LISTING 9.6

Simple XAML Code That Defines a TextBlock and Rectangle Element

<Canvas x:Name="parentCanvas"

xmlns="http://schemas.microsoft.com/client/2 0 07" xmlns:x="http://schemas.microsoft.com/winfx/2 00 6/xaml"> <Rectangle x:Name="appBox"/> <TextBlock x:Name="appText"/> </Canvas>

The code in Listing 9.7 defines an onLoad function named updateXAML() that does all the work to configure and lay out the TextBlock and Rectangle controls as they appear in Figure 9.3.

LISTING 9.7

JavaScript Code That Accesses the TextBlock and Rectangle Objects to Set the Properties function createSilverlight() {

Silverlight.createObjectEx({ source: "Page.xaml", parentElement: document.getElementById("silverlightHostM), id: "SilverlightControl", properties: {

width: "400", height: "200", version: "2.0", background: "LightGray", enableHtmlAccess: "true"

}, events: {onLoad:updateXAML}, initParams: null, context: null

function updateXAML(control, context, sender) {

var plugin = sender.getHost();

var txtBlock = plugin.content.findName("appText"); var rect = plugin.content.findName("appBox");

txtBlock.Text="New Silverlight Application"; txtBlock.Foreground="White"; txtBlock.FontSize="2 0"; txtBlock.setValue("Canvas.Top", 70); txtBlock.setValue("Canvas.Left", 50);

rect.Fill="Blue"; rect.Height=50; rect.Width=3 00;

rect.setValue("Canvas.Top", 60); rect.setValue("Canvas.Left", 4 0);

Inside the updateXAML() function in Listing 9.7, the code uses the findName() function to get the TextBlock and Rectangle objects and then sets the Text, Height, Width, Fill, FontSize, and Foreground attributes to define the look of the elements. The code uses the setValue() function to set the Canvas.Top and Canvas.Left properties to set the layout of the elements, as shown in Figure 9.3.

A Silverlight application with a TextBlock and Rectangle that were configured in JavaScript

+1 0

Average user rating: 5 stars out of 1 votes