WindowsPhone7中让相片实现随手指缩放及旋转效果

 

今天（应该是昨天了，晕）下午和两个哥们围着软件园转了一周 拍了几张照片还有以前的几张 回来想想干脆做个WP7上的应用吧，检验一下自己学习状况 呵呵

先看一下效果

因为模拟器上不能实现双手指的功能 所以前三张是在我的i8700上测试的 由于原图太大进行了缩小

 

首先建一个WP7项目

主页面用的是Panorama布局 这个页面会经常的切换 所以把上面的图片预览全部设为Button 而不是Image 这样用Button的Click事件避免与mouseUp 及mouseDown事件的影响

用Button显示图片需要自定义一个数据模板

以下是前台Xaml代码

<!--LayoutRoot 是包含所有页面内容的根网格-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <controls:Panorama>
            <controls:Panorama.TitleTemplate>
                <DataTemplate>
                    <TextBlock Text="五一游玩" Margin="0,30,0,0"/>
                </DataTemplate>
            </controls:Panorama.TitleTemplate>
            <controls:Panorama.Background>
                <ImageBrush ImageSource="Images/WP_000012.jpg"/>
            </controls:Panorama.Background>
            <controls:Panorama.Resources>
                <ControlTemplate x:Key="imagebutton" TargetType="Button">
                    <Image Source="{TemplateBinding Content}" Stretch="Fill"/>
                </ControlTemplate>
            </controls:Panorama.Resources>
            <controls:PanoramaItem Header="图片欣赏">
                <ScrollViewer>
                    <Grid >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="150" />
                            <RowDefinition Height="150" />
                            <RowDefinition Height="150" />
                            <RowDefinition Height="150" />
                        </Grid.RowDefinitions>
                        <Button Name="ImageButton1" Width="180" Height="135" Margin="5"  Template="{StaticResource imagebutton}" Content="Images/WP_000009.jpg" Grid.Column="0" Grid.Row="0" Click="ImageButton1_Click"/>
                        <Button Name="ImageButton2" Width="180" Height="135" Margin="5"  Template="{StaticResource imagebutton}" Content="Images/WP_000008.jpg" Grid.Column="1" Grid.Row="0" Click="ImageButton1_Click"/>
                        <Button Name="ImageButton3" Width="180" Height="135" Margin="5"  Template="{StaticResource imagebutton}" Content="Images/WP_000012.jpg" Grid.Column="0" Grid.Row="1" Click="ImageButton1_Click"/>
                        <Button Name="ImageButton4" Width="180" Height="135" Margin="5"  Template="{StaticResource imagebutton}" Content="Images/WP_000013.jpg" Grid.Column="1" Grid.Row="1" Click="ImageButton1_Click"/>
                        <Button Name="ImageButton5" Width="180" Height="135" Margin="5"  Template="{StaticResource imagebutton}" Content="Images/WP_000014.jpg" Grid.Column="0" Grid.Row="2" Click="ImageButton1_Click"/>
                        <Button Name="ImageButton6" Width="180" Height="135" Margin="5"  Template="{StaticResource imagebutton}" Content="Images/WP_000015.jpg" Grid.Column="1" Grid.Row="2" Click="ImageButton1_Click"/>
                        <Button Name="ImageButton7" Width="180" Height="135" Margin="5"  Template="{StaticResource imagebutton}" Content="Images/WP_000019.jpg" Grid.Column="0" Grid.Row="3" Click="ImageButton1_Click"/>
                    </Grid>
                </ScrollViewer>
            </controls:PanoramaItem>
            <controls:PanoramaItem Header="item2">
                <Grid />
            </controls:PanoramaItem>
        </controls:Panorama>
    </Grid>
 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace 北京的日子
{
    public partial class MainPage : PhoneApplicationPage
    {
        // 构造函数
        public MainPage()
        {
            InitializeComponent();
        }

        private void ImageButton1_Click(object sender, RoutedEventArgs e)
        {
            Button btn = sender as Button;
            this.NavigationService.Navigate(new Uri("/PageImages.xaml?picUri=" + btn.Content, UriKind.Relative));
        }
    }
}

PageImages.xaml页面

注意需要引用tookit类库 和命名空间

利用tookit监听手势动作

<phone:PhoneApplicationPage 
    x:Class="北京的日子.PageImages"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:tookit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="728" d:DesignWidth="480"
    shell:SystemTray.IsVisible="False" OrientationChanged="PhoneApplicationPage_OrientationChanged">

    <!--LayoutRoot 是包含所有页面内容的根网格-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Canvas>
            <Image Name="image1" Width="480" Canvas.Left="0" Canvas.Top="184" Height="360" Stretch="Fill" HorizontalAlignment="Left" VerticalAlignment="Top">
                <Image.RenderTransform>
                    <CompositeTransform x:Name="compTransform"  CenterX="240" CenterY="364" ScaleX="1" ScaleY="1"/>
                </Image.RenderTransform>
                <tookit:GestureService.GestureListener>
                    <tookit:GestureListener DoubleTap="DoubTap"  DragDelta="DragDelta" PinchStarted="PinchStarted" PinchDelta="PinchDelta" Hold="OnHold"/>
                </tookit:GestureService.GestureListener>
            </Image>
        </Canvas>
    </Grid>
 
    <!--演示 ApplicationBar 用法的示例代码-->
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="Icon/appbar.save.rest.png" Text="保存图片" Click="ApplicationBarIconButton_Click"/>
            <!--<shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="按钮 2" Click="ApplicationBarIconButton_Click_1"/>-->
            <!--<shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="菜单项 1"/>
                <shell:ApplicationBarMenuItem Text="菜单项 2"/>
            </shell:ApplicationBar.MenuItems>-->
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

</phone:PhoneApplicationPage>

C#代码 详见注释

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.Windows.Media.Imaging;
using System.Windows.Resources;
using Microsoft.Xna.Framework.Media;
using Microsoft.Phone.Tasks;
using System.Text.RegularExpressions;

namespace 北京的日子
{
    public partial class PageImages : PhoneApplicationPage
    {
        public PageImages()
        {
            InitializeComponent();
           // this.ManipulationDelta += new EventHandler<ManipulationDeltaEventArgs>(PageImages_ManipulationDelta);
        }
    
        string uri=string.Empty;
        /// <summary>
        /// 在页面加载时接收上一个页面传过来图片地址 不同于OnLoad方法  当然也可以用它来实现
        /// </summary>
        /// <param name="e"></param>
        protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
        {
            this.NavigationContext.QueryString.TryGetValue("picUri", out uri);
            BitmapImage bmp = new BitmapImage(new Uri(uri,UriKind.Relative));
            image1.Source = bmp;
            base.OnNavigatedTo(e);
        }
        /// <summary>
        /// 当页面的方向发生改变时触发的事件 根据页面方向的不同重新为Image控件
        /// 和模板及Canvas中的位置进行重新布局
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
        {
            if (PageOrientation.LandscapeLeft==e.Orientation||PageOrientation.LandscapeRight==e.Orientation)
            {
                image1.Width = 600;
                image1.Height = 480;
                compTransform.CenterX = 364;
                compTransform.CenterY = 240;
                Canvas.SetLeft(image1, 64);
                Canvas.SetTop(image1, 0);
            }
            if (PageOrientation.PortraitUp==e.Orientation)
            {
                image1.Width = 480;
                image1.Height = 360;
                compTransform.CenterX = 240;
                compTransform.CenterY = 364;
                Canvas.SetLeft(image1, 0);
                Canvas.SetTop(image1, 184);
            }
        }
       
       /// <summary>
       /// 双击图片时发生的事件 
       /// </summary>
       /// <param name="sender"></param>
       /// <param name="e"></param>
        private void DoubTap(object sender, Microsoft.Phone.Controls.GestureEventArgs e)
        {
            if (compTransform.ScaleX !=1|| compTransform.ScaleY != 1)//第二次双击恢复初始状态
            {
                compTransform.ScaleX = compTransform.ScaleY = 1;
                SetCanvas(compTransform.ScaleX);
                compTransform.TranslateX =0;
                compTransform.TranslateY = 0;
            }
            else
            {//双击使图片比例放大三倍
                compTransform.ScaleX = compTransform.ScaleY = 3;
                SetCanvas(compTransform.ScaleX);
            }
           
        }
       /// <summary>
        /// 相应的在Canvas中的布局也要发生改变使距离左端和顶端的距离放大同样倍数
       /// </summary>
       /// <param name="scaleX">放大或缩小的比例</param>
        void SetCanvas(double scaleX)
        {    //根据页面方向做不同的调整
            if (PageOrientation.PortraitUp==this.Orientation)
            {
                Canvas.SetLeft(image1, 0 * scaleX);
                Canvas.SetTop(image1, 184 * scaleX);
            }
            else
            {
                Canvas.SetLeft(image1, 64 * scaleX);
                Canvas.SetTop(image1, 0 * scaleX);      
            }
                
        }
        /// <summary>
        /// 当一个手指在图片上拖拉时发生  使图片跟随手指移动
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void DragDelta(object sender, DragDeltaGestureEventArgs e)
        {
            compTransform.TranslateX += e.HorizontalChange;
            compTransform.TranslateY += e.VerticalChange;
        }

        double initialAngle, initialScale;
        /// <summary>
        /// 当双指捏或者扩张这个动作刚开始时发生 记录下这个瞬间模板的比例和角度
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void PinchStarted(object sender, PinchStartedGestureEventArgs e)
        {
            initialAngle = compTransform.Rotation;
            initialScale = compTransform.ScaleX;
        }

        /// <summary>
        /// 当双指捏或者扩张时发生
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void PinchDelta(object sender, PinchGestureEventArgs e)
        {
            compTransform.ScaleX = compTransform.ScaleY = initialScale * e.DistanceRatio;
            SetCanvas(compTransform.ScaleX);
            compTransform.Rotation =initialAngle+ e.TotalAngleDelta;
        }
      
        /// <summary>
        /// 当手指放在图片上停留时 约一秒钟  使其恢复初始状态
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void OnHold(object sender, Microsoft.Phone.Controls.GestureEventArgs e)
        {
            compTransform.ScaleX = compTransform.ScaleY = 1;
            SetCanvas(compTransform.ScaleX);
            compTransform.TranslateX = compTransform.TranslateY = 0;
            compTransform.Rotation = 0;
        }

        /// <summary>
        /// 保存图片到相册，
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void ApplicationBarIconButton_Click(object sender, EventArgs e)
        {
            StreamResourceInfo streamInfo = Application.GetResourceStream(new Uri(uri, UriKind.Relative));
            MediaLibrary media = new MediaLibrary();
            //其实这里应该先将图片转换为JPEG流编码然后进行存储因为是照片所以直接是jpg格式 就省略了
            if (null != media.SavePicture("picName", streamInfo.Stream))
            {
                MessageBox.Show("保存成功！", "提示", MessageBoxButton.OK);
            }
        }

    }
}

 抛砖引玉 欢迎拍砖 希望大牛能指出不足！！！谢谢！！！

转载于:https://www.cnblogs.com/MessageDream/archive/2012/04/30/2476673.html