Media控件

Windows Phone 7提供了对图像，音频与视频等多媒体应用的控件。

 

图像控件Image

Windows Phone的图像控件只支持JPG与PNG格式的图片，如果是XNA的话还会支持GIF格式的图片，像常用的BMP格式的图片在这里是不能使用的。这一点 是需要注意的，图片控件使用的格式就是或者。

两个重要的属性：

Source，通过指定它的Source属性可以用来显示本地或者是网络中的图片，但是注意使用网络资源的时候要使用绝对路径。

Stretch，这个属性用来指定图像应该如何拉伸以填充目标矩形。它的取值有：

 

None， 内容保持其原始大小。

Fill，调整内容的大小以填充目标尺寸。 不保留纵横比。

Uniform，在保留内容原有纵横比的同时调整内容的大小，以适合目标尺寸。

UniformToFill，在保留内容原有纵横比的同时调整内容的大小，以填充目标尺寸。 如果目标矩形的纵横比不同于源矩形的纵横比，则对源内容进行剪裁以适合目标尺寸。

 

如果希望动态加载图片，则可以在代码中使用：new BitmapImage来给Source属性赋值。

 

多媒体播放控件MediaElement

多媒体播放控件可以用来播放本地和网络上的多媒体文件，同样是通过制定MediaElement的Source属性即可。通过属性IsMuted的 属性设置可以控制是否静音，通过设置AutoPlay的值，可以控制该 Source 媒体是否将自动开始播放。常用方法有Play，播放；Stop，停止；Pause，暂停。

另外，Windows Phone支持的多媒体格式见

下面就来简单地看一下这两个控件的使用情况，在以后了解了独立存储与墓碑机制后我们可以简单地做一个播放器。

在项目中添加一个页面MediaControls.xaml，我们的目的是要点击一个按钮显示本地图片，点击另一个按钮显示网络图片，通过 radiobutton1来控制播放本地音乐，使用radioButton2来播放在线视频。在这里，项目中创建两个文件夹，分别为images和 musics，在image中放置一张图片，我在这里放的是“3.jpg”，并将它的生成操作属性设置为“Resource”，在musics中放置一首 音乐，我在这里放的是“陈奕迅 - 浮夸.mp3”。然后我使用的在线图片资源是：“ /T140KqXgRgXXXXXXXX-152-202.jpg”，我使用的在线视频资源是“http: //res2.windows.microsoft.com/resbox/zh-CN/Windows%207/main/c/3/c34124dd- e61e-41b2-b9ea-1ff020a0cf09/c34124dd-e61e-41b2-b9ea-1ff020a0cf09.wmv”。在代 码中涉及到的事件主要是Button的点击事件和RadioButton的Checked事件。设计的界面的代码如下：

<phone:PhoneApplicationPage
x:Class="Controls.Media"
xmlns=""
xmlns:x=""
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d=""
xmlns:mc=""
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
shell:SystemTray.IsVisible="True">


<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
Grid.RowDefinitions>


<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="我的应用程序" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="页面名称" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
StackPanel>


<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Image Height="230" HorizontalAlignment="Left" Margin="209,6,0,0" Name="myImage" Stretch="Fill" VerticalAlignment="Top" Width="241" />
<Button Content="本地图片" Height="72" HorizontalAlignment="Left" Margin="12,36,0,0"
Name="btnNative" VerticalAlignment="Top" Width="160" Click="btnNative_Click" />
<Button Content="网络图片" Height="72" HorizontalAlignment="Left" Margin="12,101,0,0"
Name="btnWeb" VerticalAlignment="Top" Width="160" Click="btnWeb_Click"/>
<RadioButton Content="本地音乐" Height="72" HorizontalAlignment="Left" Margin="17,295,0,0"
Name="rabNative" VerticalAlignment="Top" IsChecked="True"
Checked="rabNative_Checked"/>
<RadioButton Content="网络视频" Height="72" HorizontalAlignment="Left" Margin="234,295,0,0"
Name="rabWeb" VerticalAlignment="Top"
Checked="rabWeb_Checked"/>
<MediaElement Height="228"
HorizontalAlignment="Left"
Margin="209,373,0,0" Name="myMediaElement" Source="musics/陈奕迅 - 浮夸.mp3"
VerticalAlignment="Top" Width="241"/>
<Button Content="开始" Height="72"
HorizontalAlignment="Left" Margin="17,373,0,0"
Name="btnStart" VerticalAlignment="Top"
Width="160" Click="btnStart_Click" />
<Button Content="停止" Height="72"
HorizontalAlignment="Left" Margin="17,451,0,0"
Name="btnStop" VerticalAlignment="Top"
Width="160" Click="btnStop_Click"/>
<Button Content="暂停" Height="72"
HorizontalAlignment="Left"
Margin="17,529,0,0" Name="btnPause"
VerticalAlignment="Top" Width="160"
Click="btnPause_Click"/>
Grid>
Grid>

phone:PhoneApplicationPage>

后台代码为：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.Windows.Media.Imaging;

namespace Controls
{
public partial class Media : PhoneApplicationPage
{
private const string webImage = @"/T140KqXgRgXXXXXXXX-152-202.jpg";
private const string nativeImage = "images/3.jpg";
private string path = "musics/陈奕迅 - 浮夸.mp3";

public Media()
{
InitializeComponent();
myMediaElement.Source = new Uri(path, UriKind.Relative);
}

private void rabNative_Checked(object sender, RoutedEventArgs e)
{
if (myMediaElement != null)
{
path = "musics/陈奕迅 - 浮夸.mp3";
myMediaElement.Source = new Uri(path, UriKind.Relative);
}
}

private void rabWeb_Checked(object sender, RoutedEventArgs e)
{
string path = @"%207/main/c/3/c34124dd-e61e-41b2-b9ea-1ff020a0cf09/c34124dd-e61e-41b2-b9ea-1ff020a0cf09.wmv";
myMediaElement.Source = new Uri(path,UriKind.Absolute);
}

private void btnStart_Click(object sender, RoutedEventArgs e)
{
myMediaElement.Play();
}

private void btnStop_Click(object sender, RoutedEventArgs e)
{
myMediaElement.Stop();
}

private void btnPause_Click(object sender, RoutedEventArgs e)
{
myMediaElement.Pause();
}

private void btnNative_Click(object sender, RoutedEventArgs e)
{
myImage.Source = new BitmapImage(new Uri(nativeImage,UriKind.RelativeOrAbsolute));
}

private void btnWeb_Click(object sender, RoutedEventArgs e)
{
ImageSource myImageSource = new BitmapImage(new Uri(webImage,UriKind.Absolute));
myImage.Source = myImageSource;
}
}
}

执行效果1.本地图片和本地音乐

执行效果2.在线图片和在线视频