Créer des contrôles de transport personnalisés
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 dé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 démarrer, prenez le temps de vous familiariser avec les classes MediaPlayerElement et MediaTransportControls. Pour plus d’informations, voir le Guide du contrôle MediaPlayerElement.
Conseil
Les exemples de cette rubrique sont basés sur l’Exemple de contrôles de transport de média. Vous pouvez télécharger l’exemple pour afficher et exécuter le code validé.
Notes
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 avec MediaElement également.
Quand faut-il personnaliser le modèle ?
MediaPlayerElement intègre des contrôles de transport compatibles sans modification avec la plupart des applications de lecture audio et vidéo. Ils sont fournis par la classe MediaTransportControls et incluent des boutons permettant de lire, d’arrêter et de parcourir les médias, d’ajuster le volume, de basculer en plein écran, de caster sur un deuxième appareil, d’activer les sous-titres, 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 sur une ou deux lignes.
Toutefois, il peut arriver que vous deviez personnaliser davantage l’apparence du contrôle ou changer son comportement. En voici quelques exemples :
- changement des icônes, du comportement du curseur et des couleurs ;
- déplacement des boutons de commande les moins utilisés vers un menu de dépassement ;
- modification de l’ordre dans lequel les commandes sont déplacées lorsque le contrôle est redimensionné ;
- Fournissez un bouton de commande qui n’est pas dans l’ensemble par défaut.
Notes
Les boutons visibles à l’écran disparaissent des contrôles de transport intégrés dans un ordre prédéfini s’il n’y a pas assez de place dans l’écran. Pour changer cet ordre ou placer des commandes qui ne tiennent pas dans un menu de dépassement, 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é qui est dérivé de MediaTransportControls.
Conseil
Les modèles de contrôle personnalisables sont une fonctionnalité puissante de la plateforme XAML, mais leur utilisation entraîne des conséquences que vous devez prendre en compte. Quand vous personnalisez un modèle, il devient une portion statique de votre application. Par conséquent, il ne reçoit aucune des mises à jour de plateforme qui sont apportées au modèle par Microsoft. Si les mises à jour de modèle sont effectuées par Microsoft, vous devez recueillir le nouveau modèle et le modifier à nouveau afin de profiter des avantages du modèle actualisé.
Structure du modèle
Le ControlTemplate fait partie du style par défaut. Vous pouvez copier ce style par défaut dans votre projet pour le modifier. Le ControlTemplate est divisé en sections similaires aux autres modèles de contrôle XAML.
- La première section du modèle contient les définitions Style des différents composants de MediaTransportControls.
- La deuxième section définit les différents états visuels utilisés par l’élément MediaTransportControls.
- La troisième section contient l’élément Grid qui rassemble ces différents éléments MediaTransportControls et définit la manière dont les composants sont disposés.
Notes
Pour plus d’informations sur la modification des modèles, consultez Control templates. 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\(version sdk)\Generic. Le style et le modèle par défaut de chaque contrôle sont définis dans le fichier generic.xaml. Pour rechercher le modèle MediaTransportControls dans generic.xaml, recherchez « MediaTransportControls ».
Dans les sections suivantes, vous allez apprendre à personnaliser plusieurs des éléments principaux 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 d’anatomie de la rubrique de référence sur MediaTransportControls.
Personnaliser les contrôles de transport
Si vous souhaitez simplement modifier l’apparence de l’élément MediaTransportControls, vous pouvez créer une copie du style et du modèle de contrôle par défaut, et la modifier. Toutefois, si vous souhaitez également enrichir ou modifier la fonctionnalité du contrôle, vous devez créer une nouvelle classe dérivée de MediaTransportControls.
Remodéliser le contrôle
Pour personnaliser le modèle et le style par défaut de MediaTransportControls
- Copiez le style par défaut de Styles et modèles MediaTransportControls dans un ResourceDictionary de votre projet.
- Donnez au Style une valeur x:Key pour l’identifier, comme ceci.
<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 en savoir plus sur la modification des styles et des modèles, voir 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 nouvelle classe dérivée de MediaTransportControls. Une classe dérivée appelée CustomMediaTransportControls est illustrée dans l’Exemple de contrôles de transport de média et dans les autres exemples sur 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 Projet > Ajouter une classe. 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 de contrôles de transport de média, la nouvelle est nommée
CustomMediaTransportControls.)
- Modifiez le code de classe à dériver de la classe MediaTransportControls.
public sealed class CustomMediaTransportControls : MediaTransportControls
{
}
- Copiez le style par défaut pour MediaTransportControls dans un ResourceDictionary de votre projet. Il s’agit du style et du modèle que vous modifiez. (Dans l’Exemple de contrôles de transport média, un nouveau dossier nommé « Thèmes » est créé, et un fichier ResourceDictionary nommé generic.xaml lui est ajouté.)
- Remplacez la propriété TargetType du style par le nouveau type de contrôle personnalisé. (Dans l’exemple, la propriété TargetType est remplacée par
local:CustomMediaTransportControls.)
xmlns:local="using:CustomMediaTransportControls">
...
<Style TargetType="local:CustomMediaTransportControls">
- Définissez la propriété DefaultStyleKey de votre classe personnalisée. Cela indique à votre classe personnalisée d’utiliser une classe Style avec une propriété TargetType de
local:CustomMediaTransportControls.
public sealed class CustomMediaTransportControls : MediaTransportControls
{
public CustomMediaTransportControls()
{
this.DefaultStyleKey = typeof(CustomMediaTransportControls);
}
}
- Ajoutez un MediaPlayerElement à votre balisage XAML, puis ajoutez-y les contrôles de transport personnalisés. Notez que les API permettant de masquer, d’afficher, de désactiver et d’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 et le modèle de contrôle pour mettre à jour l’apparence de votre contrôle personnalisé, et le code de contrôle pour mettre à jour son comportement.
Utilisation du menu de dépassement
Vous pouvez déplacer des boutons de commande MediaTransportControls vers un menu de dépassement, afin que les commandes les moins 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 prend en charge le concept de commandes principales 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 ou masquez le bouton, ou qu’il n’y a pas suffisamment de place). Les commandes secondaires sont affichées dans un menu de dépassement qui apparaît quand un utilisateur clique sur le bouton points de suspension (...). Pour plus d’informations, voir l’article Barres d’application et barres de commande.
Pour déplacer un élément des commandes principales de la barre de commandes vers le menu de dépassement, 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 la classe CommandBar. Placez-la après la balise fermante de la propriété PrimaryCommands.
<CommandBar x:Name="MediaControlsCommandBar" ... >
<CommandBar.PrimaryCommands>
...
<AppBarButton x:Name='PlaybackRateButton'
Style='{StaticResource AppBarButtonStyle}'
MediaTransportControlsHelper.DropoutOrder='4'
Visibility='Collapsed'>
<AppBarButton.Icon>
<FontIcon Glyph=""/>
</AppBarButton.Icon>
</AppBarButton>
...
</CommandBar.PrimaryCommands>
<!-- Add secondary commands (overflow menu) here -->
<CommandBar.SecondaryCommands>
...
</CommandBar.SecondaryCommands>
</CommandBar>
Pour ajouter des commandes au menu, coupez et collez le code XAML des objets AppBarButton souhaités de PrimaryCommands dans SecondaryCommands. Dans cet exemple, nous déplaçons le contrôle
PlaybackRateButtonvers le menu de dépassement.Ajoutez une étiquette au bouton et supprimez les informations de style, comme illustré ici. Étant donné que le menu de dépassement se compose de boutons de texte, vous devez ajouter une étiquette de texte au bouton et supprimer le style qui définit la hauteur et la largeur du bouton. Sinon, il ne s’affiche pas correctement dans le menu de dépassement.
<CommandBar.SecondaryCommands>
<AppBarButton x:Name='PlaybackRateButton'
Label='Playback Rate'>
</AppBarButton>
</CommandBar.SecondaryCommands>
Important
Vous devez tout de même afficher le bouton et l’activer pour pouvoir l’utiliser dans le menu de dépassement. Dans cet exemple, l’élément PlaybackRateButton n’est pas visible dans le menu de dépassement, sauf si la propriété IsPlaybackRateButtonVisible est true. Il n’est pas activé, sauf si la propriété IsPlaybackRateEnabled est true. La définition de ces propriétés est illustrée dans la section précédente.
Ajout d’un bouton personnalisé
Il se peut que vous souhaitiez personnaliser la classe MediaTransportControls pour pouvoir ajouter une commande personnalisée au contrôle. Que vous l’ajoutiez en tant que commande principale ou secondaire, la procédure de création du bouton de commande et de modification de son comportement est la même. Dans l’Exemple de contrôles de transport de média, un bouton « rating » est ajouté aux commandes principales.
Pour ajouter un bouton de commande personnalisé
- Créez un objet AppBarButton et ajoutez-le à la classe 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, voir la section Utilisation du menu de dépassement.) Sa position 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 méthode OnApplyTemplate, obtenez le bouton à partir du modèle et enregistrez un gestionnaire pour son événement Click. Ce code va dans la classe
CustomMediaTransportControls.
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 la classe MediaTransportControls est fourni par un élément Slider. Vous pouvez notamment le personnaliser en changeant la granularité du comportement de recherche.
Le curseur de recherche par défaut est divisé en 100 portions, de sorte que le comportement de recherche est limité à ces nombreuses sections. Vous pouvez modifier la granularité du curseur de recherche en obtenant la classe Slider à 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 à la classe Slider, puis changer la fréquence d’étape par défaut du curseur de 1 % en 0,1 % (1 000 étapes) si le média est plus long que 120 minutes. Le 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;
}
}
Articles connexes
Windows developer
Commentaires
Bientôt disponible : Tout au long de 2024, nous allons supprimer progressivement GitHub Issues comme mécanisme de commentaires pour le contenu et le remplacer par un nouveau système de commentaires. Pour plus d’informations, consultez https://aka.ms/ContentUserFeedback.
Envoyer et afficher des commentaires pour