教你打造Silverlight超酷翻页实例 - 澜夜的日志 - 网易博客

来源：百度文库 编辑：神马文学网 时间：2024/04/30 11:50:08

教你打造Silverlight超酷翻页实例

随笔*IT个人攻略 2010-01-04 14:43:38 阅读64 评论0 字号：大中小

    经常阅读电子杂志的朋友对其流畅自然的翻页过渡效果应当留下了十分深刻的印象。这些杂志都是使用Flash技术制作而成的。总想着能用Silverlight实现这样的效果，去网上查查资料，找到了一个微软官方提供的翻页效果例子（教程说明点这里，在线实例演示及源代码下载点这里）。

 

 

 

 

最近自己亲自动手做了个翻书的小程序，内容大致如下：

 

导航：

①建立翻页项目解决方案

②添加必要文件

③构建应用程序界面

④设置应用程序控制逻辑

⑤最终效果图

 

1、建立翻页项目解决方案

点击File->Projects...菜单选项，新建一个ASP.NET Web Application。

 

 

将新建工程名称命名为FlipPage。

 

 

在解决方案下继续添加一个Silverlight应用程序项目，将该工程命名为SilverlightClient。

 

 

在弹出的对话框中，直接点OK按钮。

 

 

点击一下“全部保存”按钮，完成项目工程的创建。

 

2、添加必要文件

在SilverlightClient项目文件夹下，新建一个名为Dll的文件夹，在里面放入WPF and Silverlight BookControls的动态链接库文件SLMitsuControls.dll（如下图）。在FlipPage项目文件夹下，新建一个名为mediaPictures的子文件夹，在里面放入将在书中显示的图片，如下图所示命名。同样的，在SilverlightClient项目文件夹下，新建一个名为PageType的文件夹，然后再新建两个类分别命名为LeftPage.cs和RightPage.cs（如下图），它们分别代表了书的偶数和奇数页面，具体代码如下所示（详细的说明请见代码注释）。

 

              

LeftPage.cs文件代码：

Code
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace SilverlightClient.TypePage 
{
  public class LeftPage : Canvas 
  {
    //定义将在页面上显示的元素
    private Image imgPhoto;
    private Button btnPrevious;
    private Rectangle RecBorder;
    private TextBlock PageNum;
    
    //构造函数
    public LeftPage()
    {
      //页面的设置
      this.Width = 452;
      this.Height = 630;
      this.Background = new SolidColorBrush(Colors.White);
      Canvas.SetLeft(this, 0);
      Canvas.SetTop(this, 0);
      //页面边框的设置
      RecBorder = new Rectangle();
      RecBorder.Width = 452;
      RecBorder.Height = 630;
      Canvas.SetLeft(RecBorder, 0);//设置页面边框在Canvas中的位置，下同。
      Canvas.SetTop(RecBorder, 0);
      RecBorder.Stroke = new SolidColorBrush(Colors.Black);
      RecBorder.StrokeThickness = 0;
      this.Children.Add(RecBorder);
      //照片的设置
      imgPhoto = new Image();
      imgPhoto.Width = 450;
      imgPhoto.Height = 600;
      Canvas.SetLeft(imgPhoto, 1);
      Canvas.SetTop(imgPhoto, 1);
      this.Children.Add(imgPhoto);
      //“前一页”按钮的设置
      btnPrevious = new Button();
      btnPrevious.Width = 150;
      btnPrevious.Height = 20;
      btnPrevious.Content = "<< 前一页";
      btnPrevious.HorizontalContentAlignment = HorizontalAlignment.Center;
      btnPrevious.VerticalContentAlignment = VerticalAlignment.Center;
      btnPrevious.Cursor = Cursors.Hand;
      Canvas.SetLeft(btnPrevious, 151);
      Canvas.SetTop(btnPrevious, 605);
      this.Children.Add(btnPrevious);
      //页码文本的设置
      PageNum = new TextBlock();
      PageNum.Width = 100;
      PageNum.Height = 20;
      PageNum.Text = "00 / 00";
      PageNum.TextAlignment = TextAlignment.Left;
      PageNum.VerticalAlignment = VerticalAlignment.Center;
      PageNum.FontFamily = new FontFamily("Comic sans MS");
      Canvas.SetLeft(PageNum, 10);
      Canvas.SetTop(PageNum, 607);
      this.Children.Add(PageNum);
    }
    //设置图片路径
    public void setterimgPhoto(string path)
    {
      BitmapImage btm = new BitmapImage();
      btm.UriSource = new Uri(path, UriKind.Relative);
      imgPhoto.Source = btm;
    }
    //设置按钮是否可见
    public void setterDisplayBtnPrevious(bool YesNo)
    {
      if (YesNo)
      {
        btnPrevious.Visibility = Visibility.Visible;
      }
      else {
        btnPrevious.Visibility = Visibility.Collapsed;
      }
    }
    //设置页码
    public void setterPageNumber(string currentPageNum, string TotalPageNum) {
        PageNum.Text = currentPageNum + " / " + TotalPageNum;
    }
    //返回按钮单击事件关联
    public Button getbtnPrevious()
    {
      return btnPrevious;
    }

  }
}

 

RightPage.cs文件代码：

 

Code
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace SilverlightClient.TypePage 
{
  public class RightPage : Canvas 
  {
    //定义将在页面上显示的元素
    private Image imgPhoto;
    private Button btnNext;
    private Rectangle RecBorder;
    private TextBlock PageNum;
    
    //构造函数
    public RightPage()
    {
      //页面的设置
      this.Width = 452;
      this.Height = 630;
      this.Background = new SolidColorBrush(Colors.White);
      Canvas.SetLeft(this, 0);//设置页面边框在Canvas中的位置，下同。
      Canvas.SetTop(this, 0);
      //页面边框的设置
      RecBorder = new Rectangle();
      RecBorder.Width = 452;
      RecBorder.Height = 630;
      Canvas.SetLeft(RecBorder, 0);
      Canvas.SetTop(RecBorder, 0);
      RecBorder.Stroke = new SolidColorBrush(Colors.Black);
      RecBorder.StrokeThickness = 0;
      this.Children.Add(RecBorder);
      //照片的设置
      imgPhoto = new Image();
      imgPhoto.Width = 450;
      imgPhoto.Height = 600;
      Canvas.SetLeft(imgPhoto, 1);
      Canvas.SetTop(imgPhoto, 1);
      this.Children.Add(imgPhoto);
      //“后一页”按钮的设置
      btnNext = new Button();
      btnNext.Width = 150;
      btnNext.Height = 20;
      btnNext.Content = "后一页 >>";
      btnNext.HorizontalContentAlignment = HorizontalAlignment.Center;
      btnNext.VerticalContentAlignment = VerticalAlignment.Center;
      btnNext.Cursor = Cursors.Hand;
      Canvas.SetLeft(btnNext, 151);
      Canvas.SetTop(btnNext, 605);
      this.Children.Add(btnNext);
      //页码文本的设置
      PageNum = new TextBlock();
      PageNum.Width = 100;
      PageNum.Height = 20;
      PageNum.Text = "00 / 00";
      PageNum.TextAlignment = TextAlignment.Right;
      PageNum.VerticalAlignment = VerticalAlignment.Center;
      PageNum.FontFamily = new FontFamily("Comic sans MS");
      Canvas.SetLeft(PageNum, 340);
      Canvas.SetTop(PageNum, 607);
      this.Children.Add(PageNum);
    }
    //设置图片路径
    public void setterimgPhoto(string path)
    {
        BitmapImage btm = new BitmapImage();
        btm.UriSource = new Uri(path, UriKind.Relative);
        imgPhoto.Source = btm;
    }
    //设置按钮是否可见
    public void setterDisplayBtnNext(bool YesNo)
    {
        if (YesNo)
        {
            btnNext.Visibility = Visibility.Visible;
        }
        else
        {
            btnNext.Visibility = Visibility.Collapsed;
        }
    }
    //设置页码
    public void setterPageNumber(string currentPageNum, string TotalPageNum)
    {
        PageNum.Text = currentPageNum + " / " + TotalPageNum;
    }
    //返回按钮单击事件关联
    public Button getbtnNext()
    {
        return btnNext;
    }

  }
}

 

3、构建应用程序界面

详细的说明请见代码注释。

MainPage.xaml文件代码：

Code

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:SLMitsuControls;assembly=SLMitsuControls"         
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480" Loaded="UserControl_Loaded">
  
      
          
        
            
        
        
        
            " Width="200" Height="30" Canvas.Left="0" Canvas.Top="0" FontFamily="comic sans ms" FontSize="14">
            
        
      
  

 

4、设置应用程序控制逻辑

 

详细的说明请见代码注释。

1）MainPage.xaml.cs文件代码：

Code
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.Media.Imaging;
using System.Windows.Shapes;
using System.Threading;
using SLMitsuControls;

namespace SilverlightClient
{
    public partial class MainPage : UserControl, IDataProvider
    {
        //定义全局变量
        private List PageObjectList;//页面对象列表
        public enum PageType { right, left };//页面类型
        public string fileMedia = "";//文件媒体
        public string headerPage = "";//首页
        public int maxiPageNum = 0;//最大页数
        public enum Location { local, web };//枚举应用程序所在
        public Location modeLocation;
        private int pageDownload = 0;//下载的页面数
        private string uriResources = "";//Uri地址

        //构造函数
        public MainPage()
        {
            InitializeComponent();
            PageObjectList = new List();
        }

        //UserControl事件触发处理
        private void UserControl_Loaded(object sender, RoutedEventArgs e)
        {
            if (modeLocation == Location.local)
            {
                this.canvChanging.Visibility = Visibility.Collapsed;
                this.canvasBook.Visibility = Visibility.Visible;
                //填充页面列表
                FillPagesList();
            }
            if (modeLocation == Location.web)
            {
                this.canvChanging.Visibility = Visibility.Visible;
                this.canvasBook.Visibility = Visibility.Collapsed;
                //开始下载页面
                DownloadPages();
            }
        }

        //开始将页面填充至List中
        private void FillPagesList()
        {
            //用页面填充列表
            for (int xx = 1; xx <= maxiPageNum; xx++)
            {
                if (xx % 2 != 0)
                {
                    //前一页即奇数页
                    AddPageToList(PageType.right, fileMedia + "/" + headerPage + xx.ToString("00") + ".jpg", xx.ToString(),
                      maxiPageNum.ToString(), true);
                }
                else
                {
                    //后一页即偶数页
                    AddPageToList(PageType.left, fileMedia + "/" + headerPage + xx.ToString("00") + ".jpg", xx.ToString(),
                      maxiPageNum.ToString(), true);
                }
            }

            //移除最后一页的按钮
            TypePage.RightPage page = PageObjectList[maxiPageNum - 1] as TypePage.RightPage;
            page.setterDisplayBtnNext(false);

            //为翻页按钮指派事件触发处理
            for (int xx = 1; xx < maxiPageNum; xx++)
            {
                if (xx % 2 != 0)
                {
                    //前一页即奇数页
                    TypePage.RightPage pp = PageObjectList[xx - 1] as TypePage.RightPage;
                    Button btnNext = pp.getbtnNext();
                    btnNext.Click += new RoutedEventHandler(btnNext_Click);
                }
                else
                {
                    //后一页即偶数页
                    TypePage.LeftPage pp = PageObjectList[xx - 1] as TypePage.LeftPage;
                    Button btnPrevious = pp.getbtnPrevious();
                    btnPrevious.Click += new RoutedEventHandler(btnPrevious_Click);
                }
            }

            //为Book设置数据内容
            book.SetData(this);
        }

        //向页面列表中添加具体页面
        private void AddPageToList(PageType pageType, string pathImage, string numPage, string numMaxiPage,
          bool showBtnYesNo)
        {
            switch (pageType)
            {
                case PageType.right:
                    TypePage.RightPage pcd = new SilverlightClient.TypePage.RightPage();
                    pcd.setterimgPhoto(pathImage);
                    pcd.setterPageNumber(numPage, numMaxiPage);
                    pcd.setterDisplayBtnNext(showBtnYesNo);
                    PageObjectList.Add(pcd);
                    break;
                case PageType.left:
                    TypePage.LeftPage pcg = new SilverlightClient.TypePage.LeftPage();
                    pcg.setterimgPhoto(pathImage);
                    pcg.setterPageNumber(numPage, numMaxiPage);
                    pcg.setterDisplayBtnPrevious(showBtnYesNo);
                    PageObjectList.Add(pcg);
                    break;
            }
        }

        //“下一页”按钮事件触发处理
        private void btnNext_Click(object sender, RoutedEventArgs e)
        {
            book.AnimateToNextPage(500);
        }

        //“上一页”按钮事件触发处理
        private void btnPrevious_Click(object sender, RoutedEventArgs e)
        {
            book.AnimateToPreviousPage(500);
        }

        //从网络上下载页面
        private void DownloadPages()
        {
            this.canvChanging.Visibility = Visibility.Visible;
            this.uriResources = Application.Current.Host.Source.AbsoluteUri;
            int index = uriResources.IndexOf("SilverlightClient.xap");
            uriResources = uriResources.Substring(0, index);
            this.changingProgressBar.Minimum = 0;
            this.changingProgressBar.Maximum = maxiPageNum - 1;
            string theResources = uriResources + fileMedia + "/" + headerPage + (pageDownload + 1).ToString("00") + ".jpg";
            string theResourcesNum = headerPage + (pageDownload + 1).ToString("00") + ".jpg";
            AsynchronouslyDownloadPage(theResources, theResourcesNum);
        }

        //异步下载页面
        private void AsynchronouslyDownloadPage(string path, string num)
        {
            WebClient unWeb = new WebClient();
            unWeb.DownloadStringCompleted += new DownloadStringCompletedEventHandler(unWeb_DownloadStringCompleted);
            unWeb.DownloadStringAsync(new Uri(path));
            this.changingText.Text = "正在下载 : " + num;
            this.changingProgressBar.Value = this.pageDownload;
        }

        //异步下载页面完成事件触发处理
        private void unWeb_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
        {
            this.pageDownload++;
            if (this.pageDownload < this.maxiPageNum)//持续不断下载页面直到所有页面都下完
            {
                string theResources = uriResources + fileMedia + "/" + headerPage + (pageDownload + 1).ToString("00") + ".jpg";
                string theResourcesNum = headerPage + (pageDownload + 1).ToString("00") + ".jpg";
                AsynchronouslyDownloadPage(theResources, theResourcesNum);
            }
            else
            {
                FillPagesList();
                this.canvChanging.Visibility = Visibility.Collapsed;
                this.canvasBook.Visibility = Visibility.Visible;
            }
        }

        //强制声明接口
        #region IDataProvider Members
        public object GetItem(int index)
        {
            return PageObjectList[index];
        }
        public int GetCount()
        {
            return PageObjectList.Count;
        }
        #endregion

    }
}

 

2）App.xaml.cs文件代码：

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

namespace SilverlightClient
{
    public partial class App : Application
    {
        public string gFileMedia = "";
        public string gHeaderPage = "";
        public int gPageNumber = 0;
        public string gModeLocation = "";
        
        public App()
        {
            this.Startup += this.Application_Startup;
            this.Exit += this.Application_Exit;
            this.UnhandledException += this.Application_UnhandledException;

            InitializeComponent();
        }

        private void Application_Startup(object sender, StartupEventArgs e)
        {
            int paramOk = 0;
            //从HTML中取出初始化数据
            if (e.InitParams.ContainsKey("gFile"))
            {
                gFileMedia = e.InitParams["gFile"];
                paramOk++;
            }
            if (e.InitParams.ContainsKey("gHeaderPage"))
            {
                gHeaderPage = e.InitParams["gHeaderPage"];
                paramOk++;
            }
            if (e.InitParams.ContainsKey("gNum"))
            {
                string recup = e.InitParams["gNum"];
                gPageNumber = int.Parse(recup);
                paramOk++;
            }
            if (e.InitParams.ContainsKey("gLocation"))
            {
                gModeLocation = e.InitParams["gLocation"];
                paramOk++;
            }
            if (paramOk == 4)
            {
                //初始化MainPage
                MainPage maPage = new MainPage();
                maPage.fileMedia = gFileMedia;
                maPage.headerPage = gHeaderPage;
                maPage.maxiPageNum = gPageNumber;
                if (gModeLocation.CompareTo("local") == 0)
                {
                    maPage.modeLocation = MainPage.Location.local;
                }
                if (gModeLocation.CompareTo("web") == 0)
                {
                    maPage.modeLocation = MainPage.Location.web;
                }
                this.RootVisual = maPage;
            }
        }

        private void Application_Exit(object sender, EventArgs e)
        {
            
        }

        private void Application_UnhandledException(object sender, ApplicationUnhandledExceptionEventArgs e)
        {
            if (!System.Diagnostics.Debugger.IsAttached)
            {
                e.Handled = true;
                Deployment.Current.Dispatcher.BeginInvoke(delegate { ReportErrorToDOM(e); });
            }
        }
        private void ReportErrorToDOM(ApplicationUnhandledExceptionEventArgs e)
        {
            try
            {
                string errorMsg = e.ExceptionObject.Message + e.ExceptionObject.StackTrace;
                errorMsg = errorMsg.Replace('"', '\'').Replace("\r\n", @"\n");

                System.Windows.Browser.HtmlPage.Window.Eval("throw new Error(\"Unhandled Error in Silverlight Application " + errorMsg + "\");");
            }
            catch (Exception)
            {
            }
        }
    }
}

 

 

3）在SilverlightClientTestPage.aspx文件（位于工程FlipPage文件夹下）中，添加用绿色粗体标明的代码：

 

   

   

        ta="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">

         

         

         

         

         

         

         

         

              Get Microsoft Silverlight

         

       

   

 

5、最终效果图

我做出来后试了试，很不错，源代码中有N个错误，我重新做了一个翻书实例，大家可以下载下来看看……

 

源代码下载http://download.csdn.net/source/1961695

有问题随时欢迎交流……

 

教你打造Silverlight超酷翻页实例 - 澜夜的日志 - 网易博客 时尚翻页Flash相册制作 - ajian 的日志 - 网易博客 可以翻页的毛泽东诗词 - 香儿的日志 - 网易博客 毛泽东诗词61首/翻页效果 - 飞过红尘的日志 - 网易博客 【U5教程】U5制作翻页动画效果<原创> - 茶绿书香的日志 - 网易博客 毛泽东诗词61首【翻页特效】 - 渴望美好的日志 - 网易博客 U5实例视频教程 - 天天快乐的日志 - 网易博客 106条打造你成为交际大师 - 大脚踏四海的日志 - 网易博客 打造图片的特殊效果 - 香儿的日志 - 网易博客 打造自己强劲的通达信 - huang的日志 - 网易博客 打造图片的特殊效果 - 香儿的日志 - 网易博客 打造怎样一个团队 - 伏虎的日志 - 网易博客 生活小技巧之手把手教你超赞的五脏排毒 - 追赶时间的日志 - 网易博客 ☆博客系列日志上下翻页的设置制作 超准农历生日看出你一生好运！！ - xxjxl5168的日志 - 网易博客 教你做博客 - 无所谓的日志 - 网易博客 教你做博客 - 无所谓的日志 - 网易博客 后张法预应力钢绞线张拉伸长值的计算实例！ - 路在脚下的日志 - 网易博客 后张法预应力钢绞线张拉伸长值的计算实例！ - 路在脚下的日志 - 网易博客 摄影实例：小品摄影-局部的美（1） - 林子的日志 - 网易博客 摄影实例：小品摄影-局部的美（2） - 林子的日志 - 网易博客 Ps 消失点滤镜的应用实例一 - 核电的日志 - 网易博客 博客小老头最新原创“博客装扮方法模板和博客装饰实例代码” - 博客小老头的日志 - 网易博... 超多的FLASH音乐 - 理睬的日志 - 网易博客