Lesson 26 - WPF - 2D Effects

In the previous lesson, Custom Form Shape in C# .NET WPF, we showed how to change the shape of a WPF form. We've already discussed adjusting the appearance of WPF controls in the lessons on styles, skins, and themes. We described how to customize the appearance using the control properties. In WPF, we can also modify the appearance using 2D effects. We use the Effects namespace, which is defined in .NET Framework 4 and higher (System.Windows.Media.Effects), the Brush class (from System.Windows.Media) and the Transform class (also from System.Windows.Media).

Effects

The Effects namespace offers several graphical effects that we can apply to any WPF control.

BlurEffect

Here's an example of the blur effect on a Label control:

<Label Grid.Row="1" Content="Sample text"
        Style="{StaticResource Text}">
    <Label.Effect>
        <BlurEffect Radius="10"/>
    </Label.Effect>
</Label>

The result:

Properties

We can set the following properties of the blur effect:

• Radius - Sets the blur radius

DropShadowEffect

As the second effect let's introduce DropShadowEffect, which creates a shadow around the control. Let's show what it'd look like on a Label control again:

<Label Grid.Row="1" Content="Sample text"
        Style="{StaticResource Text}">
    <Label.Effect>
        <DropShadowEffect ShadowDepth="5"
                          BlurRadius="5"
                          Direction="315"
                          Opacity="1"
                          Color="Black"/>
    </Label.Effect>
</Label>

The result:

Properties

The shadow has several properties we can use to customize the effect:

• BlurRadius - Specifies the blur radius
• Direction - Angle of the shadow (0 to 360 degrees)
• Opacity - Shadow transparency (0 to 1)
• ShadowDepth - The shadow offset

Transformations

Transformations allow us to rotate, scale, skew, and translate the control. We've already stated that the Transform class is internally responsible for those.

Transformation Types

There are the following classes for different transformation types available:

• TranslateTransform - Sets the control offset according to the X and Y coordinates
• ScaleTransform - Resizes the control according to the X and Y coordinates
• SkewTransform - Skews the control according to the X and Y coordinates (0 to 360 degrees)
• RenderTransformOrigin - Sets the rotation origin of the control (top-left corner, center, bottom-right corner)
• RotateTransform - Rotates the control (0 to 360 degrees)

Example

Unlike effects, we can try all the transformations on a single example and still see all of them clearly:

<Label x:Name="lblText" Content="Text"
       Style="{StaticResource Text}" RenderTransformOrigin="0.5,0.5">
    <Label.RenderTransform>
        <TransformGroup>
            <ScaleTransform ScaleX="1"
                            ScaleY="1"/>
            <SkewTransform AngleX="10"
                           AngleY="10"/>
            <RotateTransform Angle="45"/>
            <TranslateTransform/>
        </TransformGroup>
    </Label.RenderTransform>
</Label>

The result:

Brush

We get to brushes. We can use them to set the background of a control to a color gradient, image, or custom pattern in addition to a regular color.

SolidColorBrush

This brush fills an area with one specified color:

<Rectangle Grid.Row="1" Width="140" Height="140" Stroke="Black">
    <Rectangle.Fill>
        <SolidColorBrush Color="Lime" Opacity="1"/>
    </Rectangle.Fill>
</Rectangle>

The result:

Properties

For SolidColorBrush we can set:

• Color - The background color
• Opacity - Color transparency (0 to 1)

LinearGradientBrush

This brush fills an area with a linear gradient:

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="Yellow" Offset="0"/>
    <GradientStop Color="Red" Offset="0.5"/>
    <GradientStop Color="Blue" Offset="1"/>
</LinearGradientBrush>

The result:

Properties

Regarding the properties, we've those available:

• StartPoint - Sets the starting point of the color gradient (from 0.0 to 1.1).
• EndPoint - Sets the end point of the color gradient (from 0.0 to 1.1).
• GradientStop - The color and location of the gradient. We can set:
  • Color - The used color
  • Offset - Color location (0 to 1)
  • Opacity - Transparency of the color gradient (0 to 1).
• SpreadMethod - Specifies the way to fill the area. The options are:
  • Pad - Displays a single color gradient
  • Reflect - Displays a color gradient and repeats it at the end with a reverse color sequence
  • Repeat - Displays a color gradient and repeats it at the end with the same color sequence

RadialGradientBrush

This brush fills an area with a radial gradient:

<Ellipse Width="140" Height="140" Stroke="Black">
    <Ellipse.Fill>
        <RadialGradientBrush x:Name="radial"
                             RadiusX="0.5"
                             RadiusY="0.5"
                             Opacity="1">
            <GradientStop Color="Yellow" Offset="0"/>
            <GradientStop Color="Blue" Offset="1"/>
        </RadialGradientBrush>
    </Ellipse.Fill>
</Ellipse>

The result:

Properties

Regarding the brush properties, we can set:

• GradientOrigin - Specifies the center of the color gradient according to the X and Y coordinates
• GradientStop - The color and location of the gradient. We can set:
  • Color - The used color
  • Offset - Color location (0 to 1)
• Opacity - Color gradient transparency (0 to 1)
• Radius - Color gradient radius (0 to 1)
• SpreadMethod - Sets the way of filling the area. The options are:
  • Pad - Displays a single color gradient
  • Reflect - Displays a color gradient and repeats it at the end with a reverse color sequence
  • Repeat - Displays a color gradient and repeats it at the end with the same color sequence

ImageBrush

This brush fills the control's area with an image:

<Rectangle Grid.Row="1" Stroke="Black"
            Width="200" Height="150">
    <Rectangle.Fill>
        <ImageBrush ImageSource="img1.jpg" Viewport="0,0,0.2,0.2"
                    TileMode="Tile"/>
    </Rectangle.Fill>
</Rectangle>

The result:

Properties

ImageBrush has the following properties that we can set:

• Opacity - Image transparency (0 to 1)
• Viewport - Image display size (0 to 1)
• TileMode - The way of filling the area with an image. We've the following options:
  • None - Displays a single image only
  • FlipX - Fills the area with a repeating image and rotates it alternately around the X axis
  • FlipY - Fills the area with a repeating image and mirrors it alternately around the Y axis
  • FlipXY - Fills the area with a repeating image and mirrors it alternately around the X and Y axes
  • Tile - Fills the area with a repeating image without any modification

VisualBrush

VisualBrush fills the surface with its own pattern. Let's show an example:

<StackPanel>
    <Rectangle Name="RectImage" Width="200" Height="100"
                    Stroke="Black">
        <Rectangle.Fill>
            <ImageBrush ImageSource="img1.jpg"/>
        </Rectangle.Fill>
    </Rectangle>

    <Rectangle Width="200" Height="80" RenderTransformOrigin="0.5,0.5"
               Margin="0,2,0,0" VerticalAlignment="Top">
        <Rectangle.Fill>
            <VisualBrush Opacity="1"
                         Visual="{Binding ElementName=RectImage}">
            </VisualBrush>
        </Rectangle.Fill>

        <Rectangle.RenderTransform>
            <TransformGroup>
                <ScaleTransform ScaleX="1" ScaleY="-1"/>
                <SkewTransform AngleX="0" AngleY="180"/>
                <RotateTransform Angle="0"/>
                <TranslateTransform X="0" Y="0"/>
            </TransformGroup>
        </Rectangle.RenderTransform>

        <Rectangle.OpacityMask>
            <LinearGradientBrush x:Name="lgbMask1"
                                 StartPoint="0.5, 0" EndPoint="0.5, 1">
                <GradientStop Color="#00000000" Offset="0.0"/>
                <GradientStop Color="#33000000" Offset="0.5"/>
                <GradientStop Color="#FF000000" Offset="0.75"/>
            </LinearGradientBrush>
        </Rectangle.OpacityMask>
    </Rectangle>
</StackPanel>

The result:

OpacityMask

Finally, let's mention one way to create interesting effects. In addition to the above tools, OpacityMask is also available in WPF. It can be set, for example, for Background, Foreground, BorderBrush, and has the same options as well (single color, gradient, image). It works by making specific parts of the image transparent, according to the color in the mask. The black area of the mask makes the part of the image behind the mask visible, and the white area makes it completely transparent (invisible). Shades of gray color in the mask then set partial visibility of the image area. Let's see how the transparency mask works:

In the next few lessons, we'll make a quick overview of the Toolbox controls to complete our course. In the next lesson, DependencyProperties in C# .NET WPF, it'll be about Button, CheckBox, and RadioButton.

In the next lesson, DependencyProperties in C# .NET WPF , we'll introduce DependencyPro­perties in WPF and what they can do more than classic C# properties in combination with INotifyProper­tyChanged.