Comment redimensionner et étirer une vidéo (XAML)

Applies to Windows and Windows Phone

Utilisez MediaElement.Stretch pour modifier la façon dont le contenu vidéo remplit son conteneur. Le redimensionnement et l’étirement de la vidéo qui s’ensuit dépend de la valeur de Stretch.

Feuille de route : comment cette rubrique s’articule-t-elle par rapport aux autres ? Voir :

Ce que vous devez savoir

Technologies

  • Windows Runtime

Prérequis

Dans cette rubrique, nous partons du principe que vous savez créer une application Windows Runtime de base en C++, C# ou Visual Basic. Pour obtenir de l’aide lors de la création de votre première application, voir Créer votre première application du Windows Store en C# ou Visual Basic.

Cette rubrique considère que vous connaissez la classe MediaElement. Pour une introduction sur l’utilisation de la classe MediaElement, voir Démarrage rapide : vidéo et audio.

Instructions

Étape 1: Introduction

Les états de Stretch sont comparables aux réglages du format de l’image de nombreux téléviseurs.

  • None affiche la résolution native du contenu dans sa taille d’origine.
  • Uniform remplit autant d’espace que possible tout en préservant les proportions et le contenu de l’image. Des bandes noires horizontales ou verticales peuvent dès lors apparaître sur les bordures de la vidéo. L’effet obtenu est comparable aux modes grand écran.
  • UniformToFill remplit l’espace entier tout en préservant les proportions. Dans ce cas, une partie de l’image peut être rognée. L’effet obtenu est comparable aux modes plein écran.
  • Fill remplit l’espace entier, mais ne conserve pas les proportions. Si l’image n’est pas rognée, un étirement peut en revanche être observé. L’effet obtenu est comparable aux modes Étirer.

Montre le rendu des différentes valeurs d’étirement

UniformToFill est comparable à la propriété HTML msZoom.

Étape 2: Créer un objet MediaElement

Créez un objet MediaElement et attribuez-lui une propriété Name. Le fait de nommer l’objet le rend facilement accessible dans le code-behind.


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


Étape 3: Redimensionner une vidéo à l’aide de Stretch

Un objet AppBarButton est utilisé pour appeler la méthode chargée d’exécuter l’opération Stretch.


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


Une instruction swtich vérifie l’état actif de la propriété Stretch et lui attribue la valeur suivante dans l’énumération Stretch. L’utilisateur peut ainsi parcourir les différents états d’étirement.


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;
    }
}


Rubriques associées

Feuille de route pour la création d’applications du Windows Store en C#, C++ ou Visual Basic
Démarrage rapide : vidéo et audio
Exemple de lecture de contenu multimédia XAML
MediaElement
MediaElement.Stretch
Stretch
Lecture de contenu multimédia de A à Z

 

 

Afficher:
© 2014 Microsoft