Visual Brush in WPF with C#

Visual Brush

The Visual object in WPF represents a visual control. That said, you can pretty much create a visual that can be a control or a combination of controls including a Window, Page, or even a MediaElement and draw an element with this visual. A Visual object usually hosts one container panel such as a Grid or StackPanel and on this container; you may place as many controls you like.

 Creating a Visual Brush

The VisualBrush element in XAML creates a visual brush.

The following code snippet creates a visual brush and sets the Visual property. The Visual property can be an element inherited from the Visual such as a Grid or StackPanel.

<VisualBrush>

<VisualBrush.Visual />

</VisualBrush>

We can fill a shape with a visual brush by setting a shape's Fill property to the visual brush. The code snippet in Listing 25 creates a rectangle shape sets the Fill property to a VisualBrush. In this code, a Visual hosts a StackPanel that contains a Rectange, TextBlock, and a Button control. Now keep in mind, these controls on a VisualBrush can still have their own identity such as events, attributes, and methods.

<Grid Name="LayoutRoot">

        <Rectangle Width="300" Height="300" Stroke="Black" Margin="5,0,5,0">

        <Rectangle.Fill>

            <VisualBrush>

                <VisualBrush.Visual>

                    <StackPanel Background="White">

                        <Rectangle Width="100" Height="20">

                            <Rectangle.Fill>

                                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >

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

                                    <GradientStop Color="Green" Offset="1.0" />

                                </LinearGradientBrush>

                            </Rectangle.Fill>

                        </Rectangle>

                        <TextBlock Foreground="Red" TextAlignment="Center"

                                   FontFamily="Georgia" FontWeight="Bold">

                            Visual Brush

                        </TextBlock>

                        <Button Background="LightBlue"  Foreground="Orange">

                            Button for Visual

                        </Button>

                    </StackPanel>

                </VisualBrush.Visual>

            </VisualBrush>

        </Rectangle.Fill>

    </Rectangle>

</Grid>

Listing 25

The output looks like Figure 32.

Figure 32. A shape filled with a Visual brush

Similar to a DrawingBrush, the VisualBrush support both Viewport and TileMode properties.

The Viewport property determines the size and position of the base tile when the TileMode of a DrawingBrush is not set to None, and the ViewportUnits property determines whether the Viewport is specified using absolute or relative coordinates. If the coordinates are relative, they are relative to the size of the output area. The point (0,0) represents the top left corner of the output area, and (1,1) represents the bottom right corner of the output area. To specify that the Viewport property uses absolute coordinates, set the ViewportUnits property to Absolute.

The TileMode property of DrawingBrush represents the tile mode that is a type if a TileMode enumeration. The TileMode enumeration has Tile, FlipX, FlipY, FlipXY, and None values.

The following code snippet sets the Viewport and TileMode properties of a DrawingBrush.

<VisualBrush Viewport="0,0,0.25, 0.25" TileMode="Tile">

The output with TileMode set to Tile looks like Figure 33.

 

Figure 33. A shape filled with a Visual brush in Tile mode

The VisualBrush object in WPF is used to create a VisualBrush at run-time. The code listed in CreateARectangleWithVisualBrush() method in Listing 26 creates a VisualBrush, sets its visual property to a StackPanel that contains a Rectangle, TextBlock, and a Button control.

private void CreateARectangleWithVisualBrush()

{

    // Create a background recntangle

    Rectangle visualBoard = new Rectangle();

    visualBoard.Width = 300;

    visualBoard.Height = 300;

 

    // Create a DrawingBrush

    VisualBrush vBrush = new VisualBrush();

 

    // Create a StackPanel and add a few controls to it

    StackPanel stkPanel = new StackPanel();

 

    // Create a Rectangle and add it to StackPanel

    Rectangle yellowGreenRectangle = new Rectangle();

    yellowGreenRectangle.Height = 100;

    yellowGreenRectangle.Width = 20;

    LinearGradientBrush yellowGreenLGBrush = new LinearGradientBrush();

    yellowGreenLGBrush.StartPoint = new Point(0, 0);

    yellowGreenLGBrush.EndPoint = new Point(1, 1);

    GradientStop blueGS = new GradientStop();

    blueGS.Color = Colors.Yellow;

    blueGS.Offset = 0.0;

    yellowGreenLGBrush.GradientStops.Add(blueGS);

    GradientStop orangeGS = new GradientStop();

    orangeGS.Color = Colors.Green;

    orangeGS.Offset = 0.25;

    yellowGreenLGBrush.GradientStops.Add(orangeGS);

    yellowGreenRectangle.Fill = yellowGreenLGBrush;

 

    stkPanel.Children.Add(yellowGreenRectangle);

 

    // Create a TextBlock and add it to StackPanel

    TextBlock redTextBlock = new TextBlock();

    redTextBlock.Text = "Visual Brush";

    redTextBlock.FontWeight = FontWeights.Bold;

    redTextBlock.FontFamily = new FontFamily("Georgia");

    redTextBlock.TextAlignment = TextAlignment.Center;           

    stkPanel.Children.Add(redTextBlock);

 

    // Create a Button and add it to StackPanel

    Button blueButton = new Button();

    blueButton.Background = new SolidColorBrush(Colors.LightBlue);

    blueButton.Foreground = new SolidColorBrush(Colors.Orange);

    blueButton.Content = "Button for Visual";

    stkPanel.Children.Add(blueButton);         

 

    // Set Viewport and TileMode

    vBrush.Viewport = new Rect(0, 0, 0.25, 0.25);

    vBrush.TileMode = TileMode.Tile;

 

    // Set Visual of VisualBrush

    vBrush.Visual = stkPanel;

 

    // Fill rectangle with a DrawingBrush

    visualBoard.Fill = vBrush;

 

    LayoutRoot.Children.Add(visualBoard);

}

Listing 26