Windows Phone開發（20）：當MediaElement和VideoBrush合作的時候

標籤：多少   wrap   讀取   static   false   圖形   mp4   stack   window   

前面說的那麼多控制項都是“靜態”的，都是“啞吧”的，今天，你有沒有興趣研究一下，既能“有聲有色”又操作簡單的控制項嗎？如果有，請隨我來。

 

 

MediaElement播放多媒體檔案。

 

首先，隆重介紹一下MediaElement，為什麼要隆重呢？因為它簡單，真的，你一定會玩的，但是，MediaElement功能強大，它可以播放音頻和視頻，只要支援的格式就行了。

要設定播放的音頻或視頻檔案，你只需要設定Source屬性即可，它其實就是一個URI，如果要播放你項目中的媒體檔案，你先要把媒體檔案添加到你的項目中，把它的產生操作設定為資源，不用我說了，都會了吧。

你一定會問，能播放網路的URI指向的媒體檔案嗎？呵，你試一試就知道了。

閑話不扯了，開始做練習，首先自備一個3gp或MP4檔案，你自己隨便找一個，當然，其它格式也可以，呵呵，只要支援就行了，因為我們在模擬器中觀看效果，所以最後用一些常用的格式，模擬器不是所有的媒體檔案都能支援，具體請參考SDK文檔相關說明。

MediaElement是非常易用的，我簡單說說它的一些常用的屬性，相信你自己研究兩下就懂的。
1、Source：剛才說了，就是你要播放的媒體檔案；
2、AutoPlay：是否自動播放，呵，這個估計你比我更懂了；
3、Balance：立體聲左右聲道的音量比，就是一個平衡值，從-1到1，0在中間，所以是預設值；
4、Stretch：與Image控制項一樣，如何展開，或者保持縱橫比；
5、Volume：音量，0-1範圍內，預設0.5.

好的，下面看看第一個練習的布局。

 

 

1. <phone:PhoneApplicationPage.Resources>  
2.     <LinearGradientBrush x:Key="pathFill" StartPoint="0.5,0" EndPoint="0.5,1">  
3.         <GradientStop Color="LightGreen" Offset="0"/>  
4.         <GradientStop Color="Orange" Offset="1"/>  
5.     </LinearGradientBrush>  
6.     <Style x:Key="btnStyle" TargetType="Button">  
7.         <Setter Property="Height" Value="80"/>  
8.         <Setter Property="Width" Value="80"/>  
9.         <Setter Property="HorizontalContentAlignment" Value="Stretch"/>  
10.         <Setter Property="VerticalContentAlignment" Value="Stretch"/>  
11.         <Setter Property="BorderThickness" Value="0"/>  
12.     </Style>  
13. </phone:PhoneApplicationPage.Resources>  
14. <Grid>  
15.     <Grid.ColumnDefinitions>  
16.         <ColumnDefinition Width="*"/>  
17.         <ColumnDefinition Width="auto"/>  
18.     </Grid.ColumnDefinitions>  
19.     <StackPanel Orientation="Vertical"  
20.                 Grid.Column="1">  
21.         <Button Name="btnPlay" Style="{StaticResource btnStyle}" Click="btnPlay_Click">  
22.             <Button.Content>  
23.                 <Path Data="M0,0 L0,40 L40,20 Z" Fill="{StaticResource pathFill}" HorizontalAlignment="Center" VerticalAlignment="Center" />  
24.             </Button.Content>  
25.         </Button>  
26.         <Button Name="btnPause" Style="{StaticResource btnStyle}" Click="btnPause_Click">  
27.             <Button.Content>  
28.                 <Path Data="M0,0 L0,40 L15,40 L15,0 Z M25,0 L25,40 L40,40 L40,0" Fill="{StaticResource pathFill}" HorizontalAlignment="Center" VerticalAlignment="Center" />  
29.             </Button.Content>  
30.         </Button>  
31.         <Button Name="btnStop" Style="{StaticResource btnStyle}" Click="btnStop_Click">  
32.             <Button.Content>  
33.                 <Path Data="M0,0 L0,40 L40,40 L40,0 Z" Fill="{StaticResource pathFill}" HorizontalAlignment="Center" VerticalAlignment="Center" />  
34.             </Button.Content>  
35.         </Button>  
36.   
37.     </StackPanel>  
38.       
39.     <MediaElement x:Name="me" Grid.Column="0"  
40.                   Source="2.mp4" AutoPlay="False"/>  
41. </Grid>  

 

 

說明一下，每個按鈕上的圖形是我手畫上去的，Content屬性設定為Path對象就可以繪製和填充路徑，為了簡明，我使用了路徑標記法，不用急，我後面的文章會介紹。

繼續把背景代碼寫完，更簡單了，就幾個方法的調用。

 

1. private void btnPlay_Click(object sender, RoutedEventArgs e)  
2. {  
3.     this.me.Play();  
4. }  
5.   
6. private void btnPause_Click(object sender, RoutedEventArgs e)  
7. {  
8.     this.me.Pause();  
9. }  
10.   
11. private void btnStop_Click(object sender, RoutedEventArgs e)  
12. {  
13.     this.me.Stop();  
14. }  

 

 

 

 

把MediaElement和VideoBrush結合使用。

 

這是我們的第二個練習，VideoBrush也是一種畫刷，但它很特殊，它不用單色，不用漸層顏色，它用視頻來充填對象的表面，如元素的背景畫刷，前景畫刷等。

VideoBrush只要把SourceName的屬性值設定為MediaElement的名字即可，也就是說，VideoBrush的源是來自MediaElement對象，你既可以兩個同時使用，當然，如果你只希望用VideoBrush，那就把MediaElement的Visibility屬性設定為Collapsed。

有一點要說明，儘管在你的頁面中同時用到了MediaElement和VideoBrush，但是，在其內部，其實唯讀取一次資料，所以，引用多少個媒體檔案只取決於MediaElement類，無論你在頁面使用多少個VideoBrush，對效能是沒有任何影響的，前面我們說過資源，相信大家還記得，資源就是提高可重用率，不必要每次都要建立資源，不然會大大有損效能，項目中的檔案，上面說了，你只要把的產生操作設為資源，它就可以重複使用，而不會說我每增加一個引用就分配一個新執行個體，這不需要，資源執行個體只需建立一次即可，可以供多處重複引用。

如果不使用資源，你想象一下是多麼恐怖的事，假如一段MP3有2000個位元組，如果你每用到它都要在記憶體中new一個，如果我同時使用100個這個對象，就是100 * 2000 ＝ 200000位元組，這樣記憶體都被你耗盡了，然而如果是資源呢？只要它被建立，一直就是同一個引用，記憶體只為它分配2000個位元組，無論你同時有1000個地方在引用它，指向的都是同一塊記憶體地區，哈，不知道這樣解釋，夠不夠通俗易懂呢？

OK，就吹到這兒，下面我們再練一例，在TextBlock上顯示Hello，但我希望這個TextBlock的前景不是使用顏色來填充，而是用視頻來填充，這樣一來，這段文字看起來就有聲有色了，是啊，你有沒有想起Flash裡面的濾罩層？但現在你可以通過VideoBrush類輕鬆地實現。

 

1. <Grid>  
2.     <MediaElement x:Name="me" Source="2.mp4" Visibility="Collapsed"/>  
3.     <TextBlock x:Name="txt" Text="Hello" HorizontalAlignment="Center" FontFamily="Arial Black" FontSize="250" TextWrapping="Wrap">  
4.         <TextBlock.Foreground>  
5.             <VideoBrush AlignmentX="Center" AlignmentY="Center" Stretch="Uniform"  
6.                         SourceName="me"/>  
7.         </TextBlock.Foreground>  
8.     </TextBlock>  
9. </Grid>  

 

 

還記得前兩節課說過的變換和三維透視嗎？你不妨自己試試，知識就是通過“滾雪球”方式一點一點累積起來，所以，我強烈建議你去改一下上面的代碼，把上兩節的內容和本節的內容結合，看看能不能做出很美觀的特效出來。

Windows Phone開發（20）：當MediaElement和VideoBrush合作的時候