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.