Get started with Silverlight

A time to shine

By Rob Blackwell • Get more from this author

Posted in Applications, 5th November 2007 23:03 GMT

XAML and Microsoft

XAML first appeared with the Windows Presentation Foundation (WPF) to describe the various graphical and multimedia assets along with their placement, characteristics and behaviours. XAML decouples presentation information from application logic allowing files to be shared between developers and designers. XAML is at the heart of the fledgling Microsoft Expression tools for design and will be prevalent in the forthcoming Visual Studio 2008.

A XAML file typically starts with a canvas, onto which you can place various graphical objects. In the example above, we added a TextBlock, but we could have equally used a Rectangle, Ellipse, Polygon or any one of a number of predefined elements. The MediaElement even provides access to video playback.

Animations can be specified by creating a Storyboard and a number of event triggers. All this can be extended by developers using JavaScript code.

Adding video

Now that we have a basic framework in place, we can start to experiment and add features just by changing the scene.xaml file.

You can easily plug in your own video content – here I've just taken one of the videos that come with Windows, renamed it to MyVideo.wmv and copied it into the project directory.

You can reference the video with a MediaElement and then use it in a VideoBrush.

<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
        
        <MediaElement Name="Video" Source="MyVideo.wmv" Opacity="0"  />

        <TextBlock FontFamily="Times New Roman"
                           FontSize="70"
                           FontStyle="Italic"
                                FontWeight="Bold" 
                           Text="Hello World" >
                <TextBlock.Foreground>
                        <VideoBrush SourceName="Video" />
                </TextBlock.Foreground>
        </TextBlock>

</Canvas>

Now when you run the HTML the video content plays back, masked by the text.