October 8th, 2009

Using Images and Video in Blend

Silverlight Blend Tutorials, Working with Silverlight, by Gavin Wignall.

This post is part of a string of posts found here: Learn Blend in a Month.

Silverlight supports the following image and video formats:

Images

  • JPG
  • PNG (with alpha)

Video

  • WMV

To import images or video in to Blend you need to go to the ‘Project’ tab and right click on your project. Select ‘Import Existing Item…‘ and browse for your media file. Now your media is in your project you have two methods to visually display them, by using the Image / Media Element or through an Image / Video Brush.

Image and Media Elements

You can simply drag either image or video files from the Project tab onto the design surface. This will automatically put the required element on stage with the media displayed inside.

If you select your media you will see you get handles around each corner allowing you to resize, rotate etc. If your media does not perfectly match your Image / Media Element area you can stretch your content in a number of ways.

To stretch your media first select it, then go to the ‘Properties‘ tab and scroll down to the ‘Common Properties’ options. Click on the drop down for ‘Stretch‘ and select one of the following options…

  • None - displays the native size
  • Fill – distorts to fill both height and width fully
  • Uniform - keeps correct proportions and fills keeping all of the media in view
  • Uniform to Fill – keeps correct proportions but fills all of the Image / Media Element area

*Left Image is set to Uniform, middle is set to Fill and right is set to Uniform to Fill.

Image brush and Video brush

By using brushes you can display images and video on any path, shape or text.

To use an image brush first select the object you want to display the image on, go to the ‘Properties‘ tab and then to the ‘Brushes‘ options. Select the ‘Fiil‘ option and then click the ‘Tile brush‘ tab (the forth tab of 5 : None/Solid/Gradient/Tile brush/Resource).

Now you can select the ‘ImageSource‘ to the required image in you project and also set the ‘Stretch‘ settings (see earlier in post for more detail on Stretch options).

Applying a video brush is a little more tricky, we are required to add this in the XAML view manually. Change the view mode to ‘Split view‘ so that we can see both the Design area and the XAML area at once. Click on the object that you want to use to display the video on and notice how the XAML view automatically jumps to where that object is too. Now we need to add the Video brush reference in ourselves so that the XAML looks like this…

<Grid x:Name=”LayoutRoot” Background=”White”>

<MediaElement x:Name=”Wildlife_wmv” Source=”/Wildlife.wmv” Stretch=”Fill” Visibility=”Collapsed”/>

<TextBlock x:Name=”textBlock” Text=”VIDEO” TextWrapping=”Wrap” FontSize=”96″ FontFamily=”Verdana” FontWeight=”Bold” HorizontalAlignment=”Center” VerticalAlignment=”Center”>

<TextBlock.Foreground>

<VideoBrush SourceName=”Wildlife_wmv”/>

</TextBlock.Foreground>

</TextBlock>

</Grid>

Note that we have to have the Video as an element on the stage and reference it’s x:Name in the brush. So as not to see both videos we can collapse the original so that it is hidden.

<Grid x:Name=”LayoutRoot” Background=”White”>
<MediaElement x:Name=”Wildlife_wmv” Source=”/Wildlife.wmv” Stretch=”Fill” Visibility=”Collapsed” AutoPlay=”False”/>
<TextBlock x:Name=”textBlock” Text=”VIDEO” TextWrapping=”Wrap” FontSize=”96″ FontFamily=”Verdana” FontWeight=”Bold” HorizontalAlignment=”Center” VerticalAlignment=”Center”>
<TextBlock.Foreground>
<VideoBrush SourceName=”Wildlife_wmv”/>
</TextBlock.Foreground>
</TextBlock>
</Grid>

Click here to see the Video Brush working.

Back Top

Responses to “Using Images and Video in Blend”

  1. Stright to the point.
    I like it.

    Mike Greenway at October 9, 2009 5:28 pm
  2. Nice post. Keep up the good work.

  3. Thanks a lot. You have no idea how much this blog helped me. Have you posted any other great posts like this?

  1. Using Images and Video in Blend | Silverlight Travel (,October 8, 2009)

    [...] more here [...]

  2. Tweets that mention Using Images and Video in Blend ยป Silverlight Buzz -- Topsy.com (,October 9, 2009)

    [...] This post was mentioned on Twitter by MSExpression. MSExpression said: @silverlightbuzz blogged: Using Images and Video in #Blend – http://bit.ly/kyuEu – #Expression #msexp [...]

  3. Learn Expression Blend in a Month! » Silverlight Buzz (,October 13, 2009)

    [...] Using Images and Video in Blend [...]

  4. Learn Blend in a Month (22 posts) from Silverlight Buzz « Vincent Leung .NET Tech Clips (,January 28, 2010)

    [...] Using Images and Video in Blend [...]

Leave a Reply

Back Top