技术开发 频道

在WPF下实现以鼠标为中心图片缩放范例

  WPF为我们提供了方便,WPF中包含了很多处理图片的函数,例如,用于移动、缩放和旋转图片的Transform类,修改图片外观的Effect类。这些类都可以在XAML代码中直接设置,因此可以将Resource和XAML相结合使用,以此来压缩代码量并且实现更丰富的应用。

  步骤如下:

  1. 定义一个TranslateTransform实例来修改图片显示的起始位置。

  2. 定义一个ScaleTransform实例来缩放图片的大小,你可以通过设置CenterX和CenterY的值来指定图片缩放的原点。

  3. 将两个Transform放到一个TransformGroup里面,这样Image控件就可以在显示的时候综合使用两个Transform的效果了。你可以注意一下,TransformGroup的基类也是Transform,想一想这采用的是哪一个设计模式?不知道,呃……看样子我还需要写另外一篇文章解释一下这个设计模式……不过我最近有点忙,如果你等不及看到我下一篇文章的话,还是自己Google一下吧。

  4. 将TransformGroup放到当前窗体的Resource里面,这样窗体里面所有的Image控件都可以引用到这个实例。

  5. 在鼠标移动事件里面修改TranslateTransform对应的值。

  6. 在鼠标滚轮事件里面修改ScaleTransform的ScaleX和ScaleY的值来缩放图片。

  Window1.xaml

<Window x:Class="MouseMove.Window1"

    xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local
="clr-namespace:MouseMove"

    Title
="Window1" Height="600" Width="800">

    
<Grid x:Name="MainPanel">

        
<Grid.Resources>

            
<TransformGroup x:Key="ImageTransformResource">

                
<ScaleTransform />

                
<TranslateTransform />

            
</TransformGroup>

        
</Grid.Resources>

        
<Grid.ColumnDefinitions>

            
<ColumnDefinition />

            
<ColumnDefinition />

        
</Grid.ColumnDefinitions>

        
<Rectangle Grid.Column="0" x:Name="MasterImage"

                   MouseLeftButtonDown
="MasterImage_MouseLeftButtonDown"

                   MouseLeftButtonUp
="MasterImage_MouseLeftButtonUp"

                   MouseMove
="MasterImage_MouseMove"

                   MouseWheel
="MasterImage_MouseWheel">

            
<Rectangle.Fill>

                
<VisualBrush Transform="{StaticResource ImageTransformResource}" Stretch="Uniform">

                    
<VisualBrush.Visual>

                        
<Image Source="C:"Windows"Web"Wallpaper"Architecture"Img15.jpg" />

                    
</VisualBrush.Visual>

                
</VisualBrush>

            
</Rectangle.Fill>

        
</Rectangle>

        
<Rectangle Grid.Column="1"

                   MouseLeftButtonDown
="MasterImage_MouseLeftButtonDown"

                   MouseLeftButtonUp
="MasterImage_MouseLeftButtonUp"

                   MouseMove
="MasterImage_MouseMove"

                   MouseWheel
="MasterImage_MouseWheel">

            
<Rectangle.Fill>

                
<VisualBrush Transform="{StaticResource ImageTransformResource}" Stretch="Uniform">

                    
<VisualBrush.Visual>

                        
<Image Source="C:"Windows"Web"Wallpaper"Architecture"Img14.jpg" />

                    
</VisualBrush.Visual>

                
</VisualBrush>

            
</Rectangle.Fill>

        
</Rectangle>

    
</Grid>

</Window>
0
相关文章