Silverlight 实例教程索引
Silverlight 实例教程 - Out of Browser开篇 Silverlight 实例教程 - Out of Browser配置,安装和卸载 Silverlight 实例教程 - Out of Browser的自定义应用 Silverlight 实例教程 - Out of Browser存取本地文件系统 Silverlight 实例教程 - Out of Browser与COM的交互基础 Silverlight 实例教程 - Out of Browser与Office的互操作 Silverlight 实例教程 - Out of Browser的Debug和Notifications窗口 Silverlight 实例教程 - Out of Browser音乐播放器 Silverlight 实例教程 - Out of Browser与COM互操作实例 Silverlight 实例教程 - Out of Browser在线更新和Silent安装
本篇，我们将结合以往的Out of Browser特性，创建一款新的Out of Browser实例， 音乐播放器。 该实例目的比较简单，实现音乐播放，实现音乐文件列表读取，实现音乐文件信息读取，另外音乐播放自动跳转等功能。
在实例开始前，我们仍旧需要了解一些基础知识。Silverlight对音频的支持是使用MediaElement类，该类使用方法非常简单，该类的详细解释，请看MSDN 。
1 <MediaElement
2 x:Name="media"
3 Source="xbox.wmv"
4 CurrentStateChanged="media_state_changed"
5 Width="300" Height="300"/>
在了解了音频播放类的简单使用后，让我们先看看项目完成后的效果图。
从上面效果图中可以看出整个实例项目UI分5个部分：
1. 音频控制部分，这部分是实例主要功能；
2. 音频文件信息部分，这部分是获取显示当前和下一首音乐文件信息；
3. 唱片图片信息，其实这部分也是属于音频文件信息，不过这里单独列出来，使用独立的类进行处理；
4. 音频文件列表，该列表是载入My Music目录中的音乐文件，并支持用户选择播放功能；
5. UI控制，该部分可以使播放器进入最小化状态。例如：
下面我们开始分别解释以上几个部分的实例设计方法。
我们仍旧使用SilverlightOOBDemo项目，不过为了使代码更清晰易读，这次不再使用OutofBrowserMainPage作为OOB应用主界面，我们重新创建一个新的OOB应用界面OutofBrowserMusicPlayer。
为了修改启动页面为OutofBrowserMusicPlayer，为此，我们需要修改App.xaml中的启动页面代码：
1 private void Application_Startup(object sender, StartupEventArgs e)
2 {
3 if (!Application.Current.IsRunningOutOfBrowser)
4 {
5 this.RootVisual = new MainPage();
6 }
7 else
8 {
9 //this.RootVisual = new OutofBrowserMainPage();
10 this.RootVisual = new OutofBrowserMusicPlayer();
11 }
12
13 }
根据实例需求，我们最主要的功能就是播放音乐，所以，我们第一步首先实现Out of Browser应用音频控制。
1. 创建自定义音频控制控件；
对于音频控制，这里我们使用了自定义控件控制音乐的播放。AudioControl.xaml控件。
这里我仅贴上部分代码，大家可以在文章最后下载完整源代码。 1 <Grid x:Name="LayoutRoot">
2 <Grid.ColumnDefinitions>
3 <ColumnDefinition Width="Auto" />
4 <ColumnDefinition Width="*" />
5 <ColumnDefinition Width="25" />
6 <ColumnDefinition Width="Auto" />
7 <ColumnDefinition Width="Auto" />
8 </Grid.ColumnDefinitions>
9 <Grid Grid.Column="0" Margin="0,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" x:Name="gridCol1">
10 <ToggleButton Cursor="Hand" Margin="0,0,0,0" x:Name="btnPlay" RenderTransformOrigin="
0.5,0.5" Template="{StaticResource playControlTemplate}">
11 <ToggleButton.RenderTransform>
12 <TransformGroup>
13 <ScaleTransform ScaleX="1" ScaleY="1"/>
14 <SkewTransform/>
15 <RotateTransform/>
16 <TranslateTransform/>
17 </TransformGroup>
18 </ToggleButton.RenderTransform>
19 </ToggleButton>
20 </Grid>
21 <Grid Grid.Column="1" Margin="0,0,0,0" HorizontalAlignment="Stretch" x:Name="gridCol2" VerticalAlignment="Center">
22 <Grid.ColumnDefinitions>
23 <ColumnDefinition Width="*" />
24 <ColumnDefinition Width="40" />
25 <ColumnDefinition Width="10" />
26 <ColumnDefinition Width="40" />
27 </Grid.ColumnDefinitions>
28 <TextBlock x:Name="tbCurrentTime" Margin="0,1.5,0,0" Height="12" FontFamily="Verdana" FontSize="10" Text="00:00" TextWrapping="Wrap" Foreground="#FFFFFFFF" FontStyle="Normal" HorizontalAlignment="Right" TextAlignment="Right" Grid.Column="1"/>
29 <TextBlock Margin="0,1.5,0,0" Height="12" FontFamily="Verdana" FontSize="10" Text="/" TextWrapping="Wrap" Foreground="#FFFFFFFF" FontStyle="Normal" HorizontalAlignment="Center" TextAlignment="Right" Grid.Column="2"/>
30 <TextBlock x:Name="tbTotalTime" Margin="0,1.5,0,0" Height="12" FontFamily="Verdana" FontSize="10" Text="00:00" TextWrapping="Wrap" Foreground="#FFFFFFFF" FontStyle="Normal" HorizontalAlignment="Left" TextAlignment="Right" Grid.Column="3"/>
31 <local:MediaSlider Margin="0,1.5,0,0" HorizontalAlignment="Stretch" Maximum="100" x:Name="sliderTimeline" Style="{StaticResource progressSliderStyle}" Grid.Column="0" Value="0" Visibility="Visible"/>
32 </Grid>
33 <Grid Grid.Column="2" Margin="4,0,4,0" HorizontalAlignment="Stretch" x:Name="gridCol3" VerticalAlignment="Center">
34 <local:Spinner Margin="0,0,0,0" x:Name="spinner" Width="17" Height="17" HorizontalAlignment="Center" VerticalAlignment="Center"/>
35 </Grid>
36 <Grid Grid.Column="3" Margin="0,10.30,0,10.30" HorizontalAlignment="Stretch" x:Name="gridCol4" Width="70" VerticalAlignment="Stretch" d:LayoutOverrides="Height">
37 <Grid Margin="0,0,0,0" HorizontalAlignment="Right" VerticalAlignment="Center" Width="70">
38 <Grid.ColumnDefinitions>
39 <ColumnDefinition Width="Auto" />
40 <ColumnDefinition Width="*" />
41 </Grid.ColumnDefinitions>
42