WPF Magnifier Control

WPF Magnifier Control

I remember building a Graphics Painter application using GDI+ and know how difficult it was to create a real zoom-in feature. I recently noticed that the WPF team has added a Magnifier control to the toolkit. How cool is that? This control does exactly what you think. It is a magnifier glass and zooms in the content. It can be applied to any control or text.

This article demonstrates how to use the Magnifier control in a WPF application using C# and XAML.

Adding Reference to WPF Toolkit Extended Assembly

The Magnifier control is a part of the WPF Toolkit Extended and does not come with Visual Studio 2010. To use the Calculator control in your application, you must add reference to the WPFToolkit.Extended.dll assembly. You can download Extended WPF Tookit from the CodePlex or you can use the WPFToolkit.Extended.dll available with this download. All you need is the DLL. See Downloads section of this article. You can find more details in my blog Adding Reference to WPF Toolkit Extended.

Creating a Magnifier

The Magnifier element represents a WPF Magnifier control in XAML. The Magnifier control is defined in the System.Windows.Controls namespace. Listing 1 creates a simple Magnifier control.

<wpfx:MagnifierManager.Magnifier >
<wpfx:Magnifier Name="MagnifiyingGlass" Radius="100" ZoomFactor=".5" />
</wpfx:MagnifierManager.Magnifier>

Listing 1

As you can see from Listing 1, a Magnifier control runs within a MagnifierManager.

Properties

• The BorderBrush property sets the color of the outer border of the Magnifier.
• The BorderThickness property sets the thickness of the outer border of the Magnifier.
• The Radius property sets the radius (size) of the Magnifier.
• The ZoomFactor property sets the amount to zoom into the content. The value ranges between 0.0 to 1.0 where 1.0 means 100% of normal size and 0 means the most you can zoom in.

The code snippet in Listing 2 sets the BorderBrush, BorderThickness, Radius, ZoomFactor and Visibility properties of a Magnifier control.

<wpfx:MagnifierManager.Magnifier >
<wpfx:Magnifier Visibility="Hidden" Name="MagnifiyingGlass" Radius="50" ZoomFactor=".5" BorderBrush="Orange" BorderThickness="2"/>
</wpfx:MagnifierManager.Magnifier>

Listing 2

The output of Listing 2 generates output that looks like Figure 1.

Figure 1

Summary

In this article, we discussed how to use the Magnifier control in a WPF application using C# and XAML.