Mike Taulty's Blog
Bits and Bytes from Microsoft UK
Sliverlight - Filling Rectangles with "Pieces of Video"

Blogs

Mike Taulty's Blog

Elsewhere

Given my "discovery" of the VideoBrush, I'd been wondering for quite a while how you did that trick where you took a playing video (or maybe an Image) and you "split it up" across a number of different shapes (in my case rectangles) such that the same video is being used to fill each shape but a different part of the video is displayed in each shape.

I've tried to illustrate below (all images run the same sample);

In the end it turns out to be pretty easy. I was looking for things like ViewPort which is a setting that I think you find in the WPF but you can do exactly what I wanted by just setting up transforms on the VideoBrush such that it is scaled and translated correctly. I ended up using relative transforms but I guess you could do it with absolute ones as well.

Try the sample - I love these kinds of effects with video, really neat. Here's the relevant bits of the XAML for Rectangle.Fill for the 4 rects;

Top Left Rectangle

      <VideoBrush SourceName="foo">
        <VideoBrush.RelativeTransform>
          <TransformGroup>
            <ScaleTransform ScaleX="2.0" ScaleY="2.0"/>
          </TransformGroup>
        </VideoBrush.RelativeTransform>
      </VideoBrush>

 Top Right Rectangle

      <VideoBrush SourceName="foo">
        <VideoBrush.RelativeTransform>
          <TransformGroup>
            <ScaleTransform ScaleX="2.0" ScaleY="2.0"/>
            <TranslateTransform X="-1.0"/>
          </TransformGroup>
        </VideoBrush.RelativeTransform>
      </VideoBrush>

Bottom Left Rectangle

    <VideoBrush SourceName="foo">
        <VideoBrush.RelativeTransform>
          <TransformGroup>
            <ScaleTransform ScaleX="2.0" ScaleY="2.0"/>
            <TranslateTransform Y="-1.0"/>
          </TransformGroup>
        </VideoBrush.RelativeTransform>
      </VideoBrush>
 

Bottom Right Rectangle

    <VideoBrush SourceName="foo">
        <VideoBrush.RelativeTransform>
          <TransformGroup>
            <ScaleTransform ScaleX="2.0" ScaleY="2.0"/>
            <TranslateTransform X="-1.0" Y="-1.0"/>
          </TransformGroup>
        </VideoBrush.RelativeTransform>
      </VideoBrush>

Posted Fri, May 4 2007 5:56 PM by mtaulty

Comments

Christopher Steen wrote Link Listing - May 4, 2007
on Fri, May 4 2007 7:49 PM
Message oriented interop between WCF and Oracle App Server WSIF [Via: ] Astoria: Microsoft's RESTful...