WPF/E CTP Quick Start - 第八部分：媒體（翻譯）

weixin_34377065發表於2006-12-12
UI

WPF/E提供了MediaElement物件，可以讓您在頁面中播放WMV（Windows Media Video）和WMA（Windows Media Audio）檔案。

這篇文件包含了以下部分：

 

在頁面中新增媒體資訊

如果需要在頁面中新增媒體資訊，您需要建立一個MediaElement元素，並將它的Source屬性指向您的媒體檔案。下面則是一個示例：

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
    <MediaElement Source="xbox.wmv" Width="300" Height="300" />
</Canvas>

重新開始檢視內容

就像其它UIElement物件一樣，您可以在MediaElement物件之上繪製圖形。下面的示例將在上一個例子的基礎上，將一個Ellipse新增到MediaElement元素之上。

<Canvas Width="300" Height="300"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   
    <MediaElement Source="xbox.wmv" Width="300" Height="300" />
  
    <Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30"
        Stroke="Black" StrokeThickness="10" Fill="SlateBlue"
        Opacity="0.6" />
</Canvas>

重新開始檢視內容

 

有用的MediaElement屬性

MediaElement物件除了它作為一個UIElement物件所具有的屬性，例如Opacity和Clip之外，還有一些額外的屬性。MediaElement提供了一些媒體專有的屬性：

  • Stretch：指定了一個視訊是如何縮放以填充MediaElement元素的。它可能的值有None、Uniform、UniformToFill和Fill。它的預設值為Fill。請參考WPF/E的SDK中關於Stetch屬性的部分，以獲得更多資訊。
  • IsMuted：指定了MediaElement是否靜音，把它設為True就能使MediaElement靜音，它的預設值為False。
  • Volume：使用0到1之間的值指定MediaElement的音量，1表示最響。它的預設值為0.5。

請參考WPF/E的SDK以得到更多MediaElement的屬性資訊。

 

互動式地控制媒體的播放

您可以使用play、pause和stop等方法互動式地控制媒體的播放。下面的示例使用了play、pause和stop方法來互動式地控制媒體的播放。

<Canvas Width="300" Height="300"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <MediaElement x:Name="media" Source="xbox.wmv" Width="300" Height="300" />

    <!-- Stops media playback.-->        
    <Canvas MouseLeftButtonDown="javascript:media_stop" Canvas.Left="20" Canvas.Top="260">
        <Rectangle Stroke="Black" 
             Height="40" Width="40" RadiusX="5" RadiusY="5">
            <Rectangle.Fill>
                <RadialGradientBrush GradientOrigin="0.75,0.25">
                    <GradientStop Color="Orange" Offset="0.0" />
                    <GradientStop Color="Red" Offset="1.0" />                
                </RadialGradientBrush>
            </Rectangle.Fill>             
        </Rectangle>
        <TextBlock Canvas.Left="5" Canvas.Top="5">stop</TextBlock> 
    </Canvas>

    <!-- Pauses media playback. -->
    <Canvas MouseLeftButtonDown="javascript:media_pause" 
         Canvas.Left="70" Canvas.Top="260">
        <Rectangle Stroke="Black" 
             Height="40" Width="50" RadiusX="5" RadiusY="5">
            <Rectangle.Fill>
                <RadialGradientBrush GradientOrigin="0.75,0.25">
                    <GradientStop Color="Yellow" Offset="0.0" />
                    <GradientStop Color="Orange" Offset="1.0" />                
                </RadialGradientBrush>
            </Rectangle.Fill>             
        </Rectangle>
        <TextBlock Canvas.Left="5" Canvas.Top="5">pause</TextBlock> 
    </Canvas>

    <!-- Begins media playback. -->
    <Canvas MouseLeftButtonDown="javascript:media_begin" Canvas.Left="130" Canvas.Top="260">
        <Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
             Height="40" Width="50">
            <Rectangle.Fill>
                <RadialGradientBrush GradientOrigin="0.75,0.25">
                    <GradientStop Color="LimeGreen" Offset="0.0" />
                    <GradientStop Color="Green" Offset="1.0" />                
                </RadialGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <TextBlock Canvas.Left="5" Canvas.Top="5">play</TextBlock> 
    </Canvas>

</Canvas>
function media_stop(sender, args) {
    sender.findName("media").stop();
}

function media_pause(sender, args) {
    sender.findName("media").pause();
}

function media_begin(sender, args) {
    sender.findName("media").play();
}

重新開始檢視內容

 

下面該做什麼呢？

在下一部分“動畫”中，您會了解如何使用標記來定義動畫，以及EventTrigger和Storyboard物件的使用方式。

相關文章