MediaElement.Stretch MediaElement.Stretch MediaElement.Stretch MediaElement.Stretch Property

Definition

Gets or sets a value that describes how an MediaElement should be stretched to fill the destination rectangle.

public : Stretch Stretch { get; set; }
Stretch Stretch();

void Stretch(Stretch stretch);
public Stretch Stretch { get; set; }
Public ReadWrite Property Stretch As Stretch
<MediaElement Stretch="stretchMemberName" />

Property Value

A value of the Stretch enumeration that specifies how the source visual media is rendered. The default value is Uniform.

Examples

Here is some code that shows how to create a zoom effect, similar to msZoom in Windows app using JavaScript. The MediaElement content will fill up the entire layout space while preserving the aspect ratio of the content. This could result in cropping if the aspect ratio of the content is not the same as the layout space.

private void ToggleZoom(MediaElement media)
{
    if (media.Stretch != Stretch.UniformToFill)
    {
        // zoom
        media.Stretch = Stretch.UniformToFill;
    }
    else
    {
        // unzoom
        media.Stretch = Stretch.Uniform;
    }
}

Remarks

Here's what the Stretch values represent for MediaElement content:

  • None: The original size of the content is preserved.
  • Fill: The content is resized to fill the destination dimensions. The aspect ratio of the video is not preserved.
  • UniformToFill: Uniformly stretches the MediaElement to fill the available layout space while preserving the aspect ratio of the content. If the aspect ratio of the destination rectangle differs from the source, the source content is clipped to fit the destination dimensions.
  • Uniform: Uniformly stretches the MediaElement to fill the layout space while preserve the aspect ratio of the image. This will ensure that the entire image is displayed, undistorted and not cropped. This may result in letterboxing or pillarboxing on the top or sides of the image, depending on the aspect ratio of the content.

See also