silverlight 乐动魔方 实战六

上次讲到绑定··XML数据

嗯，相册当然要有图片啦，··so··先添加图片

图片下载地址：

http://www.vdisk.cn/down/index/8817993A2474（PicBtn）

http://www.vdisk.cn/down/index/8817997A9289（PicMusic）

接着一看···Music.Xaml 按钮有图片了，··呵呵

进入Music.cs 继续做相册效果。

1、定义两个变量

        /// <summary>
        /// 当前位置
        /// </summary>
        private int CurPos = 0;

        /// <summary>
        /// Music图片数量
        /// </summary>
        private int PicMax = 0;

修改构造方法

        public Music()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(OpenPage3D_Loaded);

            //读取音乐信息
              Common._MusicValue = Reader.GetValues("MusicSet.xml");
            PicMax = Common._MusicValue.Count;//ADD这个
        }

2、编写相册效果相关的

private void OpenPage3D_Loaded(object sender, RoutedEventArgs e)
        {
            //初始化位置
            CurPos = 0;
            this.SetEasingFunction();
        }

        private void AddNum()
        {
            if (CurPos < PicMax-3)
            {
                CurPos++;
            }
            else
            {
                CurPos = -2;
            }
        }

        private void DelNum()
        {
            if (CurPos < -1)
            {
                CurPos = PicMax - 3;
            }
            else
            {
                CurPos--;
            }
        }

/// <summary>
        /// 播放事件的方法
        /// </summary>
        /// <param name="type">0,Back 1,Next</param>
        private void PlayStory(int type)
        {
            switch (type)
            {
                //Next
                case 1:
                    this.AddNum();
                    this.NextSource();
                    this.myStoryboard.Begin();
                    break;
                //Back
                case 0:
                    this.DelNum();
                    this.NextSource();
                    this.myStoryboard.Begin();
                    break;
            }
        }

        /// <summary>
        /// 使用Silverlight 3的EasingFunction动画
        /// </summary>
        private void SetEasingFunction()
        {
            //创建EasingFunction动画中的CircleEase对象
            CircleEase ce = new CircleEase();
            ce.EasingMode = EasingMode.EaseOut;
            //遍历故事板中的所有动画
            for (int i = 0; i < myStoryboard.Children.Count; i++)
            {
                DoubleAnimation da = myStoryboard.Children[i]
                    as DoubleAnimation;
                if (null != da)
                {
                    //设置DoubleAnimation的EasingFunction属性
                    da.EasingFunction = ce;
                }
            }
        }

        /// <summary>
        /// 设置当前位置的图片源
        /// </summary>
        private void NextSource()
        {
            //img0.ImageSource = Common.GetImgSource(this.GetUrl(CurPos));
            img1.ImageSource = Common.GetImgSource(this.GetUrl(CurPos + 1));
            img1.Opacity = 0.5;
            img2.ImageSource = Common.GetImgSource(this.GetUrl(CurPos + 2));
            img3.ImageSource = Common.GetImgSource(this.GetUrl(CurPos + 3)); 
            img3.Opacity = 0.5;
        }

        /// <summary>
        /// 获取图片路径
        /// </summary>
        /// <param name="CurPos"></param>
        /// <returns></returns>
        private string GetUrl(int CurPos)
        {
            string temp = string.Empty;
            try
            {
                temp = string.Format("../{0}", Common._MusicValue[CurPos].MusicImg);
            }
            catch { }
            return temp;
        }
 
        private void btnNext_Click(object sender, RoutedEventArgs e)
        {
            this.PlayStory(1);
        }

        private void btnBack_Click(object sender, RoutedEventArgs e)
        {
            this.PlayStory(0); 
        }

        private void r2_MouseMove(object sender, MouseEventArgs e)
        {
            this.r2.BorderThickness = new Thickness { Bottom = 5, Top = 5, Left = 5, Right = 5 };
            this.LayoutRoot.Background = new ImageBrush { ImageSource = img2.ImageSource };
        }

        private void r2_MouseLeave(object sender, MouseEventArgs e)
        {
            r2.BorderThickness = new Thickness { Bottom = 0, Top = 0, Left = 0, Right = 0 };
            this.LayoutRoot.Background = new SolidColorBrush(Colors.Black);
            _mediaElement.Stop();
        }

代码应该挺容易理解的， 相比 银光志，新增了后退按钮，和背景与选择的图片相同。img1 img2 img3 分别是 左中右 ，

呵呵，具体··还是那句话··翻开MSDN查看

3、噢··还有个全屏按钮

        private void btnFull_Click(object sender, RoutedEventArgs e)
        {
            //获取当前应用程序SilverlightHost内容对象
            Content contentObject = Application.Current.Host.Content;
            //修改当前应用程序的全屏属性
            contentObject.IsFullScreen = !contentObject.IsFullScreen;
        }

还有，一些按钮效果

        /// <summary>
        /// 鼠标移过按钮高亮
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void btn_MouseMove(object sender, MouseEventArgs e)
        {
            ((Button)sender).Opacity = 1;
        }

        /// <summary>
        /// 鼠标离开按钮恢复
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void btn_MouseLeave(object sender, MouseEventArgs e)
        {
            ((Button)sender).Opacity = 0.5;
        }

4、好了，·只能鼠标按··看起来挺不爽的，增加一些快捷键吧。

选择Music .XAML

<UserControl x:Class="SilverlightMusicHit.Music"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="500" d:DesignWidth="800" xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input" KeyDown="UserControl_KeyDown" Background="Black">

发现没有··，新增了一个KeyDown 事件，

回到Music.cs

        private void UserControl_KeyDown(object sender, KeyEventArgs e)
        {
            switch (e.Key)
            {
                case Key.Right: btnBack_Click(null, null); break;
                case Key.Left: btnNext_Click(null, null); break;
            }
            ModifierKeys keys = Keyboard.Modifiers;
            if ((e.Key == Key.G) && keys == ModifierKeys.Control)
                btnFull_Click(null,null);
        }

噢，差不多了。

按F5试试吧。；···

这两章是有点麻烦，，呵呵，进入  《开始篇》 那个演示地址，看着办呗！

嗯，下章就会开始讲播放音乐部份，和之前的总结。

name:5+x

参考文章与书籍：

silverlight银光志