SilverLight и JavaScript

Автор: http://silverlightru.net/

Сегодня мы с вами рассмотрим взаимодействие SilverLight и JavaScript. Рассмотрим это на простом примере, мы создадим просто текстовое поле и текстовый блок. При нажатии будет вызываться функция JavaScript и выскакивать сообщение, что мы в данный момент нажали.

Итак заходим сново уже в привычный для нас интерфейс Expression Blend, создаем новый проект. Затем создаем текстовый блок и прямоугольник ввиде окантовки к нашему тексту… В итоге xaml должен выглядеть следующим образом:

<canvas>
	xmlns="http://schemas.microsoft.com/client/2007"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	Width="300" Height="80"
	Background="White"
	x:Name="Page"&gt;

   <rectangle width="300" height="80" stroke="Black" strokethickness="2">
   cursor="Hand" mouseleftbuttonup="MouseClicked"&gt;
   <textblock fontsize="22" canvas.left="113.21" canvas.top="26">
   foreground="Blue" text="SilverlightRU.net" cursor="Hand"
   mouseleftbuttonup="MouseClicked";
</textblock></rectangle>
</canvas>

Параметры прямоугольника состоят из следующих значений:

• Width и Height, соотвественно длина и высота прямоугольника;
• Stroke - тут выставляем цвет контура прямоугольника, в примере - Черный;
• StrokeThickness - тут выставляем значение толщины линии;
• Fill - тут задаем значение цвета заливки, в нашем примере данный параметр отсутствует, так как нам нужно чтоб был виден текстовый блок;
• Canvas.Left и Canvas.Top - положение прямоугольника на рабочей области, по умолчанию оба значения имеют координаты (0;0).

Текстовый блок состоит из следующих значений:

• FontSize - размер нашей гарнитуры;
• Foreground - цвет текста;
• Text - текстовое содержание нашего блока;
• Canvas.Left и Canvas.Top - положение текстового на рабочей области, по умолчанию оба значения имеют координаты (0;0).
• MouseLeftButtonUp - в обоих случаях событие по нажатию левой клавиши мыши.

Все что нам осталось добавить, это в нашем html файле следующий код :

<script type="text/javascript">
function MouseClicked(sender, args){
   alert("Sender: " + sender.toString());
}
</script>

Все тестируем.. и в очередной раз хвалим себя, какие мы молодцы)
Смотреть пример.