Accessing Objects and Their Properties

XAML tags are accessed by JavaScript code via the DOM, as in HTML. However, there are differences when it comes to event handlers.

Event handlers

These functions are assigned by name to predefined XAML events. For example, Click, assign clickme, which is the name of the function executed when the event occurs, in other words, when the user presses the mouse button.
These event handlers have predefined parameters:
- sender, the name of the object with which the event is associated, for example, a rectangle inside which you click.
- args, a parameter whose class depends on the event.

Accessing Internal Elements

We use their names directly to access parts of the object, unlike what happens with Silverlight.
To do this, you must name the object using the attribute:

x:Name

Example:

<Window Click="clicButton">
    <Button x:Name="clicme" />
</Window>

C # function:

void clicButton(object sender,  EventArgs args)
{
  object x = clicme;
}

Access to any XAML element

If you want to access any XAML element in the file, you cannot access it from the sender's pointer.
However, you can create a global variable to access ActiveX object elements using the following line:

var application = document.getElementById("monControle");

The variable "application," which can be called anything, will replace sender, so the following statement is equivalent to the one using sender in the previous example:

function uneFonction()
{
  var r = application.FindName("rect");
}

Accessing Properties

Object properties are accessed using the property name as an index, even if it is an attached property:

<Canvas  MouseLeftButtonDown="clicRect">
    <Rectangle 
         x:Name="rect" 
         Canvas.Top="10" 
         Canvas.Left="20"
    </Rectangle>
</Canvas>

and function:

function clicRect(sender, args)
{
  var r = sender.FindName("rect");
  alert("Top=" + r["Canvas.Top"]);
 }

We see that the Canvas .Top property is the index of the r object that points to the Rectangle element named rect, and therefore the alert function displays the vertical position of the rectangle in Canvas.

Another example with a button and a text block:

<Canvas x:Name="LayoutRoot" Width="400">
  <Button x:Name="clicme" Width="128" Height="20" Canvas.Left="24" Canvas.Top="20"
           Content="Clique moi" Click="clicButton" />
  <TextBlock x:Name="disp"  Height = "20" Width = "128" 
     Background="#FF4ED2D5" Text="Rien" Canvas.Left="24" Canvas.Top="50" />
</Canvas>

Create a function:

private void clicButton(object sender, EventArgs e)
{
  disp.Text =  "Merci";
  clicme.Content = "Clique encore";
}

 

We see that the Content property is directly related to the clickme button name, and the Text property is also related to the disp text block name, so the clicButton function can change what the program displays by assigning something to these properties.
In the example, when the button is clicked, the text field containing "Nothing" now contains "Thanks," and the button changes from "Click me" to "Click again."

Demonstration with rectangle

Full source code:

<Canvas  
  xmlns="http://schemas.microsoft.com/client/2007" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   MouseLeftButtonDown="clicRect"
  >      
<Rectangle
  x:Name="rect"
  Canvas.Top="10"
  Canvas.Left="20"
  Stroke="Black"
  Width="100"
  Height="30"
  Fill="LightBlue"
/>
</Canvas> 

function clicRect(sender, args)
{
  var r = sender.FindName("rect");
  alert("Top=" + r["Canvas.Top"]);
}

Code files.