天天看點
傳回

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的。

silverlight 樂動魔方 實戰五

4、在此建兩個類分别是Reader和MusicHitValue

silverlight 樂動魔方 實戰五

這個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鳥

silverlight 樂動魔方 實戰五

編輯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銀光志

silverlight 實戰系列 sliverlight button 音樂 border string Linq
上一篇: 模拟連結清單
下一篇: hdu1067

繼續閱讀