How to resize and stretch video (XAML)

  • Article

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

Use MediaElement.Stretch to change how the video content fills the container it is in. This resizes and stretchs the video depending on the Stretch value.

Roadmap: How does this topic relate to others? See:

What you need to know

Technologies

  • Windows Runtimes

Prerequisites

This topic assumes that you know how to create a basic Windows Runtime app using C++, C#, or Visual Basic. For help creating your first app, see Create your first Windows Store app using C# or Visual Basic.

This topic assumes you are familiar with the MediaElement class. For an introduction on using the MediaElement class, see the Quickstart: video and audio.

Instructions

Step 1: Introduction

The Stretch states are similar to picture size settings on many TV sets.

  • None displays the native resolution of the content in its original size.
  • Uniform fills up as much of the space while preserving the aspect ratio and the image content. This can result in horizontal or vertical black bars at the edges of the video. This is similar to wide-screen modes.
  • UniformToFill fills up the entire space while preserving the aspect ratio. This can result in some of the image being cropped. This is similar to full-screen modes.
  • Fill fills up the entire space, but does not preserve the aspect ratio. None of image is cropped, but stretching may occur. This is similar to stretch modes.

UniformToFill is similar to the HTML msZoom property.

Step 2: Create a MediaElement

Create a MediaElement object and give it a Name. Giving the object a name makes it easy to access it in code behind.

<MediaElement x:Name="mediaPlayer" 
              Source="Videos/video1.mp4" 
              Width="400" 
              AutoPlay="False"
              AreTransportControlsEnabled="True" />

Step 3: Resize video using Stretch

An AppBarButton is used to call the method which performs the Stretch operation.

<AppBarButton Icon="Switch" 
          Label="Resize Video"
          Click="PictureSize_Click" />

A swtich statement checks the current state of the Stretch property and sets it to the next value in the Stretch enumeration. This allows the user to cycle through the different stretch states.

private void PictureSize_Click(object sender, RoutedEventArgs e)
{
    switch (media.Stretch)
    {
        case Stretch.Fill:
            mediaPlayer.Stretch = Stretch.None;
            break;
        case Stretch.None:
            mediaPlayer.Stretch = Stretch.Uniform;
            break;
        case Stretch.Uniform:
            mediaPlayer.Stretch = Stretch.UniformToFill;
            break;
        case Stretch.UniformToFill:
            mediaPlayer.Stretch = Stretch.Fill;
            break;
        default:
            break;
    }
}

Roadmap for creating Windows Store apps using C#, C++, or VB

Quickstart: video and audio

XAML media playback sample

MediaElement

MediaElement.Stretch

Stretch

Media playback, start to finish