Silverlight for Windows Phone 7开发系列(4):动画开发

简介:

前言

上一篇文章讲述了如何使用MediaElement控件来播放网络电台,讲述了MediaElement控件支持的媒体文件格式以及其一些限制性,同时讲述了Slider控件的使用和数据绑定的方法。这篇文章讲述如何使用Silverlight进行动画的开发。

 

新增图片和配置文件

我使用Paint.net做了些电台的(徽标)logo文件,存放在Images文件里面。

image

我把电台的配置信息保存到XML文件里面,以后可以通过修改该XML文件来扩展电台信息,提高可扩展性。甚至可以把配置文件存放到网上,程序每次启动的时候自动更新。

<?xml version="1.0" encoding="utf-8"?> <stations>   <station id="1" name="Mix 106.5" url="http://icecast.arn.com.au/1065.mp3" image="1065.png" />     <station id="2" name="101.7 WS FM" url="http://icecast.arn.com.au/1017.mp3" image="1017.png" />     <station id="3" name="The Edge96ONE" url="http://icecast.arn.com.au/961.mp3" image="961.png" />     <station id="4" name="Mix 101.1" url="http://icecast.arn.com.au/1011.mp3" image="1011.png" />     <station id="5" name="GOLD 104.3" url="http://icecast.arn.com.au/1043.mp3" image="1043.png" />     <station id="6" name="97.3 FM" url="http://icecast.arn.com.au/973.mp3" image="973.png" />     <station id="7" name="Mix 102.3" url="http://icecast.arn.com.au/1023.mp3" image="1023.png" />     <station id="8" name="Cruise 1323AM" url="http://icecast.arn.com.au/1323.mp3" image="1323.png" /> </stations>     

 

Stations标签是各个Station标签的容器,id是电台的唯一标识,name是电台的名字,url是在线播放的地址,不确定是否为模拟器 的原因,我试过网络电台只是支持mp3格式,我想在真机会像官方文档所说那样支持多种格式,所有支持的媒体文件格式请看上篇文章。image是电台的 logo图片文件的名字,存放在上述的Images文件夹下面。

 

把Config和Images文件夹拷贝到项目文件夹下面,然后把文件加入到项目中

image

先点击“Show All Files”按钮,然后右击Config和Images文件夹,选择“Include In Project”菜单。

需要注意的是,需要检查这些文件的属性,例如SilverRadio.xml文件的属性如下:

image

Logo图片文件的属性如下:

image

注意XML文件和Logo图片的文件属性不一样的,我发现新增文件的时候,Silverlight for Windows Phone已经自动设置好,不需要改动。但是我做Silverlight 4的时候,需要手工改动相应的属性,XML的Build Action为Content,而图片的为Resource。还有一个需要注意的是Silverlight不支持Embedded Resource,第一眼会觉得嵌入资源(Embedded Resource)比资源文件(Resource)更加贴切(我自己开始这样认为),可是Silverlight不支持这种文件形式,这种形式只支持在 WPF使用,但是Silverlight的Build Action保留了好多不支持的文件形式的选项,使用时需要注意哪些是Silverlight支持的,否则程序会出现找不到文件等异常错误。

 

LINQ for XML读取配置文件

使用LINQ读取XML配置文件,先定义一个实体类如下:

public class Station {     public int Id { get; set; }     public string Name { get; set; }     public Uri Url { get; set; }     public string Image { get; set; } }

 

下面是电台容器类Stations

public class Stations : List<Station> {     public void Load(string xmlFile)     {         XDocument xDoc = XDocument.Load(xmlFile);         var query = from xElem in xDoc.Descendants("station")                      select new Station                     {                         Id = Convert.ToInt32(xElem.Attribute("id").Value),                         Name = xElem.Attribute("name").Value,                         Url = new Uri(xElem.Attribute("url").Value, UriKind.Absolute),                         Image = xElem.Attribute("image").Value,                                              };         Clear();         AddRange(query);     } }

 

关于容器类的命名

我喜欢使用名词加上s作为容器类的名称,之前写blog过程中,有好几个读者说名词加s不好理解,我想是由于中文的名词没有复数的缘故,但是我看过 一些.NET Framework的源码,容器类也是使用名称加s的方式表示,习惯就好了,使用加s(例如Stations)而不是加上具体容器的名称(例如 StationList)的好处是重构容器类型的时候不需要修改容器的名称。因为具体容器可能会修改,例如从List修改为Dictionary,但是可 以继续保留原有容器的名称Stations。

LINQ for XML

LINQ for XML主要有三个关键的类组成XDocumentXElementXAttribute。我觉得弄明白这三个类已经能入门LINQ for XML了。XDocument表示XML文档,调用静态函数Load就可以把文档加载到XDocument的对象中。XElement表示一个元素(节点),通过XElement的属性Attribute(容器)就能取出该节点的相关属性。XAttribute表示节点的属性。

在上述例子中把Station的每个节点取出来,然后把属性值传递给新建的Station对象。最后把所有Station对象存放到List容器中。

 

图片转盘的实现

image

先看效果图,有了感性认识比较好理解最终的实现效果。这是一个使用动态图片转盘的方式呈现所有电台,效果见上图,用户可以转动的方式换电台,选中的 电台会显示在最中间和最前方,显示最大比例,其他图根据与选中图的距离按比例缩小,模拟3D转盘的效果。下面详细讲述这个转盘类的实现。这个类的实现参考 了Flash vs Silverlight: Image Carousel.

XAML

<UserControl x:Class="SilverRadio.StationCarousel"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"      Width="480" Height="300">     <Canvas x:Name="LayoutRoot" Background="Transparent">      </Canvas> </UserControl> 

 

定义一个用户控件StationCarousel,该控件继承于UserControl,包含了一个Canvas容器,在这个例子中,使用 Canvas容器而不是Grid和StackPanel的原因是Canvas具有最大的可控性,由于Canvas是绝对值定位的,所以在Canvas里面 的图片(Image)可以计算出位置信息的绝对值,然后进行呈现。


由于发稿到《程序员》杂志,暂时不能发全文,全文见 Silverlight for Windows Phone 7开发系列(4):动画开发



    本文转自Jake Lin博客园博客,原文链接:http://www.cnblogs.com/procoder/archive/2010/09/27/Silverlight-for-Window-Animation-Development.html,如需转载请自行联系原作者



相关文章
|
4月前
|
IDE 关系型数据库 开发工具
使用Visual Basic进行Windows窗体开发
【4月更文挑战第27天】本文介绍了使用Visual Basic进行Windows窗体(WinForms)开发的步骤,从搭建开发环境到创建、设计用户界面,再到编写事件驱动的代码和数据绑定。Visual Basic结合WinForms提供了一种易学易用的桌面应用开发方案。通过调试、优化、部署和维护,开发者可以构建专业应用程序。随着技术发展,掌握最新UI设计和开发工具对于保持竞争力至关重要。本文为初学者提供了基础指导,鼓励进一步探索和学习。
113 0
|
7天前
|
开发者 C# Windows
WPF与游戏开发:当桌面应用遇见游戏梦想——利用Windows Presentation Foundation打造属于你的2D游戏世界,从环境搭建到代码实践全面解析新兴开发路径
【8月更文挑战第31天】随着游戏开发技术的进步,WPF作为.NET Framework的一部分,凭借其图形渲染能力和灵活的UI设计,成为桌面游戏开发的新选择。本文通过技术综述和示例代码,介绍如何利用WPF进行游戏开发。首先确保安装最新版Visual Studio并创建WPF项目。接着,通过XAML设计游戏界面,并在C#中实现游戏逻辑,如玩家控制和障碍物碰撞检测。示例展示了创建基本2D游戏的过程,包括角色移动和碰撞处理。通过本文,WPF开发者可更好地理解并应用游戏开发技术,创造吸引人的桌面游戏。
15 0
|
7天前
|
开发者 iOS开发 C#
Uno Platform 入门超详细指南:从零开始教你打造兼容 Web、Windows、iOS 和 Android 的跨平台应用,轻松掌握 XAML 与 C# 开发技巧,快速上手示例代码助你迈出第一步
【8月更文挑战第31天】Uno Platform 是一个基于 Microsoft .NET 的开源框架,支持使用 C# 和 XAML 构建跨平台应用,适用于 Web(WebAssembly)、Windows、Linux、macOS、iOS 和 Android。它允许开发者共享几乎全部的业务逻辑和 UI 代码,同时保持原生性能。选择 Uno Platform 可以统一开发体验,减少代码重复,降低开发成本。安装时需先配置好 Visual Studio 或 Visual Studio for Mac,并通过 NuGet 或官网下载工具包。
13 0
|
2月前
|
Linux Apache C++
FFmpeg开发笔记(三十五)Windows环境给FFmpeg集成libsrt
该文介绍了如何在Windows环境下为FFmpeg集成SRT协议支持库libsrt。首先,需要安装Perl和Nasm,然后编译OpenSSL。接着,下载libsrt源码并使用CMake配置,生成VS工程并编译生成srt.dll和srt.lib。最后,将编译出的库文件和头文件按照特定目录结构放置,并更新环境变量,重新配置启用libsrt的FFmpeg并进行编译安装。该过程有助于优化直播推流的性能,减少卡顿问题。
70 2
FFmpeg开发笔记(三十五)Windows环境给FFmpeg集成libsrt
|
3月前
|
网络安全 C++ Windows
【Windows驱动开发】(主机)VS2017+(虚拟机)win10系统------双机调试
【Windows驱动开发】(主机)VS2017+(虚拟机)win10系统------双机调试
|
3月前
|
Windows
【Windows驱动开发】注册表的基本操作(创建、打开、修改、读取、枚举)(附源码)
【Windows驱动开发】注册表的基本操作(创建、打开、修改、读取、枚举)(附源码)
|
3月前
|
编解码 Windows
FFmpeg开发笔记(二十九)Windows环境给FFmpeg集成libxvid
XviD是开源MPEG-4视频编码器,与DivX相似但后者非开源。早期MP4常使用XviD或DivX编码,现已被H.264取代。在Windows上集成FFmpeg的XviD编解码库libxvid,需访问<https://labs.xvid.com/source/>下载源码,解压后在MSYS环境中配置、编译和安装。之后重新配置FFmpeg,启用libxvid并编译安装。详细步骤包括configure命令、make和make install。成功后,通过`ffmpeg -version`检查是否启用libxvid。更多音视频开发技术可参考《FFmpeg开发实战:从零基础到短视频上线》。
83 0
FFmpeg开发笔记(二十九)Windows环境给FFmpeg集成libxvid
|
4月前
|
算法 Linux Windows
FFmpeg开发笔记(十七)Windows环境给FFmpeg集成字幕库libass
在Windows环境下为FFmpeg集成字幕渲染库libass涉及多个步骤,包括安装freetype、libxml2、gperf、fontconfig、fribidi、harfbuzz和libass。每个库的安装都需要下载源码、配置、编译和安装,并更新PKG_CONFIG_PATH环境变量。最后,重新配置并编译FFmpeg以启用libass及相关依赖。完成上述步骤后,通过`ffmpeg -version`确认libass已成功集成。
93 1
FFmpeg开发笔记(十七)Windows环境给FFmpeg集成字幕库libass
|
3月前
|
Java Nacos 微服务
Spring Cloud微服务在Windows本地开发时禁用Nacos注册中心注册
Spring Cloud微服务在Windows本地开发时禁用Nacos注册中心注册
|
4月前
|
编解码 5G Linux
FFmpeg开发笔记(二十一)Windows环境给FFmpeg集成AVS3解码器
AVS3是中国首个8K及5G视频编码标准,相比AVS2和HEVC性能提升约30%。解码器libuavs3d支持8K/60P视频实时解码,兼容多种平台。《FFmpeg开发实战》书中介绍了在Windows环境下如何集成libuavs3d到FFmpeg。集成步骤包括下载源码、使用Visual Studio 2022编译、调整配置、安装库文件和头文件,以及重新配置和编译FFmpeg以启用libuavs3d。
76 0
FFmpeg开发笔记(二十一)Windows环境给FFmpeg集成AVS3解码器
下一篇
DDNS