Créer des contrôles de transport personnalisés

Article
07/05/2024

MediaPlayerElement dispose de contrôles de transport XAML personnalisables permettant de gérer du contenu audio et vidéo dans une application Windows. Ici, nous montrons comment personnaliser le modèle MediaTransportControls. Nous allons vous montrer comment utiliser le menu de dépassement de capacité, ajouter un bouton personnalisé et modifier le curseur.

API importantes : MediaPlayerElement, MediaPlayerElement.AreTransportControlsEnabled, MediaTransportControls

Avant de commencer, vous devez être familiarisé avec les classes MediaPlayerElement et MediaTransportControls. Pour plus d’informations, consultez le guide de contrôle MediaPlayerElement.

Conseil

Les exemples de cette rubrique sont basés sur l’exemple de contrôles de transport multimédia. Vous pouvez télécharger l’exemple pour afficher et exécuter le code terminé.

Remarque

MediaPlayerElement est disponible uniquement dans Windows 10, version 1607 et ultérieure. Si vous développez une application pour une version antérieure de Windows 10, vous devez utiliser MediaElement à la place. Tous les exemples de cette page fonctionnent également avec MediaElement .

Quand devez-vous personnaliser le modèle ?

MediaPlayerElement dispose de contrôles de transport intégrés conçus pour fonctionner correctement sans modification dans la plupart des applications de lecture vidéo et audio. Ils sont fournis par la classe MediaTransportControls et incluent des boutons permettant de lire, d’arrêter et de naviguer sur le média, d’ajuster le volume, de basculer en plein écran, de convertir en un deuxième appareil, d’activer des légendes, de changer de pistes audio et d’ajuster la vitesse de lecture. MediaTransportControls a des propriétés qui vous permettent de contrôler si chaque bouton est affiché et activé. Vous pouvez également définir la propriété IsCompact pour spécifier si les contrôles sont affichés dans une ou deux lignes.

Toutefois, il peut y avoir des scénarios où vous devez personnaliser davantage l’apparence du contrôle ou modifier son comportement. Voici quelques exemples :

Modifiez les icônes, le comportement du curseur et les couleurs.
Déplacez les boutons de commande moins couramment utilisés dans un menu de dépassement de capacité.
Modifiez l’ordre dans lequel les commandes sont supprimées lorsque le contrôle est redimensionné.
Fournissez un bouton de commande qui n’est pas dans le jeu par défaut.

Remarque

Les boutons visibles à l’écran suppriment les contrôles de transport intégrés dans un ordre prédéfini s’il n’y a pas suffisamment de place sur l’écran. Pour modifier cet ordre ou placer des commandes qui ne correspondent pas à un menu de dépassement de capacité, vous devez personnaliser les contrôles.

Vous pouvez personnaliser l’apparence du contrôle en modifiant le modèle par défaut. Pour modifier le comportement du contrôle ou ajouter de nouvelles commandes, vous pouvez créer un contrôle personnalisé dérivé de MediaTransportControls.

Conseil

Les modèles de contrôle personnalisables sont une fonctionnalité puissante de la plateforme XAML, mais il existe également des conséquences que vous devez prendre en compte. Lorsque vous personnalisez un modèle, il devient une partie statique de votre application et ne recevra donc aucune mise à jour de plateforme effectuée sur le modèle par Microsoft. Si les mises à jour de modèle sont effectuées par Microsoft, vous devez prendre le nouveau modèle et le modifier à nouveau pour bénéficier des avantages du modèle mis à jour.

Structure du modèle

ControlTemplate fait partie du style par défaut. Vous pouvez copier ce style par défaut dans votre projet pour le modifier. ControlTemplate est divisé en sections similaires à d’autres modèles de contrôle XAML.

La première section du modèle contient les définitions de style pour les différents composants de MediaTransportControls.
La deuxième section définit les différents états visuels utilisés par MediaTransportControls.
La troisième section contient la grille qui contient différents éléments MediaTransportControls ensemble et définit la façon dont les composants sont disposés.

Remarque

Pour plus d’informations sur la modification de modèles, consultez Modèles de contrôle. Vous pouvez utiliser un éditeur de texte ou des éditeurs similaires dans votre IDE pour ouvrir les fichiers XAML dans (Program Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\(sdk version)\Generic. Le style et le modèle par défaut pour chaque contrôle sont définis dans le fichier generic.xaml . Vous trouverez le modèle MediaTransportControls dans generic.xaml en recherchant « MediaTransportControls ».

Dans les sections suivantes, vous allez apprendre à personnaliser plusieurs des principaux éléments des contrôles de transport :

Slider : permet à l’utilisateur de parcourir ses fichiers multimédias et d’afficher la progression
CommandBar : contient l’ensemble des boutons. Pour plus d’informations, consultez la section Anatomie de la rubrique de référence MediaTransportControls.

Personnaliser les contrôles de transport

Si vous souhaitez modifier uniquement l’apparence de MediaTransportControls, vous pouvez créer une copie du style et du modèle de contrôle par défaut, puis le modifier. Toutefois, si vous souhaitez également ajouter ou modifier les fonctionnalités du contrôle, vous devez créer une classe qui dérive de MediaTransportControls.

Recréer le modèle du contrôle

Pour personnaliser le modèle et le style par défaut de MediaTransportControls

Copiez le style par défaut à partir des styles et modèles MediaTransportControls dans un ResourceDictionary dans votre projet.
Donnez au style une valeur x :Key pour l’identifier, comme suit.

<Style TargetType="MediaTransportControls" x:Key="myTransportControlsStyle">
    <!-- Style content ... -->
</Style>

Ajoutez un MediaPlayerElement avec MediaTransportControls à votre interface utilisateur.
Définissez la propriété Style de l’élément MediaTransportControls sur votre ressource Style personnalisée, comme illustré ici.

<MediaPlayerElement AreTransportControlsEnabled="True">
    <MediaPlayerElement.TransportControls>
        <MediaTransportControls Style="{StaticResource myTransportControlsStyle}"/>
    </MediaPlayerElement.TransportControls>
</MediaPlayerElement>

Pour plus d’informations sur la modification des styles et des modèles, consultez Contrôles de style et modèles de contrôle.

Créer un contrôle dérivé

Pour ajouter ou modifier les fonctionnalités des contrôles de transport, vous devez créer une classe dérivée de MediaTransportControls. Une classe dérivée appelée CustomMediaTransportControls s’affiche dans l’exemple Media Transport Controls et les autres exemples de cette page.

Pour créer une classe dérivée de MediaTransportControls

Ajoutez un nouveau fichier de classe à votre projet.
- Dans Visual Studio, sélectionnez Project > Add Class. La boîte de dialogue Ajouter un nouvel élément s’ouvre.
- Dans la boîte de dialogue Ajouter un nouvel élément, entrez un nom pour le fichier de classe, puis cliquez sur Ajouter. (Dans l’exemple Media Transport Controls, la classe est nommée CustomMediaTransportControls.)
Modifiez le code de classe pour dériver de la classe MediaTransportControls.

public sealed class CustomMediaTransportControls : MediaTransportControls
{
}

Copiez le style par défaut pour MediaTransportControls dans un ResourceDictionary dans votre projet. Il s’agit du style et du modèle que vous modifiez. (Dans l’exemple de contrôles de transport multimédia, un nouveau dossier appelé « Thèmes » est créé et un fichier ResourceDictionary appelé generic.xaml est ajouté à celui-ci.)
Remplacez TargetType du style par le nouveau type de contrôle personnalisé. (Dans l’exemple, targetType est remplacé par local:CustomMediaTransportControls.)

xmlns:local="using:CustomMediaTransportControls">
...
<Style TargetType="local:CustomMediaTransportControls">

Définissez DefaultStyleKey de votre classe personnalisée. Cela indique à votre classe personnalisée d’utiliser un style avec un TargetType de local:CustomMediaTransportControls.

public sealed class CustomMediaTransportControls : MediaTransportControls
{
    public CustomMediaTransportControls()
    {
        this.DefaultStyleKey = typeof(CustomMediaTransportControls);
    }
}

Ajoutez un MediaPlayerElement à votre balisage XAML et ajoutez-y les contrôles de transport personnalisés. Notez que les API à masquer, afficher, désactiver et activer les boutons par défaut fonctionnent toujours avec un modèle personnalisé.

<MediaPlayerElement Name="MediaPlayerElement1" AreTransportControlsEnabled="True" Source="video.mp4">
    <MediaPlayerElement.TransportControls>
        <local:CustomMediaTransportControls x:Name="customMTC"
                                            IsFastForwardButtonVisible="True"
                                            IsFastForwardEnabled="True"
                                            IsFastRewindButtonVisible="True"
                                            IsFastRewindEnabled="True"
                                            IsPlaybackRateButtonVisible="True"
                                            IsPlaybackRateEnabled="True"
                                            IsCompact="False">
        </local:CustomMediaTransportControls>
    </MediaPlayerElement.TransportControls>
</MediaPlayerElement>

Vous pouvez maintenant modifier le style de contrôle et le modèle pour mettre à jour l’apparence de votre contrôle personnalisé et le code de contrôle pour mettre à jour son comportement.

Vous pouvez déplacer des boutons de commande MediaTransportControls dans un menu de dépassement de capacité, afin que les commandes les moins couramment utilisées soient masquées jusqu’à ce que l’utilisateur en ait besoin.

Dans le modèle MediaTransportControls, les boutons de commande sont contenus dans un élément CommandBar. La barre de commandes a le concept de commandes primaires et secondaires. Les commandes principales sont les boutons qui apparaissent dans le contrôle par défaut et sont toujours visibles (sauf si vous désactivez le bouton, masquez le bouton ou il n’y a pas suffisamment de place). Les commandes secondaires sont affichées dans un menu de dépassement de capacité qui s’affiche lorsqu’un utilisateur clique sur le bouton de sélection (...) . Pour plus d’informations, consultez l’article barres d’application et barres de commandes .

Pour déplacer un élément des commandes principales de la barre de commandes vers le menu de dépassement de capacité, vous devez modifier le modèle de contrôle XAML.

Pour déplacer une commande vers le menu de dépassement :

Dans le modèle de contrôle, recherchez l’élément CommandBar nommé MediaControlsCommandBar.
Ajoutez une section SecondaryCommands au code XAML pour commandBar. Placez-la après la balise de fermeture pour PrimaryCommands.

<CommandBar x:Name="MediaControlsCommandBar" ... >  
  <CommandBar.PrimaryCommands>
...
    <AppBarButton x:Name='PlaybackRateButton'
                    Style='{StaticResource AppBarButtonStyle}'
                    MediaTransportControlsHelper.DropoutOrder='4'
                    Visibility='Collapsed'>
      <AppBarButton.Icon>
        <FontIcon Glyph="&#xEC57;"/>
      </AppBarButton.Icon>
    </AppBarButton>
...
  </CommandBar.PrimaryCommands>
<!-- Add secondary commands (overflow menu) here -->
  <CommandBar.SecondaryCommands>
    ...
  </CommandBar.SecondaryCommands>
</CommandBar>

Pour remplir le menu avec des commandes, coupez et collez le code XAML pour les objets AppBarButton souhaités de PrimaryCommands vers secondaryCommands. Dans cet exemple, nous allons déplacer le PlaybackRateButton menu de dépassement de capacité.
Ajoutez une étiquette au bouton et supprimez les informations de style, comme illustré ici. Étant donné que le menu de dépassement de capacité est composé de boutons de texte, vous devez ajouter une étiquette de texte au bouton et également supprimer le style qui définit la hauteur et la largeur du bouton. Sinon, elle n’apparaît pas correctement dans le menu de dépassement de capacité.

<CommandBar.SecondaryCommands>
    <AppBarButton x:Name='PlaybackRateButton'
                  Label='Playback Rate'>
    </AppBarButton>
</CommandBar.SecondaryCommands>

Important

Vous devez toujours rendre le bouton visible et l’activer pour l’utiliser dans le menu de dépassement de capacité. Dans cet exemple, l’élément PlaybackRateButton n’est pas visible dans le menu de dépassement, sauf si la propriété IsPlaybackRateButtonVisible est vraie. Elle n’est pas activée, sauf si la propriété IsPlaybackRateEnabled est vraie. La définition de ces propriétés s’affiche dans la section précédente.

Ajout d’un bouton personnalisé

Une raison pour laquelle vous souhaiterez peut-être personnaliser MediaTransportControls consiste à ajouter une commande personnalisée au contrôle. Que vous l’ajoutez en tant que commande principale ou une commande secondaire, la procédure de création du bouton de commande et la modification de son comportement est la même. Dans l’exemple de contrôles de transport multimédia, un bouton « évaluation » est ajouté aux commandes principales.

Pour ajouter un bouton de commande personnalisé

Créez un objet AppBarButton et ajoutez-le à l’objet CommandBar dans le modèle de contrôle.

<AppBarButton x:Name="LikeButton"
              Icon="Like"
              Style="{StaticResource AppBarButtonStyle}"
              MediaTransportControlsHelper.DropoutOrder="3"
              VerticalAlignment="Center" />

Vous devez l’ajouter à la CommandBar dans l’emplacement approprié. (Pour plus d’informations, consultez la section Utilisation du menu de dépassement de capacité.) La façon dont elle est positionnée dans l’interface utilisateur est déterminée par l’emplacement du bouton dans le balisage. Par exemple, si vous souhaitez que ce bouton s’affiche en tant que dernier élément dans les commandes principales, ajoutez-le à la fin de la liste de commandes principales.

Vous pouvez également personnaliser l’icône du bouton. Pour plus d'informations, consultez la référence AppBarButton.

Dans la substitution OnApplyTemplate, obtenez le bouton à partir du modèle et inscrivez un gestionnaire pour son événement Click. Ce code va dans la CustomMediaTransportControls classe.

public sealed class CustomMediaTransportControls :  MediaTransportControls
{
    // ...

    protected override void OnApplyTemplate()
    {
        // Find the custom button and create an event handler for its Click event.
        var likeButton = GetTemplateChild("LikeButton") as Button;
        likeButton.Click += LikeButton_Click;
        base.OnApplyTemplate();
    }

    //...
}

Ajoutez du code au gestionnaire d’événements Click pour effectuer l’action qui se produit lorsque le bouton est cliqué. Voici le code complet de la classe.

public sealed class CustomMediaTransportControls : MediaTransportControls
{
    public event EventHandler< EventArgs> Liked;

    public CustomMediaTransportControls()
    {
        this.DefaultStyleKey = typeof(CustomMediaTransportControls);
    }

    protected override void OnApplyTemplate()
    {
        // Find the custom button and create an event handler for its Click event.
        var likeButton = GetTemplateChild("LikeButton") as Button;
        likeButton.Click += LikeButton_Click;
        base.OnApplyTemplate();
    }

    private void LikeButton_Click(object sender, RoutedEventArgs e)
    {
        // Raise an event on the custom control when 'like' is clicked.
        var handler = Liked;
        if (handler != null)
        {
            handler(this, EventArgs.Empty);
        }
    }
}

Modification du curseur

Le contrôle « seek » de MediaTransportControls est fourni par un élément Slider. Une façon de le personnaliser consiste à modifier la granularité du comportement de recherche.

Le curseur de recherche par défaut est divisé en 100 parties. Le comportement de recherche est donc limité à ce nombre de sections. Vous pouvez modifier la granularité du curseur de recherche en obtenant le curseur à partir de l’arborescence visuelle XAML dans votre gestionnaire d’événements MediaOpened sur MediaPlayerElement.MediaPlayer. Cet exemple montre comment utiliser VisualTreeHelper pour obtenir une référence au curseur, puis modifier la fréquence d’étape par défaut du curseur de 1 % à 0,1 % (1 000 étapes) si le média dépasse 120 minutes. MediaPlayerElement est nommé MediaPlayerElement1.

protected override void OnNavigatedTo(NavigationEventArgs e)
{
  MediaPlayerElement1.MediaPlayer.MediaOpened += MediaPlayerElement_MediaPlayer_MediaOpened;
  base.OnNavigatedTo(e);
}

private void MediaPlayerElement_MediaPlayer_MediaOpened(object sender, RoutedEventArgs e)
{
  FrameworkElement transportControlsTemplateRoot = (FrameworkElement)VisualTreeHelper.GetChild(MediaPlayerElement1.TransportControls, 0);
  Slider sliderControl = (Slider)transportControlsTemplateRoot.FindName("ProgressSlider");
  if (sliderControl != null && MediaPlayerElement1.NaturalDuration.TimeSpan.TotalMinutes > 120)
  {
    // Default is 1%. Change to 0.1% for more granular seeking.
    sliderControl.StepFrequency = 0.1;
  }
}

Lecture de contenu multimédia

Partager via

Créer des contrôles de transport personnalisés

Quand devez-vous personnaliser le modèle ?

Structure du modèle

Personnaliser les contrôles de transport

Recréer le modèle du contrôle

Créer un contrôle dérivé

Utilisation du menu de dépassement de capacité

Ajout d’un bouton personnalisé

Modification du curseur

Ressources supplémentaires

Partager via

Créer des contrôles de transport personnalisés

Quand devez-vous personnaliser le modèle ?

Structure du modèle

Personnaliser les contrôles de transport

Recréer le modèle du contrôle

Créer un contrôle dérivé

Utilisation du menu de dépassement de capacité

Ajout d’un bouton personnalisé

Modification du curseur

Articles connexes

Ressources supplémentaires