Технология 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>