Silverlight2 边学边练 之五 视频

与前一篇类似，Silverlight2对于视频的操作也是通过MediaElement。
本篇通过VideoBrush对文字进行渲染处理，同时在倒影中使用视频翻转。
看到有的博友将Silverlight示例嵌入到博客中很是眼馋，似乎需要一个DemoServer才
可以实现。咳！没这条件啊，哪有Free的能用啊？！在没有Server支持前还是先用Picture吧:)

效果图奉上

注意，在调用视频文件时，Height与Width都要设置为“0” ，为什么？自己把他们删了看看效果便知。

<MediaElement x:Name="fireMovie" Source="fire.wmv" MediaEnded="fireMovie_MediaEnded"
              Height="0" Width="0"></MediaElement>

XAML Code:

<UserControl x:Class="VideoBrush.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <!--调用火焰视频，下面要用于渲染文字。-->
        <MediaElement x:Name="fireMovie" Source="fire.wmv" MediaEnded="fireMovie_MediaEnded"
                      Height="0" Width="0"></MediaElement>
        
        <!--将文字通过VideoBrush进行渲染-->
        <TextBlock Grid.Row="0" Text="Silverlight2" FontFamily="Arial Black" FontSize="80">
            <TextBlock.Foreground>
                <VideoBrush SourceName="fireMovie"></VideoBrush>
            </TextBlock.Foreground>
        </TextBlock>
        
        <!--创建反转文字-->
        <TextBlock Grid.Row="1" Text="Silverlight2" FontFamily="Arial Black" FontSize="80"
                   RenderTransformOrigin="0.5,0.4">
            <!--将文字反转-->
            <TextBlock.RenderTransform>
                <ScaleTransform ScaleY="-1"></ScaleTransform>
            </TextBlock.RenderTransform>
            <!--给反转文字进行视频渲染-->
            <TextBlock.Foreground>
                <VideoBrush SourceName="fireMovie">
                    <!--将视频反转-->
                    <VideoBrush.RelativeTransform>
                        <ScaleTransform ScaleY="-1" CenterY="0.5"></ScaleTransform>
                    </VideoBrush.RelativeTransform>
                </VideoBrush>
            </TextBlock.Foreground>
            <!--给反转文字增加一个蒙版效果-->
            <TextBlock.OpacityMask>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <GradientStop Color="Transparent" Offset="0"></GradientStop>
                    <GradientStop Color="Black" Offset="1"></GradientStop>
                </LinearGradientBrush>
            </TextBlock.OpacityMask>
        </TextBlock>
    </Grid>
</UserControl>

然后，让视频重复播放起来。
C# Code:

private void fireMovie_MediaEnded(object sender, RoutedEventArgs e)
{
  fireMovie.Stop();
  fireMovie.Play();
}

本例参考自《Pro Silverlight 2 in C# 2008》CHAPTER 10 SOUND, VIDEO, AND DEEP ZOOM
::源代码下载::