运行环境：blend 4.0或者visual studio 2010(silverlgiht开发环境需要安装好)
本例实现了mp3的一些基本功能：如播放、暂停、停止、循环播放、静音、调节音量等！
下面是所作播放器的效果图：
布局方面于我一个菜鸟来说，由于经验尚浅，而且我也不是所谓的美工人员，所以会存在很多不足，我也会努力在以后慢慢纠正，如果有什么好的布局方案，请告诉我好好学习学习！下面是我的布局图：
其中相应的xaml代码如下所示：
<UserControl
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" xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" mc:Ignorable="d"
x:Class="mp3PlayerDemo.MainPage"
Width="640" Height="480">
<UserControl.Resources>
<SolidColorBrush x:Key="Brush1" Color="#FF144B95"/>
<LinearGradientBrush x:Key="Brush3" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF80FCFF" Offset="0"/>
<GradientStop Color="#FF15C0C4" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="Brush4" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF1E899D" Offset="0"/>
<GradientStop Color="#FF29D9FB" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="Brush2" Color="#FFC4FFFB"/>
<Style x:Key="ButtonStyle1" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="grid" Margin="0,0,0,3" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<CompositeTransform/>
</Grid.RenderTransform>
<Grid.Effect>
<DropShadowEffect Color="#FF16D6D1" ShadowDepth="0"/>
</Grid.Effect>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To="1.431" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="3.667" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="1.3" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="3" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Cursor)" Storyboard.TargetName="grid">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Cursor>Hand</Cursor>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle Stroke="{StaticResource Brush3}" StrokeThickness="3" Fill="{StaticResource Brush4}"/>
<ed:RegularPolygon InnerRadius="1" PointCount="3" Stretch="Fill" StrokeThickness="2" UseLayoutRounding="False" Margin="6.583,3.332,4.918,3.584" RenderTransformOrigin="0.5,0.5" Stroke="{StaticResource Brush1}" Fill="{StaticResource Brush1}">
<ed:RegularPolygon.RenderTransform>
<CompositeTransform Rotation="90"/>
</ed:RegularPolygon.RenderTransform>
</ed:RegularPolygon>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="" ToolTipService.ToolTip="播放" Cursor="Arrow"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Color x:Key="Color1">#FF16D6D1</Color>
<Style x:Key="ButtonStyle2" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="grid" Margin="0,0,0,3" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<CompositeTransform/>
</Grid.RenderTransform>
<Grid.Effect>
<DropShadowEffect Color="{StaticResource Color1}" ShadowDepth="1"/>
</Grid.Effect>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To="1.382" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="3.25" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="1.275" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="2.75" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle StrokeThickness="3" Stroke="{StaticResource Brush3}" Fill="{StaticResource Brush4}"/>
<Rectangle HorizontalAlignment="Left" Margin="6,5,0,5" Stroke="{StaticResource Brush1}" Width="2" StrokeThickness="2" Fill="{StaticResource Brush1}"/>
<Rectangle HorizontalAlignment="Right" Margin="0,5,5,5" Stroke="{StaticResource Brush1}" Width="2" StrokeThickness="2" Fill="{StaticResource Brush1}"/>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content=""/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ButtonStyle3" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="grid" Margin="0,-2,-3,-1" d:LayoutOverrides="VerticalAlignment" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<CompositeTransform/>
</Grid.RenderTransform>
<Grid.Effect>
<DropShadowEffect Color="{StaticResource Color1}" ShadowDepth="0"/>
</Grid.Effect>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To="1.433" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="3.25" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="1.5" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="1.25" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="1.628" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="0.174" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="1.333" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="-0.5" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Ellipse StrokeThickness="2" Fill="{StaticResource Brush4}">
<Ellipse.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF23E0D3" Offset="0"/>
<GradientStop Color="#FF99FFF8" Offset="1"/>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
<Rectangle x:Name="rectangle" Margin="5,4" Stroke="{StaticResource Brush1}" StrokeThickness="2" Fill="{StaticResource Brush1}" RenderTransformOrigin="0.5,0.5">
<Rectangle.Effect>
<DropShadowEffect Color="#FFE7A022" ShadowDepth="0"/>
</Rectangle.Effect>
<Rectangle.RenderTransform>
<CompositeTransform/>
</Rectangle.RenderTransform>
</Rectangle>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content=""/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF135A91" Offset="0"/>
<GradientStop Color="#FF1CBBE4" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<Border BorderThickness="2.5" Margin="227,128,139,220" CornerRadius="10" BorderBrush="#FF5EB9FF">
<Border.Effect>
<DropShadowEffect Color="#FF63A2E7"/>
</Border.Effect>
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF93D4FD" Offset="0"/>
<GradientStop Color="#FF109BF3" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.1*"/>
<RowDefinition Height="0.567*"/>
<RowDefinition Height="0.093*"/>
<RowDefinition Height="0.241*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.044*"/>
<ColumnDefinition Width="0.649*"/>
<ColumnDefinition Width="0.307*"/>
</Grid.ColumnDefinitions>
<Border BorderThickness="1" Margin="0,-1,0,0" Grid.Column="1" Grid.Row="1" Background="#FF109BF3" CornerRadius="10">
<Border.Effect>
<DropShadowEffect Color="#FF4BF3C9" ShadowDepth="0"/>
</Border.Effect>
<Grid>
<TextBlock x:Name="lblStatus" TextWrapping="Wrap" Text="00:00:00" HorizontalAlignment="Right" Width="39" Height="10" VerticalAlignment="Bottom" Foreground="#FF3BEFE3" Margin="0,0,8,0" FontSize="8"/>
</Grid>
</Border>
<Border BorderBrush="#FF1874AF" BorderThickness="1" Margin="15,0,17,8" Grid.Row="3" Grid.Column="1" CornerRadius="10">
<Border.Effect>
<DropShadowEffect Color="#FF64D8FF" Direction="316" ShadowDepth="1" BlurRadius="12"/>
</Border.Effect>
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF52A4EF" Offset="0"/>
<GradientStop Color="#FF109BF3" Offset="0.626"/>
<GradientStop Color="#FF4091DE" Offset="0.991"/>
</LinearGradientBrush>
</Border.Background>
<Grid Margin="7,0,0,0">
<Slider x:Name="sliderPosition" ValueChanged="sliderPosition_ValueChanged" d:IsHidden="True"/>
<Slider x:Name="sliderPositionBackground" Margin="0" d:LayoutOverrides="Width, Height" IsHitTestVisible="False"/>
</Grid>
</Border>
<Grid Grid.Column="2" Margin="16,12,12,21" Grid.Row="1">
<Button x:Name="cmdPlay" Content="Button" Margin="0,0,0,19" Style="{StaticResource ButtonStyle1}" HorizontalAlignment="Left" Width="20" Cursor="Hand" Click="cmdPlay_Click" />
<Button x:Name="cmdPause" Content="" HorizontalAlignment="Right" Margin="0,0,0,19" Style="{StaticResource ButtonStyle2}" Width="20" ToolTipService.ToolTip="暂停" Cursor="Hand" Click="cmdPause_Click"/>
<Button x:Name="cmdStop" Content="Button" Margin="17,27,21,0" Style="{StaticResource ButtonStyle3}" Cursor="Hand" Height="12" VerticalAlignment="Top" Click="cmdStop_Click"/>
</Grid>
<MediaElement x:Name="media" Grid.ColumnSpan="3" Grid.RowSpan="4" Source="/Nothing In The World.mp3" d:IsHidden="True"/>
<StackPanel Grid.Column="1" Height="17" Margin="26,0,67,0" Orientation="Horizontal" Grid.Row="1" VerticalAlignment="Bottom">
<CheckBox x:Name="chkLoop" Content="循环" HorizontalAlignment="Left" Margin="0" Cursor="Hand" FontSize="8" d:LayoutOverrides="Height" Width="39" Foreground="{StaticResource Brush2}"/>
<CheckBox x:Name="chkMute" Content="无声" Cursor="Hand" Margin="6,1,0,0" FontSize="8" d:LayoutOverrides="Height" Click="chkMute_Click" Foreground="{StaticResource Brush2}"/>
</StackPanel>
<StackPanel Grid.Column="1" Margin="26,8,17,21" Orientation="Vertical" Grid.Row="1" d:LayoutOverrides="Height">
<StackPanel Orientation="Horizontal">
<TextBlock TextWrapping="Wrap" Text="Balance:" Foreground="{StaticResource Brush2}"/>
<Slider x:Name="sliderBalance" ValueChanged="sliderBalance_ValueChanged" HorizontalContentAlignment="Left" Value="5" Width="84"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock TextWrapping="Wrap" Text="Volume:" Foreground="{StaticResource Brush2}" HorizontalAlignment="Left" Width="49"/>
<Slider x:Name="sliderVolume" VerticalAlignment="Bottom" ValueChanged="sliderVolume_ValueChanged" HorizontalContentAlignment="Left" Value="5" Width="84"/>
</StackPanel>
</StackPanel>
<TextBlock TextWrapping="Wrap" Text="Design by 小D" Grid.Column="2" HorizontalAlignment="Left" Grid.Row="3" Width="82" Margin="0,8,0,0" FontStyle="Italic" Foreground="#FF24E5E1">
<TextBlock.Effect>
<DropShadowEffect Color="#FF52EBDA" ShadowDepth="0"/>
</TextBlock.Effect>
</TextBlock>
</Grid>
</Border>
</Grid>
</UserControl>
该例子的后台代码来源于：http://www.cnblogs.com/gnielee/archive/2009/07/30/silverlight2-learning-musicplayer.html
后台的.cs文件的代码如下所示：
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Threading;
namespace mp3PlayerDemo
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
//设置计时器精确度
timer.Interval = TimeSpan.FromSeconds(0.1);
//装载计时器
timer.Tick += timer_Tick;
}
//停止播放
public void mediaStop()
{
//将进度调节按钮与进度条归零
sliderPosition.Value = 0;
sliderPositionBackground.Value = 0;
//停止播放
media.Stop();
timer.Stop();
}
private void timer_Tick(object sender, EventArgs e)
{
lblStatus.Text = media.Position.ToString().TrimEnd(new char[] { '0' });
//使播放进度条跟随播放时间移动
sliderPositionBackground.Value = media.Position.TotalSeconds;
}
//计时器
private DispatcherTimer timer = new DispatcherTimer();
//播放键
private void cmdPlay_Click(object sender, RoutedEventArgs e)
{
//判断播放器是否处于暂停状态
if (sliderPositionBackground.Value != 0)
{
//处于暂停状态则继续播放
media.Position = TimeSpan.FromSeconds(sliderPositionBackground.Value);
media.Play();
timer.Start();
}
else
{
//处于停止状态则开始播放
media.Stop();
media.Play();
timer.Start();
}
}
//暂停键
private void cmdPause_Click(object sender, RoutedEventArgs e)
{
media.Pause();
timer.Stop();
}
//停止键
private void cmdStop_Click(object sender, RoutedEventArgs e)
{
mediaStop();
}
//播放器打开
private void media_MediaOpened(object sender, RoutedEventArgs e)
{
media.Stop();
//将播放进度调节按钮和播放进度条的长度设为音频时长
sliderPosition.Maximum = media.NaturalDuration.TimeSpan.TotalSeconds;
sliderPositionBackground.Maximum = media.NaturalDuration.TimeSpan.TotalSeconds;
}
//播放进度调节按钮
private void sliderPosition_ValueChanged(object sender, RoutedEventArgs e)
{
//使进度条跟随调节按钮移动
sliderPositionBackground.Value = sliderPosition.Value;
//从调节位置播放
media.Stop();
media.Position = TimeSpan.FromSeconds(sliderPosition.Value);
media.Play();
timer.Start();
}
//音量调节按钮
private void sliderVolume_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
if (media != null) media.Volume = sliderVolume.Value;
}
//平衡调节按钮
private void sliderBalance_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
if(media!=null)
media.Balance = sliderBalance.Value;
}
//静音选项
private void chkMute_Click(object sender, RoutedEventArgs e)
{
media.IsMuted = (bool)chkMute.IsChecked;
}
//获取错误提示
private void media_MediaFailed(object sender, ExceptionRoutedEventArgs e)
{
lblStatus.Text = e.ErrorException.Message;
}
//播放结束
private void media_MediaEnded(object sender, RoutedEventArgs e)
{
//判断是否需要循环播放
if ((bool)chkLoop.IsChecked)
{
//循环播放
media.Position = TimeSpan.Zero;
media.Play();
}
else
{
//停止播放
mediaStop();
}
}
//获取播放状态
private void media_CurrentStateChanged(object sender, RoutedEventArgs e)
{
//在Textblock中显示播放状态
lblStatus.Text = media.CurrentState.ToString();
}
}
}
第一次做了个成品出来，很多东西都是借鉴与人，非常感谢园友们的分享精神，才会让我这菜鸟学到这么多可以实践的东西，我也会继续努力。如果有什么好的方法或者布局，或者对小D的一些意见，请大神们多多指点！
源代码下载：mp3Demo.rar
推荐blend高手博客：http://www.cnblogs.com/kaodigua/