How to: Paint an Area with a Video

This example shows how to paint an area with media. One way to paint an area with media is to use a MediaElement together with a VisualBrush. Use the MediaElement to load and play the media, and then use it to set the Visual property of the VisualBrush. You can then use the VisualBrush to paint an area with the loaded media.

The following example uses a MediaElement and a VisualBrush to paint the Foreground of a TextBlock control with video. This example sets the IsMuted property of the MediaElement to true so that it produces no sound.

MediaElement myMediaElement = new MediaElement();
myMediaElement.Source = new Uri("sampleMedia\\xbox.wmv", UriKind.Relative);
myMediaElement.IsMuted = true;

VisualBrush myVisualBrush = new VisualBrush();
myVisualBrush.Visual = myMediaElement;

TextBlock myTextBlock = new TextBlock();
myTextBlock.FontSize = 150;
myTextBlock.Text = "Some Text";
myTextBlock.FontWeight = FontWeights.Bold;

myTextBlock.Foreground = myVisualBrush;
<TextBlock FontSize="100pt" Text="Some Text" FontWeight="Bold">
  <TextBlock.Foreground>
    <VisualBrush>
      <VisualBrush.Visual>
        <MediaElement Source="sampleMedia\xbox.wmv" IsMuted="True" />
      </VisualBrush.Visual>
    </VisualBrush>
  </TextBlock.Foreground>
</TextBlock>

Because VisualBrush inherits from the TileBrush class, it provides several tiling modes. By setting the TileMode property of a VisualBrush to Tile and by setting its Viewport property to a value smaller than the area that you are painting, you can create a tiled pattern.

The following example is identical to the previous example, except that the VisualBrush generates a pattern from the video.

MediaElement myMediaElement = new MediaElement();
myMediaElement.Source = new Uri("sampleMedia\\xbox.wmv", UriKind.Relative);
myMediaElement.IsMuted = true;

VisualBrush myVisualBrush = new VisualBrush();
myVisualBrush.Viewport = new Rect(0, 0, 0.5, 0.5);
myVisualBrush.TileMode = TileMode.Tile;
myVisualBrush.Visual = myMediaElement;

TextBlock myTextBlock = new TextBlock();
myTextBlock.FontSize = 150;
myTextBlock.Text = "Some Text";
myTextBlock.FontWeight = FontWeights.Bold;

myTextBlock.Foreground = myVisualBrush;
<TextBlock FontSize="100pt" Text="Some Text" FontWeight="Bold">
  <TextBlock.Foreground>
    <VisualBrush Viewport="0,0,0.5,0.5" TileMode="Tile">
      <VisualBrush.Visual>

        <MediaElement Source="sampleMedia\xbox.wmv" IsMuted="True" /> 
      </VisualBrush.Visual>
    </VisualBrush>
  </TextBlock.Foreground>
</TextBlock>

For information about how to add a content file, such as a media file, to your application, see WPF Application Resource, Content, and Data Files. When you add a media file, you must add it as a content file, not as a resource file.

Was this page helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft