Технология 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. /client/2007"
xmlns:x="http://schemas. /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. /winfx/2006/xaml/presentation"
xmlns:x="http://schemas. /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" 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>
<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. /winfx/2006/xaml/presentation"
xmlns:x="http://schemas. /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>
