How to resize and stretch video (XAML)
[ 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:
- Roadmap for Windows Runtime apps using C# or Visual Basic
- Roadmap for Windows Runtime apps using C++
- To see this feature in action as part of a complete media-playback sample, see Media playback, start to finish.
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.
.png)
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;
}
}
Related topics
Roadmap for creating Windows Store apps using C#, C++, or VB