9. Технология Silverlight: использование XML для разметки и

Технология Silverlight: использование XML для разметки и отображения документа
Silverlight – новая технология компании Microsoft, которая, как иногда говорят, позволяет
создать не web-приложение, а web-впечатление. Основа этой технологии – программный
интерфейс, похожий не интерфейс обычных оконных приложений. Дизайн приложения
определяется с помощью нового языка – XAMP (XML Application Markup Language).
Разметку можно создать «руками» или с помощью специального программного
обеспечения (расширение Microsoft Visual Studio 2008 или Microsoft Expression).
Silverlight – это подключаемый модуль для браузера, формирующий визуальное
представление XAMP и предоставляющий программный интерфейс.
XAMP – это язык разметки на базе XML, используемый для определения визуальных
элементов приложения – графические элементы, анимации, мультимедиа, элементы
управления и пр. Корнем XAMP-документа является элемент-контейнер (Canvas),
определяющий область отрисовки пользовательского интерфейса. Например,
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
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>
XAMP может использовать различные кисти – сплошные, градиентной заливки, заливки
по шаблону и пр.
Существует возможность трансформации объектов (поворотов, наклонов и пр.) и
введения анимаций.
Рассмотрим различные примеры создания рисунков с помощью XAMP.
Пример 1. Прямоугольники на различных слоях.
<?xml version="1.0" encoding="utf-8"?>
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="Document">
<Rectangle Canvas.ZIndex="2" Fill="Red" Width="200" Height="128"
Canvas.Left="8" Canvas.Top="8"/>
<Rectangle Canvas.ZIndex="1" Fill="Black" Width="280" Height="80"
Canvas.Left="40" Canvas.Top="32"/>
</Canvas>
Пример 2. Демонстрация различных видов заливки прямоугольников.
 Линейная градиентная заливка. Градиент описывается с помощью нормированного
прямоугольника (левый верхний угол – (0,0), правый нижний – (1,1)). Точки
градиента определяют цвета, относительно которых осуществляется плавный
переход цвета. Стандартное направление градиента – слева направо, сверху вниз.
<Rectangle Width="40" Height="40" Canvas.Left="8" Canvas.Top="8">
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="#ff000000" Offset="0"/>
<GradientStop Color="#ffffffff" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
 Линейная градиентная заливка с другим направлением определяется с помощью
атрибутов StartPoint и EndPoint.
<Rectangle Width="40" Height="40" 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>
 Линейная градиентная заливка с большим количеством точек градиента.
<Rectangle Width="40" Height="40" Canvas.Left="100" Canvas.Top="8">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
<GradientStop Color="#ff000000" Offset="0"/>
<GradientStop Color="#ffffffff" Offset="0.2"/>
<GradientStop Color="#ff000000" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
 Радиальная градиентная заливка определяет круговой градиент заливки от центра
(точка 0) до внешнего края (точка 1).
<Rectangle Width="40" Height="40" Canvas.Left="150" Canvas.Top="8">
<Rectangle.Fill>
<RadialGradientBrush>
<GradientStop Color="#ff000000" Offset="0"/>
<GradientStop Color="#ffffffff" Offset="1"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
 Радиальная градиентная заливка со смещенным фокусом (центром, от которого
идет заливка) определяется с помощью атрибута GradientOrigin.
<Rectangle Width="40" Height="40" Canvas.Left="200" Canvas.Top="8">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.7,0.2">
<GradientStop Color="#ff000000" Offset="0"/>
<GradientStop Color="#ffffffff" Offset="1"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>

Радиальная градиентная заливка с указанием радиуса и метода распространения.
<Rectangle Width="40" Height="40" Canvas.Left="250" Canvas.Top="8">
<Rectangle.Fill>
<RadialGradientBrush SpreadMethod="Repeat" RadiusX="0.1" RadiusY="0.2">
<GradientStop Color="#ff000000" Offset="0"/>
<GradientStop Color="#ffffffff" Offset="1"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
 Заливка из файла с изображением.
<Rectangle Width="40" Height="40" Canvas.Left="300" Canvas.Top="8">
<Rectangle.Fill>
<ImageBrush ImageSource="Пузыри.bmp"/>
</Rectangle.Fill>
</Rectangle></Canvas>
Пример 3. Демонстрация различных видов контуров прямоугольников. Контур также
может различными способами быть закрашен. Обычно определяют его толщину
(StrokeThickness), при пунктирном контуре задают размеры (StrokeDashArray),
определение наконечника (StrokeDashCap – Flat, Round, Square, Triangle), тип соединения
линий (StrokeLineJoin – Bevel, Miter, Round).
<Rectangle StrokeThickness="10" Fill="#aa000000" Cursor="Hand"
Height="128" Canvas.Left="8" Canvas.Top="8">
<Rectangle.Stroke>
Width="200"
<LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
<GradientStop Color="#ff000000" Offset="0"/>
<GradientStop Color="#ffffffff" Offset="0.2"/>
<GradientStop Color="#ff000000" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<Rectangle StrokeThickness="10" StrokeDashArray="4,1,2,1"
StrokeLineJoin="Bevel" StrokeDashCap="Round" Fill="#aa000000" Cursor="Hand"
Width="200" Height="128" Canvas.Left="8" Canvas.Top="8">
<Rectangle.Stroke>
<LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
<GradientStop Color="#ff000000" Offset="0"/>
<GradientStop Color="#ffffffff" Offset="0.2"/>
<GradientStop Color="#ff000000" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
Пример 4. Демонстрация различных видов фигур – поддерживаются Ellipse, Rectangle,
Line, Path, Polygon, Polyline.
<Path Stroke="Black">
<Path.Data>
<GeometryGroup>
<EllipseGeometry RadiusX="100" RadiusY="100" Center="50,50"/>
<LineGeometry StartPoint="10,10" EndPoint="70,70"/>
</GeometryGroup>
</Path.Data>
</Path>
Пример 5. Демонстрация применения транформаций – RotateTransform (поворот на
заданный угол относительно центральной точки), ScaleTransform (изменение размера
объекта по горизонтали, вертикали или в обоих направлениях), TranslateTransform
(перемещение), SkewTransform (наклон). Может использоваться для создания трехмерных
изображений.
<TextBlock Width="320" Height="40" Text="Это просто текст">
<TextBlock.RenderTransform>
<RotateTransform Angle="45" CenterX="100" CenterY="400" />
</TextBlock.RenderTransform>
</TextBlock>
<Rectangle Fill="red" Stroke="Black" Width="88" Height="88"
Canvas.Left="80" Canvas.Top="80">
<Rectangle.RenderTransform>
<SkewTransform AngleX="45"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Fill="red" Stroke="Black" Width="88" Height="88"
Canvas.Left="80" Canvas.Top="168">
<Rectangle.RenderTransform>
<SkewTransform AngleX="45"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Fill="red" Stroke="Black" Width="88" Height="88"
Canvas.Left="80" Canvas.Top="80">
<Rectangle.RenderTransform>
<SkewTransform AngleY="45"/>
</Rectangle.RenderTransform>
</Rectangle>
Пример 6. Демонстрация применения анимации цвета и положения фигур
<Rectangle x:Name="rect" Fill="Red" Canvas.Left="10" Canvas.Top="10"
Width="50" Height="50">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="rect"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
To="yellow" Duration="0:0:10"/>
<DoubleAnimation Storyboard.TargetName="rect"
Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:5"
To="500" BeginTime="0:0:3" RepeatBehavior="3x"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
Пример 7. Элементами XAMP-файла могут быть и элементы управления:
<?xml version="1.0" encoding="utf-8"?>
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Name="Document">
<ScrollViewer>
<StackPanel Canvas.Left="10" Canvas.Top="50">
<Button x:Name="b1" ClickMode="Hover" Content="Button1">
</Button>
<Button x:Name="b2" ClickMode="Press" Content="Button2">
</Button>
<Button x:Name="b3" ClickMode="Release" Content="Button3">
</Button>
<Button x:Name="b4" Width="100" Height="100">
<Canvas>
<Ellipse Fill="Green" Width="50" Height="50"></Ellipse>
<TextBlock Text="Hello"></TextBlock>
</Canvas>
</Button>
<ListBox x:Name="theList">
<ListBoxItem Content="элемент 1"/>
<ListBoxItem Content="элемент 2"/>
<ListBoxItem Content="элемент 3"/>
<ListBoxItem Content="элемент 4"/>
<ListBoxItem Content="элемент 5"/>
</ListBox>
<CheckBox IsThreeState="True" Content="Test1"></CheckBox>
<CheckBox IsThreeState="True">
<CheckBox.Content>
<StackPanel Orientation="Horizontal">
<TextBlock Text="The Caption"></TextBlock>
<Image Source="паркет.bmp"/>
</StackPanel>
</CheckBox.Content>
</CheckBox>
<StackPanel Orientation="Vertical" Background="Yellow">
<RadioButton Content="Option 1" IsChecked="true">
</RadioButton>
<RadioButton Content="Option 2"></RadioButton>
<RadioButton Content="Option 3"></RadioButton>
<RadioButton Content="Option 4"></RadioButton>
<StackPanel Orientation="Vertical" Background="White">
<RadioButton Content="Option 5" IsChecked="true">
</RadioButton>
<RadioButton Content="Option 6"></RadioButton>
<RadioButton Content="Option 7"></RadioButton>
<RadioButton Content="Option 8"></RadioButton>
</StackPanel>
</StackPanel>
<TextBlock Text="1234" FontFamily="Arial Black" FontSize="20"
FontStyle="Italic"></TextBlock>
<TextBlock Width="400" Text="My first text">
<LineBreak/>
<Run>My Second Text</Run>
<LineBreak/>
<Run>My Third Text</Run>
<LineBreak/>
<Run>My Fourth Text</Run>
</TextBlock>
<StackPanel>
<TextBox />
<TextBox />
</StackPanel>
</StackPanel>
</ScrollViewer>
</Canvas>