silverlight 乐动魔方 实战五

 上次我们已经转换到···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,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,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,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>

接着按F10断点，读取音乐信息那部分，看看读倒没有···

 

如果发现有了，哈，恭喜你了。

 

额，··这篇有点长，····留到下次再讲吧。

 

name:5+x

 

参考文章与书籍：

silverlight银光志