Silverlight VideoBrush Overview

A VideoBrush paints an area with video. This topic describes how to use the Microsoft Silverlight VideoBrush to paint shapes and text with video. It also provides examples that show how to interactively control a VideoBrush.

This topic contains the following sections:

  • Prerequisites
  • What Is a VideoBrush?
  • Painting a TextBlock with Video
  • VideoBrush Properties
  • The VideoBrush and MediaElement Relationship

Prerequisites

Because a VideoBrush depends on a MediaElement object to supply a video stream, you should know how to create a MediaElement and use it to open a media file. For an introduction to MediaElement, see the Audio and Video Overview.

What Is a VideoBrush?

A VideoBrush is a type of Brush object similar to a LinearGradientBrush or an ImageBrush. However, instead of painting an area with a gradient or an image, it paints an area with video content. This video content is provided by a MediaElement. As in other brush types, you can use a VideoBrush to paint the Fill of a Rectangle, the Background of a Canvas, or the Foreground of a TextBlock. For more information about other types of brushes, see the Brushes Overview.

Painting a TextBlock with Video

To paint an area with video, you create a MediaElement and a VideoBrush and apply that VideoBrush to the object that you want to paint. In this section, you will use VideoBrush and a MediaElement to paint the TextBlock in the following example.

XAML
<Canvas
  xmlns="https://schemas.microsoft.com/client/2007"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
  <!-- The text to paint. -->
  <TextBlock 
    Canvas.Left="5" Canvas.Top="30"  
    FontFamily="Verdana" FontSize="120" FontWeight="Bold" 
    Text="Video">
  </TextBlock>
</Canvas>

To paint the TextBlock with a video, complete the following steps.

  1. Create a MediaElement and set its Source property to the Uniform Resource Identifier (URI) of the video you want to display.

    XAML
    <Canvas
    
    
    

    xmlns="https://schemas.microsoft.com/client/2007" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"> <MediaElement Source="sampleMedia/Butterfly.wmv" /> <!-- The text to paint. --> <TextBlock Canvas.Left="5" Canvas.Top="30"
    FontFamily="Verdana" FontSize="120" FontWeight="Bold" Text="Video"> </TextBlock> </Canvas>

    1. Assign a name to the MediaElement.

      XAML
      <Canvas
      
      
      

      xmlns="https://schemas.microsoft.com/client/2007" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"> <MediaElement x:Name="myButterflyMediaElement" Source="sampleMedia/Butterfly.wmv" />

      <!-- The text to paint. --> <TextBlock Canvas.Left="5" Canvas.Top="30"
      FontFamily="Verdana" FontSize="120" FontWeight="Bold" Text="Video"> </TextBlock> </Canvas>

      1. Create a VideoBrush and use it to set the Foreground property of the TextBlock. (You could also use the VideoBrush to set any other property that accepts a brush value, such as the Fill of a Rectangle or the Background of a Canvas.)

        XAML
        <Canvas
        
        
        

        xmlns="https://schemas.microsoft.com/client/2007" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"> <MediaElement x:Name="myButterflyMediaElement" Source="sampleMedia/Butterfly.wmv" />

        <!-- The text to paint. --> <TextBlock Canvas.Left="5" Canvas.Top="30"
        FontFamily="Verdana" FontSize="120" FontWeight="Bold" Text="Video"> <TextBlock.Foreground> <VideoBrush /> </TextBlock.Foreground> </TextBlock> </Canvas>

        1. Set the SourceName of the VideoBrush to the name you assigned to the MediaElement in step 2. The text in the TextBox ("video") is now filled with video content.

          XAML
          <Canvas
          
          
          

          xmlns="https://schemas.microsoft.com/client/2007" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"> <MediaElement x:Name="myButterflyMediaElement" Source="sampleMedia/Butterfly.wmv" />

          <!-- The text to paint. --> <TextBlock Canvas.Left="5" Canvas.Top="30"
          FontFamily="Verdana" FontSize="120" FontWeight="Bold" Text="Video"> <TextBlock.Foreground> <VideoBrush SourceName="butterflyMediaElement" /> </TextBlock.Foreground> </TextBlock> </Canvas>

          1. The example now displays two copies of the video: one from the MediaElement you created in step 1 and one from the VideoBrush you just created. To display just one copy of the video, set the Opacity of the MediaElement to 0. To turn off the MediaPlayer object's audio output, set its IsMuted property to true.

            XAML
            <Canvas
            
            
            

            xmlns="https://schemas.microsoft.com/client/2007" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">

            &lt;MediaElement 
              x:Name="butterflyMediaElement" 
              Source="sampleMedia/Butterfly.wmv" IsMuted="True"
              Opacity="0.0" IsHitTestVisible="False" /&gt;
              
            &lt;TextBlock Canvas.Left="5" Canvas.Top="30"  
              FontFamily="Verdana" FontSize="120" 
              FontWeight="Bold" TextWrapping="Wrap"
              Text="Video"&gt;
              
                &lt;!-- Paint the text with video. --&gt;
                &lt;TextBlock.Foreground&gt;
                  &lt;VideoBrush SourceName="butterflyMediaElement" Stretch="UniformToFill" /&gt;
                &lt;/TextBlock.Foreground&gt;
            &lt;/TextBlock&gt;
            

            </Canvas>

            VideoBrush Properties

            In addition to the properties it inherits for being a type of Brush (such as Opacity and RelativeTransform), VideoBrush provides the following additional properties:

            • SourceName: The name of the MediaElement that supplies the brush's video.
            • Stretch: One of the following values that describe how the video content is stretched to fit the painted area: None, Stretch, Uniform, and UniformToFill. The default value is Stretch.

            For more information on its other properties, see VideoBrush.

            The VideoBrush and MediaElement Relationship

            The VideoBrush object's current video frame is determined by its MediaElement. The following illustration depicts the relationship between a MediaElement and a VideoBrush.

            MediaElement and VideoBrush

            MediaElement and VideoBrush

            Note that when a MediaElement loads media and that MediaElement is used by a VideoBrush as its SourceName, the video referenced as the MediaElement Source is downloaded and decoded only one time. You do not suffer significant performance penalties by using a MediaElement and VideoBrush together, even if you choose to have both the MediaElement and VideoBrush display the video.

            By pausing or stopping the MediaElement, you pause or stop the VideoBrush. The following example pauses, stops, and plays a VideoBrush by manipulating its MediaElement source.

            XAML
            <Canvas
              xmlns="https://schemas.microsoft.com/client/2007"
              xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
              
                <MediaElement 
                  x:Name="butterflyMediaElement" 
                  Source="sampleMedia/Butterfly.wmv" IsMuted="True"
                  Opacity="0.0" IsHitTestVisible="False" />
                  
                <TextBlock Canvas.Left="5" Canvas.Top="30"  
                  FontFamily="Verdana" FontSize="120" 
                  FontWeight="Bold" TextWrapping="Wrap"
                  Text="Video">
                  
                    <!-- Paint the text with video. -->
                    <TextBlock.Foreground>
                      <VideoBrush SourceName="butterflyMediaElement" Stretch="UniformToFill" />
                    </TextBlock.Foreground>
                </TextBlock>
              <Canvas Canvas.Left="5" Canvas.Top="200">
                <!-- Play -->
                <Canvas Width="120" Height="20" 
                  MouseLeftButtonDown="playMedia" Background="Transparent">
                  <Rectangle Width="120" Height="20" Stroke="Gray" StrokeThickness="2" />
                  <TextBlock Canvas.Left="10" Text="play" />
                </Canvas>
                <!-- Pause -->
                <Canvas Width="120" Height="20" Canvas.Left="130" 
                  MouseLeftButtonDown="pauseMedia" Background="Transparent">
                  <Rectangle  Width="120" Height="20" Stroke="Gray" StrokeThickness="2" />
                  <TextBlock Canvas.Left="10" Text="pause" />
                </Canvas>
                <!-- Stop -->
                <Canvas Width="120" Height="20" Canvas.Left="260"
                  MouseLeftButtonDown="stopMedia" Background="Transparent">
                  <Rectangle Width="120" Height="20" Stroke="Gray" StrokeThickness="2" />
                  <TextBlock Canvas.Left="10" Text="stop" />
                </Canvas>
              </Canvas>
                
            </Canvas>
            
            JavaScript
            function stopMedia(sender, args) {
                sender.findName("butterflyMediaElement").stop();
            }
            function pauseMedia(sender, args) {
                sender.findName("butterflyMediaElement").pause();
            }
            function playMedia(sender, args) {
                sender.findName("butterflyMediaElement").play();
            }
            

            The previous illustration shows a single VideoBrush, but it is possible for multiple VideoBrush objects to share the same MediaElement.

            Although pausing, stopping, or playing a MediaElement affects its VideoBrush, some MediaElement operations and settings have no effect on the VideoBrush. The following MediaElement methods and properties also manipulate a VideoBrush:

            The following MediaElement methods and properties do not affect VideoBrush:

            See Also

            Brushes Overview
            Audio and Video Overview
            MediaElement
            VideoBrush
            Overviews and How-to Topics