运行环境: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/