silverlight 乐动魔方 实战六

上次讲到绑定··XML数据

 

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

图片下载地址：

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

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

 

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

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

 

1、定义两个变量

View Code

        /// <summary>

        /// 当前位置

        /// </summary>

        private int CurPos = 0;



        /// <summary>

        /// Music图片数量

        /// </summary>

        private int PicMax = 0;

修改构造方法

View Code

        public Music()

        {

            InitializeComponent();

            this.Loaded += new RoutedEventHandler(OpenPage3D_Loaded);



            //读取音乐信息

              Common._MusicValue = Reader.GetValues("MusicSet.xml");

            PicMax = Common._MusicValue.Count;//ADD这个

        }

2、编写相册效果相关的

View Code

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--;

            }

        }

View Code

/// <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); 

        }

View Code

        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、噢··还有个全屏按钮

View Code

        private void btnFull_Click(object sender, RoutedEventArgs e)

        {

            //获取当前应用程序SilverlightHost内容对象

            Content contentObject = Application.Current.Host.Content;

            //修改当前应用程序的全屏属性

            contentObject.IsFullScreen = !contentObject.IsFullScreen;

        }

还有，一些按钮效果

View Code

        /// <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

View Code

<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

View Code

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