VideoBrush Overview

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

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

Run this sample

In this section, you will use VideoBrush and a MediaElement to paint the TextBlock shown in the following 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

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 describes 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 and MediaElement Relationship

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

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 plays, pauses, and stops a VideoBrush by manipulating its MediaElement source.

Run this sample

<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 Click="PlayMedia" Grid.Row="1" Grid.Column="0" 
    Width="120" Height="20" Content="Play" />

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

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

</Grid>

Private Sub PlayMedia(ByVal sender As Object, ByVal e As RoutedEventArgs)
    butterflyMediaElement.Play()
End Sub

Private Sub StopMedia(ByVal sender As Object, ByVal e As RoutedEventArgs)
    butterflyMediaElement.Stop()
End Sub

Private Sub PauseMedia(ByVal sender As Object, ByVal e As RoutedEventArgs)
    butterflyMediaElement.Pause()
End Sub

private void PlayMedia(object sender, RoutedEventArgs e)
{
    butterflyMediaElement.Play();
}
private void StopMedia(object sender, RoutedEventArgs e)
{
    butterflyMediaElement.Stop();
}
private void PauseMedia(object sender, RoutedEventArgs e)
{
    butterflyMediaElement.Pause();
}

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

Although playing, pausing, or stopping 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

See Also

Reference

Concepts

Other Resources