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

Mike's Badges

Follow on Twitter
View mike's profile on slideshare
Add to Technorati Favorites
CW Blog Awards

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...
(C) Mike Taulty, 2009. All rights reserved. The information in this weblog is provided "AS IS" with no warranties, and confers no rights. This weblog does not represent the thoughts, intentions, plans or strategies of my employer. It is solely my opinion. Inappropriate comments will be deleted at the authors discretion. All code samples are provided "AS IS" without warranty of any kind, either express or implied, including but not limited to the implied warranties of merchantability and/or fitness for a particular purpose.
Powered by Community Server (Non-Commercial Edition), by Telligent Systems