Magnifier

Derives from Control

The Magnifier control does exactly what is sounds like. It allows a user to magnify parts of an application.

Usage

magnifier.png

You can add the Magnifier to any element that is of type UIElement. This is done by using the MagnifierManager. You simply set the MagnifierManager.Magnifier property to the toolkit's Magnifier instance. The following snippet adds the Magnifier to the parent grid of a Window.

<Window x:Class="WPFToolkit.Extended.Samples.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:extToolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit/extended"
        Title="MainWindow" Height="350" Width="525" >
    <Grid>
        <extToolkit:MagnifierManager.Magnifier>
            <extToolkit:Magnifier Radius="100" ZoomFactor=".4" />
        </extToolkit:MagnifierManager.Magnifier>
        <RichTextBox />
    </Grid>
</Window>

Now everything that is contained within the Grid will have the ability to be magnified.

Properties

You can control the appearance of the Magnifier by setting some of the available properties.

Name Description
FrameType Gets or sets the type of frame used by the Magnifier.
Radius Gets or sets the radius/size of the Magnifier
Target Gets or sets the UIElement to which the Magnifier is attached.
ZoomFactor Gets or sets the amount to zoom into an element. The value ranges from 0.0 to 1.0. The smaller the number, the further zoomed in you are. 1.0 is normal text or 100% of orignial size, 0.0 is the most you can zoom in.


Example

magnifier_withborder.png

The following code snippet attaches a Magnifier to a Window's parent Grid that has a Radius of 75, a red boder that is 1 pixel thick, and a ZoomFactor of 0.3526.

<Window x:Class="WPFToolkit.Extended.Samples.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:extToolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit/extended"
        Title="MainWindow" Height="350" Width="525" >
    <Grid>
        <extToolkit:MagnifierManager.Magnifier>
            <extToolkit:Magnifier BorderBrush="Red"
                                  BorderThickness="1"
                                  Radius="75" 
                                  ZoomFactor=".3526" />
        </extToolkit:MagnifierManager.Magnifier>
        <RichTextBox />
    </Grid>
</Window>


Support this project, check out the Plus Edition.
---

Last edited Jun 9 at 6:41 PM by dlafontaine, version 9

Comments

cyberciccio Mar 19, 2013 at 1:26 PM 
Follow the xaml
<Window x:Class="WPFextk"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
Title="MainWindow" Height="350" Width="525" >
<Grid Name="MainWinPanel" KeyboardNavigation.TabNavigation="Cycle" >
</Grid>
</Window>

follow code behind
Class WPFextk

Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
Dim magnifier As New Xceed.Wpf.Toolkit.Magnifier
magnifier.BorderBrush = Brushes.Blue
magnifier.Radius = 75
magnifier.ZoomFactor = 0.3526
Me.MainWinPanel.Children.Add(magnifier)
Dim tbx As New TextBlock
tbx.Text = "qwxqsxjwosnd 2epun qodunf oqeu fboweub p weinu c"
Me.MainWinPanel.Children.Add(tbx)
End Sub
End Class

cyberciccio Mar 19, 2013 at 1:03 PM 
I'm trying to using it by adding in code behind, but I've some problem.
In the xaml I'have a
<DockPanel Name="MainWinPanel" KeyboardNavigation.TabNavigation="Cycle" >
</DockPanel >
I add a magnifier a children and then another children like datagrid
Con someone help me?

McInnesIan Jan 9, 2013 at 11:44 AM 
I added a MouseWhell event so that the magnifier can zoom in or out by rotating the mouse wheel. It appears that the magnifier zooms in/out based on the upper left hand corner of the magnifier not the centre where the mouse is. resulting in the magnified area scrolling down/up Shouldn't the magnifier uses the position of the mouse, the centre of the magnifier as its transform coordinates.

emartin Dec 13, 2012 at 8:59 PM 
Please use the DISCUSSIONS Tab for community support

jai_krishan Dec 12, 2012 at 7:25 AM 
Can i control it with some other events?
Like by context menu...
Any help appreciated.
Thanks in advance,
Jaikrishan

shaggygi Dec 31, 2011 at 12:09 AM 
It would be nice to be able to have different shapes ( square, rectangle ) for magnifying section.

shaggygi Dec 29, 2011 at 7:18 PM 
It appears you are not able to data bind to other elements. I tried binding the Radius and ZoomFactor to a DoubleUpDown and TextBox and seems to not work. Also tried the Visibility to a ToggleButton.

Is this a bug? If so, any plans on updating?

Good toolkit! I'm using it in a few of my apps so far.

Kerfluffel Jun 10, 2011 at 5:49 PM 
I like the control but the mouse is not centered over the control it is magnifying so that if you try to click a button which is magnified, the click misses the button.