Все отображаемые на экране объекты являются видимыми, так как они нарисованы кистью. Например, кисть используется для описания фона кнопки, основного цвета текста и заполнения фигуры. В этом разделе представлены механизмы рисования с помощью кистей Windows Presentation Foundation (WPF) и примеры. Кисти позволяют рисовать как простые одноцветные объекты user interface (UI), так и объекты со сложными наборами шаблонов и изображений.
SolidColorBrush
SolidColorBrush закрашивает область сплошным Color. Существует несколько способов указания ColorSolidColorBrush: например, можно указать его альфа-канал, красный, синий и зеленый каналы или воспользоваться одним из цветов, предоставленных классом Colors. Для удобства класс Brushes предоставляет набор часто используемых объектов SolidColorBrush, таких как Blue и Yellow.
В следующем примере LinearGradientBrush используется для закрашивания фона кнопки.
<Button Content="Solid Color" Margin="10">
<Button.Background>
<SolidColorBrush Color="PapayaWhip" />
</Button.Background>
</Button>
|
LinearGradientBrush
LinearGradientBrush закрашивает область линейным градиентом. Линейный градиент сочетает два или более цветов через линию, являющуюся осью градиента. Используйте объекты GradientStop для указания цветов градиента и их позиции.
Линейный градиент по умолчанию является диагональным. По умолчанию объект StartPoint линейного градиента равен (0,0), то есть закрашивается левый верхний угол области, а его объект EndPoint равен (1,1), то есть закрашивается правый нижний угол области. Цвета результирующего градиента интерполируются вдоль диагонального пути.
В следующем примере LinearGradientBrush используется для закрашивания кнопки.
<Button Content="Linear Gradient Brush" Margin="10">
<Button.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="LightGreen" />
<GradientStop Offset="0.4" Color="Green" />
<GradientStop Offset="1" Color="DarkGreen" />
</LinearGradientBrush>
</Button.Background>
</Button>
|
RadialGradientBrush
RadialGradientBrush закрашивает область радиальным градиентом. Радиальный градиент сочетает несколько цветов через окружность. Как и при использовании класса LinearGradientBrush, необходимо использовать объекты GradientStop для указания цветов в градиенте и их позиций.
RadialGradientBrush в отношении модели программирования подобен LinearGradientBrush. Однако линейный градиент имеет начальную и конечную точки для определения вектора градиента, тогда как радиальный градиент имеет окружность вокруг фокальной точки для определения поведения градиента. Эта окружность определяет конечную точку градиента. Иными словами, ограничитель градиента в позиции 1,0 определяет цвет по линии окружности. Фокальная точка определяет центр градиента. Ограничитель градиента в позиции 0,0 определяет цвет в фокальной точке.
В следующем примере RadialGradientBrush используется для закрашивания интересной синей фигуры, нарисованного с помощью Path.
<Canvas Width="200" Height="150">
<Path Canvas.Top="0" Canvas.Left="20" Stroke="Black" >
<Path.Fill>
<RadialGradientBrush GradientOrigin="0.2,0.2">
<GradientStop Offset="0" Color="LightBlue" />
<GradientStop Offset="0.6" Color="Blue" />
<GradientStop Offset="1.0" Color="DarkBlue" />
</RadialGradientBrush>
</Path.Fill>
<Path.Data>
<CombinedGeometry GeometryCombineMode="Union">
<CombinedGeometry.Geometry1>
<EllipseGeometry Center="80,60" RadiusX="80" RadiusY="40" />
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<RectangleGeometry Rect="30,60 105 50" />
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</Path.Data>
</Path>
</Canvas>
|
DrawingBrush
DrawingBrush закрашивает область с помощью Drawing. Drawing может содержать фигуры, изображения, текст и мультимедийные данные. В нашем примере с помощью данной кисти на фоне кнопки нарисована довольно интересная фигура.
<Button Content="Drawing Brush" Margin="10" Padding="10">
<Button.Background>
<DrawingBrush>
<DrawingBrush.Drawing>
<GeometryDrawing Brush="Red">
<GeometryDrawing.Pen>
<Pen>
<Pen.Brush>
<SolidColorBrush>Blue</SolidColorBrush>
</Pen.Brush>
</Pen>
</GeometryDrawing.Pen>
<GeometryDrawing.Geometry>
<PathGeometry>
<PathGeometry.Figures>
<PathFigure StartPoint="70,40">
<PathFigure.Segments>
<BezierSegment Point1="90,37" Point2="130,46" Point3="150,63" />
<LineSegment Point="120,110" />
<BezierSegment Point1="100,95" Point2="70,90" Point3="45,91" />
<LineSegment Point="70,40" />
</PathFigure.Segments>
</PathFigure>
</PathGeometry.Figures>
</PathGeometry>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
</Button.Background>
</Button>
|
ImageBrush
ImageBrush закрашивает область с помощью ImageSource. Наиболее распространенным типом ImageSource для использования с ImageBrush является BitmapImage, который описывает растровую графику. Можно использовать DrawingImage для рисования с помощью объекта Drawing, но проще воспользоваться DrawingBrush.
В следующем примере используется ImageBrush для закрашивания кнопки следующим образом:
<Button Content="Image Brush" Width="100" Height="80" Margin="5" Foreground="White">
<Button.Background>
<ImageBrush ImageSource="/BrushesDemo;component/Budapest.jpg" />
</Button.Background>
</Button>
<Button Content="Visual Brush" Width="100" Height="80">
<Button.Background>
<VisualBrush>
<VisualBrush.Visual>
<StackPanel Background="White">
<Rectangle Width="25" Height="25" Fill="Blue" />
<Button Content="Drawing Button" Background="Red" />
</StackPanel>
</VisualBrush.Visual>
</VisualBrush>
</Button.Background>
</Button>
<Button Content="Visual Brush with Media" Width="200" Height="150" Foreground="White">
<Button.Background>
<VisualBrush>
<VisualBrush.Visual>
<MediaElement Source="./Stephanie.wmv" LoadedBehavior="Play" />
</VisualBrush.Visual>
</VisualBrush>
</Button.Background>
</Button>
<Button Width="200" Height="200" Foreground="White" Click="OnReflectedButton">
<StackPanel>
<MediaElement x:Name="reflected" Source="./Stephanie.wmv" LoadedBehavior="Manual" />
<Border Height="100">
<Rectangle >
<Rectangle.Fill>
<VisualBrush Opacity="0.35" Stretch="None" Visual="{Binding ElementName=reflected}">
<VisualBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="-1" />
<TranslateTransform Y="1" />
</TransformGroup>
</VisualBrush.RelativeTransform>
</VisualBrush>
</Rectangle.Fill>
</Rectangle>
</Border>
</StackPanel>
</Button>
</WrapPanel>
</Window>
|
VisualBrush
Наиболее гибкая и мощная из всех кистей, VisualBrush, закрашивает область с помощью Visual. Visual является графическим типом нижнего уровня, который служит в качестве предка многих полезных графических компонентов. Например, классы Window, FrameworkElement и Control представляют все типы объектов Visual. Используя VisualBrush, можно закрашивать области практически любыми графическими объектами Windows Presentation Foundation (WPF).
В следующем примере показано, как создать новый объект VisualBrush и использовать в нём WPF элемент, в данном случае кнопку.
<Button Content="Visual Brush" Width="100" Height="80">
<Button.Background>
<VisualBrush>
<VisualBrush.Visual>
<StackPanel Background="White">
<Rectangle Width="25" Height="25" Fill="Blue" />
<Button Content="Drawing Button" Background="Red" />
</StackPanel>
</VisualBrush.Visual>
</VisualBrush>
</Button.Background>
</Button>
|
Также в VisualBrush можно добавить любой UIElement, даже видио.
<Button Content="Visual Brush with Media" Width="200" Height="150" Foreground="White">
<Button.Background>
<VisualBrush>
<VisualBrush.Visual>
<MediaElement Source="./Stephanie.wmv" LoadedBehavior="Play" />
</VisualBrush.Visual>
</VisualBrush>
</Button.Background>
</Button>
|
Также можно использовать VisualBrush для отображения существующего объекта Visual; это позволяет создавать интересные визуальные эффекты, такие как отражение и увеличение. Я использовала транформацию и вы можете посмотреть, что из этого получилось.
<Button Width="200" Height="200" Foreground="White" Click="OnReflectedButton">
<StackPanel>
<MediaElement x:Name="reflected" Source="./Stephanie.wmv" LoadedBehavior="Manual" />
<Border Height="100">
<Rectangle >
<Rectangle.Fill>
<VisualBrush Opacity="0.35" Stretch="None" Visual="{Binding ElementName=reflected}">
<VisualBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="-1" />
<TranslateTransform Y="1" />
</TransformGroup>
</VisualBrush.RelativeTransform>
</VisualBrush>
</Rectangle.Fill>
</Rectangle>
</Border>
</StackPanel>
</Button>
|
В данном примере, мы использовали свойство Opacity, остановлюсь на нём поподробней. Объекты Brush предоставляют свойство Opacity, которое может быть использовано для создания прозрачной или частично прозрачной кисти. Значение Opacity, равное 0, делает кисть полностью прозрачной, а значение Opacity, равное 1, делает кисть полностью непрозрачной.
Если кисть содержит частично прозрачные цвета, значение непрозрачности цвета определяется путем умножения на значение непрозрачности кисти. Например, если кисть имеет значение непрозрачности, равное 0.5, а цвет, используемый кистью, также имеет значение непрозрачности 0.5, то выходной цвет имеет значение непрозрачности, равное 0.25. Содержимое кисти можно поворачивать, масштабировать, наклонять и преобразовывать с помощью свойств Transform или RelativeTransform.
Ещё хочу отметить одну интересную особенность, поскольку класс Brush наследуется от класса Freezable, следовательно он предоставляет несколько особенных возможностей: объекты класса Brush можно объявлять ресурсами, которые могут совместно использоваться несколькими объектами или клонироваться. Кроме того, все типы Brush, за исключением VisualBrush, могут быть объявлены типами только для чтения для повышения производительности и обеспечения безопасности для потоков.
И на последок, то что получилось при запуске программы, все кисти выведены по порядку.
Комментариев нет:
Отправить комментарий