XAML Wonderland

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.

<Pagexmlns="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.