Silverlight 2 转换和剪辑区域

核心提示： 图 1 运行中的 Silverlight 放大镜幸运的是，您可以在 Silverlight 中模拟放大镜，Silverlight 2 转换和剪辑区域(2)，为此只需对转换和剪辑区域功能略加灵活运用即可，此处介绍的 Magnifier 应用程序演示了具体过程，第一个 Canvas (Mai

图 1 运行中的 Silverlight 放大镜

幸运的是，您可以在 Silverlight 中模拟放大镜，为此只需对转换和剪辑区域功能略加灵活运用即可。此处介绍的 Magnifier 应用程序演示了具体过程。图 2 显示了简化版本的 Magnifier 应用程序的 Page.xaml 文件。它声明了两个几乎相同的 Canvas，每个都包含一份图 1 所述内容的副本。第一个 Canvas (MainCanvas) 是用户通常看到的。第二个 Canvas (ZoomCanvas) 与第一个包含的内容相同，但它另外还包含了一个可将显示内容放大 4 倍的 ScaleTransform。

图 2 Page.xaml

<UserControl x:Class="Magnifier.Page"
　xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
　xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
　<Grid x:Name="LayoutRoot" Background="Black"
　　MouseLeftButtonDown="OnMouseLeftButtonDown" MouseMove="OnMouseMove"
　　MouseLeftButtonUp="OnMouseLeftButtonUp">
　　<Canvas x:Name="RootCanvas" Width="800" Height="800">
　　　<!-- Main canvas -->
　　　<Canvas x:Name="MainCanvas" Canvas.Left="0" Canvas.Top="0"
　　　　Width="800" Height="900" Background="Black">
　　　　<Canvas Canvas.Left="90" Canvas.Top="30" Width="620" Height="470">
　　　　　<Rectangle Canvas.Left="0" Canvas.Top="0" Width="620"
　　　　　　Height="470" Fill="White" />
　　　　　<Image Canvas.Left="10" Canvas.Top="10" Width="600" Height="450"
　　　　　　Source="Images/BobCat.jpg" />
　　　　</Canvas>
　　　　<Canvas Canvas.Left="90" Canvas.Top="540">
　　　　　<Line Canvas.Left="0" Canvas.Top="0" X1="0" Y1="0" X2="620"
　　　　　　Y2="0" Stroke="#808080" StrokeThickness="3"
　　　　　　StrokeDashArray="1,1" />
　　　　　<TextBlock Canvas.Left="0" Canvas.Top="10" Foreground="White"
　　　　　　FontSize="36" Text="BVM BobCat" />
　　　　　<TextBlock Canvas.Left="0" Canvas.Top="70" Foreground="White"
　　　　　　FontSize="12" TextWrapping="Wrap" Width="620" Text="..." />
　　　　　<Line Canvas.Left="0" Canvas.Top="180" X1="0" Y1="0" X2="620"
　　　　　　Y2="0" Stroke="#808080" StrokeThickness="3"
　　　　　　StrokeDashArray="1,1" />
　　　　</Canvas>
　　　</Canvas>
　　　<!-- Zoom canvas -->
　　　<Canvas x:Name="ZoomCanvas" Canvas.Left="0" Canvas.Top="0"
　　　　Width="800" Height="900" Background="Black" Visibility="Collapsed">
　　　　<Canvas.RenderTransform>
　　　　　<ScaleTransform CenterX="0" CenterY="0" ScaleX="4" ScaleY="4"/>
　　　　</Canvas.RenderTransform>
　　　　<Canvas.Clip>
　　　　　<EllipseGeometry x:Name="Lens" Center="0,0"
　　　　　　RadiusX="40" RadiusY="40" />
　　　　</Canvas.Clip>
　　　　　...
　　　　<Path Canvas.Left="0" Canvas.Top="0" Stroke="#808080"
　　　　　StrokeThickness="1">
　　　　　<Path.Data>
　　　　　　<EllipseGeometry x:Name="LensBorder" Center="0,0"
　　　　　　　RadiusX="40" RadiusY="40" />
　　　　　</Path.Data>
　　　　</Path>
　　　</Canvas>
　　</Canvas>
　</Grid>
</UserControl>