VideoBrush Overview
Microsoft Silverlight will reach end of support after October 2021. Learn more.
A VideoBrush paints an area with video. This topic describes how to use the 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
- Related Topics
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).
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.
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>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>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>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>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>
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.
MediaElement and VideoBrush
.png "Videobrush diagram.")
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.
<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:
The following MediaElement methods and properties do not affect VideoBrush:
See Also