WPF 放大鏡
WPF 放大鏡是以VisualBrush實現的，單擊左鍵放下放大鏡，接下來可以對頁面的控件進行操作，單擊放大鏡可以再次獲取放大鏡，放大鏡效果如下：
參考資源：http://www.cnblogs.com/zhihai/archive/2012/02/03/2337161.html
下面是後臺全部代碼：
public partial class MainWindow : Window
{
#region 添加放大鏡
Grid myGrid = new Grid();
Canvas canvasOne = new Canvas();
Canvas canvasTwo = new Canvas() { Name = "myCanvas" };
Path pathTwo = null;
int i = 0;
#endregion
public MainWindow()
{
InitializeComponent();
initVisualBrush();
this.grid1.PreviewMouseMove += new MouseEventHandler(grid1_PreviewMouseMove);
this.MouseDown += new MouseButtonEventHandler(EnergyOverview_MouseDown);
VisualBrush vb = (VisualBrush)pathTwo.Fill;
//指定加載時顯示的放大區域
vb.Visual = grid2;
}
#region 放大鏡相關操作
//初始化放大鏡
private void initVisualBrush()
{
#region 放大鏡區域-Grid
//線
Line line = new Line()
{
X1 = 150,
Y1 = 140,
X2 = 300,
Y2 = 250,
StrokeThickness = 30,
Stroke = new LinearGradientBrush() //使用線性漸變繪製區域
{
StartPoint = new Point(0, 0), //開始位置
EndPoint = new Point(0, 1), //結束位置
GradientStops = new GradientStopCollection() //漸變的顏色
{
new GradientStop(Colors.White,1),
new GradientStop(Colors.Black,0)
}
}
};
//路徑-1
Path pathOne = new Path()
{
Fill = new SolidColorBrush(Colors.White),
Width = 200,
Height = 200,
Data = new GeometryGroup()
{
Children = new GeometryCollection()
{
new EllipseGeometry(new Point(100,100),100,100), //從中心開始，畫一個圓，半徑是100
new EllipseGeometry(new Point(100,100),1,1) //從中心開始，畫一個小圓，半徑是1
}
}
};
//路徑-2
pathTwo = new Path()
{
Name = "myPath",
Width = 200,
Height = 200,
Fill = new VisualBrush()
{
Viewbox = new Rect(0, 0, 120, 120),
ViewboxUnits = BrushMappingMode.Absolute,
Viewport = new Rect(0, 0, 1, 1),
ViewportUnits = BrushMappingMode.RelativeToBoundingBox
},
Data = new GeometryGroup()
{
Children = new GeometryCollection()
{
new EllipseGeometry(new Point(100,100),100,100), //從中心開始，畫一個圓，半徑是100
new EllipseGeometry(new Point(100,100),1,1) //從中心開始，畫一個小圓，半徑是1
}
}
};
//圓-1
Ellipse ellipseOne = new Ellipse()
{
Width = 200,
Height = 200,
StrokeThickness = 10,
Stroke = new LinearGradientBrush()
{
StartPoint = new Point(0, 0),
EndPoint = new Point(0, 1),
GradientStops = new GradientStopCollection()
{
new GradientStop(Colors.Black,0),
new GradientStop(Colors.White,1)
}
}
};
//圓-2
Ellipse ellipseTwo = new Ellipse()
{
Width = 200,
Height = 200,
StrokeThickness = 10,
Stroke = new LinearGradientBrush()
{
StartPoint = new Point(0, 0),
EndPoint = new Point(0, 1),
GradientStops = new GradientStopCollection()
{
new GradientStop(Colors.Black,1),
new GradientStop(Colors.White,0)
}
}
};
myGrid.Children.Add(canvasOne);
canvasOne.Children.Add(canvasTwo);
canvasTwo.Children.Add(line);
canvasTwo.Children.Add(pathOne);
canvasTwo.Children.Add(pathTwo);
canvasTwo.Children.Add(ellipseOne);
canvasTwo.Children.Add(ellipseTwo);
#endregion
//myGd.Children.Add(dataGrid2);
//將放大鏡加入頁面
grid1.Children.Add(myGrid);
}
//獲取或者放下放大鏡
void EnergyOverview_MouseDown(object sender, MouseEventArgs e)
{
if (i == 0)
this.grid1.PreviewMouseMove -= new MouseEventHandler(grid1_PreviewMouseMove);
else
this.grid1.PreviewMouseMove += new MouseEventHandler(grid1_PreviewMouseMove);
i = (i + 1) % 2;
}
//放大鏡移動
void grid1_PreviewMouseMove(object sender, MouseEventArgs e)
{
VisualBrush vb = (VisualBrush)pathTwo.Fill;
Point point = e.MouseDevice.GetPosition(grid2);
Rect rc = vb.Viewbox;
rc.X = point.X - rc.Width / 2;
rc.Y = point.Y - rc.Height / 2;
vb.Viewbox = rc;
Canvas.SetLeft(canvasTwo, point.X - pathTwo.Width / 2);
Canvas.SetTop(canvasTwo, point.Y - pathTwo.Height / 2);
}
#endregion
}
下面是前臺頁面：
<Window x:Class="Magnifier.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid Name="grid1">
<Grid Name="grid2">
<Button Content="放大鏡測試1" Height="30" Width="100" />
<Button Content="放大鏡測試2" Height="30" Width="100" Margin="43,144,360,137" />
</Grid>
</Grid>
</Window>
源碼位置：http://download.csdn.net/detail/luozuolincool/7966467