WPF Brushes

Brushes are used to fill area with color or graphics. Brushes can be used to fill background, foreground and border color of an element. Brush classes are available in System.Windows.Media namespace. In this post I will demonstrate frequently used brushes in WPF. Below are the list of most used brushes available in WPF.

List of brush classes

• SolidColorBrush
• LinearGradientBrush
• RadialGradientBrush
• ImageBrush
• VisualBrush
• BitmapCacheBrush

Let’s understand all the brushes with simple example.

<StackPanel>

<WrapPanel Margin="10">

<StackPanel>

    <Label Content="Solid Color Brush" Margin="5" />

    <Rectangle Height="100" Width="100" Margin="10">

        <Rectangle.Fill>

            <SolidColorBrush Color="Blue" />

        </Rectangle.Fill>

    </Rectangle>

</StackPanel>

<StackPanel>

    <Label Content="Linear Gradient Brush" Margin="5" />

    <Rectangle Height="100" Width="100" Margin="10">

        <Rectangle.Fill>

            <LinearGradientBrush >

                <GradientStop Color="Blue" Offset="0"/>

                <GradientStop Color="Cyan" Offset="0.4"/>

                <GradientStop Color="Red" Offset="1" />

            </LinearGradientBrush>

        </Rectangle.Fill>

    </Rectangle>

</StackPanel>

<StackPanel>

    <Label Content="Radia Gradient Brush" Margin="5" />

    <Rectangle Height="100" Width="100" Margin="10">

        <Rectangle.Fill>

            <RadialGradientBrush >

                <GradientStop Color="Blue" Offset="0"/>

                <GradientStop Color="Cyan" Offset="0.7" />

                <GradientStop Color="LightBlue" Offset="1" />

            </RadialGradientBrush>

        </Rectangle.Fill>

    </Rectangle>

</StackPanel>

</WrapPanel>

<WrapPanel Margin="10">

<StackPanel>

    <Label Content="Image Brush" Margin="5" />

    <Rectangle Height="100" Width="150" Margin="10">

        <Rectangle.Fill>

            <ImageBrush  ImageSource="Images\Desert.jpg"

                         Opacity="0.7" />

        </Rectangle.Fill>

    </Rectangle>

</StackPanel>

<StackPanel>

    <Label Content="Image Brush with TileMode" Margin="5" />

    <Rectangle Height="100" Width="200" Margin="10">

        <Rectangle.Fill>

            <ImageBrush ImageSource="Images\Play.ico"

                        TileMode="Tile" Stretch="Fill" 

                        Viewport="0,0,0.2,0.4" />

        </Rectangle.Fill>

    </Rectangle>

</StackPanel>

</WrapPanel>

<WrapPanel Margin="5">

<StackPanel>

    <Label Content="Image Brush with TileMode" Margin="2" />

    <TextBlock Height="100" Width="350" Margin="2"

                Text="WPF Brush" FontSize="65"

                FontFamily="Arial Rounded MT" >

        <TextBlock.Foreground>

            <ImageBrush  ImageSource="Images\Desert.jpg"

                         TileMode="Tile" Stretch="Fill"

                         Viewport="0,0,0.2,0.4" />

        </TextBlock.Foreground>

    </TextBlock>

</StackPanel>

</WrapPanel>

</StackPanel>

As shown in above image and code, First row displays use of Solid color brush, linear gradient brush and radial gradient brush. In second row Image Brush is used and in last image of second row imagebrush is used with tile mode. In third row Tilemode is applied to foreground color of Textblock.

VisualBrush

Visual brush allows visual representation of brush to fill an element’s surface. For example, using Visual brush we can copy the appearance of button inside rectangle. It just copy and fill the look of button into rectangle. Let’s have a look on below example.

<StackPanel>

<Button Content="VisualBrush"

        Name="visualBrushButton"

        Height="40" Width="150"

        Margin="10"/>

<Border BorderBrush="Blue"

        Height="150" Width="200"

        BorderThickness="2">

    <Rectangle Height="100" Width="150"

            Margin="10">

        <Rectangle.Fill>

            <VisualBrush

Visual="{Binding ElementName=visualBrushButton}"

                     Stretch="Fill" TileMode="Tile"/>

        </Rectangle.Fill>

    </Rectangle>

</Border>

</StackPanel>

As per above example, the stack panel contains button and rectangle. Rectangle is filled with Visual Brush and Visual brush’s visual element is bound with button. So rectangle will fill with button. You can see the button is filled inside rectangle.

BitmapCacheBrush

Bitmap cache brush is similar to visual brush but bitmap cache brush stores visual content in video memory of video card. So using bitmap cache, the content will redraw quickly when needed. Bitmap cache is more suitable in scenarios when user interface is loaded with heavy animation and complex vector content so in that scenario it will use content from cache memory. Bitmap cache brush has some significant memory impact because it takes little time to store content inside video memory. To use bitmap cache you need to set BitmapCatch property of BitmapCacheBrush. Let’s have a look on below code snippet.

<Rectangle Height="100"

           Width="150" Margin="10">

    <Rectangle.Fill>

        <BitmapCacheBrush

    Target="{Binding ElementName=visualBrushButton}"

    BitmapCache="BitmapCache" />

    </Rectangle.Fill>

</Rectangle>

BitmapCacheBrush is almost similar to VisualBrush so I have modified above example of VisualBrush with BitmapCacheBrush. BitmapCacheBrush has target property which contains the element and BitmapCache property. The output would be the same as per VisualBrush example. The difference here is BitmapCacheBrush will cache the element in video memory.

Hope you liked this article. Please feel free to write comments and feedback in comment section of this post.

See also –

Graphics improvements in WPF 4.0

ControlTemplates in WPF

Styles in WPF

Triggers inWPF

Graphics improvements in WPF 4.0

Layout Rounding

When object renders on screen, WPF calculates pixel position frequently so sometime it may lead to artifacts and it looks like blurry. So In WPF 4.0 Microsoft introduced UseLayoutRounding property on Framework Element. By setting this property to true on any framework element you can see clear rendering of an element. This feature was available in Silverlight2.  

<StackPanel Orientation="Horizontal">

    <Rectangle Fill="Red" Height="1" Width="100"

Margin="10" UseLayoutRounding="False"   />

    <Rectangle Fill="Red" Height="1" Width="100"

Margin="10" UseLayoutRounding="True" />

</StackPanel>

Output

You can see left rectangle is little blurred which has UseLayoutRounding = false while right rectangle is pretty much sharp because UseLayoutRounding property set to true.

Cached Composition

You can Cache a complex Visual Tree creation of your element as Bitmap so it can save rendering time. To apply this you need to set CacheMode=”BitmapCache” on your element. This will improve rendering performance of your element having complex Visual Tree.

<Path Data="M 10,20 l 15,0 l 5,-15 l5,15 l 15,0 l -10,10 l 4,15 l-15,-9 l -15,9 l 7,-15 Z" Stroke="Blue" StrokeThickness="2" />

<Path Data="M 10,20 l 15,0 l 5,-15 l5,15 l 15,0 l -10,10 l 4,15 l-15,-9 l -15,9 l 7,-15 Z" Stroke="Blue" StrokeThickness="2">

   <Path.RenderTransform>

      <ScaleTransform ScaleX="5" ScaleY="5" />

   </Path.RenderTransform>

</Path>

<Path Data="M 10,20 l 15,0 l 5,-15 l5,15 l 15,0 l -10,10 l 4,15 l-15,-9 l -15,9 l 7,-15 Z" Stroke="Blue" StrokeThickness="2" 

CacheMode="BitmapCache" >

   <Path.RenderTransform>

      <ScaleTransform ScaleX="5" ScaleY="5" />

   </Path.RenderTransform>

</Path>

First output shows normal Star. In second image you can see Star scales 5 times and in third image you can see star is showing blurry because BitmapCache is enabled. When you set CacheMode=”BitmapCache” than your element loads as Bitmap image instead of Vector image. So it looks like bit blurry when you enlarge it. 


This feature is really helpful when an element has complex Visual Tree taking too much time to render.

Pixel Shader

Shader effects was first introduced in WPF 3.5 SP1 and supports Pixel Shader version 2 but now in WPF 4.0 you can add Pixel Shader 3.0 effect in your application.

Please check out below links to read more about Pixel Shader and tools

http://wpffx.codeplex.com/
http://shazzam-tool.com/

http://msdn.microsoft.com/en-us/library/system.windows.media.effects.shadereffect.aspx