silverlight 乐动魔方实战五_app

概述上次我们已经转换到···Music.xaml了~· 首先，要敲一个相册播放，其实，应该感谢一本··silverlight入门书《silverlight银光志》，以下就是这书里面的例子再二次开发的。 1、敲上相册源码，都说是二次开发，是和原来的版本有点不一样额~，定义样式 <UserControl.Resources> <!-- 定义3D运动动画故事板

上次我们已经转换到···Music.xaml了~·

首先，要敲一个相册播放，其实，应该感谢一本··silverlight入门书《silverlight银光志》，以下就是这书里面的例子再二次开发的。

1、敲上相册源码，都说是二次开发，是和原来的版本有点不一样额~，定义样式

<UserControl.Resources>        <!--         定义3D运动动画故事板        st*：Scaletransform的ScaleY属性        rt*：PlaneProjection的RotationY属性        tt*：Translatetransform的X属性    -->        <Storyboard x:name="myStoryboard" BeginTime="00:00:00"                Duration="00:00:02">            <DoubleAnimation Storyboard.Targetname="st0"                         Storyboard.TargetProperty="ScaleY"                         From="0.9" To="1"/>            <DoubleAnimation Storyboard.Targetname="rt0"                          Storyboard.TargetProperty="RotationY"                          From="0" To="45" />            <DoubleAnimation Storyboard.Targetname="tt0"                         Storyboard.TargetProperty="X"                          From="0" To="300" />            <DoubleAnimation Storyboard.Targetname="st1"                         Storyboard.TargetProperty="ScaleY"                          From="1" To="1.3" />            <DoubleAnimation Storyboard.Targetname="tt1"                         Storyboard.TargetProperty="X"                         From="300" To="560"  />            <DoubleAnimation Storyboard.Targetname="st2"                          Storyboard.TargetProperty="ScaleY"                         From="1" To="0.9" />            <DoubleAnimation Storyboard.Targetname="tt2"                         Storyboard.TargetProperty="X"                         From="-300" To="0" />            <DoubleAnimation Storyboard.Targetname="rt2"                         Storyboard.TargetProperty="RotationY"                         From="-45" To="0" />            <DoubleAnimation Storyboard.Targetname="st3"                          Storyboard.TargetProperty="ScaleY"                          From="1.3" To="1" />            <DoubleAnimation Storyboard.Targetname="tt3"                         Storyboard.TargetProperty="X"                         From="-560" To="-300" />        </Storyboard>   </UserControl.Resources>

2、接着再布局，并且画上相册框，下一页和上一页按钮等

<GrID x:name="LayoutRoot" Background="Black">        <GrID.RowDeFinitions>            <RowDeFinition Height="70"/>            <RowDeFinition Height="*"/>            <RowDeFinition Height="70"/>        </GrID.RowDeFinitions>        <!-- 图片0 -->        <border x:name="r0" borderThickness="0"             borderBrush="Black"            WIDth="370" Height="260"             RendertransformOrigin="0.5,0.5" GrID.Row="1">            <border.Background>                <ImageBrush x:name="img0" Stretch="Fill"/>            </border.Background>            <border.Rendertransform>                <transformGroup>                    <Scaletransform x:name="st1"/>                    <Translatetransform x:name="tt1" X="300"/>                </transformGroup>            </border.Rendertransform>            <border.Projection>                <PlaneProjection RotationY="45"/>            </border.Projection>        </border>        <!-- 图片1 -->        <border x:name="r1" borderThickness="0" GrID.Row="1"            borderBrush="Black"            WIDth="400" Height="260"             RendertransformOrigin="0.5,0.5">            <border.Background>                <ImageBrush x:name="img1" Stretch="Fill"/>            </border.Background>            <border.Rendertransform>                <transformGroup>                    <Scaletransform x:name="st0" ScaleY="0.9"/>                    <Translatetransform x:name="tt0"/>                </transformGroup>            </border.Rendertransform>            <border.Projection>                <PlaneProjection x:name="rt0"                             RotationY="0"/>            </border.Projection>        </border>        <!-- 图片2 -->        <border x:name="r2" borderThickness="0" GrID.Row="1"            borderBrush="Yellow"             WIDth="500" Height="390"            RendertransformOrigin="0.5,0.5" MouseMove="r2_MouseMove" MouseLeave="r2_MouseLeave" MouseleftbuttonDown="r2_MouseleftbuttonDown">            <border.Background>                <ImageBrush x:name="img2" Stretch="Fill"/>            </border.Background>            <border.Rendertransform>                <transformGroup>                    <Scaletransform x:name="st2"/>                    <Translatetransform x:name="tt2" X="-300"/>                </transformGroup>            </border.Rendertransform>            <border.Projection>                <PlaneProjection x:name="rt2"                              RotationY="-45"/>            </border.Projection>        </border>        <!-- 图片3 -->        <border x:name="r3" borderThickness="0" GrID.Row="1"            borderBrush="Black"             WIDth="370" Height="260"             RendertransformOrigin="0.5,0.5">            <border.Background>                <ImageBrush x:name="img3" Stretch="Fill"/>            </border.Background>            <border.Projection>                <PlaneProjection RotationY="-45"/>            </border.Projection>            <border.Rendertransform>                <transformGroup>                    <Scaletransform x:name="st3" ScaleY="1.3"/>                    <Translatetransform x:name="tt3" X="-560"/>                </transformGroup>            </border.Rendertransform>        </border>        <!-- 播放按钮 -->        <button x:name="btnBack"            WIDth="70" Height="70" margin="0,0" Click="btnBack_Click" tooltipService.tooltip="后退(Right)" MouseMove="btn_MouseMove" MouseLeave="btn_MouseLeave" Opacity="0.5" GrID.Row="2" HorizontalAlignment="Right">            <!-- 自定义控件模板 -->            <button.Style>                <Style targettype="button">                    <Setter Property="Template">                        <Setter.Value>                            <ControlTemplate targettype="button">                                <Image Source="Image/PicBtn/next.png"                                WIDth="65" Height="65"/>                            </ControlTemplate>                        </Setter.Value>                    </Setter>                </Style>            </button.Style>        </button>        <button x:name="btnNext" Height="70" margin="0,0" Click="btnNext_Click" tooltipService.tooltip="前进(left)" MouseMove="btn_MouseMove" MouseLeave="btn_MouseLeave" Opacity="0.5" GrID.Row="2" HorizontalAlignment="left" WIDth="70">            <!-- 自定义控件模板 -->            <button.Style>                <Style targettype="button">                    <Setter Property="Template">                        <Setter.Value>                            <ControlTemplate targettype="button">                                <Image Source="Image/PicBtn/back.png"                                WIDth="65" Height="65"/>                            </ControlTemplate>                        </Setter.Value>                    </Setter>                </Style>            </button.Style>        </button>        <button HorizontalAlignment="Right" Height="70" margin="0,0" Style="{StaticResource buttonFullStyle}" tooltipService.tooltip="全屏(Ctrl+G)" WIDth="70" Opacity="0.5" GrID.Row="0"/>    </GrID></UserControl>

布局完之后，你就会发现4个框框，和三个按钮。

3、布局完之后，按常理，应该会进入Music.cs编辑他的后台的。不过，在之前，要加载图片需要知道，图片路径，这些信息，我保存在XML里面，所以·这之前，先写一个类库专门读取XML的。

4、在此建两个类分别是Reader和MusicHitValue

这个MusicHitValue是后来玩游戏用的，暂时可以不用理，可建··可不建吧。

5、进入MusicValue

    public class MusicValue    {        /// <summary>        /// 音乐名        /// </summary>        public string Musicname { get; set; }        /// <summary>        /// 音乐路径        /// </summary>        public string MusicPath { get; set; }        /// <summary>        /// 音乐背景图        /// </summary>        public string Musicimg { get; set; }        /// <summary>        /// 音乐节奏        /// </summary>        public string MusicHit { get; set; }    }

6、进入Reader

        /// <summary>        /// 获取音乐对象        /// </summary>        /// <param name="url"></param>        /// <returns></returns>        public static List<MusicValue> GetValues(string url)        {            List<MusicValue> LValue = new List<MusicValue>();            Xdocument XD = Xdocument.Load(url);            var Values = from x in XD.Element("data").Elements("Music")                         select new                         {                             Musicname = x.Element("Musicname").Value,MusicPath = x.Element("MusicPath").Value,Musicimg = x.Element("Musicimg").Value,MusicHit = x.Element("MusicHit").Value                         };            MusicValue litem = null;            foreach (var item in Values)            {                litem = new MusicValue();                litem.Musicname = item.Musicname;                litem.MusicPath = item.MusicPath;                litem.Musicimg = item.Musicimg;                litem.MusicHit = item.MusicHit;                LValue.Add(litem);            }            return LValue;        }

这个涉及到部分liNQ语法和lambda表达式，具体要Google一下··这方面的资料额··查看MSDN搜索lambda 表达式 [liNQ] 就会有相关的介绍。

好了，XML就写好了。接着我们就读取这信息。由于这些信息是每个页面都需要用到的，这些我们应该想到的是···做为全局变量来使用，这全局应该放到哪呢？

其实，通常都会放在APP里面，不过，我们之前已经创建了类似全局的类？还记得吗？

没错，Common，那我们就放在这里吧。

7、进入Comon

        /// <summary>        /// 全局音乐对象        /// </summary>        public static List<MusicValue> _MusicValue = new List<MusicValue>();

敲到这类里面。回到Music

8、进入Music

        public Music()        {            InitializeComponent();            this.Loaded += new RoutedEventHandler(OpenPage3D_Loaded);            //读取音乐信息            Common._MusicValue = Reader.GetValues("MusicSet.xml");        }

9、新增一个MusicSet.xml鸟

编辑XML

<?xml version="1.0" enCoding="utf-8"?>
<data>
<Music>
    <Musicname>Spark 光芒-宝儿(LV_6)</Musicname>
    <MusicPath>Music/Spark光芒.mp3</MusicPath>
    <Musicimg>Image/PicMusic/Spark光芒.jpg</Musicimg>
    <MusicHit>MusicHit/Spark光芒.xml</MusicHit>
</Music>
<Music>
    <Musicname>One love-淑熙(LV_3)</Musicname>
    <MusicPath>Music/Onelove.mp3</MusicPath>
    <Musicimg>Image/PicMusic/Onelove.jpg</Musicimg>
    <MusicHit>MusicHit/Onelove.xml</MusicHit>
</Music>
<Music>
    <Musicname>V3(LV_7)</Musicname>
    <MusicPath>Music/V3.mp3</MusicPath>
    <Musicimg>Image/PicMusic/V3.jpg</Musicimg>
    <MusicHit>MusicHit/V3.xml</MusicHit>
</Music>
<Music>
    <Musicname>信者得爱-郑秀文(LV_6)</Musicname>
    <MusicPath>Music/信者得爱.mp3</MusicPath>
    <Musicimg>Image/PicMusic/信者得爱.jpg</Musicimg>
    <MusicHit>MusicHit/信者得爱.xml</MusicHit>
</Music>
<Music>
    <Musicname>可多不可少-狄易达(LV_2)</Musicname>
    <MusicPath>Music/可多不可少.mp3</MusicPath>
    <Musicimg>Image/PicMusic/可多不可少.jpg</Musicimg>
    <MusicHit>MusicHit/可多不可少.xml</MusicHit>
</Music>
<Music>
    <Musicname>A.I.N.Y.-邓紫棋(LV_1)</Musicname>
    <MusicPath>Music/A.I.N.Y.mp3</MusicPath>
    <Musicimg>Image/PicMusic/A.I.N.Y.jpg</Musicimg>
    <MusicHit>MusicHit/A.I.N.Y.xml</MusicHit>
</Music>
<Music>
    <Musicname>VALENTI-宝儿(LV_5)</Musicname>
    <MusicPath>Music/VALENTI.mp3</MusicPath>
    <Musicimg>Image/PicMusic/VALENTI.jpg</Musicimg>
    <MusicHit>MusicHit/VALENTI.xml</MusicHit>
</Music>
<Music>
    <Musicname>雨过之后-刘心(LV_2)</Musicname>
    <MusicPath>Music/雨过之后.mp3</MusicPath>
    <Musicimg>Image/PicMusic/雨过之后.jpg</Musicimg>
    <MusicHit>MusicHit/雨过之后.xml</MusicHit>
</Music>
<Music>
    <Musicname>I W Be loving U-陈柏宇(LV_2)</Musicname>
    <MusicPath>Music/I Will Be loving You.mp3</MusicPath>
    <Musicimg>Image/PicMusic/I Will Be loving You.jpg</Musicimg>
    <MusicHit>MusicHit/I Will Be loving You.xml</MusicHit>
</Music>
<Music>
    <Musicname>Good To Be Bad-邓紫棋(LV_5)</Musicname>
    <MusicPath>Music/Good To Be Bad.mp3</MusicPath>
    <Musicimg>Image/PicMusic/Good To Be Bad.jpg</Musicimg>
    <MusicHit>MusicHit/Good To Be Bad.xml</MusicHit>
</Music>
<Music>
    <Musicname>Deadline-张敬轩(LV_6)</Musicname>
    <MusicPath>Music/Deadline.mp3</MusicPath>
    <Musicimg>Image/PicMusic/Deadline.jpg</Musicimg>
    <MusicHit>MusicHit/Deadline.xml</MusicHit>
</Music>
<Music>
    <Musicname>joy leona-lewis(LV_3)</Musicname>
    <MusicPath>Music/joy.mp3</MusicPath>
    <Musicimg>Image/PicMusic/joy.jpg</Musicimg>
    <MusicHit>MusicHit/joy.xml</MusicHit>
</Music>
<Music>
    <Musicname>NeT'enVaPas-S Luna(LV_2)</Musicname>
    <MusicPath>Music/Ne T'en Va Pas.mp3</MusicPath>
    <Musicimg>Image/PicMusic/Ne T'en Va Pas.jpg</Musicimg>
    <MusicHit>MusicHit/Ne T'en Va Pas.xml</MusicHit>
</Music>
<Music>
    <Musicname>Wonderland-24味(LV_5)</Musicname>
    <MusicPath>Music/Wonderland.mp3</MusicPath>
    <Musicimg>Image/PicMusic/Wonderland.jpg</Musicimg>
    <MusicHit>MusicHit/Wonderland.xml</MusicHit>
</Music>
<Music>
    <Musicname>Why-Staz ft. Jesi RIDdle(LV_3)</Musicname>
    <MusicPath>Music/Why-Staz ft. Jesi RIDdle.mp3</MusicPath>
    <Musicimg>Image/PicMusic/Why-Staz ft. Jesi RIDdle.jpg</Musicimg>
    <MusicHit>MusicHit/Why-Staz ft. Jesi RIDdle.xml</MusicHit>
</Music>
</data>