熟悉WPF 的朋友应该知道Canvas 默认是不支持Scale 和Offset 操作的，如果我们想对Canvas 里包含的控件进行整体缩放或移动可能会比较麻烦。Kael Rowan 提供了ZoomableCanvas 类可以方便实现上述效果。我们可以在XAML 中直接使用<ZoomableCanvas> 对控件布局进行开发，而不需要使用<Canvas>。

在项目中加入ZoomableCanvas 相关类，编译后工具栏中会出现ZoomableCanvas 控件。

Control

有了ZoomableCanvas 控件接下来的事情就简单多了，如下XAML 代码：

<Window x:Class="WpfApplication1.MainWindow"          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"          xmlns:my="clr-namespace:System.Windows.Controls"          Title="MainWindow" Height="350" Width="525">      <Grid>          <Grid.RowDefinitions>              <RowDefinition Height="Auto"/>              <RowDefinition Height="Auto"/>              <RowDefinition/>          </Grid.RowDefinitions>                    <StackPanel Orientation="Horizontal" Grid.Row="0">              <TextBlock Text="Scale"/>              <Slider Minimum=".1" Maximum="4" Width="200"                      Value="{Binding ElementName=zoomCanvas, Path=Scale}"/>          </StackPanel>                    <StackPanel Orientation="Horizontal" Grid.Row="1">              <TextBlock Text="Offset"/>              <Slider x:Name="offsetVal" Minimum="-300" Maximum="0" Width="200"                       ValueChanged="Slider_ValueChanged"/>          </StackPanel>                          <my:ZoomableCanvas x:Name="zoomCanvas" Grid.Row="2" Offset="-50,0">              <Button Content="Test" Canvas.Top="10" Canvas.Left="10"/>              <Rectangle Fill="Blue" Canvas.Top="30" Canvas.Left="50"                         Width="50" Height="50"/>          </my:ZoomableCanvas>      </Grid>  </Window>

     通过两个Slider 控制Canvas 缩放大小与位移距离，ZoomableCanvas 的使用和Canvas 基本相同，可以在其中加入其他控件，最后只需要为Silder_ValueChanged 事件添加好内容即可。

private void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)  {      zoomCanvas.Offset = new Point(offsetVal.Value,0);  }

运行程序，通过滑块调整ZoomableCanvas 的Scale 与Offset 属性，快速实现多控件缩放与移动效果，如下图对比。

初始状态（调整前）：

Normal 

调整后：

Changed 

ZoomableCanvas 下载