学步园

这次是··播放音乐和前面的总结···

 

播放音乐··其实很简单···加上个播放器就可以了  -···· （废话！ - =）

        /// <summary>
        /// 播放器
        /// </summary>
        private MediaElement _mediaElement;
        public Music()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(OpenPage3D_Loaded);

            //添加播放器
            _mediaElement = new MediaElement();//Add
            this.LayoutRoot.Children.Add(_mediaElement);//Add

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

先前代码···卡煮的地方··现在恍然大悟了···

private void r2_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Common.SoundUrl(ref _mediaElement, Common._MusicValue[CurPos + 2].MusicPath);
            _mediaElement.Play();
            _childMusicMsg = new ChildMusicMsg(CurPos + 2);
            _childMusicMsg.Show();
        }

        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();
        }

也不是完全大悟的···· _childMusicMsg 是啥？

 

噢··在前面··也要添加这个全局

        /// <summary>
        /// 音乐信息窗体
        /// </summary>
        private ChildMusicMsg _childMusicMsg; 

ChildMusicMsg  又是啥~？ 其实是一个childwindow ，

一、 在UserControls文件夹里面，新建一个ChildWindow

二、编辑他的后台

 

首先要命名空间一致

namespace SilverlightMusicHit 

接着改下一下他的构造函数

 

public ChildMusicMsg(int musicIndex)  

嗯··这个窗体要实现啥··下章再讲吧····

先总结···一下先前的

 

以下是···Music 的所有源码

 

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

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

        <!--全屏按钮样式-->
        <Style x:Key="ButtonFullStyle" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0" To="MouseOver"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="btnFull">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="0.1"/>
                                                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed"/>
                                    <VisualState x:Name="Disabled"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Button x:Name="btnFull" Click="btnFull_Click">
                                <Button.Style>
                                    <Style TargetType="Button">
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="Button">
                                                    <Image Source="Image/PicBtn/full.png"
                                                        Width="65" Height="65"/>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </Button.Style>
                            </Button>
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <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>

Music.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

using System.Windows.Interop;
using XML;

namespace SilverlightMusicHit
{
    public partial class Music : UserControl
    {
        #region 变量
        /// <summary>
        /// 当前位置
        /// </summary>
        private int CurPos = 0;

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

        /// <summary>
        /// 播放器
        /// </summary>
        private MediaElement _mediaElement;

        /// <summary>
        /// 音乐信息窗体
        /// </summary>
        private ChildMusicMsg _childMusicMsg; 
        #endregion


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

            //添加播放器
            _mediaElement = new MediaElement();
            this.LayoutRoot.Children.Add(_mediaElement);

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

        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="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;
        }

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

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

        private void r2_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Common.SoundUrl(ref _mediaElement, Common._MusicValue[CurPos + 2].MusicPath);
            _mediaElement.Play();
            _childMusicMsg = new ChildMusicMsg(CurPos + 2);
            _childMusicMsg.Show();
        }

        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();
        }
    }
}

呵呵···检查一下··确保可以完整运行，··

下章就快进入····游戏部份了···期待一下，。

 

name:5+x

 

参考文章与书籍：

silverlight银光志

WPF葵花宝典