WPF <ZoomableCanvas> 实现缩放移动

转载 2016年06月02日 11:30:19
熟悉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(objectsender, RoutedPropertyChangedEventArgs<double> e){ zoomCanvas.Offset =new Point(offsetVal.Value,0);
}

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

初始状态(调整前):

Normal 

调整后:

Changed 


示例下载

【C#/WPF】UI控件的拖拽/拉伸

使用ZoomableCanvas、Thumb

WPF <ZoomableCanvas> 实现缩放移动

熟悉WPF 的朋友应该知道Canvas 默认是不支持Scale 和Offset 操作的,如果我们想对Canvas 里包含的控件进行整体缩放或移动可能会比较麻烦。Kael Rowan 提供了Zoom...

WPF窗体缩放移动-实现代码

using System; using System.Collections.Generic; using System.Linq; using System.Text; using Syst...

wpf实现图片拖动和缩放

1.wpf提供了 ScaleTransform,来进行缩放变换,提供了 TranslateTransform来进行位置变换(移动坐标)。 以下代码来自互联网,实现图片的缩放和平移。 也可以将图片...

Qt去掉窗口标题栏实现移动缩放

  • 2017年10月17日 11:33
  • 1.77MB
  • 下载

在WPF中的Canvas上实现控件的拖动、缩放

如题,项目中需要实现使用鼠标拖动、缩放一个矩形框,WPF中没有现成的,那就自己造一个轮子:)    造轮子前先看看Windows自带的画图工具中是怎样做的,如下图:      在被拖动的矩形框四周有9...
  • jtl309
  • jtl309
  • 2016年02月11日 21:31
  • 5317
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:WPF <ZoomableCanvas> 实现缩放移动
举报原因:
原因补充:

(最多只允许输入30个字)