通过实例学习Silverlight教程之制作图片特效(二)

好,现在我们来添加相应的操作逻辑,首先我们需要使展板能够在单击的时候展开或者收缩.

打开ImgBord.cs添加如下代码:

首先在构造方法中添加以下事件:

        public ImgBoard()

        {

            InitializeComponent();

            this.MouseLeftButtonDown += new MouseButtonEventHandler(ImgBoard_MouseLeftButtonDown);

            this.MouseEnter += new MouseEventHandler(ImgBoard_MouseEnter);

            this.MouseLeave += new MouseEventHandler(ImgBoard_MouseLeave);

        }

添加操作方法:

/// <summary> /// 标志展板是否已经打开 /// </summary> bool IsOpenFlag = true; void ImgBoard_MouseLeave(object sender, MouseEventArgs e) { //throw new NotImplementedException(); this.StoryTurnBlack.Begin(); } void ImgBoard_MouseEnter(object sender, MouseEventArgs e) { //throw new NotImplementedException(); this.StoryTurnLight.Begin(); } void ImgBoard_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { //throw new NotImplementedException(); ChangeStadiu(); } /// <summary> /// 改变展板状态 /// </summary> private void ChangeStadiu() { if (IsOpenFlag) { StoryClose.Begin(); } else { StoryOpen.Begin(); } IsOpenFlag = !IsOpenFlag; }

打开page.cs

把我们写的展板在maincanvas中显示:

参考如下代码添加:

ImgBoard ib = new ImgBoard(); public Page() { InitializeComponent(); mainCanvas.Children.Add(ib); Canvas.SetLeft(ib, 100); Canvas.SetTop(ib, 10); }

 

 

运行一下,现在已经可以伸缩自如了~~

好,现在我们还需要考虑以下问题:

1既然是产品展,那么就不可能是一个产品才对,

2图片和说明应该是动态加载的,不能发布一次产品就重新编译一次程序.

下面我们来解决以上问题:

既然图片需要动态加载,我们就需要一个加载媒介,这里我们选择xml为加载媒介.

创建一个新类,命名为entityBoard

public class entityBoard { private Uri imgUri; /// <summary> /// 图片的地址 /// </summary> public Uri ImgUri { get { return imgUri; } set { imgUri = value; } } private string imgInfo; /// <summary> /// 图片说明 /// </summary> public string ImgInfo { get { return imgInfo; } set { imgInfo = value; } } private Uri uRL; /// <summary> /// 这个以后再说明 /// </summary> public Uri URL { get { return uRL; } set { uRL = value; } } }

 

接着创建用于收发xml的类:xmlOprater:

首先要添加System.xml.Linq.dll,在引用处右键点击添加,在.net中找到即可

然后添加以下命名空间

using System.Xml;

using System.Xml .Linq ;

using System.IO;

using System.Collections.Generic;

此类我们先不用,先建立xml文档:

在SLDemo.Web项目中右键单击在windows资源管理器中打开,进入ClientBin文件夹,新建一个txt文档输入一下内容:

<root> <demo> <img>1。jpg</img> <url>www.baidu.com</url> <info>一张图片</info> </demo> <demo> <img>1。jpg</img> <url>www.baidu.com</url> <info>一张图片</info> </demo> </root>

为了演示效果,可以多复制几个<demo>,并命名为demo.xml

接着在xmlOprater中添加如下代码:

public class xmlOprater { /// <summary> /// xml文件操作类,负责加载xml文件并将信息保存到product类型的列表中 /// </summary> public class xmlOprater { XDocument xmlDoc; public xmlOprater() { //xmlDoc = XDocument.Load("products.xml"); WebClient client = new WebClient(); client.DownloadStringCompleted += new DownloadStringCompletedEventHandler(client_DownloadStringCompleted); client.DownloadStringAsync(new Uri( "products.xml",UriKind.RelativeOrAbsolute)); } void client_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e) { XmlReader reader = XmlReader.Create(new StringReader(e.Result)); xmlDoc = XDocument.Load(reader); if (complete != null) { complete(null, null); } //throw new NotImplementedException(); } /// <summary> /// 获取数据 /// </summary> /// <returns></returns> public List<product> GetProducts() { List<entityBoard> d = (from c in xmlDoc.Element("Products").Elements() select new entityBoard() { ImgInfo = ((XElement)c).Element("Info").Value, ImgUri = new Uri(((XElement)c).Element("img").Value, UriKind.RelativeOrAbsolute), URL=new Uri (((XElement)c).Element("url").Value ,UriKind.RelativeOrAbsolute) }).ToList(); return d; } /// <summary> /// 当xml文件加载完成时,触发此事件. /// </summary> public event EventHandler complete; }

下面我们简单讲解一下此类