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银光志