Examples of Visual Effects in WPF/XAML

In this post we will create a WPF application that shows an color changing logo reflected on a polished surface. We will use nothing but XAML to create visual effects such as mirroring, a horizon, a spotlight and dynamic colorization of a grayscale image.

The result will look like this:

Screenshots

Screenshots of the WPF Application

First of all, let’s create a nice background using the build in WPF effects. In this example we use a linear gradient that looks like a horizon. Then we place a kind of spot light using a radial gradiant opacity mask.

<Window
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Class="WPF_ColorEffect.MainWindow"
	x:Name="Window" 
	Background="Black"
	Title="MainWindow"
	WindowStyle="None" ResizeMode="NoResize"
	Width="260" Height="400">
	...
	<Canvas x:Name="LayoutRoot">
		<Border Canvas.Left="0" Canvas.Top="0" Height="362" Width="244">
			<Border.OpacityMask>
				<RadialGradientBrush GradientOrigin="0.5,0.8">
					<GradientStop Color="Black" Offset="0"/>
					<GradientStop Offset="1"/>
				</RadialGradientBrush>
			</Border.OpacityMask>
			<Border.Background>
				<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
					<GradientStop Color="#FF000000" Offset="0.25" />
					<GradientStop Color="#FF333333" Offset="0.5" />
					<GradientStop Color="#FF555555" Offset="0.5" />
					<GradientStop Color="#FF000000" Offset="0.75" />
				</LinearGradientBrush>
			</Border.Background>
		</Border>
		...
	</Canvas>
</Window>

The window now looks like this:

Background

Screenshot of the Background Image

Now we can add the image that will later be reflected. This is colorized to a specific color that can be changed at runtime or might even be animated. A wordpress logo will serve as the opacity mask. The fill is a solid color.

<Rectangle Name="Logo" 
	Canvas.Left="8" Canvas.Top="8" Height="224" Width="224" 
	Fill="#FF1A4D74"> 		
	<Rectangle.OpacityMask>
		<ImageBrush ImageSource="Images/wp-icon-300x267.png" />
	</Rectangle.OpacityMask>
</Rectangle>

The image we use in this example is a wordpress icon that was transformed to gray scale and uses transparency:

Wordpress Icon

A transparent wordpress icon

To create an effect like a reflection on a flat surface we will use another rectangle. This should be of the same size as the other one. Hence, we bind its height and width to the corresponding properties of the other rectangle. The reflection is implemented by a filling using a visual brush. Binding this to the other rectangle makes both look the same. We then apply a scale transform to flip the image. Furthermore, an opacity mask is used to fade out the reflection.

<Rectangle Name="Reflection" 
	Canvas.Left="8" Canvas.Top="240" 
	Height="{Binding Path=ActualHeight, ElementName=Logo}" 
	Width="{Binding Path=ActualWidth, ElementName=Logo}">
	<Rectangle.OpacityMask>
		<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
			<GradientStop Color="#FF000000" Offset="0.0" />
			<GradientStop Color="#33000000" Offset="0.2" />
			<GradientStop Color="#00000000" Offset="0.5" />
		</LinearGradientBrush>
	</Rectangle.OpacityMask>
	<Rectangle.Fill>
		<VisualBrush Visual="{Binding ElementName=Logo}">
			<VisualBrush.RelativeTransform>
				<TransformGroup>
					<ScaleTransform 
						CenterY="0.5" CenterX="0.5" 
						ScaleY="-1"/>
				</TransformGroup>
			</VisualBrush.RelativeTransform>
		</VisualBrush>
	</Rectangle.Fill>
</Rectangle>

To make the logo change its color over time we use a keyframe animation that smoothly fades the colors. This animation’s storyboard is triggered immediately after the window is loaded.

<Window.Resources>
	<Storyboard x:Key="ColorChange">
		<ColorAnimationUsingKeyFrames 
			RepeatBehavior="Forever" 
			Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" 
			Storyboard.TargetName="Logo">
				
			<EasingColorKeyFrame KeyTime="0:0:0" Value="#FF1494F5"/>
			<EasingColorKeyFrame KeyTime="0:0:2" Value="#FFC014F5"/>
			<EasingColorKeyFrame KeyTime="0:0:4" Value="#FFF51490"/>
			<EasingColorKeyFrame KeyTime="0:0:6" Value="#FFF51414"/>
			<EasingColorKeyFrame KeyTime="0:0:8" Value="#FF1494F5"/>
		</ColorAnimationUsingKeyFrames>
	</Storyboard>
</Window.Resources>

<Window.Triggers>
	<EventTrigger RoutedEvent="FrameworkElement.Loaded">
		<BeginStoryboard Storyboard="{StaticResource ColorChange}"/>
	</EventTrigger>
</Window.Triggers>

I hope that this post makes you become interested in trying out more with XAML.

The source code of this project is available here.

Advertisements
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: