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>
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>