熟悉WPF 的朋友应该知道Canvas 默认是不支持Scale 和Offset 操作的,如果我们想对Canvas 里包含的控件进行整体缩放或移动可能会比较麻烦。
Kael Rowan 提供了ZoomableCanvas 类可以方便实现上述效果。我们可以在XAML 中直接使用<ZoomableCanvas> 对控件布局进行开发,而不需要使用<Canvas>。
通过两个Slider 控制Canvas 缩放大小与位移距离,ZoomableCanvas 的使用和Canvas 基本相同,可以在其中加入其他控件,最后只需要为Silder_ValueChanged 事件添加好内容即可。
在项目中加入ZoomableCanvas 相关类,编译后工具栏中会出现ZoomableCanvas 控件。
有了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(objectsender, RoutedPropertyChangedEventArgs<double> e){ zoomCanvas.Offset =new Point(offsetVal.Value,0);
}
}
运行程序,通过滑块调整ZoomableCanvas 的Scale 与Offset 属性,快速实现多控件缩放与移动效果,如下图对比。
初始状态(调整前):
调整后: