Опубликован: 15.06.2011 | Доступ: свободный | Студентов: 704 / 58 | Оценка: 4.25 / 4.00 | Длительность: 14:09:00
Самостоятельная работа 12:

Создание простого Silverlight приложения, используя один из компонентов Expression Studio.

< Лекция 12 || Самостоятельная работа 12: 12 || Самостоятельная работа 13 >
Аннотация: В данном практическом занятии будет созданное простое Silvelight приложение с помощью Microsoft Expression Blend 4.

1.Запустим Expression Blend 4. И создадим новый проект:


Рис. 24.1.

2.Выберем из списка "Silvelight Application + WebSite":


Рис. 24.2.

Откроется окно проекта:

3.Для начала необходимо осуществить разметку проекта. Разметить области проекта можно с помощью мыши (синии полоски по вертикали или горизонтали) или вручную с помощью XAML кода. Выполним начальную разметку проекта:

Добавим атрибут ShowGridLines="True" в XAML-код, после чего пунктиром выделятся границы разметки:

<Grid x:Name="LayoutRoot" Background="White" ShowGridLines="True">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="0.492*"/>
      <ColumnDefinition Width="0.508*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="0.673*"/>
      <RowDefinition Height="0.177*"/>
      <RowDefinition Height="0.15*"/>
    </Grid.RowDefinitions>
  </Grid>

4.Добавим элементы управления в проект. Для этого перейдем во вкладку "Assests":


Рис. 24.5.

Из списка выберем "Button" и перенесем на рабочую область проекта:

Далее с помощью инструмента выбора "Selection", выберем добавленную кнопку. После чего станет активна закладка свойств кнопки ( Properties ):


Рис. 24.7.

Изменим заливку кнопки на красный:


Рис. 24.8.

Высоте, ширине и отступам поставим следующие значения - Width = 305, Height = 62, Margin =5:


Рис. 24.9.

Изменим имя кнопки "Button" на "Кнопка 1":


Рис. 24.10.

В итоге на рабочей области - элемент управления отобразится следующим образом:

5.Аналогичным образом разместим другие элементы управления. Элементы управления 2 Button, 2 TextBox, 1 Label, 1 Star (Раздел "Shapes" ):


Рис. 24.12.
< Лекция 12 || Самостоятельная работа 12: 12 || Самостоятельная работа 13 >