Взаимодействие с объектами XAML

В первой главе мы добавили строку для вставки на страницу файла, содержащего код JavaScript. Теперь этот файл будет служить для нас.
Цель этой главы - показать, как пользователь может взаимодействовать со страницей и как можно распознать такие действия, как щелчок мыши, и связать их с программами, действующими на страницу.

Как добавить действие

Имя обработчика событий присваивается программе, которая отвечает на действия пользователя. XAML позволяет учитывать эти события, и каждый тип действия пользователя имеет соответствующее имя в языке.
Вот как мы относимся к событиям:

    В
  1. XAML-код добавляется строка фигуры:
    nameEventation = «javaScript: имя
    2. » В
  2. файл JavaScript добавляется соответствующая функция:
    function nomfuction ()
    {
    ...
    }

Основные события

MouseLeftButtonDown: При нажатии левой кнопки мыши.
MouseLeftButtonUp: Когда его отпускают.
MouseEnter: Мышь проникает на поверхность объекта.
MouseLeave: Она выходит.
MouseMove: Она перемещается по поверхности.
Загружено: Когда страница загружена.

Пример кода: Отображение приветствия

В этом простом примере при нажатии на страницу появится сообщение «Привет!».
Начинается с прямоугольника, к которому добавляется событие MouseLeftButtonDown:

<Canvas etc.
<Rectangle
 Height="100"
 Width="100"
 Fill="Yellow" 
 MouseLeftButtonDown="javascript:hello" 
/>
</Canvas>
Код JavaScript, отображающий сообщение :
function hello()
{
  alert("Salut!");
}

Щелкните желтый прямоугольник :

Пример кода: изменение цвета круга

Функции событий JavaScript могут получить два аргумента: sender, объект, в котором происходит событие, и args, список параметров, переданных функции.
Так или может использовать атрибуты объекта, связывая их с sender, который заменяет объект внутри функции JavaScript.
В этом примере мы нарисуем эллипс, и при щелчке внутри этого изображения его цвет изменится с желтого на синий.
Чтобы мы связали атрибут Fill с sender и присвоили ему новый цвет.

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

  <Ellipse  
      Height="100" Width="100" 
      Stroke="Black" 
      Strokethickness="10" 
      Fill="Yellow"
      MouseLeftButtonDown="javascript:mouseclic"
/>

</Canvas>

И код JavaScript

function mouseclic(sender, args)
{
   sender.Fill="LightBlue";
}

На самом деле круг должен оставаться синим, чтобы он вновь стал желтым, добавилась дополнительная команда:

 MouseLeftButtonDown="javascript:mouseclic"
 MouseLeftButtonDown="javascript:mouseup"

С другой функцией JavaScript :

function mouseup(sender, args)
{
   sender.Fill="Yellow";
}

Просмотр файлов