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 Audio and Video Overview (Silverlight 2).

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 Brushes (Silverlight 2).

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 (see the example below).

Run this sample.

In this section, you will use VideoBrush and a MediaElement to paint the TextBlock below.

 [xaml]
<Canvas>

  <!-- 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.

   <Canvas> <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>

2. Assign a name to the MediaElement.

   <Canvas> <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>

3. 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.)

   <Canvas> <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>

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

   <Canvas> <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>

5. 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 MediaElement object's audio output, set its IsMuted property to true.

    <Grid x:Name="LayoutRoot" Background="White">

      <MediaElement 
      x:Name="butterflyMediaElement" 
      Source="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>

    </Grid>

Run this sample.

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 other properties of this object, see VideoBrush.

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

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.

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

            <MediaElement 
            x:Name="butterflyMediaElement" 
            Source="Butterfly.wmv" IsMuted="True"
            Opacity="0.0" IsHitTestVisible="False" />

            <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3"  
             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>



            <!-- Play -->
            <Button MouseLeftButtonDown="PlayMedia" Grid.Row="1" Grid.Column="0" 
                    Width="120" Height="20" Content="Play" />
        
            <!-- Pause -->
            <Button MouseLeftButtonDown="PauseMedia" Grid.Row="1" Grid.Column="1" 
                    Width="120" Height="20" Content="Pause" />

            <!-- Stop -->
            <Button MouseLeftButtonDown="StopMedia" Grid.Row="1" Grid.Column="2" 
                    Width="120" Height="20" Content="Stop" />

    </Grid>

public void PlayMedia(object sender, MouseEventArgs e)
{
    butterflyMediaElement.Play();
}

public void StopMedia(object sender, MouseEventArgs e)
{
    butterflyMediaElement.Stop();
}
public void PauseMedia(object sender, MouseEventArgs e)
{
    butterflyMediaElement.Pause();
}

Run this sample.

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:

• Play

• Pause

• Stop

• Position

The following MediaElement methods and properties do not affect VideoBrush:

• Clip

• Height

• IsHitTestVisible

• Opacity

• Stretch

• Transform

• Width

Concepts

Reference

Other Resources