Silverlight 1.0 позволяет создавать интерактивные эффекты, и менять свойства объектов используя JavaScript.
Silverlight 1.0 позволяет вызывать JavaScript функции, когда наступает какое либо событие например загрузка объекта или событие при наведении мыши.
Для того, чтобы определить обработчик события необходимо проделать следующие шаги:
1) В вашем XAML файле определить необходимый атрибут для вашего объект, который будет указывать функцию, которая будет обрабатывать событие.
someEvent = ‘YourFunction», где someEvent – какое-то событие доступное для вашего объекта, а YourFunction JavaScript функция, которая будет обрабатывать ваше событие
2) Необходимо определить вашу функцию (YourFunction) в JavaScript файле
Теперь рассмотрим все это на примере, для этого создадим новый проект, открываем Expression Blend и создаем новый проект Silverlight 1.0. По умолчанию проект представляет из себя следующую структуру:
Page.xaml.js – этой JavaScipt файл, который содержит все скрипты необходимые для работы нашего Silverlight приложения, собственно в нем мы и будем писать обработчики событий.
<canvas xmlns=»http://schemas.microsoft.com/client/2007″
xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml»
Width=»640″ Height=»480″
Background=»White»
x:Name=»Page»>
<rectangle width=»173″ height=»89″ fill=»#FF3B6EC8″ stroke=»#FFC11C1C» canvas.left=»162″ canvas.top=»42″ strokethickness=»10″ />
</canvas>
Добавим на наш Canvas прямоугольник и зальем его определенным цветом (#FF3B6EC8″) и заданим ему рамку (#FFC11C1C) толщиной 10. Для примера можете использовать любой другой объект главное научиться понять суть обработки событий. У объекта Rectanle на событие MouseLeftButtonDown поставим обработчик MyFunction.
<rectangle width=»173″ height=»89″ fill=»#FF3B6EC8″ stroke=»#FFC11C1C»
canvas.left=»162″ canvas.top=»42″
mouseleftbuttondown=»MyFunction» strokethickness=»10″/>
После этого необходимо написать собственно написать сам обработчик, который покажет нам результаты работы. Для этого открываем наш файл страницы Page.xaml.js и добавляем в него следующий код:
function MyFunction () {
alert ("Ура работает");
}
Теперь запускаем наше приложение (F5) и смотрим результаты, так мы создали простейшее приложение, которое показывает, как можно обработать событие – клика на левую клавишу мыши.
В следующем примере мы изменим определенные свойства объекта. Используем для этого наш Canvas – создадим для Canvas обработчик клика на левую клавишу мыши и назовем его MouseLeftButtonDown=»ChangeColor». И добавим следующий код в файл Page.xaml.js, данный код меняет цвет заднего фона на красный и выводит свойство объекта Canvas, т.е. Height:
function changecolor(sender, args) {
sender.background = "red";
alert("Height is " + sender.Height);
}
Изменяем присвоенный свойства.
Так как основным контейнером для нашего объекта является Canvas то у нас появляются дополнительные присвоенные свойства для примера Canvas .Top, Canvas.Left, которые показывают абсолютное позиционирование нашего объекта относительно нашего родительского контейнера, то есть Canvas. К ним можно обращаться из JavaScript следующим образом:
object["attachedPropertyName"] = value, где attachedPropertyName название дополнительного присвоенного свойства, которое вам необходимо изменить.
Для примера установим положение объекта относительно верхнего края нашего контейнера – 70.
Наш объект XAML:
<Canvas Width=»300″ Height=»300″
xmlns=»http://schemas.microsoft.com/client/2007″
xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml»
Background=»Transparent»>
<TextBlock Text=»click me» FontSize=»50″
MouseLeftButtonDown=»changelocation» />
</Canvas>
Код JavaScript :
function changelocation(sender, args) {
sender["Canvas.Top"] = 70;
}
События мыши
Объекты интерфейса поддерживают различные события мыши, которые можно обработать, например: MouseLeftButtonDown, MouseLeftButtonUp, MouseEnter
(происходят, когда мышь находится над объектом), MouseLeave, and MouseMove (происходят когда мышь двигается над объектом). События мыши имеют аргументы («args»), которые содержат x и y позиции мыши, когда произошло событие мыши, которые вы можете использовать, казав ссылку на объект в обработчике события мыши.
Текущий пример показывает примеры событий мыши, которые изменяют внешний вид нашего элипса.
XAML код:
<Canvas
xmlns=»http://schemas.microsoft.com/client/2007″
xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml»>
<Ellipse x:Name=»e1″ MouseMove=»e1Move»
MouseEnter=»e1Enter» MouseLeave=»e1Leave»
MouseLeftButtonDown=»e1Down» MouseLeftButtonUp=»e1Up»
Height=»100″ Width=»100″ Canvas.Left=»80″ Canvas.Top=»30″
Stroke=»Black» StrokeThickness=»10″ Fill=»LightBlue»/>
</Canvas>
JavaScript код:
function e1Enter(sender, args) {
sender.stroke = "red";
}
function e1Leave(sender, args) {
sender.stroke = "black";
}
function e1Down(sender, args) {
sender.fill = "Green";
}
function e1Up(sender, args) {
sender.fill = "LightBlue";
}
function e1Move(sender, args) {
sender.fill = "yellow";
Другое очень полезное событие в Silverlight программирование событие Loaded. Обычно обработчик указывается у рутового элемента, но часто бывает полезно использовать это событие у отдельно взятого элемента. Событие Loaded позволяет применить последние изменения, которые вы хотели применить к объекту, до его показа пользователю.
В текущем примере мы изменим свойство Fill у объекта Ellipse с синего на красный
XAML код
<Canvas
xmlns=»http://schemas.microsoft.com/client/2007″
xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml»>
<Ellipse Loaded=»ellipse_loaded»
Height=»200″ Width=»200″
Canvas.Left=»30″ Canvas.Top=»30″
Stroke=»Black» StrokeThickness=»10″ Fill=»LightBlue»/>
</Canvas>
JavaScript код
function ellipse_loaded(sender, args) {
sender.Fill = "Red";
}
Popularity: 27%
Похожие статьи по SilverLight:
Загрузка ...
