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.

kick it on DotNetKicks.com

Share

About Jesse Liberty

Jesse Liberty is an independent consultant and programmer with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP, Microsoft MVP and Telerik MVP.
This entry was posted in z Silverlight Archives. Bookmark the permalink.

Leave a Reply

Your email address will not be published.