熟悉WPF 的朋友應(yīng)該知道Canvas 默認(rèn)是不支持Scale 和Offset 操作的，如果我們想對Canvas 里包含的控件進(jìn)行整體縮放或移動可能會比較麻煩。Kael Rowan 提供了ZoomableCanvas 類可以方便實(shí)現(xiàn)上述效果。我們可以在XAML 中直接使用<ZoomableCanvas> 對控件布局進(jìn)行開發(fā)，而不需要使用<Canvas>。

　　在項(xiàng)目中加入ZoomableCanvas 相關(guān)類，編譯后工具欄中會出現(xiàn)ZoomableCanvas 控件。

　　有了ZoomableCanvas 控件接下來的事情就簡單多了，如下XAML 代碼：

　　<Window x:Class="WpfApplication1.MainWindow"
xmlns="//schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="//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>

　　通過兩個(gè)Slider 控制Canvas 縮放大小與位移距離，ZoomableCanvas 的使用和Canvas 基本相同，可以在其中加入其他控件，最后只需要為Silder_ValueChanged 事件添加好內(nèi)容即可。

private void Slider_ValueChanged

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

　　運(yùn)行程序，通過滑塊調(diào)整ZoomableCanvas 的Scale 與Offset 屬性，快速實(shí)現(xiàn)多控件縮放與移動效果，如下圖對比。

　　初始狀態(tài)（調(diào)整前）：

　　調(diào)整后：