Доступ к объектам и их свойствам

Доступ к XAML-тегам осуществляется кодом JavaScript через DOM, как и в HTML. Однако есть различия, когда дело доходит до обработчиков событий.

Обработчики событий

Эти функции назначаются по имени предопределенным событиям XAML. Например, Click, назначаем clickme, которое является именем функции, выполняемой при возникновении события, другими словами, при нажатии пользователем кнопки мыши.
Эти обработчики событий имеют предопределенные параметры:
- sender, имя объекта, с которым связано событие, например, прямоугольник, внутрь которого кликают мышью.
- args, параметр, класс которого зависит от события.

Доступ к внутренним элементам

Для доступа к частям объекта мы используем их имена напрямую, в отличие от того, что происходит с Silverlight.
Для этого необходимо присвоить объекту имя с помощью атрибута:

x:Name

Пример:

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

Функция C #:

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

Доступ к любому элементу XAML

Если требуется получить доступ к какому-либо элементу XAML в файле, доступ к нему из указателя отправителя невозможен.
Но можно создать глобальную переменную для доступа к элементам объекта ActiveX с помощью следующей строки:

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

Переменная «application», которую можно назвать как угодно, заменит sender, поэтому следующая инструкция эквивалентна той, что использует sender в предыдущем примере:

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

Доступ к свойствам

Доступ к свойствам объекта осуществляется с использованием имени свойства в качестве индекса, даже если это присоединенное свойство:

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

и функция:

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

Мы видим, что свойство Canvas.Top является индексом объекта r, который указывает на элемент Rectangle с именем rect, и поэтому функция alert отображает вертикальное положение прямоугольника в Canvas.

Еще один пример с кнопкой и текстовым блоком:

<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>

Создаем функцию:

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

 

Мы видим, что свойство Content напрямую связано с именем кнопки «clickme», а свойство Text - еще и с именем текстового блока «disp», поэтому функция clicButton может изменить то, что отображает программа, присвоив что-то этим свойствам.
В примере при нажатии кнопки текстовое поле, содержавшее «Nothing», теперь содержит «Thanks», а также кнопка меняется с «Click me» на «Click again».

Демонстрация с прямоугольником

Полный исходный код:

<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"]);
}

Файлы кода.

• Код XAML.
• Код JavaScript.