Jesse Liberty - Silverlight Geek

Did You Know That... The Target of Video Brushes Is Not The Video

When you use an image brush, the target of the brush is the image you wish to display,

<Rectangle x:Name="myRectImage"
           Width="100"
           Height="44"
         Canvas.Left="0"
         Canvas.Top = "500"
           StrokeThickness="2"
           Stroke="Black" >
  <Rectangle.Fill>
    <ImageBrush ImageSource="Picture.jpg" />
  </Rectangle.Fill>
</Rectangle>

<Ellipse x:Name="myEllipseImage"
         Width="100"
         Height="44"
         Canvas.Left="110"
         Canvas.Top = "500"
         StrokeThickness="2"
         Stroke="Blue" >
  <Ellipse.Fill>
    <ImageBrush ImageSource="Picture.jpg" />
  </Ellipse.Fill>
</Ellipse>

Assuming you have a jpeg file in your directory named Picture, the ImageBrush will find it and display it,

If, however, you wish to display a video, you can not write your code by simply pointing the VideoBrush to the video image, as you might expect, (even if Butterfly.wmv is in the correct directory)

<Rectangle x:Name="myRectVideoBroken"
           Width="100"
           Height="44"
         Canvas.Left="0"
         Canvas.Top = "500"
           StrokeThickness="2"
           Stroke="Black" >
  <Rectangle.Fill>
     <!-- Won't work!!-->
    <VideoBrush VideoSource="Butterfly.wmv" />
  </Rectangle.Fill>
</Rectangle>

<Ellipse x:Name="myEllipseVideoBroken"
         Width="100"
         Height="44"
         Canvas.Left="110"
         Canvas.Top = "500"
         StrokeThickness="2"
         Stroke="Blue" >
  <Ellipse.Fill>
         <!-- Won't work!!-->
    <VideoBrush VideoSource="Butterfly.wmv" />
  </Ellipse.Fill>
</Ellipse>

Unfortunately, this will generate nothing more than an error message,

Video brushes require that their source be a MediaElement, whose source, in turn, is the video you wish to display.

<MediaElement
  x:Name="butterflyMediaElement"
  Source="Butterfly.wmv"   />

It is this MediaElement (butterflyMediaElement) that becomes the source for the VideoBrush:

<Rectangle x:Name="myRectMedia"
       Width="100"
       Height="44"
     Canvas.Left="220"
     Canvas.Top = "500"
       StrokeThickness="2"
       Stroke="Black" >
    <Rectangle.Fill>
        <VideoBrush SourceName="butterflyMediaElement" />
    </Rectangle.Fill>
</Rectangle>

<Ellipse x:Name="myEllipseMedia"
     Width="100"
     Height="44"
     Canvas.Left="330"
     Canvas.Top = "500"
     StrokeThickness="2"
     Stroke="Blue" >
    <Ellipse.Fill>
        <VideoBrush SourceName="butterflyMediaElement" />
    </Ellipse.Fill>
</Ellipse>

With this bit of indirection, the VideoBrush is able to display the movie.

Unfortunately, the MediaElement itself totally dominates the page; which is not at all what we want. We can solve this by making the MediaElement invisible. One easy way to do so is to set its opacity to 0. While we're at it, we'll mute the MediaElement, thereby turning off all sounds from the movie as well,

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

The result is that the MediaElement continues to serve as the source for the VideoBrush but is not itself visible.