WP7 实现图片回滚

WP7 实现图片回滚

如图1所示,通过点击第一幅和第三幅的image空间,实现图片左右回滚。

在此实现过程中,难点就是实现在访问数组过程中越界问题!

demo功能很简单,没有实现那种图片滑动效果。

需要改进的地方:

         图片在切换的过程中的滑动效果实现

         点击中间图片实现图片放大,查看效果

         遍历文件夹下图片名称存放到array或者list

Coding:

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.IO;

namespace PhoneApPicture
{
    public partial class MainPage : PhoneApplicationPage
    {
        // 构造函数
        public MainPage()
        {
            InitializeComponent();
        }
        
        string[] image_array = { "images/1.png", "images/2.png", "images/3.png", "images/4.png", "images/5.png", "images/6.png" };
        int iCount = 1;

        private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
        {
          
           
            image1.ManipulationStarted += new EventHandler<ManipulationStartedEventArgs>(image1_ManipulationStarted);
            image3.ManipulationStarted += new EventHandler<ManipulationStartedEventArgs>(image3_ManipulationStarted);
            image2.ManipulationStarted += new EventHandler<ManipulationStartedEventArgs>(image2_ManipulationStarted);

            //对image1 和 image3 控件进行设置 实现图片的旋转效果
            TransformGroup tg = new TransformGroup();
            TranslateTransform ttf = new TranslateTransform();
            ttf.X = 0;
            ttf.Y = 70;
            SkewTransform skt = new SkewTransform();
            skt.CenterX = 0;
            skt.CenterY = 0;
            skt.AngleX = 0;
            skt.AngleY = -20;

            SkewTransform skt1 = new SkewTransform();
            skt1.CenterX = 0;
            skt1.CenterY = 0;
            skt1.AngleX = 0;
            skt1.AngleY = 20;
            tg.Children.Add(skt);
            tg.Children.Add(ttf);
            image1.RenderTransform = tg;
            image3.RenderTransform = skt1;
           
        }

        void image2_ManipulationStarted(object sender, ManipulationStartedEventArgs e)
        {
            //可以在此实现对image2 的图像的缩放操作
        }

        private void imageLoad(int i)
        {
            int num1 = 0;
            int num2 = 0;
            int num3 = 0;

            num1 = (i - 1) % image_array.Length < 0 ? (i - 1) % image_array.Length + image_array.Length : (i - 1) % image_array.Length;
            num2 = i % image_array.Length < 0 ? i % image_array.Length + image_array.Length : i % image_array.Length;
            num3 = (i + 1) % image_array.Length < 0 ? (i + 1) % image_array.Length + image_array.Length : (i + 1) % image_array.Length;

            image1.Source = new BitmapImage(new Uri(image_array[num1], UriKind.Relative));
            image2.Source = new BitmapImage(new Uri(image_array[num2], UriKind.Relative));
            image3.Source = new BitmapImage(new Uri(image_array[num3], UriKind.Relative));
        }

        void image3_ManipulationStarted(object sender, ManipulationStartedEventArgs e)  //向左移动
        {

            iCount++;
            imageLoad(iCount);
        }

        void image1_ManipulationStarted(object sender, ManipulationStartedEventArgs e) //向右移动
        {
            iCount --;
            imageLoad(iCount);            
        }
    }
}

你可能感兴趣的:(wp7图片回滚操作)