При создании вашего приложения используйте хат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="
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="
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="<< 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 >>" 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.