Windows Phone开发(20):当MediaElement和VideoBrush合作的时候

原文:Windows Phone开发(20):当MediaElement和VideoBrush合作的时候

前面说的那么多控件都是“静态”的,都是“哑吧”的,今天,你有没有兴趣研究一下,既能“有声有色”又操作简单的控件吗?如果有,请随我来。

 

 

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.

好的,下面看看第一个练习的布局。

 

 

    <phone:PhoneApplicationPage.Resources>
        <LinearGradientBrush x:Key="pathFill" StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Color="LightGreen" Offset="0"/>
            <GradientStop Color="Orange" Offset="1"/>
        </LinearGradientBrush>
        <Style x:Key="btnStyle" TargetType="Button">
            <Setter Property="Height" Value="80"/>
            <Setter Property="Width" Value="80"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="BorderThickness" Value="0"/>
        </Style>
    </phone:PhoneApplicationPage.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="auto"/>
        </Grid.ColumnDefinitions>
        <StackPanel Orientation="Vertical"
                    Grid.Column="1">
            <Button Name="btnPlay" Style="{StaticResource btnStyle}" Click="btnPlay_Click">
                <Button.Content>
                    <Path Data="M0,0 L0,40 L40,20 Z" Fill="{StaticResource pathFill}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Button.Content>
            </Button>
            <Button Name="btnPause" Style="{StaticResource btnStyle}" Click="btnPause_Click">
                <Button.Content>
                    <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" />
                </Button.Content>
            </Button>
            <Button Name="btnStop" Style="{StaticResource btnStyle}" Click="btnStop_Click">
                <Button.Content>
                    <Path Data="M0,0 L0,40 L40,40 L40,0 Z" Fill="{StaticResource pathFill}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Button.Content>
            </Button>

        </StackPanel>

        <MediaElement x:Name="me" Grid.Column="0"
                      Source="2.mp4" AutoPlay="False"/>
    </Grid>

 

 

说明一下,每个按钮上的图形是我手画上去的,Content属性设置为Path对象就可以绘制和填充路径,为了简明,我使用了路径标记法,不用急,我后面的文章会介绍。

继续把后台的代码写完,更简单了,就几个方法的调用。

 

        private void btnPlay_Click(object sender, RoutedEventArgs e)
        {
            this.me.Play();
        }

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

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

 

 

 

 

把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类轻松地实现。

 

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

 

 

还记得前两节课说过的变换和三维透视吗?你不妨自己试试,知识就是通过“滚雪球”方式一点一点累积起来,所以,我强烈建议你去改一下上面的代码,把上两节的内容和本节的内容结合,看看能不能做出很美观的特效出来。

时间: 2024-11-03 23:54:04

Windows Phone开发(20):当MediaElement和VideoBrush合作的时候的相关文章

Windows Phone开发(31):画刷

原文:Windows Phone开发(31):画刷 画刷是啥玩意儿?哈,其实画刷是用来涂鸦,真的,没骗你,至于你信不信,反正我信了. 本文通过价绍几个典型的画刷,使你明白画刷就是用来涂鸦的.   一.纯色画刷SolidColorBrush. 这个家伙比较"纯",当然它不是装纯,的确很纯,纯到只用一种颜色,所以叫"单色画刷". 来,看看这个示例,我们画一个矩形(放在一个Canvas中),然后用这个纯家伙来打扮一下. <Rectangle Canvas.Left=

Windows 8开发入门(六)Windows 8中的Popup使用方式

在上一篇文章中我们将了替代Silverlight中MessageBox的MessageDialog控件,本篇文章将讲诉另外一种弹 出提示窗口的控件Popup. 一.我们认识Popup控件的IsLightDismissEnabled属性,这个属性设置为 true的时候,点击非Popup控件外任何区域将关闭Popup. <Button Content="弹出窗口一" Name="btn1" Width="108" Margin="16

Windows Phone开发(40):漫谈关键帧动画之中篇

原文:Windows Phone开发(40):漫谈关键帧动画之中篇 一.DiscreteDoubleKeyFrame 离散型关键帧动画,重点,我们理解一下"离散"的意思,其实你查一下<新华字典>,"离"和"散"的意思相近.我们可以这样解释:每个关键帧之间是直接过渡,其间不经过动画插补.似乎这样理解有点苦涩难懂,所以,我们还是从实例入手. 请参考以下XAML代码写一个示例: <Grid Loaded="OnGridLoa

Windows Phone开发(36):动画之DoubleAnimation

原文:Windows Phone开发(36):动画之DoubleAnimation 从本节开始,我们将围绕一个有趣的话题展开讨论--动画. 看到动画一词,你一定想到Flash,毕竟WP应用的一个很重要的框架是Silverlight,在WP中也发挥了Silverlight的许多优点,可能不少人说,Silverlight就是和Flash差不多吧,当你深入了解了Silverlight后,你会发现,其实不然,Silverlight更偏重于数据处和企业级应用.   好了,F话不多说,开始吹我们今天的牛皮吧

Windows 10开发基础——文件、文件夹和库(一)

原文:Windows 10开发基础--文件.文件夹和库(一) 主要内容:      1.枚举查询文件和文件夹      2.文本文件读写的三种方法--创建写入和读取文件      3.获得文件的属性   枚举查询文件和文件夹 先了解一下文件查询的几个方法: StorageFolder.GetFilesAsync: 获取当前文件夹中的所有文件,返回一个 IReadOnlyList<StorageFile>集合          IReadOnlyList<StorageFile> f

【万里征程——Windows App开发】SemanticZoom视图切换

相信用过Windows Phone或者Windows 8/8.1/10的朋友对下面这张截图肯定不陌生.这就是通过SemanticZoom来实现的,当数据过多时,这种控件尤其适用.它有一个放大视图ZoomedInView和一个缩小试图ZoomedOutView,前者主要用来显示当前页面的详细信息,后者则致力于快速导航. 那么我就自己来动手实践咯,首先我们在XAML中添加大致的界面,就像画画要先画轮廓一样. <Grid Name="grid1" Background="{T

【万里征程——Windows App开发】应用栏

基本的用法我们在 [万里征程--Windows App开发]页面布局和基本导航中已经讲过了,这里继续补充关于应用栏的更多用法. Icon 在之前的学习中,我们知道Icon属性中有很多很多系统预定义,但也许这些还是不够的,现在就来增加几种用法咯. 字符集应用 <AppBarToggleButton Label="Sigma" Click="AppBarButton_Click"> <AppBarToggleButton.Icon> <Fo

Windows Phone 开发——相机功能开发

原文:Windows Phone 开发--相机功能开发 相机功能是手机区别于PC的一大功能,在做手机应用时,如果合理的利用了拍照功能,可能会给自己的应用增色很多.使用Windows Phone的相机功能,有两种方法,一种是使用PhotoCamera类来构建自己的相机UI,另外一种是通过CameraCaptureTask选择器来实现该功能. 他们的区别是: PhotoCamera类允许应用控制照片属性,如 ISO.曝光补偿和手动对焦位置,应用可以对照片有更多的控制,当然也会麻烦很多.需要实现闪光灯

Windows Phone开发(23):启动器与选择器之CameraCaptureTask和PhotoChooserTask

原文:Windows Phone开发(23):启动器与选择器之CameraCaptureTask和PhotoChooserTask 这两个组件都属于选择器,而且它们也有很多相似的地方,最明显的上一点,它们都是用来选择图片.     一.CameraCaptureTask选择器.   它用于启动照相机,当你拍下照片后,自动把照的字节流返回给调用方应用程序.前文说过,启动器和选择的使用方法和步骤都是一样的.对于CameraCaptureTask组件也如此,不过注意的一点是,处理Completed事件