Основы XAML

Изменение направления распространения градиента

Задавая свойства StartPoint (Начальная точка) и EndPoint (Конечная точка) LinearGradientBrush, можно изменять направление распространения градиента. Чтобы направить градиентную заливку из нижнего левого в верхний правый угол, этим свойствам необходимо задать значения (0,1) и (1,0), соответственно:

<Rectangle Width="200" Height="128" 
            Canvas.Left="8" Canvas.Top="8"> 
  <Rectangle.Fill> 
    <LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
      <GradientStop Color="#FF000000" Offset="0"/> 
      <GradientStop Color="#FFFFFFFF" Offset="1"/> 
    </LinearGradientBrush> 
  </Rectangle.Fill> 
</Rectangle>

На рис. 4.4 показано, как этот прямоугольник будет выглядеть на экране.

Добавление точек градиента

В предыдущем примере показано минимально возможное количество точек градиента, которое равно двум. Для управления градиентом можно задавать дополнительные точки градиента и цвета для них. Например, если требуется получить градиентную заливку с изменением цвета от черного к белому и назад к черному, можно определить три точки следующим образом:

<Rectangle Width="200" Height="128" 
        Canvas.Left="8" Canvas.Top="8"> 
  <Rectangle.Fill> 
    <LinearGradientBrush>
      <GradientStop Color="#FF000000" Offset="0"/> 
      <GradientStop Color="#FFFFFFFF" Offset="0.5"/> 
      <GradientStop Color="#FF000000" Offset="1"/>
    </LinearGradientBrush> 
  </Rectangle.Fill> 
</Rectangle>

Первая точка, в позиции 0, черная; вторая, на полпути вдоль линии градиента (в позиции 0,5), белая; и третья точка, в конце градиента в позиции 1, снова черная. Если сформировать визуальное представление этого, можно будет увидеть примерно такой прямоугольник, как представлен на рис. 4.5.

Позиционирование точек градиента выполняется с помощью параметра Offset (Смещение), поэтому чтобы передвинуть белую секцию данного градиента ближе к верхнему левому углу, необходимо просто изменить значение его свойства Offset так, чтобы оно было ближе к нулю, как показано в данном фрагменте XAML:

<Rectangle Width="200" Height="128" Canvas.Left="8" Canvas.Top="8"> 
  <Rectangle.Fill> 
    <LinearGradientBrush>
      <GradientStop Color="#FF000000" Offset="0"/> 
      <GradientStop Color="#FFFFFFFF" Offset="0.1"/> 
      <GradientStop Color="#FF000000" Offset="1"/>
    </LinearGradientBrush> 
  </Rectangle.Fill> 
</Rectangle>

To, как это меняет вид прямоугольника, можно увидеть на рис. 4.6.

Экспериментируя с позиционированием и направлениями градиента, можно добиться некоторых интересных эффектов. Эти свойства могут использоваться для заполнения фигур или определения контуров, как будет показано далее в данной лекции.

RadialGradientBrush

RadialGradientBrush (Радиальная градиентная кисть) аналогична LinearGradientBrush с точки зрения определения, но она задает круговой градиент, где точка 0 обозначает центр круга, и 1 обозначает внешний край. Проще показать это на примере, рассмотрев такой XAML:

<Rectangle Width = "200" Height="128" Canvas.Left="8" Canvas.Top="8"> 
  <Rectangle.Fill> 
    <RadialGradientBrush> 
      <GradientStop Color="#FF000000" Offset="0"/> 
      <GradientStop Color="#FFFFFFFF" Offset="1"/> 
    </RadialGradientBrush> 
  </Rectangle.Fill> 
</Rectangle>

Этот код обеспечивает заполнение фигуры градиентной заливкой, начиная от черного цвета в центре и заканчивая белым по краям, как показано на рис. 4.7. Обратите внимание, что вы видите эллипс, так как внешний край прямоугольника белый, и фоновый цвет прямоугольника аналогичен цвету внешней точки градиента.

Точки градиента для RadialGradientBrush определяются теми же методами, что и для LinearGradientBrush.

Задание фокуса

При выполнении заливки с использованием RadialGradientBrush, установив свойство GradientOrigin (Центр градиента), можно задавать фокус заливки. Это свойство используется для задания точки начала градиента, которая обычно располагается в центре круга. Несмотря на радиальную природу RadialGradientBrush, фокус задается в прямоугольном нормированном пространстве. Поэтому, если необходимо расположить фокус в верхнем левом углу, задайте GradientOrigin значение (0,0); если желаете расположить его в нижнем правом углу, задайте GradientOrigin значение (1,1). Следующий пример показывает градиентную заливку, фокусная точка которой располагается в нижнем правом углу объекта с координатами (0.7,0.7):

<Rectangle Width = "200" Height="128" 
         Canvas.Left="8" Canvas.Top="8"> 
  <Rectangle.Fill> 
    <RadialGradientBrush GradientOrigin="0.7, 0.7">
      <GradientStop Color="#FF000000" Offset="0"/> 
      <GradientStop Color="#FFFFFFFF" Offset="1"/>
    </RadialGradientBrush> 
  </Rectangle.Fill> 
</Rectangle>

На рис. 4.8 представлено, как это выглядит.

Изменение SpreadMethod

С помощью свойства SpreadMethod (Метод распространения) можно определять характер повторения градиента. Существует три возможных значения SpreadMethod: Pad (Заполнение), Reflect (Отражение) и Repeat (Повтор). Pad заполняет круг градиентной заливкой соответственно заданным параметрам и является значением по умолчанию. На рис. 4.7 и 4-8 показана прорисовка базовой RadialGradientBrush, для которой задан метод распространения Pad.

Ниже представлен XAML, описывающий прямоугольник, заполненный градиентной заливкой, для свойства SpreadMethod которой задано значение Reflect. Результаты можно увидеть на рис. 4.9.

<Rectangle Width = "200" Height="128" 
            Canvas.Left="8" Canvas.Top="8">
  <Rectangle.Fill>
    <RadialGradientBrush Spread="" Method ="Reflect" >
      <GradientStop Color="#FF000000" Offset="0"/>
      <GradientStop Color="#FFFFFFFF" Offset="1"/>
      </RadialGradientBrush>
    </Rectangle.Fill>
</Rectangle>

Это приводит к отражению градиента, как видно на рис. 4.9. Для данного градиента определено, что он должен изменяться от черного к белому, но он возвращается опять к черному, как будто отражается. Аналогично, можно использовать метод Repeat для повторения градиента от черного к белому. На рис. 4.10 показан результат этого. Шаблон градиента повторяется с того места, где при обычных условиях он был бы завершен, повторяя переход от черного к белому вплоть до внешних краев прямоугольника.

Задание радиуса RadialGradientBrush

Для задания необходимого радиуса градиентной заливки используются свойства RadiusX и RadiusY. Значение по умолчанию для этих свойств - 0,5. Если задать меньшее значение, будет закрашено больше одного круга с учетом поведения прорисовки, которое определяется методом SpreadMethod. Если задать значение, больше 0,5, градиент будет "растянут".

Например, следующий фрагмент XAML-кода определяет RadialGradientBrush, для свойств RadiusX v\RadiusY которой задано значение 0,1, и свойство SpreadMethod не задано (т.е. по умолчанию оно принимает значение Pad ).

<Rectangle Width="200" Height="128" 
            Canvas.Left="8" Canvas.Top="8"> 
  <Rectangle.Fill> 
    <RadialGradientBrush RadiusX="0.1" RadiusY="0.1"> 
      <GradientStop Color="#FF000000" Offset="0"/> 
      <GradientStop Color="#FFFFFFFF" Offset="1"/> 
    </RadialGradientBrush> 
  </Rectangle.Fill> 
</Rectangle>

Этот код обеспечит формирование визуального представления прямоугольника, заливка которого выполняется с помощью RadialGradientBrush с радиусом 0,1, поэтому она в пять раз меньше объектов, которые были представлены ранее. Это можно увидеть на рис. 4.11.

В сочетании с методом SpreadMethod можно получить некоторые интересные эффекты. Пример задания значения Reflect для SpreadMethod представлен на рис. 4.12.

Использование ImageBrush

Для заполнения области изображением используется ImageBrush (Кисть-изображение). Согласно поведению, по умолчанию кисть меняет размер соответственно размеру изображения, обеспечивая сохранение его пропорций. Следующий XAML-код обеспечивает заполнение содержимого прямоугольника ImageBrush (Результаты представлены на рис. 4.13):

<Rectangle Width="200" Height="128" 
            Canvas.Left="8" Canvas.Top="8">
  <Rectangle.Fill> 
    <ImageBrush ImageSource="smily.jpg" />
  </Rectangle.Fill> 
</Rectangle>

Растягивание изображения

С помощью свойства Stretch (Растяжение) можно определить то, как изображение заполняет закрашиваемую область. Это можно задать с помощью ряда различных режимов растяжения: None (Нет), Uniform (Равномерное), UniformToFill (Равномерное заполнение) и Fill (Заполнение).

Режим None формирует визуальное представление изображения без изменений, в данном случае растяжение не применяется. Значение Uniform обусловливает изменение размеров изображения так, чтобы оно заполняло прямоугольник, но при этом не меняет его пропорции. UniformToFill изменяет размер изображения так, чтобы оно максимально заполняло область вывода, но при этом не меняет его пропорции (обрезая изображение в случае необходимости). Значение Fill обеспечит заполнение изображением всей области вывода с использование независимого масштабирования по осям х и у. Таким образом, изображение будет искажено, но полностью заполнит доступную область.

Все эти варианты в действии можно увидеть на рис. 4.14, на котором представлено четыре прямоугольника, заливка которых выполнена одним и тем же изображением, но с разными режимами растяжения.

Выравнивание изображения

Выравнивание изображения по осям х и у определяется с помощью свойств AlignmentX и AlignmentY. Изображение может быть выровнено вдоль оси х по левому краю, по правому краю, по центру и вдоль оси у по верху, центру или низу. Обратите внимание, что если изображение растягивается для

заполнения области, задание выравнивания не будет иметь никакого эффекта; оно имеет смысл, только когда свойству Stretch задано значение None. Далее представлен пример выравнивания изображения по правому краю и низу:

<Rectangle Stroke="Black" Width="200" Height="128" 
            x:Name="r1"> 
  <Rectangle.Fill> 
    <ImageBrush ImageSource="smily.jpg" Stretch="None" 
                  AlignmentX="Right" AlignmentY="Bottom" /> 
  </Rectangle.Fill> 
</Rectangle>

Как это выглядит, можно увидеть на рис. 4.15.

VideoBrush

VideoBrush (Видео-кисть) позволяет заполнять область видео-потоком. Более подробно эта кисть будет обсуждаться в лекц. 11, "Мультимедиа, рукописный ввод и Deep Zoom", в которой также более полно будет описан элемент управления MediaElement.

Визуальные свойства XAML

Кроме кистей и параметров Canvas, XAML предоставляет множество других свойств для управления представлением объекта. Они позволяют задавать размеры, прозрачность объекта, поведение курсора и обводку.

Использование свойств XAML для задания размеров и местоположения

Размеры в XAML задаются с помощью свойств Height и Width, которые принимают значения типа double. Чтобы создать прямоугольник шириной 100 пикселов и высотой 200 пикселов, например, необходимо было бы написать следующий XAML-код:

<Rectangle Fill=" Black" Width="100" Height="200" />

Кроме того, помните, что относительное местоположение объекта задается через точку с помощью свойств Top и Left в родительском элементе.

Рассмотрим следующий XAML:

<Canvas>
  <Canvas Canvas.Top="40" Canvas.Left="40"> 
    <Rectangle Canvas.Top="40" Fill="Black" 
            Width="100" Height="200" />
  </Canvas> 
</Canvas>

Предположим, что самый внешний элемент Canvas является корневым холстом страницы. В результате, Rectangle будет отрисован на расстоянии 80 пикселов от верха страницы, потому что его родительский холст опущен на 40 пикселов вниз, и Rectangle расположен на 40 пикселов вниз от верхнего края своего родителя, что в сумме дает 80 пикселов.

Использование прозрачности

Прозрачность объекта может быть задана двумя способами. Первый - с помощью альфа-канала кисти, которая используется для заливки объекта. Следующий XAML-код обеспечит создание черного прямоугольника поверх рисунка:

<Image Source="smily.jpg" />
<Rectangle Fill="#FF000000" Width="100" Height="200" />

В качестве значения свойства Fill задается черный цвет (потому что красному, зеленому и синему каналам задан 0), и альфа-канал задан непрозрачным (значение #FF). Меняя значение канала альфа, можно сделать прямоугольник полупрозрачным,:

<Image Source="smily.jpg" />
<Rectangle Fill="#77000000" Width="100" Height="200" />

Теперь прямоугольник будет выглядеть серым, и сквозь него будет видно изображение.

Второй метод - использовать свойство Opacity (Непрозрачность), которое принимает значения в диапазоне от 0 (полностью прозрачный) до 1 (полностью непрозрачный). Это свойство применяется в сочетании с определением альфа-канала кисти. Если для заливки фигуры использовать кисть цвета #77000000, например, и затем задать свойству Opacity значение 1, прямоугольник все равно будет непрозрачным. Если задать свойству Opacity значение 0, прямоугольник будет совершенно прозрачным.

Свойство Opacity удобно использовать для анимации прозрачности объекта. Оно позволяет без труда реализовать эффект постепенного исчезновения и появления объекта через DoubleAnimation. Более подробно анимация рассматривается в лекц. 5, "Трансформация и анимация XAML".

Поведение курсора

Большинство элементов XAML позволяют использовать свойство Cursor (Курсор) для задания вида курсора при его прохождении по элементу. Это свойства принимает значения перечисления MouseCursor (Курсор мыши):

Управление свойством Stroke

Свойство Stroke определяет, как контур фигуры отрисовывается на экране. Обводка фигуры отличается от ее заливки.

Stroke задается с помощью кисти. Далее представлен пример XAML-кода, в котором прорисовка прямоугольника формируется черным контуром, заданным с помощью простой обводки:

<Rectangle Stroke="Black" Canvas.Left="40" Canvas.Top="40" Width="100" Height="200">

По сути, свойство Stroke, в данном случае, использует SolidColorBrush черного цвета ( Black ). Синтаксически это эквивалентно следующему XAML:

<Rectangle Canvas.Left="40" Canvas.Top="40" 
              Width = "100" Height="200">
  <Rectangle.Stroke> 
    <SolidColorBrush Color="Black" />
  </Rectangle.Stroke > 
</Rectangle>

Используя такой синтаксис (определение кисти в качестве присоединенного свойства Stroke ), можно задавать разные типы кистей для отрисовки обводки фигуры. Далее приведен пример применения LinearGradientBrush для обводки прямоугольника:

<Rectangle StrokeThickness="10" Canvas.Left="40" 
            Canvas.Top="40" Width="100" Height="200"> 
  <Rectangle.Stroke> 
    <LinearGradientBrush > 
      <GradientStop Color="#FF000000" Offset="0"/> 
      <GradientStop Color="#FFFFFFFF" Offset="0.5"/> 
      <GradientStop Color="#FF000000" Offset="1"/> 
    </LinearGradientBrush> 
  </Rectangle.Stroke > 
</Rectangle>

Как это выглядит на экране можно увидеть на рис. 4.16.

Задание ширины обводки

Возможно, вы заметили, что в этом примере была задана ширина обводки 10. Это сделано для демонстрации градиентного изменения цвета, поскольку при использовании значения толщины по умолчанию, 1, его просто не было бы видно.

Ширина обводки задается свойством StrokeThickness (Толщина обводки). Оно определяет ширину обводки в пикселах:

<Rectangle StrokeThickness="10" Stroke="Black" 
       Canvas.Left="40" Canvas.Top="40" Width="100" 
       Height="200" />

Задание обводки пунктиром

Свойство StrokeDashArray (Массив длин элементов обводки пунктиром) используется для задания шаблона обводки пунктиром. В сочетании со свойствами StrokeDashCap (Наконечники элементов обводки пунктиром) и StrokeDashOffset (Смещение обводки пунктиром) оно обеспечивает детальное описание обводки пунктиром.

Чтобы обводка прямоугольника была выполнена пунктиром по определенному повторяющемуся шаблону, задается массив значений типа double, которые представляют длины чередующихся штрихов и пробелов. Чтобы определить шаблон пунктира с длиной штриха 4 единицы, за которым следует пробел длиной 1 единица, штрих длиной 2 единицы и пробел длиной 1 единица, свойству StrokeDashArray было бы задано значение (4,1,2,1). Вот пример:

<Rectangle StrokeThickness="10" Stroke="Black" 
    Canvas.Left="40" Canvas.Top="40" Width = "100" 
    Height="200" StrokeDashArray="4,1,2, 1"/>

На рис. 4.17 показано, как это выглядело бы на экране.

Как видим, штрихи обводки имеют прямоугольную форму с нескошенными кромками. Изменить это представление можно с помощью свойства StrokeDashCap. В качестве его значений используется значения перечисления PenLineCap (Наконечники линий):

Далее представлен пример использования StrokeDashCap для задания скругленных штрихов обводки пунктиром:

<Rectangle StrokeThickness="10" Stroke="Black" 
       Canvas.Left="40" Canvas.Top="40" Width = "100" 
       Height="200" StrokeDashArray="4,1,2,1" 
       StrokeDashCap="Round"/>

На рис. 4.18 показано, как это будет выглядеть на экране.

Определение типа соединения линий

Если взглянуть не предыдущие примеры, можно заметить, что штрихи пунктира пересекаются в углах и отрисовываются спрямленными. Это считается соединением линий. С помощью свойства StrokeLineJoin (Соединение линий обводки) можно определять поведение пера при соединении линий. Это свойство принимает перечисление PenLineJoin, которое может содержать одно из следующих трех значений:

Данный XAML-код создает прямоугольник, для которого задан тип соединения линий Bevel:

<Rectangle StrokeThickness="10" Stroke="Black" Canvas.Left="40" Canvas.Top="40" 
      Width="100" Height="200" StrokeLineJoin="Bevel" />

Как это отображается, можно увидеть на рис. 4.19.

Фигуры BXAML

XAML поддерживает ряд базовых фигур, которые могут использоваться для создания более сложных объектов. К ним относятся:

Использование объекта Ellipse

Фигура Ellipse используется для отрисовки эллипса или круга. Высота Ellipse определяется вертикальным диаметром (т.е. двойным радиусом по вертикали), его ширина определяется горизонтальным диаметром. Если эти значения равны, XAML сформирует круг. Контур Ellipse отрисовывается с помощью свойства Stroke и закрашивается с помощью Brush.

Использование объекта Rectangle

Rectangle используется для отрисовки прямоугольника или квадрата. Размеры данной фигуры задаются свойствами Width и Height. Если значения этих свойств равны, получаем квадрат. Как и для Ellipse, контур Rectangle отрисовывается с помощью свойства Stroke, для заливки используется Brush.

Используя свойства RadiusXw RadiusY, можно скруглить углы Rectangle. Задавая этим свойствам значения типа double, вы определяете необходимый радиус скругления. По умолчанию они равны 0.0, что указывает на отсутствие скругления. Поскольку свойства RadiusXv\ RadiusY задаются независимо друг от друга, применяя разные значения для них, можно получить эллиптические скругления.

Далее представлен пример прямоугольника со скругленными углами. Свойству RadiusY задано значение 40, и свойству RadiusX -значение 20. Это указывает на то, что углы будут более пологими в вертикальном направлении:

<Rectangle Fill=" Black" Canvas.Left="40" Canvas.Top="40"
Width="100" Height="200" RadiusX="20" RadiusY="40" />

Результаты задания таких значений в действии можно увидеть на рис. 4.20.

Использование объекта Line

С помощью объекта Line можно создать простую линию в XAML Для этого задаются координаты (X1,Y1) и (X2,Y2), и линия отрисовывается между этими точками. Данные координаты задаются относительно верхнего левого угла области, который определяется свойствами Canvas.Top и Canvas.Left, как обычно. Обратите внимание, что чтобы линия была отрисована, обязательно должна быть определена обводка, хотя бы ее цвет.

Рассмотрим следующий XAML:

<Line X1="40" Y1 = "40" X2="100" Y2="100" Stroke="Black" />

Это обеспечит отрисовку линии, соединяющей точку (40,40) с точкой (100,100). Однако если добавить свойства Canvas.Top и/или Canvas.Left, линия будет отрисовыватьсясо смещением. Если предположить, что родительский холст не позиционирован, следующий XAML обеспечит создание линии, соединяющей точки (40,140) и (100,200). Если позиционирование присутствует, Silverlight отрисует линию, относительно позиции родительского элемента.

<Line Canvas.Top="100" X1 = "40" Y1="40" X2="100" Y2="100" Stroke="Black" />

Использование контуров и геометрических элементов

Объект Path отрисовывает последовательность соединенных прямых и кривых линий. Эти прямые и кривые определяются типом геометрического элемента. Здесь будут рассмотрены различные типы геометрических элементов.

EllipseGeometry (Геометрический элемент эллипс) определяет контур как простой эллипс. Например:

<Path Stroke="Black">
  <Path.Data> 
    <EllipseGeometry RadiusX="100" RadiusY="100" />
  </Path.Data> 
</Path>

Размеры эллипса, образующего контур, задаются в EllipseGeometry с помощью свойств RadiusX и Radiu-sY. Также с помощью атрибута Center (Центр) можно задать центр эллипса. Например:

<Path Stroke="Black"> 
  <Path.Data> 
    <EllipseGeometry RadiusX="100" RadiusY="100" Center="50,50" />
  </Path.Data> 
</Path>

LineGeometry (Геометрический элемент прямая) определяет контур как одну линию, начинающуюся в StartPoint, и заканчивающуюся в EndPoint. Эти точки задаются с помощью простых координат х и у, таким образом, верхний левый угол задается как (0,0). Вот пример LineGeometry:

<Path Stroke="Black">
  <Path.Data> 
    <LineGeometry StartPoint="10,10" EndPoint="100,100" />
  </Path.Data> 
</Path>

RectangleGeometry определяет контур как отдельный прямоугольник. Размеры прямоугольника задаются свойством Rect. Это строка из четырех значений, соответствующих отступу сверху, отступу слева, высоте и ширине прямоугольника. Итак, чтобы отрисовать прямоугольник 100 на 200 пикселов, верхний левый угол которого располагается в точке (0,0), использовался бы следующий Path:

<Path Stroke="Black">
  <Path.Data> 
    <RectangleGeometry Rect="0,0,100,200" />
  </Path.Data> 
</Path>

Объект PathGeometry (Геометрический элемент контур) используется для задания сложного контура, состоящего из разных сегментов, включая дуги, кривые Безье, прямые линии, кривые Безье высших степеней, поликвадратические кривые Безье и квадратические кривые Безье. Сегменты образуют PathFigure (Форма контура), и один или более объектов PathFigure образуют PathGeometry. PathGeometry также задает начальную точку контура. Если имеется множество сегментов, начальной точкой каждого последующего сегмента будет конечная точка предыдущего сегмента.

Объект ArcSegment

Объект ArcSegment (Сегмент дуга) отрисовывает простую эллиптическую дугу между двумя точками. Дуга описывается рядом разнообразных свойств:

Вот пример Path с одним дуговым сегментом, в котором демонстрируются данные свойства:

<Path Stroke="Black"> 
  <Path.Data> 
    <PathGeometry> 
      <PathFigure> 
        <ArcSegment Point="100,100" Size="200,200" 
              RotationAngle="10" IsLargeArc="False" 
              SweepDirection="ClockWise" /> 
      </PathFigure> 
    </PathGeometry> 
  </Path.Data> 
</Path>

Объект LineSegment

Добавить прямую линию в PathSegment (Сегмент контура) можно с помощью объекта LineSegment (Сегмент линия). Он просто отрисовывает прямую линию от текущей или начальной точки до точки, заданной свойством Point. Итак, чтобы отрисовать прямую из точки (100,100) до точки (200,200) и затем еще одну до точки (200,0), создается PathFigure, содержащий несколько линейных сегментов:

<Path Stroke="Black"> 
  <Path.Data> 
    <PathGeometry> 
      <PathFigure StartPoint="100,100"> 
        <LineSegment Point="200,200" /> 
        <LineSegment Point="200,0" /> 
      </PathFigure> 
    </PathGeometry> 
  </Path.Data> 
</Path>

Объект PolyLineSegment

Как следует из его имени, с помощью объекта PolyLineSegment (Сегмент ломаная) можно отрисовать ряд прямых, просто задав точки. Первая линия отрисовывается между начальной точкой и первой заданной точкой, вторая - между этой точкой и второй заданной точкой, и т.д.

Далее приведен XAML-код, демонстрирующий PolyLineSegment:

<Path Stroke="Black"> 
  <Path.Data> 
    <PathGeometry>
      <Path Figure StartPoint="100,100"> 
        <PolyLineSegment 
 Points=" 50,50,150,150,250,250,100,200,200,100,300,300" /> 
      </PathFigure> 
    </PathGeometry> 
  </Path.Data> 
</Path>

Объект BezierSegment

Этот объект позволяет описывать кривую Безье, которая является кривой между двумя точками, определяемой одной или двумя опорными точками. Объект BezierSegment (Сегмент кривая Безье) принимает в качестве параметров три точки, называемые Point1, Point2 и Point3. В зависимости от того, сколько точек используется, вы получаете разное поведение. Итак, например, если заданы Point1 и Point2, кривая будет сформирована от начальной точки в точку Point2 с использованием Point1 в качестве опорной точки. Если заданы Point1, Point2 и Point3, кривая формируется от начальной точки в точку Point3, Point1 и Point2 используются как опорные.

Вот пример PathFigure, содержащего BezierSegment:

<Path Stroke="Black"> 
  <Path.Data> 
    <PathGeometry> 
      <PathFigure StartPoint=" 100,100">
        <BezierSegment Point1="140,120" Point2="100,140" /> 
      </PathFigure> 
    </PathGeometry> 
  </Path.Data> 
</Path>

Объект PolyBezierSegment

Этот объект позволяет задавать группу точек, которые Silverlight интерпретирует в набор опорных точек для группы кривых Безье. Рассмотрим следующий XAML:

<Path Stroke="Black"> 
  <Path.Data> 
    <PathGeometry> 
      <PathFigure StartPoint="100,100"> 
        <PolyBezierSegment > 
          <PolyBezierSegment.Points> 
            <Point X="50" Y="50" />
            <Point X="150" Y="150" /> 
            <Point X="250" Y="250" /> 
            <Point X="100" Y="200" /> 
            <Point X="200" Y="100" /> 
            <Point X="300" Y="300" /> 
          </PolyBezierSegment.Points> 
        </PolyBezierSegment> 
      </PathFigure> 
    </PathGeometry> 
  </Path.Data> 
</Path>

Как альтернативный вариант, можно задать ряд точек с помощью коллекции точек, хранящейся в виде строки значений, разделенных запятыми:

<Path Stroke="Black"> 
  <Path.Data> 
    <PathGeometry> 
      <PathFigure StartPoint="100,100">
        <PolyBezierSegment   
Points="50,50,150,150,250,250, 100,200,200,100,300,300" /> 
      </PathFigure> 
    </PathGeometry> 
  </Path.Data> 
</Path>

Визуальное представление этого XAML-фрагмента показано на рис. 4.21. В данном случае, начальная точка определена координатами (100,100), это верхняя левая точка всей кривой. Первая кривая Безье заканчивается в точке (250,250), используя точки (50,50) и (150,150) в качестве опорных. Поскольку эти точки эффективно отменяют действие друг друга (они равноудалены от линии, соединяющей точки [100,100] и [250,250]), первая кривая Безье является прямой линией, оканчивающейся в точке (250,250). Вторая кривая Безье начинается в этой точке и заканчивается в точке (300,300) с опорными точками (100,200) и (200,100), благодаря чему она принимает вид петли.

Объект QuadraticBezierSegment

Квадратическая кривая Безье-это просто кривая Безье, построенная как обычная квадратическая кривая с использованием единственной опорной точки. QuadraticBezierSegment (Сегмент квадратическая кривая Безье) принимает два объекта Point. Если используется только один объект, он становится конечной точкой кривой. В этом случае контрольной точки нет, и кривая принимает форму прямой линии, соединяющей начальную и заданную конечную точки. Если задается две точки, вторая точка принимается за конечную точку кривой, а первая точка становится квадратической опортной точкой. Вот пример:

<Path Stroke="Black"> 
  <Path.Data> 
    <PathGeometry> 
      <PathFigure StartPoint="100,100">
        <QuadraticBezierSegment Point1 = "200,0" 
                      Point2="300,100" /> 
      </PathFigure> 
    </PathGeometry> 
  </Path.Data> 
</Path>

Кривая, формируемая данным XAML, представлена на рис. 4.22.

Объект PolyQuadraticBezierSegment

Как следует из его имени, PolyQuadraticBezierSegment (Сегмент поликвадратическая кривая Безье) является коллекцией соединенных квадратических кривых Безье, определенных и построенных соответственно списку опорных точек аналогично тому, как это описывалось ранее для объекта PolyBezierSegment. Далее представлен пример PolyQuadraticBezierSegment в действии:

<Path Stroke="Black"> 
  <Path.Data> 
    <PathGeometry> 
      <PathFigure StartPoint=" 100,100">
        <PolyQuadraticBezierSegment
 Points="50,50,150,150,250,250, 100,200,200,100,300,300" /> 
      </PathFigure> 
    </PathGeometry> 
  </Path.Data> 
</Path>

Визуальное представление данного XAML-фрагмента показано на рис. 4.23.

Данный код обеспечивает построение ряда квадратических кривых Безье. Первая строится между начальной точкой, (100,100), и точкой (150,150) с использованием точки (50,50) в качестве опорной, что в результате дает прямую линию, оканчивающуюся в точке (150,150). Вторая кривая начинается в точке (150,150) и заканчивается в точке (100,200) с опорной точкой (250,250). Это сегмент, в котором кривая разворачивается влево. Третья кривая начинается в точке (100,200) и заканчивается в точке (300,300) с опорной точкой (200,100). На рис. 4.23 это длинная сглаженная кривая, идущая слева направо.

Составные сегменты контура

Каждый из рассмотренных типов сегментов может входить в состав сегмента PathFigure. Кроме того, сегменты PathFigure могут собираться в коллекции в рамках PathGeometry для создания сложного набора сегментов.

Далее приведен пример PathGeometry, в состав которого входят два объекта PathFigure. Первый объект содержит LineSegment, PolyQuadraticBezierSegment и еще один LineSegment. Второй объект включает только один LineSegment.

<Path Stroke="Black"> 
  <Path.Data> 
    <PathGeometry> 
      <PathFigure StartPoint="100,100"> 
        <LineSegment Point="200,200" /> 
        <PolyQuadraticBezierSegment 
          Points="50,50,150,150,250,250,100,200,200,100,300,300" /> 
        <LineSegment Point="0,0" /> 
      </PathFigure> 
      <PathFigure>
        <LineSegment Point="10,400" /> 
      </PathFigure> 
    </PathGeometry> 
  </Path.Data> 
</Path>

Использование объекта GeometryGroup

В предыдущих разделах были представлены всевозможные геометрические элементы, начиная от самых простых, таких как EllipseGeometry, LineGeometry и RectangleGeometry, до сложных, образованных множеством объектов PathSegment в рамках PathGeometry. Объект GeometryGroup (Группа геометрических элементов) позволяет комбинировать все эти объекты.

Вы просто описываете геометрические элементы, которые хотите включить как коллекцию в этот объект. Далее представлен объект GeometryGroup, содержащий EllipseGeometry, RectangleGeometry, и затем тот же сложный PathGeometry, который использовался в предыдущем разделе:

<Path Stroke="Black"> 
  <Path.Data> 
    <GeometryGroup> 
      <EllipseGeometry RadiusX="100" RadiusY="100" Center="50,50" /> 
      <RectangleGeometry Rect="200,200,100,100" /> 
      <PathGeometry> 
        <PathFigure StartPoint="100,100"> 
          <LineSegment Point="200,200" /> 
          <PolyQuadraticBezierSegment 
            Points="50,50,150,150,250,250,100,200,200,100,300,300" /> 
          <LineSegment Point="0,0" /> 
        </PathFigure> 
        <PathFigure>
          <LineSegment Point="10,400" /> 
        </PathFigure> 
      </PathGeometry> 
    </GeometryGroup> 
  </Path.Data> 
</Path>

Рис. 4-24 представляет, как это будет выглядеть.

Язык описания контуров

Объект Path имеет свойство Data (Данные), в котором может использоваться язык описания контуров для определения сложных контуров. В этом языке используется следующий синтаксис: буква команды, за ней через пробел следует список разделенных запятыми чисел, за которым через пробел идет следующая буква команды. Вот пример:

<Path Stroke="Black" Data="M 100,100 L 200,200" />

В этом экземпляре контур отрисовывается с помощью команды M, обозначающей Move (Перейти), для перехода в точку (100,100) и команды L, обозначающей Line, для построения прямой линии до точки (200,200). Эти команды могут быть заданы либо прописными буквами (например, M ), что свидетельствует о применении абсолютных координат, или строчными буквами (например, m ), что определяет относительные координаты. Команда M помещает перо в заданную точку без отрисовки линии между точкой, в которой он находится в настоящий момент, и заданной точкой; т.е. перо перемещается в начальную точку. Затем будет проведена линия из точки (100,100) в точку (200,200), при условии отсутствия позиционирования родительского холста. Если родительский холст позиционирован, Silverlight отрисует линию относительно его положения.

Команда L (означающая Line) обеспечивает построение прямой линии от текущей точки в заданную.

Команда H принимает в качестве параметра только одно число и отрисовывает горизонтальную прямую между текущей точкой и заданным значением по оси х.

Команда V принимает в качестве параметра только одно число и отрисовывает вертикальную прямую между текущей точкой и заданным значением по оси у.

Команда C принимает в качестве параметров три точки. Она обеспечивает построение кубической кривой Безье между текущей точкой и третьей из заданных точек. Две первые точки используются как опорные.

Команда Q принимает в качестве параметров две точки и отрисовывает квадратическую кривую Безье между текущей точкой и второй из заданных точек. Первая заданная точка используется как опорная.

Команда S принимает в качестве параметров две точки и отрисовывает сглаженную кубическую кривую Безье между текущей точкой и второй из заданных точек. Для формирования сглаженной кривой используется две опорные точки: текущая точка и первый из двух параметров.

Команда T действует аналогично команде S, за исключением того что она обеспечивает построение сглаженной квадратической кривой Безье.

Команда A принимает пять параметров: размер, угол поворота, isLargeArc, sweepDirection и конечную точку. Эти параметры используются для построения эллиптической дуги.

Команда Z завершает текущий контур, проводя прямую линию между текущей точкой и начальной точкой контура и образуя замкнутую фигуру,.

Вырезание и геометрические элементы в XAML

Элементы XAML могут быть вырезаны по правилу, определяемому типом геометрической формы. Как было показано в предыдущем разделе, эти типы могут быть простыми ( EllipseGeometry, LineGeometry или RectangleGeometry ), сложными (использующими геометрическую форму, определенную объектом PathGeometry ) или группой из этих объектов в составе GeometryCollection.

Чтобы определить метод вырезания объекта, его присоединенному свойству Clip просто задается тип геометрической формы. Следующий пример представляет изображение, вырезанное EllipseGeometry:

<Image Source="smily.jpg" Width="300" Height="300"> 
<Image.Clip>
<EllipseGeometry Center="150,150" RadiusX="100" RadiusY="100" /> 
</Image.Clip>
</Image>

Увидеть, как это выглядит, можно на рис. 4.25.

Элементы управления XAML в Silverlight

Разработчикам на Silverlight доступен ряд элементов управления XAML К ним относятся:

Canvas

Image

Glyphs

TextBlock

MediaElement

Ко всем этим элементам могут применяться все свойства и операции, обсуждаемые в данной лекции выше, такие как вырезание, кисти, компоновка и пр. Первые четыре элемента будут рассмотрены в следующих подразделах. Элемент управления MediaElement подробно рассматривается в лекц. 11.

Элемент Canvas

Этот элемент определяет область страницы, в которую могут быть помещены дочерние элементы. Он может использоваться для визуальной группировки элементов, при этом их компоновка и позиционирование выполняются относительно него. Кроме того, объект Canvas может использоваться исключительно как контейнер для других объектов, обеспечивая возможность рассматривать их как единый объект при размещении и обработке событий.

Вот пример организации прямоугольников в группы с использованием элементов Canvas:

<Canvas Width="144" Height="128" Canvas.Left="24" Canvas.Top="8"> 
<Rectangle Fill="#FF000000" Stroke="#FF000000"
Width = "144" Height="64" Canvas.Top="24"/> 
<Rectangle Fill="#FF000000" Stroke="#FF000000"
Width = "56" Height="128" Canvas.Left="40"/> 
</Canvas>
<Canvas Width="152" Height="144" Canvas.Left="24" Canvas.Top="184"> 
<Rectangle Fill="#FFFF0000" Stroke="#FF000000"
Width = "152" Height="72" Canvas.Top="32"/> 
<Rectangle Fill="#FFFF0000" Stroke="#FF000000"
Width = "64" Height="144" Canvas.Left="48"/> 
</Canvas>

Элемент Image

Элемент управления Image используется для определения графического объекта. Он задается Универсальным идентификатором ресурса (URI) изображения, которое может быть растровым в формате jpg или .png.

Далее представлен пример, в котором компоновка изображения задана свойствами Height, Width, Canvas.Left и Canvas.Top и в качестве Source (Источник) изображения задан "smily.jpg":

<Image Width="184" Height="128" Canvas.Left="56" Canvas.Top="32" Source="smily.jpg"/>

Элемент Glyphs

Элемент Glyphs используется для отображения текста с заданным шрифтом. Также он может применяться для представления символов, не связанных с конкретными клавишами, каковыми являются многие графические символы, используемые в шрифтах, включая текст Wingdings или Unicode.

При использовании Glyphs необходимо соблюдать правило: чтобы шрифт мог отображаться, он должен быть установлен на данном компьютере. Таким образом, с Glyphs можно использовать только те шрифты, правами на распространение которых вы обладаете.

Шрифт для элемента Glyphs задается с помощью свойства FontUri (Uri шрифта). Затем свойствами Indices (Индексы) или UnicodeString (Строка Unicode) задаются символы, прорисовку которых нужно создать. В свойстве Indices для описания символов используются их смещения в описании шрифта. Смещения задаются в виде элементов списка, разделенных точками с запятой.

Кроме того, необходимо задать размер шрифта. Для этого используется свойство FontRenderingEmSize (Размер буквы M формируемого шрифта). По желанию можно задать свойство StyleSimulations (Имитация стилей) для имитации стилей шрифтов. Это свойство принимает значения BoldSimulation (Имитация жирного шрифта), ItalicSimulation (Имитация курсива) или BoldItalicSimulation (Имитация жирного курсива), а также значение по умолчанию, None.

Далее приводится пример элемента Glyphs. В нем для отрисовки некоторых символов используется шрифт Webdings и смещения символов.

<Glyphs Canvas.Top="0" FontUri="webdings.ttf" 
           Indices="133;134;135" Fill=" Black" 
           FontRenderingEmSize="48"/>

Как это будет представлено в Silverlight, показано на рис. 4.26.

Элемент TextBlock

Это облегченный объект, обеспечивающий отображение одной или множества строк текста, имеющий множество опций форматирования. Он существенно отличается от элемента Glyphs тем, что не требует задания шрифта. Таким образом, представление текста будет одинаковым независимо от используемой операционной системы или браузера.

С помощью свойства FontFamily (Семейство шрифтов) задается семейство шрифтов, которое должно использоваться для формирования визуального представления текста. Silverlight 2, в отличие от Silverlight 1.0, поддерживает все шрифты, установленные в операционной системе, но следующие девять являются встроенными шрифтами:

Эти шрифты считаются "Веб-безопасными", т.е. в случае их применения результаты будут единообразными, независимо от браузера или операционной системы, используемой для отображения текста. Если вы используете шрифты, не входящие в этот набор и не встроенные в приложение, браузер проверит их наличие в системе, и если найдет их, будет их использовать. Если шрифт не будет найден, и он не встроен в приложение, по правилам замещения шрифтов из предлагаемых системных шрифтов будет выбран наиболее подходящий.

Свойство FontSize (Размер шрифта) используется для задания размер текста, который должен быть отображен, в пикселах. Свойство FontStyle (Стиль шрифта) используется для определения стиля отображаемого шрифта. Ему может быть задано значение Normal (Обычный) или Italic (Курсив).

Свойство FontWeight (Насыщенность шрифта) определяет насыщенность шрифта при его прорисовке. Возможными значениями данного свойства являются: Thin (Тонкий), ExtraLight (Очень светлый), Light (Светлый), Normal, Medium (Средний), SemiBold (Полужирный), Bold (Жирный), ExtraBold (Очень жирный), Black (Черный) или ExtraBlack (Очень черный).

Свойство TextDecorations (Декорирование шрифта) используется для определения того, будет ли текст в TextBlock отображаться с подчерком. Этому значению может быть задано значение Underline (Подчерк) или None.

Свойство TextWrapping (Перенос текста) используется для определения того, будет ли TextBlock выполнять перенос текста. Ему может быть задано значение NoWrap (Без переноса), таким образом, текст будет выведен в одну строку и обрезан по ширине TextBlock, или Wrap (С переносом), тогда текст будет переноситься на новую строку по достижении доступной ширины в горизонтальном направлении. Свойство переноса текста может влиять на размеры текстового поля за счет изменения ширины через ограничение текста и высоты через добавление дополнительных строк. В результате, стандартные свойства Width и Height могут возвращать несоответствующие значения. Поэтому TextBlock предлагает свойства ActualWidth (Фактическая ширина) и ActualHeight (Фактическая высота), которые возвращают реальные значения.

Участки и разрывы строк

Элемент Run (Участок) используется для изменения форматирования или стилевого оформления текста в TextBlock. Если в текстовом поле необходимо задать три разных стиля текста или шрифта, для TextBlock задается первый стиль, и в качестве значения его свойства Text задается необходимый текст. Затем добавляется участок со вторым стилем и текстом, и еще один участок с третьим стилем и текстом. Рассмотрим пример:

<TextBlock FontFamily="Arial" Width="400"
Text="ArialText"> 
<Run Foreground = "Blue" FontFamily="Comic Sans MS"
FontSize="24">Large Comic Sans
</Run> 
<Run Foreground = "Teal" FontFamily="Verdana"
FontSize="12" FontStyle="Italic">Italic Verdana
</Run> 
</TextBlock>

В TextBlock загружается текст "ArialTextLarge Comic SansItalic Verdana". Однако поскольку в Run задан текст "Large Comic Sans" с одним шрифтом и стилем, и в следующем Run задан текст "Italic Verdana" с третьими параметрами, на выводе будут представлены все заданные тексты в одну строку в разных форматах. Результаты можно увидеть на рис. 4.27.

Разрывы в тексте TextBlock можно создать с помощью элемента LineBreak (Разрыв строки). Для создания разрыва строки этот элемент просто вставляется между элементами Run. Вот предыдущий пример с использованием разрыва строки:

<TextBlock FontFamily="Arial" Width="400"
Text="Aria lText" > 
<Run Foreground = "Blue" FontFamily="Comic Sans MS" FontSize="24">Large Comic Sans
</Run> 
<LineBreak /> 
<Run Foreground = "Teal" FontFamily="Verdana"
FontSize="12" FontStyle="Italic">Italic Verdana
</Run> 
</TextBlock>

Рис. 4.28 представляет, как это будет выглядеть на экране. Как видим, разрыв строки выполняется между словами "Sans" и "Italic".

Заключение

В данной лекции подробно рассмотрена настройка визуальных элементов с помощью XAML Представлены компоновка, позиционирование, заливка, обводки, прозрачность, контуры, геометрические элементы и вырезание - все те возможности, которые позволяют управлять тем, что вы видите в своем пользовательском интерфейсе. Кроме того, вы познакомились с универсальными элементами управления, являющимися контейнерами для других элементов управления, и также используемыми для отображения текста.

Следующая лекция будет посвящена использованию XAML для оживления пользовательского интерфейса через введение трансформаций и анимации!