WPF Settings Vistualbrush Visual properties making a picture Magnifier effect

Original: WPF Settings Vistualbrush Visual properties making a picture Magnifier effect

Chip


Principle:
Set the visual properties of Vistualbrush and use its Viewbox property to scale.

XAML Code:
Window1.xaml
<window x:class= "Magnifyingglass.window1"
Xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml"
title= "magnifying Glass" width= "595" height= "612"
>
<Window.Resources>
<booleantovisibilityconverter x:key= "Booltovis"/>
</Window.Resources>
<grid verticalalignment= "Center" margin= "ten" >
<grid name= "Maingrid" >
<Grid.RowDefinitions>
<rowdefinition height= "Auto"/>
<rowdefinition height= "Auto"/>
<rowdefinition height= "Auto"/>
<rowdefinition height= "Auto"/>
<rowdefinition height= "Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<columndefinition width= "Auto"/>
<columndefinition width= "*"/>
<columndefinition width= "Auto"/>
</Grid.ColumnDefinitions>

<stackpanel grid.columnspan= "3" orientation= "horizontal" margin= "0,0,0,20" >
<textblock margin= "5" >target size:</textblock>
<textbox name= "txttargetsize" text= "" textchanged= "zoomchanged"/>
</StackPanel>
<slider name= "slidertargetsize" margin= "263.5,-0.313333333333333,0.5,0"
Value= "{Binding elementname=txttargetsize,path=text}"
minimum= "2" maximum= "grid.column=" 1 "height=" "verticalalignment=" Top "/>
<checkbox name= "Checkenablemagnifier" ischecked= "True"
Horizontalalignment= "left" margin= "181,6.84333333333333,0,0" grid.column= "1" height= "13.6866666666667" "Top" width= "verticalalignment=" >
Magnifier
</CheckBox>
<button grid.row= "4" grid.column= "1" click= "Exitclick" content= "E_xit" minwidth= "" minheight= "23" Horizontalalignment= "left" margin= "277,1.00000000000006,0,-1.00000000000006" width= "/>"
<image grid.row= "2" grid.column= "1" name= "Imagedemo" source= "C:/Documents and settings/administrator/Desktop/ Lake.jpg "grid.columnspan=" 4 "height=" "width=" 660 "previewmousemove=" Onmoveovermainui "/>
</Grid>
<canvas horizontalalignment= "left" verticalalignment= "Top" >
<canvas name= "Magnifiercanvas" ishittestvisible= "False"
Visibility= "{Binding elementname=checkenablemagnifier,path=ischecked,converter={staticresource BoolToVis}}" >
<line strokethickness= "" "x1=" "y1=" "x2=", "y2=" >
<Line.Stroke>
<lineargradientbrush startpoint= "0.78786,1" endpoint= "1,0.78786" >
<gradientstop offset= "0" color= "Darkgreen"/>
<gradientstop offset= "0.9" color= "LightGreen"/>
<gradientstop offset= "1" color= "Green"/>
</LinearGradientBrush>
</Line.Stroke>
</Line>
<ellipse width= "height=" fill= "white"/>
<ellipse width= "250" height= "name= "Magnifierellipse"strokethickness= "3" >
<Ellipse.Fill>
<visualbrush viewboxunits= "Absolute" viewbox= "0,0,50,50"
viewportunits= "RelativeToBoundingBox" viewport= "0,0,1,1"/>
</Ellipse.Fill>
<Ellipse.Stroke>
<lineargradientbrush startpoint= "0,0" endpoint= "0,1" >
<gradientstop offset= "0" color= "#AAA"/>
<gradientstop offset= "1" color= "#111"/>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
<ellipse canvas.left= "2" canvas.top= "2" strokethickness= "4" width= "246" height= "246" >
<Ellipse.Stroke>
<lineargradientbrush startpoint= "0,0" endpoint= "0,1" >
<gradientstop offset= "0" color= "#555"/>
<gradientstop offset= "1" color= "#EEE"/>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
</Canvas>
</Canvas>
</Grid>
</Window>

C # code:
Window1.xaml.cs
Using System;
Using System.Windows;
Using System.Windows.Controls;
Using System.Windows.Data;
Using System.Windows.Documents;
Using System.Windows.Media;
Using System.Windows.Shapes;
Using System.Windows.Input;

Namespace Magnifyingglass
{
<summary>
Interaction Logic for Window1.xaml
</summary>

public partial class Window1:window
{
VisualBrush vb;
Public Window1 ()
{
InitializeComponent ();
vb = (VisualBrush) magnifierellipse. Fill;
Vb. Visual = Imagedemo;
}

private void Exitclick (object sender, RoutedEventArgs e)
{
Close ();
}

private void Zoomchanged (object sender, EventArgs e)
{
if (Magnifierellipse! = NULL)
{
Rect ViewBox = vb. Viewbox;
Double Val;
if (!double. TryParse (Txttargetsize.text, out Val)) return;
Viewbox.width = val;
Viewbox.height = val;
Vb. Viewbox = Viewbox;
}
}

private void Onmoveovermainui (object sender, MouseEventArgs e)
{
Point pos = e.mousedevice.getposition (Maingrid);
Ifimagedemo.ishittestvisible)
{
Rect ViewBox = vb. Viewbox;
Double xoffset = viewbox.width/2.0;
Double yoffset = viewbox.height/2.0;
viewbox.x = pos. X-xoffset;
VIEWBOX.Y = pos. Y-yoffset;
Vb. Viewbox = Viewbox;
Canvas.setleft (Magnifiercanvas, Pos. X-MAGNIFIERELLIPSE.WIDTH/2);
Canvas.settop (Magnifiercanvas, Pos. Y-MAGNIFIERELLIPSE.HEIGHT/2);
}
}
}
}

Still want to do some other effects on the lens? Take a look at this: WPF uses the Radialgradient simulation Magnifier effect to improve it so you can get the more you need.

WPF Settings Vistualbrush Visual properties making a picture Magnifier effect