Опубликован: 24.03.2009 | Доступ: свободный | Студентов: 2286 / 115 | Оценка: 4.24 / 3.93 | Длительность: 17:47:00
Лекция 1:

Введение в Silverlight 2

Лекция 1: 1234 || Лекция 2 >

Silverlight и XAML

Теперь, получив общее представление об архитектуре Silverlight и о том, как будет выглядеть типовое приложение, обратимся к основе UX: XAML

XAML - это язык разметки на базе XML, используемый для определения визуальных элементов приложения. К ним относятся UI, графические элементы, анимации, мультимедиа, элементы управления и пр. XAML был представлен Microsoft в Windows Presentation Foundation (WPF), ранее называемом Avalon, который является технологией, ориентированной на выполнение на клиентском компьютере, и частью .NET Framework 3.0 и последующих версий. Как обсуждалось ранее, он разработан с целью заполнения технологической пропасти между дизайнерами и разработчиками при создании приложений.

XAML, используемый в Silverlight, отличается от XAML в WPF. В данном случае XAML - это подмножество,ориентированное на возможности Веб-приложений. Так что те, кто знаком с XAML из WPF, заметят отсутствие некоторых тегов и функциональности, например, элемента <Window>.

XAML использует XML для определения UI с помощью элементов XML Корнем всех XAML-документов Silverlight является элемент-контейнер, такой как Canvas (Холст), определяющий область, в которой будет отрисован ваш UI. При построении Silverlight-приложения корневой элемент Canvas будет содержать объявления пространств имен XML, необходимых Silverlight.

Рассмотрим пример XAML-документа в Silverlight 1.0:

<Canvas xmlns=" http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xam l"
        Width="640" Height="480" Background = "White">   
</Canvas>

Можно заметить, что объявлены два пространства имен. Типовой документ XAML содержит базовый набор элементов и атрибутов и дополнительный набор, для описания которого обычно используется префикс x:. Примером дополнительного атрибута пространства имен является широко используемый x:Name,с помощью которого задается имя элемента XAML, что позволяет ссылаться на него в коде. Корневой элемент Canvas объявляет местоположение пространства имен всех элементов.

Элемент Canvas является контейнером. Это означает, что он может содержать другие элементы как дочерние. Эти элементы тоже могут быть контейнерами для других элементов, определяя UI как дерево XML-документа. Например, ниже представлен простой XAML-документ с рядом дочерних элементов, некоторые из которых сами являются контейнерами Canvas:

<Canvas xmlns=" http://schemas.microsoft.com/client/2007" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xam l" 
        Width="640" Height="480" Background = "Black" >
  <Rectangle Fill="#FFFFFFFF" Stroke="#FF000000" Width = "136" Height="80" 
             Canvas.Left="120" Canvas.Top="240"/>
  <Canvas>
    <Rectangle Fill="#FFFFFFFF" Stroke="#FF000000" Width = "104" Height="96" 
               Canvas.Left="400" Canvas.Top="320"/>
    <Canvas Width="320" Height="104" Canvas.Left="96" Canvas.Top="64">
      <Rectangle Fill="#FFFFFFFF" Stroke="#FF000000" Width="120" Height="96"/>
      <Rectangle Fill="#FFFFFFFF" Stroke="#FF000000" Width="168" Height="96" 
                 Canvas.Left=" 152" Canvas.Top="8"/>
    </Canvas>
  </Canvas>
</Canvas>

Здесь можно увидеть, что у корневого Canvas есть два дочерних элемента: Rectangle и другой Canvas. Второй Canvas также содержит Rectangle и Canvas, и в последнем Canvas находится еще два элемента Rectangle. Такая иерархическая структура позволяет логически группировать элементы управления и использовать для них общую компоновку и поведение.

XAML в Silverlight поддерживает ряд фигур, которые можно сочетать для получения более сложных объектов. Намного более подробно использование XAML рассматривается в "Основы XAML" , "Основы XAML", сейчас остановимся лишь на основных фигурах:

  • Rectangle Позволяет определять на экране прямоугольную форму
  • Ellipse Позволяет определять эллипс или круг
  • Line Отрисовывает прямую линию, соединяющую две точки
  • Polygon Отрисовывает многоугольник
  • Polyline Отрисовывает ломаную линию
  • Path Позволяет создавать нелинейные контуры (например, каракули)

Помимо этого, XAML поддерживает кисти (brushes),которые определяют, как объект закрашивается на экране. Внутренняя область объекта закрашивается с помощью кисти fill, а контур объекта отрисовывается кистью stroke. Существует множество типов кистей, включая одноцветные кисти, градиентные, изображения и видео.

Рассмотрим пример использования кисти SolidColorBrush (Одноцветная кисть) для закрашивания эллипса:

<Ellipse Canvas.Top="10" Canvas.Left="24"
         Width="200" Height="150">
  <Ellipse.Fill>
    <SolidColorBrush Color="Black" />
  </Ellipse.Fill>
</Ellipse>

В данном случае кисть использует один из 141 поддерживаемых Silverlight именованных цветов, Black (черный). Также может использоваться стандартная шестнадцатеричная RGB-запись для создания цветов.

Заливки и обводки также могут иметь градиентную заливку. Для этого используется градиентная кисть. Градиент определяется рядом контрольных точек градиента (gradient stops) в нормированном пространстве (normalized space).Так, например, если требуется определить линейный градиент, в котором цвета будут изменяться слева направо от черного к белому через оттенки серого, необходимо задать соответствующие контрольные точки на нормированной линии. В этом случае начало нормированной линии принимается за точку 0, и конец - за точку 1. Таким образом, градиент слева направо в одномерном пространстве имеет две точки градиента, 0 и 1. Если необходимо получить градиент с переходами между несколькими цветами - от черного к красному и затем к белому, например, - пришлось бы задать третью точку где-то между 0 и 1. Однако следует помнить, что при создании заливки мы работаем в двумерном пространстве, поэтому верхний левый угол представляет точка (0,0), и нижний правый угол представляет точка (1,1). Таким образом, для заливки прямоугольника с помощью градиентной кисти использовалась бы LinearGradientBrush следующим образом:

<Rectangle Width="200" Height="150" >
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
      <LinearGradientBrush.GradientStops>
        <GradientStop Color="Red" Offset="0" />
        <GradientStop Color="Black" Offset="1" />
      </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>
    </Rectangle. Fill>
  </Rectangle>

XAML также поддерживает отображение текста. Для этого используется элемент TextBlock. Типовые свойства текста, такие как содержимое, тип шрифта, размер шрифта, обтекание и др., можно изменять через атрибуты. Вот простой пример:

<TextBlock TextWrapping= "Wrap" Width="100"> 
  Hello there, how are you? 
</TextBlock>

Трансформация объектов в XAML осуществляется с помощью ряда трансформаций. К ним относятся:

  • RotateTransform Поворачивает элемент на заданный угол
  • ScaleTransform Используется для изменения масштаба объекта
  • SkewTransform Наклоняет объект в заданном направлении на заданный угол
  • TranslateTransform Перемещает объект в направлении, соответственно заданному вектору
  • MatrixTransform Используется для создания математического преобразования, которое может сочетать все вышеперечисленное

Возможна группировка трансформаций. Группируя существующие трансформации, можно создать сложную трансформацию. То есть можно, например, переместить объект с помощью трансляции, изменить его размер с помощью масштабирования и при этом повернуть его. Рассмотрим пример, в котором выполняется разворот и изменение масштаба холста:

<Canvas.RenderTransform>
  <TransformGroup>
    <RotateTransform Angle="-45" CenterX="50" CenterY="50"/>
    <ScaleTransform ScaleX="1.5" ScaleY="2" />
  </TransformGroup>
</Canvas.RenderTransform>

Поддержка анимации в XAML реализована посредством определения изменений свойств со временем. Для этого используется временная шкала. Временные шкалы располагаются в раскадровке (story-board).Существуют различные типы анимации:

  • DoubleAnimation Обеспечивает возможность анимации числовых свойств, например таких, которые используются для определения положения
  • ColorAnimation Обеспечивает возможность анимации цветовых свойств, таких как заливки
  • PointAnimation Обеспечивает возможность анимации точек, определенных в двухмерном пространстве

Изменять свойства можно линейно, тогда свойство меняет значения с течением времени, или в режиме "ключевого кадра", когда определяется ряд контрольных точек, переходы между которыми и создают анимацию. Более подробно эти вопросы будут рассмотрены в "Трансформация и анимация в XAML" , "Трансформация и анимация в XAML".

Но применение XAML выходит далеко за рамки рассмотренных здесь основных понятий. С помощью XAML описываются элементы управления и компоновка UI. Боле подробно это будет рассмотрено в "Элементы управления Silverlight: представления и компоновки" , "Элементы управления Silverlight: представления и компоновки", и в лекциях части 2, "Программирование в Silverlight 2".

Лекция 1: 1234 || Лекция 2 >