Cómo cambiar el tamaño del vídeo y estirarlo (XAML)

Usa MediaElement.Stretch para cambiar la forma en que el contenido de vídeo rellena el contenedor en el que se encuentra. Esto estira y cambia el tamaño del vídeo según el valor de Stretch.

Guía básica: Relación de este tema con los demás. Consulta:

Lo que debes saber

Tecnologías

  • Windows en tiempo de ejecución

Requisitos previos

En este tema se supone que ya sabes cómo crear una aplicación de Windows en tiempo de ejecución básica con C++, C# o Visual Basic. Si necesitas ayuda para crear tu primera aplicación, consulta Crear la primera aplicación de la Tienda Windows con C# o Visual Basic.

En este tema se supone que conoces la clase MediaElement. Para ver un tema de introducción sobre el uso de la clase MediaElement, consulta Inicio rápido: vídeo y audio.

Instrucciones

Paso 1: Introducción

Los estados de Stretch son similares a la configuración de tamaño de imagen en muchos televisores.

  • None muestra la resolución nativa del contenido en su tamaño original.
  • Uniform rellena todo el espacio posible, pero mantiene la relación de aspecto y el contenido de la imagen. Esto puede hacer que aparezcan barras negras horizontales o verticales en los bordes del vídeo. Esto es similar a los modos de pantalla panorámica.
  • UniformToFill rellena todo el espacio, pero conserva la relación de aspecto. Esto puede hacer que se recorte parte de la imagen. Esto es similar a los modos de pantalla completa.
  • Fill rellena todo el espacio, pero no conserva la relación de aspecto. La imagen no se recorta, pero se podría estirar. Esto es similar a los modos con ajuste.

Mostrar la forma en que se representan los distintos valores de imagen estirada

UniformToFill es similar a la propiedad HTML msZoom.

Paso 2: Crear un MediaElement

Crea un objeto MediaElement y asígnale un Name. La asignación de un nombre al objeto hace que sea más fácil acceder a él en el código subyacente.


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


Paso 3: Cambiar el tamaño del vídeo con Estirar

Se usa un AppBarButton para llamar al método que realiza la operación de Stretch.


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


Una instrucción swtich comprueba el estado actual de la propiedad Stretch y la establece en el siguiente valor en la enumeración Stretch. Esto permite que el usuario recorra los distintos estados de imagen estirada.


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


Temas relacionados

Guía básica para crear aplicaciones de la Tienda Windows con C#, C++ o VB
Inicio rápido: vídeo y audio
Muestra de reproducción de multimedia XAML
MediaElement
MediaElement.Stretch
Stretch
Reproducción de multimedia, de principio a fin

 

 

Mostrar:
© 2015 Microsoft