#015 Рисуем при помощи Visual Brush

В самом начале нашего изучения WPF мы уже знакомились с одной из самых замечательных возможностей Avalon - кистью Visual Brush (см. статью № 003). Сегодня мы подробно рассмотрим методы работы с ней. Создайте новый проект типа WinFX Windows Application и назовите его "myVBrush". Немного измените код вашего окна:

Код:

<Window x:Class="Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="myVBrush" Height="500" Width="500" > <StackPanel > </StackPanel> </Window>

Все, что мы сделали - это изменили размеры окна по высоте и ширине и выбрали в качестве основного контейнера StackPanel (мы рассматривали этот контейнер в статье № 005). Первое, что мы сделаем - это зальем наш StackPanel особой заливкой, при помощи VisualBrush - заливка будет состоять из текстовых блоков. Для этого мы отредактируем свойство Background нашего StackPanel:

Код:

<StackPanel > <StackPanel.Background> <VisualBrush Opacity="0.1" Viewport="0,0,250,30" ViewportUnits="Absolute" TileMode="Tile" Stretch="None"> <VisualBrush.Visual> <Border Width="250" Background="Transparent"> <TextBlock Margin="5" FontFamily="Palatino Linotype" FontSize="20px" > Painting with VisualBrush <TextBlock.Foreground> <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5"> <LinearGradientBrush.GradientStops> <GradientStop Offset="0.0" Color="Black" /> <GradientStop Offset="1.0" Color="Blue" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </TextBlock.Foreground> </TextBlock> </Border> </VisualBrush.Visual> <VisualBrush.RelativeTransform> <RotateTransform Angle="0" CenterX="0.5" CenterY="0.5" /> </VisualBrush.RelativeTransform> </VisualBrush> </StackPanel.Background> </StackPanel>

Редактируя свойство Background мы задали способ заливки VisualBrush - и определили элемент заливки - рамку (Border) шириной 250 пикселов, внутри которой расположен текстовый блок с текстом "Painting with VisualBrush". Так же мы отредактировали внешний вид этого текстового блока, задав цветом текста градиентную заливку. Посмотрим на результат: Давайте создадим информационную рамку:

Код:

<TextBlock Name="test"></TextBlock> <Border Margin="0,10,0,30" BorderBrush="Black" BorderThickness="1" > <Border.Background> <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5"> <LinearGradientBrush.GradientStops> <GradientStop Offset="0.0" Color="#CCCCFF" /> <GradientStop Offset="1.0" Color="Transparent" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Border.Background> <TextBlock Margin="10"> <Bold>Рисование при помощи VisualBrush</Bold><LineBreak/><LineBreak/> VisualBrush используется для заливки элементов текстом, фигурами, контролами, и другим. </TextBlock> </Border>

Здесь мы добавили два элемента - пустое текстовое поле и рамку, внутри которой также содержится элемент TextBlock. Обратите внимание на элемент <LineBreak> - он позволяет создавать переход строки в тексте. Пусть вас не смущает пустой текстовый блок - я его использовал, чтобы немного сдвинуть рамку вниз. Результат: Далее мы разместим еще один контейнер StackPanel с горизонтальной ориентацией, внутри которого будут находится 3 прямоугольника, каждый из которых будет залит при помощи VisualBrush:

Код:

<StackPanel Orientation="Horizontal" Margin="10" Background="White" HorizontalAlignment="Left"> <Rectangle Width="150" Height="150" Stroke="Black" Margin="0,0,5,0"> <Rectangle.Fill> <VisualBrush Viewport="0,0,95,35" ViewportUnits="Absolute" TileMode="Tile"> <VisualBrush.Visual> <StackPanel Background="Transparent"> <TextBlock FontSize="10pt" Margin="10"> Hello, World!</TextBlock> </StackPanel> </VisualBrush.Visual> </VisualBrush> </Rectangle.Fill> </Rectangle> <Rectangle Width="150" Height="150" Stroke="Black" Margin="5,0,5,0"> <Rectangle.Fill> <VisualBrush> <VisualBrush.Visual> <StackPanel Background="Transparent"> <TextBlock FontSize="10pt" Margin="10"> Hello, World!</TextBlock> </StackPanel> </VisualBrush.Visual> </VisualBrush> </Rectangle.Fill> </Rectangle> <Rectangle Width="150" Height="150" Stroke="Black" Margin="5,0,0,0"> <Rectangle.Fill> <VisualBrush Viewport="0,0,95,35" ViewportUnits="Absolute" TileMode="Tile"> <VisualBrush.Visual> <StackPanel Background="Transparent"> <TextBlock FontSize="10pt" Margin="10"> Hello, World!</TextBlock> </StackPanel> </VisualBrush.Visual> <VisualBrush.RelativeTransform> <RotateTransform Angle="45" CenterX="0.5" CenterY="0.5" /> </VisualBrush.RelativeTransform> </VisualBrush> </Rectangle.Fill> </Rectangle> </StackPanel>

Каждый из этих прямоугольников демонстрирует различные способы приминения кисти VisualBrush. Изучите эти параметры самостоятельно - лучший способ сделать это - поэкспериментировать со свойствами заливок, приведенных в этом примере. Результат: Снова добавим новый контейнер StackPanel с тремя прямоугольниками, но на этот раз залиты они будут комбинацией графических и текстовых элементов, а также контролов:

Код:

<StackPanel Orientation="Horizontal" Margin="10" Background="White" HorizontalAlignment="Left"> <Rectangle Width="150" Height="150" Stroke="Black" Margin="0,0,5,0"> <Rectangle.Fill> <VisualBrush Viewport="0,0,50,50" ViewportUnits="Absolute" TileMode="Tile"> <VisualBrush.Visual> <StackPanel Background="Transparent"> <Rectangle Width="25" Height="25" Fill="Red" Margin="2" /> <TextBlock FontSize="10pt" Margin="2"> Hello, World!</TextBlock> <Button Margin="2">A Button</Button> </StackPanel> </VisualBrush.Visual> </VisualBrush> </Rectangle.Fill> </Rectangle> <Rectangle Width="150" Height="150" Stroke="Black" Margin="5,0,5,0"> <Rectangle.Fill> <VisualBrush> <VisualBrush.Visual> <StackPanel Background="Transparent"> <Rectangle Width="25" Height="25" Fill="Red" Margin="2" /> <TextBlock FontSize="10pt" Margin="2"> Hello, World!</TextBlock> <Button Margin="2">A Button</Button> </StackPanel> </VisualBrush.Visual> </VisualBrush> </Rectangle.Fill> </Rectangle> <Rectangle Width="150" Height="150" Stroke="Black" Margin="5,0,0,0"> <Rectangle.Fill> <VisualBrush Viewport="0,0,50,50" ViewportUnits="Absolute" TileMode="Tile"> <VisualBrush.Visual> <StackPanel Background="Transparent"> <Rectangle Width="25" Height="25" Fill="Red" Margin="2" /> <TextBlock FontSize="10pt" Margin="2"> Hello, World!</TextBlock> <Button Margin="2">A Button</Button> </StackPanel> </VisualBrush.Visual> <VisualBrush.RelativeTransform> <RotateTransform Angle="45" CenterX="0.5" CenterY="0.5" /> </VisualBrush.RelativeTransform> </VisualBrush> </Rectangle.Fill> </Rectangle> </StackPanel>

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

Espoir, TheVista.ru Team