There is a lot of goodness in the vast graphics world of WPF. Today I want to talk about VisualBrush.
Brushes
The WPF framework supports six brushes.
- SolidColorBrush
- LinearGradientBrush
- RadialGradientBrush
The first three brushes are self explanatory. The next three are a bit more complex and require a little bit of explanation.
- DrawingBrush
- ImageBrush
- VisualBrush
These three brushes all derive from TileBrush. TileBrush is abstract and defines a number of useful properties for creating a repeating pattern. For example you could set the source of the ImageBrush to a picture of a flower, then set properties to repeat the picture in five columns and three rows.
Setting the ImageBrush Tile value to TileXY creates an interesting pattern that looks similar to a mosaic.
VisualBrush
With a VisualBrush you can define a simple or complex UI element and assign it to the VisualBrush.Visual property. Then you can paint other parts of your screen with this conglomerate brush. You get a number of performance benefits from the VisualBrush because WPF can use a copy of the the pixels it has already rendered.
Simple Circle
The following XAML creates canvas and paints the background with a simple ellipse.
View the finished result here.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Simple Circle" Height="300" Width="300"
Background="DarkRed"
>
<DockPanel Margin="20" Background="White">
<Canvas DockPanel.Dock="Top">
<Canvas.Background>
<VisualBrush >
<VisualBrush.Visual>
<Ellipse Fill="Salmon" Width="40" Height="40" />
</VisualBrush.Visual>
</VisualBrush>
</Canvas.Background>
</Canvas>
</DockPanel>
</Page>
Its hard to see any advantage with using a VisualBrush from this example. You could have used a normal Ellipse element and not wasted any time implementing the VisualBrush. Where is the benefit then? Once you’ve defined the brush you can efficiently paint other parts of the screen.
Complex Shape
For this example I’ve moved the VisualBrush to the Resources section and made it slightly more complex (adding a couple more ellipses). In the main XAML the Canvas.Background and four Rectangle.Fill properties are bound to the OrbBrush VisualBrush.
View the finished result here.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="SimpleBrush2"
Height="300" Width="300" Background="DarkRed"
>
<Page.Resources>
<VisualBrush x:Key="OrbBrush">
<VisualBrush.Visual>
<Canvas>
<Ellipse Fill="Salmon"
Width="40" Height="40" />
<Ellipse Fill ="LightYellow"
Width ="20" Height="20"
Canvas.Left="10" Canvas.Top="1"/>
<Ellipse Fill =“Salmon“
Width =“6“ Height=“6“
Canvas.Left=“17“ Canvas.Top=“7“
Stroke=“Tomato“/>
</Canvas>
</VisualBrush.Visual>
</VisualBrush>
</Page.Resources>
<DockPanel Margin=“20“ Background=“White“>
<Canvas DockPanel.Dock=“Top“
Background=“{StaticResource OrbBrush}“>
<Rectangle Width=“40“ Height=“40“
Canvas.Left=“0“
Fill=“{StaticResource OrbBrush}“/>
<Rectangle Width=“40“ Height=“40“
Canvas.Right=“0“
Fill=“{StaticResource OrbBrush}“/>
<Rectangle Width=“40“ Height=“40“
Canvas.Left=“0“
Fill=“{StaticResource OrbBrush}“
Canvas.Bottom=“0“/>
<Rectangle Width=“40“ Height=“40“
Canvas.Right=“0“ Canvas.Bottom=“0“
Fill=“{StaticResource OrbBrush}“/>
</Canvas>
</DockPanel>
</Page>
-Walt Ritscher
Like this article? Subscribe to the RSS feed.
Read Full Post »
WPF Wonderland 