При создании вашего приложения используйте хат1-файл разметки для написания вашего интерфейса пользователя и вносите весь необходимый код в файл выделенного кода. Этот процесс должен быть вам хорошо знаком. Однако в текущей версии инструментов Visual Studio не имеет визуального конструктора для Silverlight XAML. Это означает, что нет ни элементов управления в панели инструментов Toolbox, ни редактора в режиме WYSIWYG.

Вместо всего этого в редакторе есть технология IntelliSense. Хорошая новость состоит в том, что Expression Blend имеет визуальный конструктор.

Конечно, мы начнем в Visual Studio. В этом примере мы создадим простое приложение в виде слайд-шоу. Оно позволяет пользователю при помощи Silverlight пролистывать набор изображений вперед и назад. При этом изображения просто визуализируются (без обновле­ний страниц). Для создания этого приложения выполните следующие шаги:

1.   Сначала создайте новый проект (как описано в предыдущем разделе).

2.   Внутри файла Page.xaml добавьте три элемента TextBlock и элемент Image. Эти три эле­мента TextBlock будут представлять собой заголовок, а также ссылки на предыдущее и последующее изображение. Элемент Image должен представлять изображения для слайд-шоу. В листинге 17.1 показано то, как должен выглядеть ваш XAML.

<Canvas x:Name="parentCanvas"

xmlns="http://schemas.microsoft.com/client/2007"

xmlns:x="http: //schemas .microsoft. com/winfx/2006/xaml"

Loaded="Page_Loaded"

x: Class="MySilverlightProject2.Page;assembly=ClientBin/MySilverlightProject2.d 11"

Width=,,400"

Height="400"

Background="White">     *

<TextBlock x:Name="Title" Text="Image Slide Show" FontSize=,,18"

Canvas,Left=" 10" Canvas.Top="10Hx/TextBlock>

<Image x:Name="Slide Image" Source="" Canvas.Left="10" Canvas.Top="45" Height="250"></Image>

<TextBlock x:Name="Previous" Text="\\ Previous" FontSize="12"

Canvas.Left="10" Canvas.Top="300"></TextBlock>

<TextBlock x:Name="Next" Text="Next //" FontSize="12"

Canvas.Left="250" Canvas,Top="300"></TextBlock>

</Canvas>

3.   Для данного примера мы будем использовать изображения, которые поставляются в комплекте с Windows. В операционной системе Vista их можно найти в каталоге Sample Pictures. Создайте в вашем решении каталог изображений и скопируйте эти изображения в данный каталог.

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

<TextBlock x:Name="Previous"

MouseLeftButtonDown="Previous_MouseLeftButtonDown" ...

<TextBlock x:Name="Next"

MouseLeftButtonDown="Next_MouseLeftButtonDown" ...

5.   Теперь мы добавим код в файл выделенного кода для реакции на эти события. На уровне класса мы будем отслеживать изображения в строковом массиве, а также индекс вы­бранного изображения. Мы проинициализируем первое изображение при загрузке стра­ницы и при каждом событии TextBlock будем менять изображение. В листинге 17.2 по­казан код, который необходимо для этого написать.

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System. Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace MySilverlightProject2 {

public partial class Page : Canvas {

// Список изображений

string[] _images = new string[] {"Autumn Leaves.jpg", "Creek.jpg",

"Desert Landscape.jpg", "Dock.jpg", "Forest Flowers.jpg", "Forest.jpg" };

// Используется для отслеживания текущего выбранного изображения int _selectedlndex = 0;

public void Page_Loaded(object o, EventArgs e) {

// Необходимо для инициализации переменных InitializeComponent();

// Установить начальное изображение SetUri();

}

void Previous_MouseLeftButtonDown(object sender, MouseEventArgs e) { // Проверить предыдущее значение if (_selectedlndex -1 >= 0) {

_selectedlndex = _selectedlndex - 1;

}

// Перейти к предыдущему изображению в списке SetUri();

void Next_MouseLeftButtonDown(object sender, MouseEventArgs e) {

// Проверить следующее значение

if (_selectedlndex + 1 < _images.GetLength(0)) {

_selectedlndex = _selectedlndex +1;

}

// Перейти к следующему изображению в списке SetUri();

private void SetUri() {

Uri u = new Uri("images/" + _images[_selectedlndex], UriKind.Relative) Slidelmage.Source = u;

}

}

}

6.   Запустите приложение для того, чтобы увидеть, как оно работает в вашем браузере. Об­ратите внимание, что вы можете установить точки останова в файле выделенного кода и отладить ваше приложение точно так же, как и любое другое. На рис. 17.24 показан при­мер приложения, выполняющегося в IE.

7.   Когда вы создавали файл Page.xaml, то вы были ограничены визуальным конструктором Visual Studio. Вспомните, что взаимодействие между дизайнером и разработчиком со­стоит в том, что дизайнер оформляет приложение, а разработчик выполняет разработку. Теперь вы можете передать хатЬфайл дизайнеру для "наведения красоты".

На этом шаге вы сами будете играть роль дизайнера. Вы можете щелкнуть правой кноп­кой мыши по хат1-файлу в Visual Studio для того, чтобы открыть его в Expression Blend

2.   На рис. 17.25 показан пример этого процесса.

Рис. 17.25. Загрузка хат1-файла в Expression Blend из Visual Studio

На рис. 17.26 показан файл Page.xaml, открытый в Expression Blend. Обратите внимание, что открыт весь проект. Это позволяет дизайнеру выполнить приложение (для того что­бы увидеть результаты изменений). Обратите также внимание на совмещенное представ­ление разметки и визуального конструктора.

8.   Теперь вы можете использовать инструменты визуального конструктора для изменения разметки XAML. Выберите элемент в визуальном конструкторе и щелкните по панели Properties (вверху справа). Здесь вы можете манипулировать цветом, шрифтами, визуа­лизацией и т. д. Вы можете также при помощи визуального конструктора позициониро­вать элементы относительно границ и друг друга.

На рис. 17.27 показан пример. Здесь мы изменили заголовок TextBlock так, чтобы он отображался под углом, имел градиентную заливку и накладывался на изображения. Об­ратите также внимание на следующий и предыдущий элементы TextBlock.

Они также накладываются на изображения. Для случаев нависания над ними мы настроили курсор в виде руки. Все это было настроено при помощи панели Properties.

Сохраните файл и закройте Expression Blend. Вернитесь в Visual Studio, и она должна будет соответственно обновить вашу разметку. Новая разметка должна выглядеть вроде показанной в листинге 17.3.

<Canvas x:Name="parentCanvas"

xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xamlM Loaded="Page_Loaded"

x:Class="MySilverlightProject2.Page; assembly=ClientBin/MySilverlightProject2. dll-"

Width="357"

Height="354"

Background="White">

<Image x:Name="SlideImage" Source="images/Autumn Leaves.jpg"

Width="337" Height="337" Canvas.Left="10" Canvas.Top="24"/>

<TextBlock x:Name="Previous" Text="&lt;&lt; Previous" FontSize="14" Canvas.Left="10" Canvas.Top="300"

MouseLeftButtonDown="Previous_MouseLeftButtonDown" Foreground="#FFFFFFFF" FontWeight="Bold" Cursor="Hand"x/TextBlock>

<TextBlock x:Name="Next" Text="Next &gt;&gt;" FontSize=,,14"

Canvas.Left="286.663" Canvas.Тор=и300" MouseLeftButtonDown="Next_MouseLeftButtonDown"

Foreground="#FFFFFFFF" FontWeight="Bold" Cursor="Hand"></TextBlock>

<TextBlock x:Name="Title" Text="Image Slide Show" FontSize="36"

Canvas.Left="10.385"

Canvas.Top="17.542" RenderTransformOrigin="0.5,0.5" Width="351.884" FontStretch="Expanded" FontStyle="Normal" FontWeight="Bold"> <TextBlock.Foreground>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStpp Color="#FF0E2DF8" Offset="0"/>

<GradientStop Color="#FFFFFFFFM Offset="l,'/>

</LinearGradientBrush>

</TextBlock.Foreground>

<TextBlock.RenderTrans form>

<TransformGroup>

<ScaleTransform ScaleX="l" ScaleY="l"/>

<SkewTransform AngleX="0" AngleY="0"/>

<RotateTransform Angle="-7.595"/>

<TranslateTransform X="0" Y=n0"/>

</TransformGroup>

</TextBlock.RenderTransform>

</TextBlock>

</Canvas>

И наконец, запустите приложение в Web-браузере. Вы должны получить новый внешний вид и новое поведение, которое вы определили при помощи Expression Blend. На рис. 17.28 показан пример приложения, выполняющегося в IE.