Основы XAML

Основные фигуры SVG – графики

Показывать лекцию целиком

Прямоугольник (Rectangle)

Для создания прямоугольника применяется элемент Rectangle, c атрибутами Canvas.Left, Canvas.Top, Width и Height (рис. 2.1):

(рис 2.1) Элемент Rectangle

Атрибуты Canvas.Left, Canvas.Top задают координаты верхнего левого угла прямоугольника, а Width и Height определяют его ширину и высоту. Для элемента нужно задавать значение цветов заливки (Fill) и контура (Stroke). В табл. 2.1 приводятся различные примеры элемента rect.

Элемент прямоугольник (Rectangle)
№ Код Вид в браузере
2.1.1 
<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="100"
  Background="White"
  x:Name="Page">
  <Rectangle Width="100" Height="30" 
  Fill="#FFFFFFFF" Stroke="#FF000000"  
  Canvas.Left="50" Canvas.Top="40"/>
</Canvas>
Описание
Прямоугольник с минимумом атрибутов. По умолчанию заливается белым цветом
№ Код Вид в браузере
2.1.2 
<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="100"
  Background="White"
  x:Name="Page">
  <Rectangle Width="100" Height="30" 
  Fill="#FFFFFFFF" Stroke="#FF000000"  
  Canvas.Left="50" Canvas.Top="40" 
  RadiusY="10" RadiusX="10"/>
</Canvas>
Описание
Атрибуты RadiusX и RadiusY позволяют задавать значения округления углов. Максимальные значения атрибутов RadiusX и RadiusY соответственно равны половинам ширины и высоты прямоугольника. В данном случае это 50 и 15 пикселей. Для получения эффекта необходимо указывать оба атрибута. При задании значения, большего, чем ширина или высота прямоугольника, подставляется максимальное значение.
№ Код Вид в браузере
2.1.3 
<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="100"
  Background="White"
  x:Name="Page">
  <Rectangle Width="100" Height="30" 
  Fill="#FFFFFFFF" Stroke="#FF000000"  
  Canvas.Left="50" Canvas.Top="40" 
  RadiusY="15" RadiusX="50"/>
</Canvas>
Описание
Прямоугольник с максимальными значениями атрибутов RadiusX и RadiusY
№ Код Вид в браузере
2.1.4 
<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="100"
  Background="White"
  x:Name="Page">
  <Rectangle Width="100" Height="30" 
  Fill="#FFFFFFFF" Stroke="#FF000000"  
  Canvas.Left="50" Canvas.Top="40" 
  RadiusY="49.5" RadiusX="49.5"/>
</Canvas>
Описание

Управлять округлением углов можно в визуальном режиме редактора Microsoft Expression Blend (рис. 2.2):

(рис 2.2) Округление углов в визуальном режиме

Перемещая маркер, получаем тот же самый результат, однако среда подставляет свои значения атрибутов
№ Код Вид в браузере
2.1.5 
<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="100"
  Background="Yellow"
  x:Name="Page">
  <Rectangle Width="100" Height="30" 
  Stroke="red"  Canvas.Left="50" 
  Canvas.Top="40" StrokeThickness="2"/>
</Canvas>
Описание
Исключение атрибута Fill делает внутреннюю часть фигуры прозрачной. Эквивалентная конструкция – задание атрибута Fill="transparent". Атрибут "Stroke" задает цвет контура. Атрибут "StrokeThickness" определяет толщину контура в пикселях.
№ Код Вид в браузере
2.1.6 
<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="100"
  Background="White"
  x:Name="Page">
  <Rectangle Width="100" Height="30" 
  Stroke="red"  Canvas.Left="50" 
  Canvas.Top="40" StrokeThickness="2" 
  Fill="skyblue"/>
</Canvas>
Описание
Прямоугольник с контуром и заливкой
№ Код Вид в браузере
2.1.7 
<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="100"
  Background="White"
  x:Name="Page">
  <Rectangle Width="100" Height="30"  
  Canvas.Left="50" Canvas.Top="40"  
  Fill="blue"/>
</Canvas>
Описание
Прямоугольник с заливкой и без контура
№ Код Вид в браузере
2.1.8 
<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="100"
  Background="White"
  x:Name="Page">
  <Rectangle Width="100" Height="30"  
  Canvas.Left="50" Canvas.Top="40"  
  Fill="yellow" RadiusY="10" 
  RadiusX="10" Stroke="green" 
  StrokeThickness="5" />
</Canvas>
Описание
Прямоугольник с заливкой, контуром и округлением углов

Эллипс (Ellipse).

Для создания эллипсов используется одноименный элемент Ellipse (рис. 2.3):

(рис 2.3) Элемент Ellipse

Атрибуты Canvas.Left и Canvas.Top определяют координаты верхнего левого угла фигуры, образуемой пересечением касательных к эллипсу. Атрибуты Width и Height определяют длины горизонтальной и вертикальной осей соответственно. По умолчанию фигура заливается белым цветом.

Определение расположения фигуры, реализованное с привязкой к верхней левой точке, сопряжено с некоторыми сложностями. На практике чаще всего задача расположить эллипс с центром в заданной точке. Впрочем, определить координаты центра не составляет никакого труда, например, для рассматриваемого случая, с учетом размеров 200*100 пикселей элемента Canvas схема будет выглядеть так (рис. 2.4):

(рис 2.4) Вычисление координат центра эллипса

Координаты центра получаются прибавлением половины значений ширины и высоты к соответствующим значениям координат верхнего левого угла фигуры.

Для получения окружности в XAML-графике используется элемент Ellipse с одинаковыми значениями ширины и высоты.

В табл. 2.2приводятся различные примеры элемента ellipse.

Элемент эллипс (Ellipse)
№ Код Вид в браузере
2.2.1 
<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="100"
  Background="White"
  x:Name="Page">
  <Ellipse Width="120" Height="80" 
  Fill="#FFFFFFFF" Stroke="#FF000000" 
  Canvas.Left="40" Canvas.Top="10" />
</Canvas>
Описание
Эллипс с минимумом атрибутов. По умолчанию заливается белым цветом
№ Код Вид в браузере
2.2.2 
<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="100"
  Background="Yellow"
  x:Name="Page">
  <Ellipse Width="120" Height="80" 
  Stroke="orange" Canvas.Left="40" 
  Canvas.Top="10" StrokeThickness="4" />

</Canvas>
Описание
Эллипс с контуром и без заливки, т.е. с прозрачной внутренней областью
№ Код Вид в браузере
2.2.3 
<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="100"
  Background="White"
  x:Name="Page">
  <Ellipse Width="120" Height="80" 
  Canvas.Left="40" Canvas.Top="10" 
  Fill="indigo" />

</Canvas>
Описание
Эллипс с заливкой и без контура
№ Код Вид в браузере
2.2.4 
<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="100"
  Background="White"
  x:Name="Page">
  <Ellipse Width="120" Height="80" 
  Canvas.Left="40" Canvas.Top="10" 
  Fill="lightpink" Stroke="lightcoral" 
  StrokeThickness="4"  />

</Canvas>
Описание
Эллипс с контуром и заливкой
№ Код Вид в браузере
2.2.5 
<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="100"
  Background="White"
  x:Name="Page">
  <Ellipse Width="80" Height="80"
   Canvas.Left="60" Canvas.Top="10" 
   Fill="lightpink" Stroke="lightcoral" 
   StrokeThickness="4"  />

</Canvas>
Описание
Окружность, получаемая заданием одинаковых значений Width и Height

Линия (Line).

Один из самых простых элементов XAML – графики это линия, отрезок прямой, заключенной между двумя точками. Для ее создания задаются координаты начальной и конечной точек (рис. 2.5):

(рис 2.5) Элемент Line

По умолчанию, без задания атрибута StrokeThickness, рисуется линия толщиной в 1 пиксель. В табл. 2.3. приводятся различные примеры элемента line.

Элемент линия (Line)
№ Код Вид в браузере
2.3.1 
<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="100"
  Background="White"
  x:Name="Page">

<Line  X1="20" Y1="10" X2="190" 
Y2="90" Stroke="black"/>   

</Canvas>
Описание
Линия с минимумом атрибутов. По умолчанию черного цвета толщиной 1 пикс
№ Код Вид в браузере
2.3.2 
<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="100"
  Background="White"
  x:Name="Page">

<Line  X1="20" Y1="10" X2="190" 
Y2="90" Stroke="black" StrokeThickness="1"/>   

</Canvas>
Описание
Линия с заданием цвета и толщины. Приведенное значение атрибута StrokeThickness совпадает с принятым по умолчанию
№ Код Вид в браузере
2.3.3 
<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="100"
  Background="White"
  x:Name="Page">

<Line  X1="20" Y1="10" X2="190" 
Y2="90" Stroke="tomato" StrokeThickness="
10"/>   

</Canvas>
Описание
Линия с заданием цвета и толщины

Ломаная (Polyline).

Для рисования фигуры, состоящей из нескольких соединенных отрезков, можно воспользоваться элементом Line, задавая для каждого отрезка координаты пары точек – начальной и конечной. Однако, более удобным в данном случае, является применение элемента polyline, где конечная точка предыдущего отрезка служит начальной для последующего (рис. 2.6)

(рис 2.6) Элемент Polyline

Атрибут Points позволяет задавать пары координатных точек, разделенных пробелами. Для удобства восприятия кода координаты внутри пары записываются через запятую. Можно этого не делать, т.е все значения разделять пробелами:

<Polyline  Points="20 10 180 10 20  90 180 90"  />

По умолчанию, фигура заполняется заливкой. В табл. 2.4приводятся различные примеры элемента Polyline.

Ломаная (Polyline)
№ Код Вид в браузере
2.4.1 
<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="100"
  Background="White"
  x:Name="Page">
 <Polyline Points="20,10 180,10 20, 90 180,90"
        Fill="Black"/>
</Canvas>
Описание
Ломаная с минимумом атрибутов. Пространство, лежащее внутри отрезков, заполняется черным цветом
№ Код Вид в браузере
2.4.2 
<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="100"
  Background="White"
  x:Name="Page">
 <Polyline Points="20,10 180,10 20, 90 180,90"
        Fill="Black" Stroke="red" 
        StrokeThickness="3"/>
</Canvas>
Описание
Ломаная с заданием цвета и толщины контура
№ Код Вид в браузере
2.4.3 
<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="100"
  Background="White"
  x:Name="Page">
 <Polyline Points="20,10 180,10 20, 90 180,90"
        Fill="lightpink" Stroke="red" 
        StrokeThickness="3"/>
</Canvas>
Описание
Фигура с контуром и заливкой
№ Код Вид в браузере
2.4.5 
<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="100"
  Background="White"
  x:Name="Page">
 <Polyline Points="20,10 180,10 20, 90 180,90"
         Stroke="red" StrokeThickness="3"/>
</Canvas>
Описание
Фигура с минимальным набором атрибутов для рисования именно ломаной линии

Многоугольник (Polygone).

Элемент многоугольник, в отличие от элемента Polyline, предназначен для рисования фигур, заполненных заливкой. Конечно, с помощью атрибутов этого элемента можно рисовать только контура, но и в этом случае начальная и конечная точка будут соединяться автоматически (рис. 2.7):

(рис 2.7) Сравнение элементов Polyline и Polygon
Форма многоугольник (Polygone)
№ Код Вид в браузере
2.5.1 
<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="100"
  Background="White"
  x:Name="Page">
 <Polygon Points="20,10 180,10 20, 90 180,90"
       Fill="Black"/>
</Canvas>
Описание
Многоугольник с тем же самым набором точек, что и в примере 2.4.1
№ Код Вид в браузере
2.5.2 
<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="100"
  Background="White"
  x:Name="Page">
 <Polygon Points="20,10 180,10 20, 90 180,90"
       Fill="Black" Stroke="red" 
       StrokeThickness="3"/>
</Canvas>
Описание
Многоугольник с заданием цвета и толщины контура
№ Код Вид в браузере
2.5.3 
<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="100"
  Background="White"
  x:Name="Page">
 <Polygon Points="20,10 180,10 20, 90 180,90"
       Fill="lightpink" Stroke="red" 
       StrokeThickness="3"/>
</Canvas>
Описание
Многоугольник с контуром и заливкой
№ Код Вид в браузере
2.5.4 
<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="100"
  Background="White"
  x:Name="Page">
 <Polygon Points="20,10 180,10 20, 90 180,90"
        Stroke="red" StrokeThickness="3"/>
</Canvas>
Описание
Многоугольник с контуром и без заливки
№ Код Вид в браузере
2.5.5 
<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="100"
  Background="White"
  x:Name="Page">
 <Polygon Points="100,10 105.8,27.2 123.8,27.2 109.4,38
                     114.6,55.2 100,45 85.4,55.2 90.6,38
                     76.2,27.2 94.2,27.2"
        Fill="red"/>
</Canvas>
Описание
Многоугольник с заливкой и без контура. Дробные значения координат отделяются точкой
№ Код Вид в браузере
2.5.6 
<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="100"
  Background="White"
  x:Name="Page">
 <Polygon Points="100,10  121.6,22.5  121.6,47.5 
              100,60  78.4,47.52  78.4,22.5"
        Fill="dodgerblue" Stroke="blue" 
        StrokeThickness="5"/>
</Canvas>
Описание
Многоугольник с заливкой и контуром. Дробные значения координат отделяются точкой

Вертикальный порядок последовательности объектов

До этого момента мы рассматривали XAML – документы, содержащие один объект. При расположении нескольких объектов в одном документе важен их вертикальный порядок ( z–order ). Представим себе, что у нас есть код, в котором создаются прямоугольник ( Rectangle ), полигон ( Polygon ) и эллипс ( Ellipse ):

<Rectangle Width="180" Height="80" 
Canvas.Left="10" Canvas.Top="10"  
Fill="green"/>
<Polygon Points="20,20 180,20 20,90" 
Fill="blue" />
<Ellipse Width="50" Height="50" 
Canvas.Left="65" Canvas.Top="35" 
Fill="red" />

Строка кода, описывающая эллипс, располагается самой последней. На рисунке эти фигуры будут располагаться в обратном порядке – так, окружность будет самой первой в стопке объектов (рис. 2.8):

(рис 2.8) Вертикальный порядок последовательности элементов

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

Последовательности изображений
№ Код Вид в браузере
2.6.1 
<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="100"
  Background="White"
  x:Name="Page">
  <Rectangle Width="180" Height="80"  
  Canvas.Left="10" Canvas.Top="10"  
  Fill="green"/>
   <Polygon Points="20,20 180,20 20,90" 
   Fill="blue" />
  <Ellipse Width="50" Height="50" 
  Canvas.Left="65" Canvas.Top="35" 
  Fill="red" />
      
</Canvas>
Описание
Последовательность трех фигур – прямоугольника, полигона и окружности
№ Код Вид в браузере
2.6.2 
<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="100"
  Background="White"
  x:Name="Page">
<Ellipse Width="50" Height="50" 
Canvas.Left="20" Canvas.Top="19" 
troke="darkblue" StrokeThickness="4" />
<Ellipse Width="50" Height="50" 
Canvas.Left="75" Canvas.Top="19"
Stroke="black" StrokeThickness="4" />
<Ellipse Width="50" Height="50" 
Canvas.Left="130" Canvas.Top="19" 
Stroke="red" StrokeThickness="4" />
<Ellipse Width="50" Height="50" 
Canvas.Left="47" Canvas.Top="42" 
Stroke="yellow" StrokeThickness="4" />
<Ellipse Width="50" Height="50" 
Canvas.Left="102" Canvas.Top="42" 
Stroke="green" StrokeThickness="4" />
      
</Canvas>
Описание
Эмблема олимпийского движения. Следует обратить внимание на перекрытие колец
№ Код Вид в браузере
2.6.3 
<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="100"
  Background="White"
  x:Name="Page">
  <!-- Небо -->
  <Rectangle Width="200" Height="70"  
  Canvas.Left="0" Canvas.Top="0"  Fill="skyblue"/>
  <!--Кольца радуги -->

  <Ellipse Width="210" Height="120" 
  Canvas.Left="-5" Canvas.Top="20" 
  Stroke="red" StrokeThickness="4"  />  
  <Ellipse Width="210" Height="120" 
  Canvas.Left="-5" Canvas.Top="24" 
  Stroke="orange" StrokeThickness="4"  />  
  <Ellipse Width="210" Height="120" 
  Canvas.Left="-5" Canvas.Top="28" 
  Stroke="yellow" StrokeThickness="4" />  
  <Ellipse Width="210" Height="120" 
  Canvas.Left="-5" Canvas.Top="32" 
  Stroke="green" StrokeThickness="4"  />  
  <Ellipse Width="210" Height="120" 
  Canvas.Left="-5" Canvas.Top="36" 
  Stroke="deepskyblue" StrokeThickness="4" />  
  <Ellipse Width="210" Height="120" 
  Canvas.Left="-5" Canvas.Top="40" 
  Stroke="blue" StrokeThickness="4" />  
  <Ellipse Width="210" Height="120" 
  Canvas.Left="-5" Canvas.Top="44" 
  Stroke="purple" StrokeThickness="4" />
  <!--Солнце -->
  <Ellipse Width="20" Height="20" 
  Canvas.Left="2" Canvas.Top="2" 
  Fill="orangered" />
  <!--Лучи солнца -->
  
  <Line  X1="12" Y1="12" 
  X2="12" Y2="40" Stroke="orangered" 
  StrokeThickness="2"/>     
  <Line  X1="12" Y1="12" 
  X2="40" Y2="12" Stroke="orangered" 
  StrokeThickness="2"/>   
  <Line  X1="12" Y1="12" 
  X2="30" Y2="30" Stroke="orangered" 
  StrokeThickness="2"/>   
  <!--Земля-->
  <Rectangle Width="200" Height="30"  
  Canvas.Left="0" Canvas.Top="70"  
  Fill="lightgreen"/>
  <!--Убираем выступающие части радуги-->
  <Rectangle Width="210" Height="70" 
   Canvas.Left="0" Canvas.Top="100"  
   Fill="white"/>
  <Rectangle Width="200" Height="100"  
  Canvas.Left="200" Canvas.Top="0"  
  Fill="white"/>
      
</Canvas>
Описание
Простой пейзаж. Здесь уже становится сложно следить за блоками кода, отражающими разные объекты, поэтому были добавлены комментарии

Стили в WPF

Всякий раз при добавлении фигуры мы определяли ее заливку, цвет контура и его толщину. А можно ли один раз описать эти свойства, а затем много раз применять их для множества фигур? XAML поддерживает стили, подобные обычным CSS-таблицам. Но реализация поддержки стилей различна для WPF-приложений и Silverlight-сайтов – по крайней мере, на момент написания этого курса. Для начала рассмотрим стили в WPF, поскольку их проще понять.

Первое, что нужно сделать – это открыть справку к редактору Microsoft Expression Blend и посмотреть раздел "Styles and templates" (рис. 2.9):

(рис 2.9) Раздел "Styles and templates".

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

<Window
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="Style_in_WPF.Window1"
  x:Name="Window"
  Title="Window1"
  Width="640" Height="480">

  <Grid x:Name="LayoutRoot">  
  <Rectangle  Stroke="red" StrokeThickness="2" 
  Fill="skyblue" Width="100" Height="30"  Margin="0,0,0,0" />
  </Grid>
</Window>

При запуске приложения фигура появляется на форме (рис. 2.10):

(рис 2.10) WPF-приложение с обычным заданием свойств фигуры

Добавим описание стиля фигуры, применим это описание к исходному прямоугольнику и его двум копиям:

<Window
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="Style_in_WPF.Window1"
  x:Name="Window"
  Title="Window1"
  Width="640" Height="480" 
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  mc:Ignorable="d">
  <Window.Resources>
  <Style
    x:Key="MyStyle" TargetType="{x:Type Rectangle}">
    <Setter
      Property="Stroke"
      Value="Red" />
    <Setter
      Property="StrokeThickness"
      Value="2" />
    <Setter
      Property="Fill"
      Value="skyblue" />
  </Style>
</Window.Resources>

<Grid x:Name="LayoutRoot">
  <Rectangle  Style = "{StaticResource MyStyle}" 
  Width="100" Height="30"  
  Margin="0,-100,0,0" />
  <Rectangle  Style = "{StaticResource MyStyle}" 
  Width="100" Height="30"  
  Margin="0,0,0,0" />
  <Rectangle  Style = "{StaticResource MyStyle}" 
  Width="100" Height="30"  
  Margin="0,100,0,0"  />
    
 </Grid>
</Window>

В результате на форму выводится три одинаковых фигуры (рис. 2.11):

(рис 2.11) WPF-приложение с заданием стилей фигур

Тег Style помещается внутри секции Window.Resources. С помощью атрибута x:Key определяется имя стиля, а атрибут TargetType задает тип элемента, к которому этот стиль будет применяться. Внутри тега Setter описываются пары "Свойство – значение". Для применения готового стиля к фигуре указывается атрибут Style внутри описания элемента.

Стили в Silverlight

Определение стилей для Silverlight сайтов осуществляется несколько иначе. Для примера, попробуем использовать предыдущее описание в Silverlight-проекте (рис. 2.12):

(рис 2.12) Использование WPF-стилей в Silverlight-приложении

Среда указывает, что тег Style не поддерживается в текущем приложении. Вообще, для создания стилей в данном случае лучше использовать Visual Studio 2008. Создаем новый проект "Silverlight Application", открываем шаблон "App.xaml" и помещаем в него описание стиля внутри тега Application.Resources:

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             x:Class="Style_in_Silverlight_site.App"
             >
    <Application.Resources>
        <Style
    x:Key="MyStyle" TargetType="Rectangle">
            <Setter
      Property="Stroke"
      Value="Red" />
            <Setter
      Property="StrokeThickness"
      Value="2" />
            <Setter
      Property="Fill"
      Value="skyblue" />
        </Style>

    </Application.Resources>
</Application>

Можно заметить, что синтаксис очень похож на код WPF-приложения. Среда разработки в момент написания кода будет выглядеть так (рис. 2.13):

(рис 2.13) Задание стиля в файле "App.xaml".

Для использования созданного стиля переходим к файлу "Page.xaml", добавляем внутри документа прямоугольник со ссылкой на стиль:

<UserControl x:Class="Style_in_Silverlight_site.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
<Rectangle  Style = "{StaticResource MyStyle}" 
Width="100"
            Height="30" Canvas.Left="50" 
            Canvas.Top="40"  />
    </Grid>
</UserControl>

Компилируем приложение, используя сочетание клавиш "CTRL+SHIFT + B", переходим в режим "Horizontal Split" и видим, что стиль был применен к фигуре (рис. 2.14):

(рис 2.14) Фигура с применением стиля в режиме "Horizontal Split"

Запускаем приложение, нажимая клавишу F5 (рис. 2.15):

(рис 2.15) Фигура с применением стиля в окне браузера

Подобно обычным CSS-стилям, поддерживается каскадное задание свойств. Переопределим цвет заливки прямоугольника:

<UserControl x:Class="Style_in_Silverlight_site.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="800" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
<Rectangle  Style = "{StaticResource MyStyle}" Width="100"
            Height="30" Canvas.Left="50"
            Canvas.Top="40" Fill="Green"  />        
     
    </Grid>
</UserControl>

Теперь, несмотря на описание в файле "App.xaml", фигура заполняется зеленым цветом (рис. 2.16):

(рис 2.16) Переопределение стиля

Группы элементов в Silverlight

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

<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="100"
  Background="White"
  x:Name="Page">


<Rectangle Width="180" Height="80" 
Canvas.Left="10" Canvas.Top="10"  
Fill="skyblue" Stroke="blue" 
StrokeThickness="2"/>
<Ellipse Width="50" Height="50" 
Canvas.Left="75" Canvas.Top="25" 
Fill="skyblue" Stroke="blue" 
StrokeThickness="2" />

</Canvas>

В браузере отображается эллипс, наложенный на прямоугольник (рис. 2.17):

(рис 2.17) Элементы без группы

Прямоугольник и эллипс представляют собой совершенно независимые фигуры – для каждой из которых нужно задавать атрибуты Fill, Stroke и StrokeThickness. Для формирования фигуры используется следующий код:

<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="100"
  Background="White"
  x:Name="Page">

<Path  Fill="skyblue" Stroke="blue" 
StrokeThickness="2">
  <Path.Data>
   <GeometryGroup FillRule="NonZero">
        <EllipseGeometry Center="100,50" 
        RadiusX="25" RadiusY="25" />              
      <RectangleGeometry Rect="10,10 180 80" />
    </GeometryGroup>
  </Path.Data>
</Path>
</Canvas>

Все содержимое располагается внутри тега Path. Изучением элемента Path мы будем заниматься в следующей лекции. Пока его можно рассматривать как некоторый контейнер, внутри которого располагается код других элементов. Заметим, что свойства контейнера применяются для всех объектов. В браузере фигуры выглядят точно также. Теги элементов Ellipse и Rectangle трансформировались в EllipseGeometry и RectangleGeometry.

Пакет Microsoft Expression Blend позволяет увидеть еще один способ группировки элементов. В визуальном режиме выделяем исходные элементы, в главном меню выбираем пункт "Object \ Group Into \ Canvas" (рис. 2.18):

(рис 2.18) Группировка фигур "Object \ Group Into \ Canvas".

В результате выполнения этого действия элементы помещаются внутри дополнительного тега Canvas:

<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="100"
  Background="White"
  x:Name="Page">
  <Canvas Width="180" Height="80" 
  Canvas.Left="10" Canvas.Top="10">


    <Rectangle Width="180" Height="80"  
    Fill="skyblue" Stroke="blue" 
    StrokeThickness="2"/>
    <Ellipse Width="50" Height="50" 
    Fill="skyblue" Stroke="blue" 
    StrokeThickness="2" Canvas.Left="65" 
    Canvas.Top="15" />

  </Canvas>
</Canvas>

Еще один способ объединения фигур, предлагаемый пакетом Microsoft Expression Blend, содержит средства формирования новых фигур. Например, выделим исходные элементы и выберем пункт меню "Object \ Combine \ Exclude Overlap" (рис. 2.19):

(рис 2.19) Объединение фигур " Object \ Combine \ Exclude Overlap ".

В результате выполнения этого действия мы получаем прямоугольник с "дыркой" (рис. 2.20):

(рис 2.20) Результирующая фигура

Среда преобразовала исходные элементы в объект Path, содержащий множество координат:

<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="100"
  Background="Yellow"
  x:Name="Page">
  <Path Width="180" Height="80" 
  Fill="skyblue" Stretch="Fill" 
  Stroke="blue" StrokeThickness="2" 
  Canvas.Left="10" Canvas.Top="10" 
  Data="M90,16.000001 C76.745166,16.000001 66,26.745167 
  66,40.000001 66,53.254834 76.745166,64.000001 90,64.000001 
  C103.25483,64.000001 114,53.254834 114,40.000001 
  C114,26.745167 103.25483,16.000001 90,16.000001 z 
  M1,1 L179,1 179,79.000001 1,79.000001 1,1 z"/>
</Canvas>

Подобный код трудно понимать без визуальных средств.

Группы в WPF

Рассмотрим теперь эту же самую группу меню "Object \ Combine" применительно к WPF-приложениям (рис. 2.21):

(рис 2.21) Группа "Object \ Combine".

При использовании визуальных средств каждый из пунктов этого меню по-прежнему преобразовывает исходные фигуры в объект Path. Результат определяются следующим образом (рис. 2.22):

(рис 2.22) 1. – Фигуры до объединения, 2. – Объединение (Unite (Union)), 3. – Деление (Divide (-)), 4. – Пересечение (Intersect (Intersect)), 5. – Удаление совмещенного (Exclude Overlap (Xor)), 6. – Вычитание (Subtract (Exclude)).

Однако в WPF-приложениях имеется синтаксис, позволяющий получать тот же самый результат в виде читабельного кода. Такие примеры приводятся в табл. 2.7.

Группы в WPF
№ Код Вид в браузере
2.7.1 
<Window
xmlns="http://schemas.microsoft.com/
winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
x:Class="Group_WPF.Window1"
x:Name="Window"
Title="Исходные фигуры"
Width="215" Height="200">

<Grid x:Name="LayoutRoot">
<Ellipse Width="100" 
Height="100" 
Stroke="Black" StrokeThickness="1"  
Fill="#2b2b2b" 
Margin="25,25,75,25" />
<Ellipse Width="100" Height="100"  
Stroke="Black" StrokeThickness="1" 
Fill="#f47419" 
Margin="75,25,25,25" />

</Grid>
</Window>
Описание
Исходные фигуры, причем оранжевый эллипс расположен над серым
№ Код Вид в браузере
2.7.2 
<Window
xmlns="http://schemas.microsoft.com/winfx/
2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
x:Class="Group_WPF.Window1"
x:Name="Window"
Title="Union"
Width="215" Height="200">

<Grid x:Name="LayoutRoot">
<Path Stroke="Black" 
StrokeThickness="1" 
Fill="#f47419">
 <Path.Data>
 <CombinedGeometry GeometryCombineMode="
 Union">
  <CombinedGeometry.Geometry1>        
   <EllipseGeometry RadiusX="50" 
   RadiusY="50" Center="125,75" />
   </CombinedGeometry.Geometry1>
   <CombinedGeometry.Geometry2>
  <EllipseGeometry RadiusX="50" 
  RadiusY="50" 
  Center="75,75" />
    </CombinedGeometry.Geometry2>
  </CombinedGeometry>
</Path.Data>
</Path>
</Grid>
</Window>
Описание
Значение "Union" атрибута GeometryCombineMode
№ Код Вид в браузере
2.7.3 
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/
xaml/presentation"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
x:Class="Group_WPF.Window1"
x:Name="Window"
Title="Original"
Width="215" Height="200">
<Grid x:Name="LayoutRoot">
<Path Margin="25,32,24,32" 
Fill="#f47419" Stretch="Fill" 
Stroke="Black" StrokeThickness="1" 
Data="M100,0.5 C127.3381,0.49999893 
149.5,22.661904 149.5,49.999999 
C149.5,77.338096 127.3381,99.499999 100,
99.499999 C90.869587,99.499999 82.316544,
97.027984 75,92.671836 89.669403,84.1193 
99.5,68.207679 99.5,49.999999 99.5,
31.792319 89.669403,15.880696 75,7.3281606 
C82.316544,2.9720165 90.869587,0.49999893 
100,0.5 z M75,7.3281606 C89.669403,15.880696 
99.5,31.792319 99.5,49.999999 99.5,68.207679 
89.669403,84.1193 75,92.671836 C60.330596,
84.1193 50.5,68.207679 50.5,49.999999 C50.5,
31.792319 60.330596,15.880696 75,7.3281606 z 
M49.999999,0.5 C59.130414,0.49999893 
67.683458,2.9720165 75,7.3281606 C60.330596,
15.880696 50.5,31.792319 50.5,49.999999 
C50.5,68.207679 60.330596,84.1193 75,
92.671836 C67.683458,97.027984 59.130414,
99.499999 49.999999,99.499999 22.661905,
99.499999 0.5,77.338096 0.5,49.999999 0.5,
22.661904 22.661905,0.49999893 49.999999,
0.5 z"/>
</Grid>
</Window>
Описание
Для значения "Divide" пункта меню нет программного аналога. Здесь мы в визуальном режиме выбрали этот пункт, а среда сгенерировала объект Path
№ Код Вид в браузере
2.7.4 
<Window
xmlns="http://schemas.microsoft.com/
winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
x:Class="Group_WPF.Window1"
x:Name="Window"
Title="Intersect"
Width="215" Height="200">

<Grid x:Name="LayoutRoot">
<Path Stroke="Black" StrokeThickness="1"
Fill="#f47419">
 <Path.Data>
    <CombinedGeometry GeometryCombineMode="Intersect">
     <CombinedGeometry.Geometry1>        
      <EllipseGeometry RadiusX="50" 
      RadiusY="50" Center="125,75" />
     </CombinedGeometry.Geometry1>
     <CombinedGeometry.Geometry2>
   <EllipseGeometry RadiusX="50" 
   RadiusY="50" Center="75,75" />
     </CombinedGeometry.Geometry2>
   </CombinedGeometry>
 </Path.Data>
</Path>
</Grid>
</Window>
Описание
Значение "Intersect" атрибута GeometryCombineMode
№ Код Вид в браузере
2.7.5 
<Window
xmlns="http://schemas.microsoft.com/winfx/
2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
x:Class="Group_WPF.Window1"
x:Name="Window"
Title="Xor"
Width="215" Height="200">
<Grid x:Name="LayoutRoot">
<Path Stroke="Black" StrokeThickness="1" 
Fill="#f47419">
 <Path.Data>
    <CombinedGeometry GeometryCombineMode="Xor">
     <CombinedGeometry.Geometry1>        
      <EllipseGeometry RadiusX="50" 
      RadiusY="50" Center="125,75" />
     </CombinedGeometry.Geometry1>
     <CombinedGeometry.Geometry2>
   <EllipseGeometry RadiusX="50" 
   RadiusY="50" Center="75,75" />
     </CombinedGeometry.Geometry2>
   </CombinedGeometry>
 </Path.Data>
</Path>
</Grid>
</Window>
Описание
Значение "Xor" атрибута GeometryCombineMode
№ Код Вид в браузере
2.7.6 
<Window
xmlns="http://schemas.microsoft.com/
winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
x:Class="Group_WPF.Window1"
x:Name="Window"
Title="Exclude"
Width="215" Height="200">

<Grid x:Name="LayoutRoot">
<Path Stroke="Black" StrokeThickness="1" 
Fill="#f47419">
 <Path.Data>
    <CombinedGeometry GeometryCombineMode="Exclude">
     <CombinedGeometry.Geometry1>        
      <EllipseGeometry RadiusX="50" 
      RadiusY="50" Center="125,75" />
     </CombinedGeometry.Geometry1>
     <CombinedGeometry.Geometry2>
   <EllipseGeometry RadiusX="50" RadiusY="50"
   Center="75,75" />
     </CombinedGeometry.Geometry2>
   </CombinedGeometry>
 </Path.Data>
</Path>
</Grid>
</Window>
Описание
Значение "Exclude" атрибута GeometryCombineMode

Мы видим, что в WPF-приложениях можно формировать фигуры с помощью возможностей, которые всегда были особенностями графических пакетов, например, таких как CorelDRAW (рис. 2.23):

(рис 2.23) Объединение фигур в пакете CorelDRAW с помощью группы меню "Arrange \ Shaping".

Именованные цвета XAML-графики

Задания цвета с помощью имени, например "Red" или "Blue" выглядит в коде всегда понятней, по сравнению со своим шестнадцатеричным индексом. XAML-графика поддерживает 142 именованных цвета, которые представлены в табл. 2.8.

Таблица именованных цветов XAML – графики
№ Образец Название Шестнадцатеричный индекс цвета в модели RGB
1 AliceBlue #f0f8ff
2 AntiqueWhite #faebd7
3 Aqua #00ffff
4 Aquamarine #7fffd4
5 Azure #f0ffff
6 Beige #f5f5dc
7 Bisque #ffe4c4
8 Black #000000
9 BlanchedAlmond #ffebcd
10 Blue #0000ff
11 BlueViolet #8a2be2
12 Brown #a52a2a
13 BurlyWood #deb887
14 CadetBlue #5f9ea0
15 Chartreuse #7fff00
16 Chocolate #d2691e
17 Coral #ff7f50
18 CornflowerBlue #6495ed
19 Cornsilk #fff8dc
20 Crimson #dc143c
21 Cyan #00ffff
22 DarkBlue #00008b
23 DarkCyan #008b8b
24 DarkGoldenrod #b8860b
25 DarkGray #a9a9a9
26 DarkGreen #006400
27 DarkKhaki #bdb76b
28 DarkMagenta #8b008b
29 DarkOliveGreen #556b2f
30 DarkOrange #ff8c00
31 DarkOrchid #9932cc
32 DarkRed #8b0000
33 DarkSalmon #e9967a
34 DarkSeaGreen #8fbc8f
35 DarkSlateBlue #483d8b
36 DarkSlateGray #2f4f4f
37 DarkTurquoise #00ced1
38 DarkViolet #9400d3
39 DeepPink #ff1493
40 DeepSkyBlue #00bfff
41 DimGray #696969
42 DodgerBlue #1e90ff
43 Firebrick #b22222
44 FloralWhite #fffaf0
45 ForestGreen #228b22
46 Fuchsia #ff00ff
47 Gainsboro #dcdcdc
48 GhostWhite #f8f8ff
49 Gold #ffd700
50 Goldenrod #daa520
51 Gray #808080
52 Green #008000
53 GreenYellow #adff2f
54 HoneyDew #f0fff0
55 HotPink #ff69b4
56 IndianRed #cd5c5c
57 Indigo #4b0082
58 Ivory #fffff0
59 Khaki #f0e68c
60 Lavender #e6e6fa
61 LavenderBlush #fff0f5
62 LawnGreen #7cfc00
63 LemonChiffon #fffacd
64 LightBlue #add8e6
65 LightCoral #f08080
66 LightCyan #e0ffff
67 LightGoldenrodYellow #fafad2
68 LightGray #d3d3d3
69 Lightgreen #90ee90
70 LightPink #ffb6c1
71 LightSalmon #ffa07a
72 LightSeaGreen #20b2aa
73 LightSkyBlue #87cefa
74 LightSlateGray #778899
75
76 LightSteelBlue #b0c4de
77 LightYellow #ffffe0
78 Lime #00ff00
79 LimeGreen #32cd32
80 Linen #faf0e6
81 Magenta #ff00ff
82 Maroon #800000
83 MediumAquamarine #66cdaa
84 MediumBlue #0000cd
85 MediumOrchid #ba55d3
86 MediumPurple #9370db
87 MediumSeaGreen #3cb371
88 MediumSlateBlue #7b68ee
89 MediumSpringGreen #00fa9a
90 MediumTurquoise #48d1cc
91 MediumVioletRed #c71585
92 MidnightBlue #191970
93 MintCream #f5fffa
94 MistyRose #ffe4e1
95 Moccasin #ffe4b5
96 NavajoWhite #ffdead
97 Navy #000080
98 OldLace #fdf5e6
99 Olive #808000
100 OliveDrab #6b8e23
101 Orange #ffa500
102 OrangeRed #ff4500
103 Orchid #da70d6
104 PaleGoldenrod #eee8aa
105 PaleGreen #98fb98
106 PaleTurquoise #afeeee
107 PaleVioletRed #db7093
108 PapayaWhip #ffefd5
109 PeachPuff #ffdab9
110 Peru #cd853f
111 Pink #ffc0cb
112 Plum #dda0dd
113 PowderBlue #b0e0e6
114 Purple #800080
115 Red #ff0000
116 RosyBrown #bc8f8f
117 RoyalBlue #4169e1
118 SaddleBrown #8b4513
119 Salmon #fa8072
120 SandyBrown #f4a460
121 Seagreen #2e8b57
122 SeaShell #fff5ee
123 Sienna #a0522d
124 Silver #c0c0c0
125 SkyBlue #87ceeb
126 SlateBlue #6a5acd
127 SlateGray #708090
128 Snow #fffafa
129 SpringGreen #00ff7f
130 SteelBlue #4682b4
131 Tan #d2b48c
132 Teal #008080
133 Thistle #d8bfd8
134 Tomato #ff6347
135 transparent #00FFFFFF
136 Turquoise #40e0d0
137 Violet #ee82ee
138 Wheat #f5deb3
139 White #ffffff
140 WhiteSmoke #f5f5f5
141 Yellow #ffff00
142 Yellowgreen #9acd32
Предыдущее занятие Следующее занятие
Вернуться к учебному плану
^