運行環境：blend 4.0或者visual studio 2010(silverlgiht開發環境需要安裝好)

本例實現了mp3的一些基本功能：如播放、暫停、停止、循環播放、靜音、調節音量等！

下面是所作播放器的效果圖：

布局方面于我一個菜鳥來說，由于經驗尚淺，而且我也不是所謂的美工人員，所以會存在很多不足，我也會努力在以后慢慢糾正，如果有什么好的布局方案，請告訴我好好學習學習！下面是我的布局圖：

其中相應的xaml代碼如下所示：

<UserControlxmlns="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/

轉載于:https://www.cnblogs.com/LeiCha/archive/2011/06/13/MP3PlayerDemo.html

總結

以上是生活随笔為你收集整理的小D学blend-----优美简洁的mp3播放器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。