借花献佛 WP7 中图片查看，缩放实现

最新推荐文章于 2017-11-17 15:31:00 发布

转载最新推荐文章于 2017-11-17 15:31:00 发布 · 482 阅读

windows phone 7 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种在Windows Phone 7上实现图片自由缩放及拖动的方法，利用了Toolkit中的GestureListener来响应各种触摸手势，如缩放、拖拽等。

come from：http://www.cnblogs.com/JerryH/archive/2012/01/05/2312635.html

大家在WP7 中展现图片是我想肯定很纠结于如何实现类似手机照片查看是照片能自由缩放拖动的功能。
在这里我就借 toolkit 的花给大家share一个小技巧

在 sl toolkit for wp 中有个东西叫做 gestrue

能我就不描述了大家自己去看toolkit

我们要用的就是它 .

我们可以在toolkit 里面的把这个页面翻出来看看

cs 代码一大堆就不贴了

xaml 里面是

 <Border x:Name="border" Width="300" Height="200" BorderBrush="{StaticResource PhoneForegroundBrush}" BorderThickness="4,16,4,4" Background="{StaticResource PhoneAccentBrush}" RenderTransformOrigin="0.5,0.5" Opacity=".5" CacheMode="BitmapCache">
                <Border.RenderTransform>
                    <CompositeTransform x:Name="transform"/>
                </Border.RenderTransform>
                <toolkit:GestureService.GestureListener>
                    <toolkit:GestureListener 
                        Tap="OnTap" Hold="OnHold"
                        DragStarted="OnDragStarted" DragDelta="OnDragDelta" DragCompleted="OnDragCompleted"
                        Flick="OnFlick"
                        PinchStarted="OnPinchStarted" PinchDelta="OnPinchDelta" PinchCompleted="OnPinchCompleted"/>
                </toolkit:GestureService.GestureListener>
            </Border>

我们可以注意到作用的就是那个 toolkit:GestureListener

我们现在要做的就是把弄到 img 里面去 ..

代码如下
xaml

     <Image x:Name="_image"  RenderTransformOrigin="0.5,0.5">
            <Image.RenderTransform>
                <CompositeTransform x:Name="transform"/>
            </Image.RenderTransform>
            <toolkit:GestureService.GestureListener>
                <toolkit:GestureListener 
                        Tap="OnTap" Hold="OnHold"
                        DragStarted="OnDragStarted" DragDelta="OnDragDelta" DragCompleted="OnDragCompleted"
                        Flick="OnFlick"
                        PinchStarted="OnPinchStarted" PinchDelta="OnPinchDelta" PinchCompleted="OnPinchCompleted"/>
            </toolkit:GestureService.GestureListener>
        </Image>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.IO;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Media.Animation;

using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using Microsoft.Xna.Framework.Media;

namespace Demo
{
    public partial class MainPage : PhoneApplicationPage
    {
        //SolidColorBrush greenBrush = new SolidColorBrush(Colors.Green);
        //SolidColorBrush redBrush = new SolidColorBrush(Colors.Red);
        //SolidColorBrush normalBrush;

        double initialAngle;
        double initialScale;

        Uri _imageURI;

        BitmapImage _bitMapImage = new BitmapImage();

        public MainPage()
        {
            InitializeComponent();
        }

        protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
        {
            _imageURI = new Uri("http://photo.fanfou.com/n0/02/5y/3p_215854.jpg");

            
            _bitMapImage.DownloadProgress += new EventHandler<DownloadProgressEventArgs>(bitMapImage_DownloadProgress);
            _bitMapImage.UriSource = _imageURI; ;
            _image.Source = _bitMapImage;
            _progressBar.Visibility = System.Windows.Visibility.Visible;
            _progressBar.IsIndeterminate = true;
            
            base.OnNavigatedTo(e);
        }

        void bitMapImage_DownloadProgress(object sender, DownloadProgressEventArgs e)
        {
            if (e.Progress == 100)
            {
               
                _progressBar.Visibility = System.Windows.Visibility.Collapsed;
                _progressBar.IsIndeterminate = false;
            }
            //throw new NotImplementedException();
        }


        private void OnTap(object sender, Microsoft.Phone.Controls.GestureEventArgs e)
        {
            transform.TranslateX = transform.TranslateY = 0;
        }

        private void OnDoubleTap(object sender, Microsoft.Phone.Controls.GestureEventArgs e)
        {
            transform.ScaleX = transform.ScaleY = 0;
        }

        private void OnHold(object sender, Microsoft.Phone.Controls.GestureEventArgs e)
        {
            transform.TranslateX = transform.TranslateY = 0;
            transform.ScaleX = transform.ScaleY = 0;
            transform.Rotation = 0;
        }

        private void OnDragStarted(object sender, DragStartedGestureEventArgs e)
        {
            //border.Background = greenBrush;
        }

        private void OnDragDelta(object sender, DragDeltaGestureEventArgs e)
        {
            transform.TranslateX += e.HorizontalChange;
            transform.TranslateY += e.VerticalChange;
        }

        private void OnDragCompleted(object sender, DragCompletedGestureEventArgs e)
        {
            //border.Background = normalBrush;
        }

        private void OnPinchStarted(object sender, PinchStartedGestureEventArgs e)
        {
            //border.Background = redBrush;

            initialAngle = transform.Rotation;
            initialScale = transform.ScaleX;
        }

        private void OnPinchDelta(object sender, PinchGestureEventArgs e)
        {
           
            transform.Rotation = initialAngle + e.TotalAngleDelta;
            transform.ScaleX = transform.ScaleY = initialScale * e.DistanceRatio;
        }

        private void OnPinchCompleted(object sender, PinchGestureEventArgs e)
        {
            // _image.Background = normalBrush;
        }

        private void OnFlick(object sender, FlickGestureEventArgs e)
        {
            //flickData.Text = string.Format("{0} Flick: Angle {1} Velocity {2},{3}",
            //    e.Direction, Math.Round(e.Angle), e.HorizontalVelocity, e.VerticalVelocity);
        }

        private void ApplicationBarIconButton_Click(object sender, EventArgs e)
        {
            MemoryStream fileStream = new MemoryStream();
            try
            {
                MediaLibrary library = new MediaLibrary();

                string lName = DateTime.Now.ToString("yyyyMMddhhmmss") + ".jpg";



                WriteableBitmap CaptureImage = new WriteableBitmap(_bitMapImage);

                // 将WriteableBitmap转换为JPEG流编码，并储存到独立存储里.


                Extensions.SaveJpeg(CaptureImage, fileStream, CaptureImage.PixelWidth, CaptureImage.PixelHeight, 0, 100);
                fileStream.Seek(0, SeekOrigin.Begin);
                fileStream.Seek(0, SeekOrigin.Current);

                //把图片加在WP7 手机的媒体库.
                Picture pic = library.SavePicture(lName, fileStream);
                fileStream.Close();
                MessageBox.Show("保存成功！", string.Empty, MessageBoxButton.OK);
            }
            catch
            {
                MessageBox.Show("保存失败", string.Empty, MessageBoxButton.OK);
            }
            finally
            {
                fileStream.Close();
            }


        }
    }
}

DONE...