I) Introduction
Cet article a pour but de vous montrer comment créer une application très simple en Silverlight : un lecteur média !
Si vous n’avez jamais fait de Silverlight, pas de problème, une application de ce genre est parfaite pour démarrer !
Je vais supposer pour la suite de ce tutoriel que vous disposez déjà de Visual Studio 2010 et des Silverlight 4 Tools. Si ce n’est pas le cas, je vous invite à les installer avant de poursuivre votre lecture.
II) Création d’un nouveau projet Silverlight
Tout d’abord, nous devons créer notre nouveau projet.
Pour cela, allez sur le menu de votre VS2010 (Visual Studio 2010), cliquez sur File, puis New Project
Sélectionnez le Template Visual C#, Silverlight. Choisissez ensuite Silverlight Application.
Rentrez un nom pour votre projet. Vous pouvez également modifier l’emplacement de votre projet.
Pour ce tutoriel, j’ai appelé mon projet « Lecteur média ».
Pour l’étape suivante, vérifiez que la version de Silverlight sélectionnée est bien la 4 puis cliquez sur OK.
Patientez ensuite quelques instants le temps que VS 2010 prépare votre nouveau projet.
Une fois créé, nous allons pouvoir commencer.
III) Création de l’interface à l’aide du Designer
Dans un premier temps, nous allons utiliser l’outil Designer de Vs 2010 afin de dessiner notre interface.
Notre lecteur média sera composé de 4 boutons, un Textblock et un MédiaElement.
Vers la gauche de Vs 2010, vous trouverez une Toolbox contenant tout ces éléments. Il vous suffit de les glisser-déposer sur votre designer afin de les intégrer directement dans votre code XAML.
Disposez-les comme bon vous semble.
Une fois vos 6 éléments placés, modifiez leurs noms par défaut pour plus de compréhension et de lisibilité par la suite. Un des boutons sera le bouton « play_button », un autre le bouton « pause_button », un autre le bouton « stop_button » et le dernier sera le bouton « open_button » qui nous permettra d’aller chercher un fichier à lire.
Pour modifier leurs noms, modifiez la valeur de leurs attributs Name directement dans votre code XAML :
<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="0,265,0,0" Name="button1" VerticalAlignment="Top" Width="75" />
Devient:
<Button Content="Play" Height="23" HorizontalAlignment="Left" Margin="0,265,0,0" Name="play_button" VerticalAlignment="Top" Width="75" />
Comme vous pouvez le constater, je n’ai changé que les valeurs de «Content » et de « Name ».
En ce qui concerne le Textblock, il nous servira à afficher le titre de la vidéo/musique/image lue par notre futur lecteur. Videz donc son contenu « content ».
Text="Textblock"=> Text=""
Vous pouvez également le renommer. Pour ce tutoriel, je le renomme « title_block ».
Pour le MediaElement, je laisse le nom par défaut.
IV) Positionnement de l’interface dans le code XAML
Le Designer à l’air pratique, mais en réalité, il est un peu traitre. Il est difficile d’exploiter le code qu’il génère, c’est pourquoi il est important une fois nos objets en place de redéfinir leurs emplacements dans le code XAML.
Compilons un peu notre programme pour voir. (Rappel : F5 pour compiler et shift + F5 pour pouvoir retravailler sur le code).
On se rend compte que le rendu sur le navigateur est bien différent de celui du Designer. Pour avoir une interface convenable, il est donc primordial d’écrire soi-même les positions et de ne pas se laisser faire par la facilité du designer !
La première chose que nous allons faire et donc de supprimer tout le bazar que nous à mis le designer : Supprimons tous les alignements et les Margins de tous nos éléments.
Une fois le ménage fait, votre code XAML devrait ressembler à ceci :
<UserControl x:Class="Lecteur_Média.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<Button Content="Play" Height="23" Name="play_button" Width="75" />
<Button Content="Pause" Height="23" Name="pause_button" Width="75" />
<Button Content="Stop" Height="23" Name="stop_button" Width="75" />
<Button Content="Open" Height="23" Name="open_button" Width="75" />
<TextBlock Height="23" Name="title_block" Text="" Width="138" />
<MediaElement Height="246" Name="mediaElement1" Width="400" />
</Grid>
</UserControl>
Patience, là, nous avons juste nettoyé les bêtises du Designer, nous allons maintenant apporter notre propre disposition.
Tout d’abord, nous allons séparer nos différents éléments dans des Stackpanels.
Les Stackpanels sont une sorte de pile d’éléments qui permettent de les empiler horizontalement ou verticalement.
Tout d’abord, nous allons insérer tous nos éléments dans un Stackpanel global, à l’intérieur du Grid.
<Grid x:Name="LayoutRoot" Background="White">
<StackPanel>
<Button Content="Play" Height="23" Name="play_button" Width="75" />
<Button Content="Pause" Height="23" Name="pause_button" Width="75" />
<Button Content="Stop" Height="23" Name="stop_button" Width="75" />
<Button Content="Open" Height="23" Name="open_button" Width="75" />
<TextBlock Height="23" Name="title_block" Text="" Width="138" />
<MediaElement Height="246" Name="mediaElement1" Width="400" />
</StackPanel>
</Grid>
Tous nos éléments sont maintenant gentiment alignés verticalement. C’est bien, mais on ne va pas s’arrêter là !
Afin de reconstruire la structure que nous avions avant, nous allons créer de nouveaux Stackpanels qui réuniront les éléments alignés horizontalement.
Si vous regardez l’interface que j’ai faite à l’aide du designer, vous verrez que nous allons donc créer… 2 nouveaux Stackpanels :
Un StackPanel réunissant le bouton Open et le TextBlock et un StackPanel réunissant nos 3 boutons. L’élément MédiaElement n’étant aligné horizontalement avec aucun autre, inutile de le mettre dans un autre StackPanel.
Il est important d’écrire nos éléments dans leur ordre d’apparition dans la page (de haut en bas), c’est pourquoi je vais modifier l’ordre de mes boutons afin que le bouton Open se retrouve en haut de l’interface).
<Grid x:Name="LayoutRoot" Background="White">
<StackPanel>
<StackPanel>
<Button Content="Open" Height="23" Name="open_button" Width="75" />
<TextBlock Height="23" Name="title_block" Text="" Width="138" />
</StackPanel>
<MediaElement Height="246" Name="mediaElement1" Width="400" />
<StackPanel>
<Button Content="Play" Height="23" Name="play_button" Width="75" />
<Button Content="Pause" Height="23" Name="pause_button" Width="75" />
<Button Content="Stop" Height="23" Name="stop_button" Width="75" />
</StackPanel>
</StackPanel>
</Grid>
Pour récapituler, nous avons donc :
Un Grid global (LayoutRoot) qui contient un StackPanel Global qui contient 2 autres Stackpanels et notre MédiaElement.
Patience, nous y sommes presque !
Nous allons modifier l’orientation de nos deux petits stackpanel. Par défaut, les Stackpanels empilent les éléments verticalement. Nous allons donc modifier l’orientation des stackpanels de nos boutons en leur indiquant une orientation horizontale : <StackPanel Orientation="Horizontal">
Ca ressemblerai presque à quelque chose !
Il reste juste deux petits détails à voir.
Personnellement, deux petits détails me gène : Notre MédiaElement est invisible une fois compilé et nos éléments sont très entassés. Un peu de visibilité et d’espacement et tout sera parfait !
Tout d’abord, notre MédiaElement. C’est très simple, nous allons l’intégrer dans une bordure.
Pour cela, tout comme un StackPanel, nous allons l’entourer de balise :
<Border>
<MediaElement Height="246" Name="mediaElement1" Width="400" />
</Border>
Cette balise va nous permettre de créer un contour à notre MédiaElement. Seulement, il faut lui rajouter quelques attributs :
- BorderThickness, qui va définir la taille en pixel de notre bordure (ici, 1 pixel).
- BorderBrush, qui va définir la couleur de notre bordure, ici « Black ».
<Border BorderThickness="1" BorderBrush="Black">
<MediaElement Height="246" Name="mediaElement1" Width="400" />
</Border>
Voila, désormais, nous pouvons avoir une visualisation de l’espace occupé par notre MédiaElement. Si on compile, on se rend compte qu’il prend beaucoup trop de place en largeur. Pas de panique, ce petit problème va disparaitre de lui-même par la suite.
Nous allons nous occupé très rapidement de l’alignement de notre interface. Afin de la centrer, nous allons utiliser les attributs d’alignement de notre Grid LayoutRoot :
<Grid x:Name="LayoutRoot" Background="White" HorizontalAlignment="Center" VerticalAlignment="Center">
Notre interface est maintenant centrée, il ne manque plus qu’une seule chose : les espaces entre les éléments.
Pour cela, nous allons utiliser la propriété Margin.
Elle fonctionne en pixel et agit de deux façons :
Margin="10" modifiera la marge de l’élément de 10 pixels dans toutes les directions.
Margin="10,5,7,0"/> modifiera la marge de l’élément de 10 pixels à gauche, 5 pixels en haut, 7 pixels à droite et 0 pixels en bas.
Grâce à ceci, nous allons pouvoir terminer notre interface !
Voici mon code :
<UserControl x:Class="Lecteur_Média.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="302" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White" HorizontalAlignment="Center" VerticalAlignment="Center">
<StackPanel >
<StackPanel Orientation="Horizontal">
<Button Content="Open" Height="23" Name="open_button" Width="75" />
<TextBlock Height="23" Name="title_block" Text="" Width="138" Margin="75,0,0,0"/>
</StackPanel>
<Border BorderThickness="1" BorderBrush="Black">
<MediaElement Height="246" Name="mediaElement1" Width="400" />
</Border>
<StackPanel Orientation="Horizontal">
<Button Content="Play" Height="23" Name="play_button" Width="75" />
<Button Content="Pause" Height="23" Name="pause_button" Width="75" Margin="75,0,0,0"/>
<Button Content="Stop" Height="23" Name="stop_button" Width="75" Margin="75,0,0,0"/>
</StackPanel>
</StackPanel>
</Grid>
</UserControl>
Et voici l’interface finale:
Pas trop mal non ? Allez, fini l’interface, attaquons nous à quelque chose de bien plus interessant :
Le fonctionnement du lecteur !
V) Ouvrir un fichier média
Nous allons nous intéresser au fonctionnement de notre bouton Open.
Ce bouton aura pour fonction d’ouvrir une fenêtre de navigation afin que l’utilisateur puisse aller chercher un de ses fichiers média (image, musique, vidéo) et le lire dans le lecteur.
Ce chapitre semble probablement le plus complexe du tutoriel niveau code, mais en réalité, le fonctionnement est très simple.
Nous allons tout d’abord affecté un événement Click à notre bouton open. Pour cela, tapez Click= dans la balise de notre bouton et laissez l’auto-complétion écrire le nom de l’événement. Vous pourrez ensuite le renommé, mais cela est utile, car Vs 2010 va créer directement la fonction dans le code behind.
<Button Content="Open" Height="23" Name="open_button" Width="75" Click="open_button_Click"/>
Faites ensuite click droit sur « Open_button_Click », puis « Navigate to event Handler » afin d’accéder directement au code behind de votre bouton. Vous devriez avoir le code suivant :
private void open_button_Click(object sender, RoutedEventArgs e)
{
}
C’est dans cette fonction que nous allons écrire le code qui nous permettra d’aller chercher un fichier média et de le stocker dans notre MédiaElement.
Pour cela, nous allons procéder par étape.
Nous allons tout d’abord ouvrir créer un nouvel objet OpenFileDialog.
OpenFileDialog openFileDialog1 = new OpenFileDialog();
Nous allons ensuite indiquer à notre objet quelques configurations, comme les extensions des fichiers à prendre. Dans notre cas, je vais autoriser tous les types de fichiers.
openFileDialog1.Filter = "All Files (*.*)|*.*";
Quelques configurations supplémentaires:
openFileDialog1.FilterIndex = 1;
openFileDialog1.Multiselect = true;
Ensuite, nous allons stocker dans un booléen l’action de l’utilisateur, à savoir si il à sélectionner un fichier ou non :
bool? userClickedOK = openFileDialog1.ShowDialog();
Ensuite, nous allons créer une structure conditionnelle qui dépendra de l’état de notre booléen :
if (userClickedOK == true)
{
}
Si notre booléen est égale à « true », cela signifie que l’utilisateur à sélectionner un fichier. Nous allons donc récupérer ce fichier et le stocker dans la source de notre MédiaElement :
if (userClickedOK == true)
{
System.IO.Stream fileStream = openFileDialog1.File.OpenRead();
mediaElement1.SetSource(fileStream);
}
Maintenant que nous avons chargé un fichier média dans notre lecteur, nous allons afficher son titre dans le TextBlock prévu à cet effet :
title_block.Text = openFileDialog1.File.Name;
Au final, nous devrions avoir:
private void open_button_Click(object sender, RoutedEventArgs e)
{
OpenFileDialog openFileDialog1 = new OpenFileDialog();
openFileDialog1.Filter = "All Files (*.*)|*.*";
openFileDialog1.FilterIndex = 1;
openFileDialog1.Multiselect = true;
bool? userClickedOK = openFileDialog1.ShowDialog();
if (userClickedOK == true)
{
System.IO.Stream fileStream = openFileDialog1.File.OpenRead();
mediaElement1.SetSource(fileStream);
title_block.Text = openFileDialog1.File.Name;
}
}
Testez-donc !
VI) Les boutons de lecture
Nous allons rajouter une petite fonctionnalité à notre lecteur concernant l’accès des boutons:
Tant qu’aucun fichier n’est chargé, les boutons Play, Pause et Stop seront grisés.
Lorsque nous chargeons un fichier, le bouton Play sera disponible.
Lorsque nous lisons un fichier, le bouton Play sera grisé et les boutons Stop et Pause et seront disponibles.
Tout d’abord, nous allons définir nos trois boutons comme étant inaccessible.
Pour cela, nous allons donner à leurs propriétés IsEnable la valeur : False.
<StackPanel Orientation="Horizontal">
<Button Content="Play" Height="23" Name="play_button" Width="75" IsEnabled="False" />
<Button Content="Pause" Height="23" Name="pause_button" Width="75" Margin="75,0,0,0" IsEnabled="False"/>
<Button Content="Stop" Height="23" Name="stop_button" Width="75" Margin="75,0,0,0" IsEnabled="False"/>
</StackPanel>
Nos boutons sont donc innaccesible par défaut.
Une fois le fichier chargé, il faut rendre accessible le bouton Play, pour cela, retournez dans la structure conditionnel du chapitre précédent et rajoutez ceci :
play_button.IsEnabled = true;
Lorsqu’un fichier est chargé, le bouton Play sera disponible. Nous allons donc nous attaquer au fonctionnement de ce bouton, bien plus simple que son ami « open ».
Créer un événement Click comme fait précédemment, mais pour le bouton Play cette fois.
<Button Content="Play" Height="23" Name="play_button" Width="75" IsEnabled="False" Click="play_button_Click"/>
Nous avons donc en code behind:
private void play_button_Click(object sender, RoutedEventArgs e)
{
}
Il faut réfléchir aux actions de notre bouton. Que va-t-il donc faire ?
Je vous donne la réponse : Lire le fichier chargé dans le MédiaElement, et ce grâce à la fonction :
mediaElement1.Play();
Mais ce n’est pas tout, il faut également libérer l’accès aux boutons Stop et Pause, et interdire l’accès au bouton Play durant la lecture.
private void play_button_Click(object sender, RoutedEventArgs e)
{
mediaElement1.Play();
stop_button.IsEnabled = true;
pause_button.IsEnabled = true;
play_button.IsEnabled = false;
}
Testons donc notre lecture !
Normalement, un petit détail devrait vous gêner : Lors du chargement d’une vidéo ou d’une musique, le lecteur démarre automatiquement sans l’appuie sur le bouton Play !
Afin d’éviter cela, il suffit de modifier l’autoplay de notre MédiaElement :
<MediaElement Height="246" Name="mediaElement1" Width="400" AutoPlay="False"/>
Une fois que votre lecture marche parfaitement, faites de même pour les boutons Pause et Stop :
Pour le bouton Pause :
private void pause_button_Click(object sender, RoutedEventArgs e)
{
mediaElement1.Pause();
stop_button.IsEnabled = false;
pause_button.IsEnabled = false;
play_button.IsEnabled = true;
}
Et pour le bouton Stop :
private void stop_button_Click(object sender, RoutedEventArgs e)
{
mediaElement1.Stop();
stop_button.IsEnabled = false;
pause_button.IsEnabled = false;
play_button.IsEnabled = true;
}
Félicitations, vous avez créé votre propre lecteur média en Silverlight !
Il existe bien d’autre options et propriété que vous pourrez utiliser afin d’améliorer votre lecteur, comme modifier le volume ou afficher une barre de progression, mais je vais vous laisser les découvrir par vous même !
f2d3c624-96cb-4023-bdeb-3c41ad0a5800|0|.0
Silverlight, Visual Studio 2010
tutoriel, silverlight, visual studio 2010