I- Introduction

          Dans les nombreuses nouveautés du WPF, nous retrouvons une série d’améliorations visuelles ainsi que diverses possibilités de configurations.

Nous verrons qu’elles sont ces améliorations en détails et comment les configurer ou les personnaliser.

Nous commencerons par le mode ClearTypeHint pour l’aspect visuel puis nous verrons les autres nouveautés en ce qui concerne l’amélioration de l’affichage du texte.

 

II- Le mode ClearTypeHint

          Le mode ClearTypeHint permet de lisser les polices et de permettre ainsi un affichage plus net. Nous avons donc la possibilité d’activer ce mode afin d’améliorer la qualité visuelle du texte.

Pour cela nous n’avons besoin que d’activer la propriété « RenderOptions.ClearTypeHint » correctement.

La classe « RenderOptions » nous permettra de contrôler le rendu du ou des objets :

 

III- Le bindable Run

          Dans le WPF 4, un « Run » pourra être binder afin d’éviter certains dysfonctionnements tel qu’un décalage d’une partie d’un texte, ou encore l’apparition d’espaces non voulus.

Un « Run » est un contrôle qui possède les mêmes caractéristiques qu’un « TextBlock » (mais qui ne peut pas être positionné). Pour ce faire nous l’imbriquerons donc dans un « TextBlock ».

Ce contrôle permet grâce à la propriété « Text » de spécifier le texte à afficher.

 

 

IV-Le mode TextFormating

          Le mode « TextFormating » améliore l’affichage des petites polices de caractères. Il est rattahcé à la propriété « textOptions » (il s’agit d’une classe qui permet de contrôler le comportement du rendu texte grâce à une série d’options).

Nous avons le choix entre deux propriétés pour ce mode :

· Ideal : il s’agit du rendu texte par défaut.

· Display : il s’agit du mode qui permet d’améliorer la qualité de l’affichage du texte (le texte sera plus propre une fois affiché)

 

 

V- SelectionBrush et SelectionOpacity

          Les propriétés « SelectionBrush » et « SelectionOpacity » peuvent être utilisées pour des TextBox, Rich TextBox, FlowDocumentPageViewer, FlowDocumentScrollViewer, FlowDocumentReader et PasswordBox.

La propriété SelectionBrush sert à définir la couleur du surlignement du texte. Nous pourrons également changer, si nous le désirons, le gradient du surlignage.

La propriété SelectionOpacity sert simplement à définir l’opacité du surlignage. En ce qui concerne l’étalonnage de l’opacité, avec une opacité de 1 nous ne verrons plus le texte.

· SelectionBrush :

· SelectionOpacity :

 

VI-Le CaretBrush

          Le CaretBrush est une propriété qui permet de changer la couleur du curseur d’insertion (la tickbar qui est par défaut noire). Cette propriété peut être utilisée sur une « TextBox », « RichTextBox », et une « PasswordBox » :

 

VII-Conclusion

          Ces petites nouveautés en ce qui concerne l’affichage peuvent s’avérer très utile lorsque nous avons besoin de manipuler du texte. Cela permet d’éviter certains dysfonctionnements d’affichage.

Ainsi, avec le WPF 4, nous pouvons maintenant aussi personnaliser certains petits détails tels que la tickbar ou encore la couleur ou même l’opacité d’un sur lignage, afin de personnaliser au maximum notre

application.

WPF, Visual Studio 2010

 

 

Le clipboard et le drag and drop sont des nouvelles fonctionnalités arrivées avec la version 4 de Silverlight.

Ici ces nouveautés permettent de faciliter la maniabilité et la fonctionnalité du Silverlight 4.0.

Ci-dessous vous pouvez observer le code nécessaire au bon fonctionnement de ces nouvelles fonctionnalités.

 

using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using System.Windows.Media.Imaging;   namespace _04_ClipboardAndDragDrop {     public partial class MainPage : UserControl     {         public MainPage()         {             InitializeComponent();         }           private void OnCopy(object sender, RoutedEventArgs e)         {             Clipboard.SetText(copyPasteBox.Text);         }           private void OnPaste(object sender, RoutedEventArgs e)         {             copyPasteBox.Text = Clipboard.GetText();         }           private void OnDragEnter(object sender, System.Windows.DragEventArgs e)         {                             }           private void OnDragOver(object sender, System.Windows.DragEventArgs e)         {                             }           private void OnDrop(object sender, System.Windows.DragEventArgs e)         {                     if(e.Data.GetDataPresent(DataFormats.FileDrop))                     {                            e.Handled = true;                 var files = e.Data.GetData(DataFormats.FileDrop) as IEnumerable<System.IO.FileInfo>;                 if (files == null)                     return;                   foreach (var file in files)                 {                     try                     {                         var img = new BitmapImage();                           img.SetSource(file.OpenRead());                         wrapPanel.Children.Add(new Image { Source = img, MaxWidth = 150, Margin = new Thickness(4) });                     }                     catch                     {                     }                 }              }         }     } }

 

Pour copier le texte rentré dans la TextBox il suffit juste d’appeler la méthode « SetText » de l’objet Clipboard.

private void OnCopy(object sender, RoutedEventArgs e) {      Clipboard.SetText(copyPasteBox.Text); }

 

Le résultat ainsi obtenu est présenté ci-dessous.

 

 

Il en est de même pour coller une sélection avec la méthode GetText().

private void OnPaste(object sender, RoutedEventArgs e) {      copyPasteBox.Text = Clipboard.GetText(); }

 

Cette nouvelle fonctionnalité n’a pas vraiment d’utilité étant donné que le très célèbre « CTRL+C » et  « CTRL+V » fonctionne parfaitement ! Mais dans le futur qui sait ? Peut être que cette nouveauté sera très utilisée dans une application donnée.

 

En ce qui concerne le Drag & Drop, ce contrôle est encore assez limité. En effet il nous est impossible de revenir en arrière du moment que le Drag & Drop est déjà effectué.

 

Comme le screenshot du dessus nous le montre, cette nouvelle fonctionnalité nous permet d’importer tout simplement des fichiers dans une application Silverlight 4.0 grâce à un simple glissé-déposer.

Cette fonctionnalité pourrait tout à fait être implémentée sur une plateforme de rendu de projet ou bien sûr, comme présenté dans l’exemple, être intégrée dans une application visant à l’upload de fichiers.

 

 

En conclusion, nous pouvons dire que de par ces nouvelles fonctionnalités, Silverlight exprime sa volonté d’améliorer son interface avec les utilisateurs. Certainement pour viser un public moins averti qui aime bien les applications faciles d’utilisation et attrayantes.

 

 

C#, Silverlight, Visual Studio 2010

L'un des points de faiblesses de silverlight 3.0 comparé a ses concurents était de ne pas povoir accéder a ses fichiers locaux directement a partir de l'application silverlight 3.0. Désormais, Grâce à la nouvelle version de silverlight (silverlight 4.0) tout cela est maintenant possible.

Cette nouveauté se résume à une méthode : « Environment.GetFolderPath » qui nous permet de récupérer le répertoire du chemin désiré. Dans le cas opposé, si l’on veut énumérer tous les fichiers contenus dans un répertoire, nous avons la méthode :  « Directory.EnumerateFiles »

using System; using System.Collections.Generic; using [...]   namespace APILocalFiles {     public partial class MainPage : UserControl     {         public MainPage()         {             InitializeComponent();         }           private void OnEnumerateLocaFiles(object sender, RoutedEventArgs e)         {             List<string> photosInFolder = new List<string>();               var photos = Directory.EnumerateFiles(Environment.GetFolderPath(Environment.SpecialFolder.MyPictures));               foreach (var item in photos)             {                 photosInFolder.Add(item);             }               lbPhotos.ItemsSource = photosInFolder;         }     } }

Ici il est créé une méthode permettant d’énumérer tous les fichiers et dossiers contenus dans le répertoire indiqué en paramètre.

La boucle foreach permet ici d’ajouter chaque élément énuméré à la liste de chaine de caractère créée au début.

Après compilation on obtient la fenêtre ci-dessus.

Cependant si l’on clique sur « Enumerate Local Files » Visual Studio nous sort une exception présentée ci-dessous. En effet, pour que cette nouvelle API fonctionne correctement, il faut absolument que l’application s’exécute en dehors du navigateur et en mode plus de privilège.

Pour palier à cette exception il suffit d’aller dans les propriétés de l’application silverlight et cocher les lignes suivantes :

            -« Enable running application out of browser »

-« Require elevated trust when running outside the browser » après avoir cliqué sur « Out-of-Browser Settings… »

Ensuite on relance l’application et là, à l’aide d’un clic droit, on installe l’application sur l’ordinateur.

En effet, l'accés aux fichiers locaux se fait en Out Of Browser (OOB)

De plus, si par exemple nous voulons implanter cette fonctionalité dans une application utilisée par de nombreuses personnes, ces dernieres devront toutes installer cette application en "local" sur leurs machines. Ce dernier point peut à la fois etre un avantage et un inconvénient.

Une fois cette application installée, si l’on clique sur « enumerate files » la liste des dossiers et documents contenus dans le répertoire est affichée, comme cela nous est détaillé ci-dessous :

Nous pouvons dés-lors affirmer que par cette nouveauté ainsi que bien d'autres non citées ici, silverlight 4.0 exprime bien sa volonté de revenir au contact de ses principaux concurents tel que le flash.

Bien évidemment a l'heure où est écrit cet article la version 4 de Silverlight n'est aps une réelle nouveauté. De plus avec la sortie de la version 5 de HTML, cette derniere tend à faire oulier silverlight.

Attendons de voir la version 5 de Silverlight qui s'annoce assez intérésente :)

 

C#, Silverlight, Visual Studio 2010

 

Introduction :

Cet article va vous apprendre comment créer une visionneuse d’image en VB.NET. Pour ceux qui ne sauraient pas ce qu’est une visionneuse d’image, voici celle de Windows. A la fin de ce TP nous devrions avoir un résultat similaire.

Objectifs de cet article :

-          Créer des contrôles et des évènements

-          Créer un menu

-          Lister les fichiers présents dans un dossier

-          Imprimer une image

-          Copier une image dans le presse-papier

-          Supprimer un fichier

-          Faire pivoter une image

 

Première étape : Création du projet

La première étape consiste à créer un nouveau projet Visual Basic - Windows Form Application. Donnez-lui le nom de votre choix, moi j’ai choisi ImageViewer. Ce projet a été réalisé à l’aide de Visual Studio 2010 Ultimate.

Vous devriez voir un onglet appelé Form1.vb [Design]. A l’intérieur se trouve une fenêtre nommée Form1. Dans ses propriétés changez les attributs Name et Text pour ImageViewer et mettez l’attribut Size à 800 ; 600.

Deuxième étape : Création des contrôles

Pour créer un menu, utilisez le MenuStrip de la boîte à outils et insérez le dans la fenêtre. Créez le sous-menu Fichier qui contient les options : Ouvrir,  Copier, Imprimer, Supprimer et Quitter.

Ensuite il faut ajouter des boutons. Il en faut six : Suivant, Précédent, Diaporama, Rotation Gauche, Rotation Droite et Supprimer. Tous les boutons sont placés dans un Panel. Mettez la propriété Visible du Panel à False pour éviter que les boutons soient visibles lorsqu’aucune image n’est affichée dans la PictureBox Il faut également ajouter une PictureBox au milieu de la fenêtre. La propriété SizeMode de la PictureBox doit être à StretchImage.

Pour mettre des images dans les boutons, rendez-vous dans les Propriétés du projet (Projet, Propriétés de ImageViewer) puis dans Ressources. Ajoutez-y les images que vous souhaitez utiliser. Celles qui apparaissent sur les captures d’écran proviennent d’IconFinder. Ensuite il suffit de modifier la propriété Image des boutons.

Pour afficher des informations sur les boutons il faut créer un ToolTip et modifier la propriété « Tooltip sur NomDeVotreTooltip » de chacun des boutons.

Troisième étape : Création d’une classe Viewer

Une fois tous les contrôles créés, ajoutez une Classe au projet. Pour cela, clic droit sur le projet, Ajouter, Classe. Appelez cette classe Viewer et ajoutez-y deux régions, une pour les attributs de la classe et l’autre pour les méthodes. Les régions ne sont en aucun cas nécessaires mais elles permettent de mieux organiser le code.

Vous devriez avoir quelque chose de ce type :

Public Class Viewer

#Region “Attributs”
#End Region

#Region “Méthodes”
#End Region

End Class

Cette classe contient deux attributs : tabImages qui est une liste contenant des liens absolus vers les images présentes dans le même dossier que l’image ouverte et current qui contient le numéro de l’image affichée.

#Region “Attributs”

Private tabImages As New ArrayList 'Liste contenant un lien absolu vers toutes les images présentes dans le dossier

                Private current As Integer 'Numéro de l'image affichée
#End Region

 

La fonction GetFiles :

Une fonction Getfiles existe déjà mais ne permet pas de lister les fichiers d’un répertoire en fonction de plusieurs extensions.

Public Function GetFiles(ByVal repertoire As String, ByVal extensions As String()) As String()

        Dim fichiers As List(Of String) = New List(Of String)()

        For Each extension As String In extensions

fichiers.AddRange(IO.Directory.GetFiles(repertoire, extension, IO.SearchOption.TopDirectoryOnly))

        Next

        Return fichiers.ToArray()

    End Function

 

 

Cette fonction accepte plusieurs paramètres : une chaine de caractères indiquant le chemin vers le répertoire dont veut lister les fichiers ainsi qu’un tableau de chaines de caractères. Ce tableau contient la liste des extensions qu’il faut prendre en compte. Elle renvoi un tableau de chaines de caractères qui sont les noms des fichiers dont les extensions correspondent à celles présentes dans le tableau. Pour chaque extension du tableau cette fonction va appeler la méthode GetFiles de la classe Directory.

IO.SearchOption.TopDirectoryOnly signifie que seuls les fichiers présents dans le répertoire actif sont listés et pas ceux des sous-répertoires.

Vous pouvez commenter les fonctions, pour cela ajoutez ''' (3 apostrophes) au dessus de la fonction. Vous devriez voir apparaitre les lignes ci-dessous.

    ''' <summary>

    '''

    ''' </summary>

    ''' <param name="parametre1"></param>

    ''' <param name="parametre2"></param>

    ''' <returns></returns>

    ''' <remarks></remarks>

Il suffit ensuite d’ajouter du texte entre les balises.

 

Le constructeur :

Le constructeur est une méthode qui est appelée au moment où un objet est créé, cette méthode a pour but d’initialiser les attributs de l’objet. Ici, le constructeur ne prendra aucun paramètre.

Sub New()

                For Each image As String In GetFiles(IO.Directory.GetParent(ImageViewer.OpenImage.FileName).FullName,{"*.jpg", "*.jpeg", "*.png", "*.gif", "*.bmp"})

                               tabImages.Add(image)

                Next

                               current = tabImages.IndexOf(ImageViewer.OpenImage.FileName)

                               Afficher_image(current)

End Sub

Le constructeur appelle la fonction GetFiles que vous avez créée plus tôt pour lister tous les fichiers ayant pour extension jpg, jpeg, png, gif ou bmp présents dans le même répertoire que l’image que l’utilisateur décide d’ouvrir. Chaque image du tableau renvoyé par la fonction GetFiles est ajoutée dans tabImages. Current prend pour valeur l’index de l’image ouverte par l’utilisateur.

 

La méthode Afficher_image :

    Public Sub Afficher_image(ByVal num_image As Integer)

        Try

            ImageViewer.PB_Image.Image = Image.FromFile(tabImages(num_image))

            Redim_image()

        Catch

            tabImages.RemoveAt(num_image)

            current += 1

            Afficher_image(current)

        End Try

    End Sub

 

Cette méthode prend un nombre en paramètre et permet d’afficher l’image ayant ce nombre pour index dans tabImages pour ensuite la redimensionner. Si l’application n’arrive pas à ouvrir une image (ce qui peut arriver si l’utilisateur l’a supprimée entre temps) alors elle est retirée de la liste et l’image suivante est affichée et la valeur de current est incrémentée.

ImageViewer est la classe qui contient tous les contrôles et les évènements qui y sont liés. PB_Image est le nom donné à la PictureBox, Image est la propriété qui a pour valeur l’image à afficher.

La méthode Redim_image :

    Public Sub Redim_image()

If ImageViewer.PB_Image.Image.Height <= ImageViewer.PB_Image.MaximumSize.Height And ImageViewer.PB_Image.Image.Width <= ImageViewer.PB_Image.MaximumSize.Width Then 'Si l'image a des dimensions plus petites que la taille maximum de la PictureBox

            ImageViewer.PB_Image.Size = ImageViewer.PB_Image.Image.Size

        Else

ImageViewer.PB_Image.Width = (ImageViewer.PB_Image.Image.Width * ImageViewer.PB_Image.MaximumSize.Height) / ImageViewer.PB_Image.Image.Height

 

ImageViewer.PB_Image.Height = (ImageViewer.PB_Image.Image.Height * ImageViewer.PB_Image.MaximumSize.Width) / ImageViewer.PB_Image.Image.Width

        End If 

ImageViewer.PB_Image.SetBounds(((ImageViewer.Width - ImageViewer.PB_Image.Width) / 2), ((ImageViewer.Height - ImageViewer.PB_Image.Height) / 2), ImageViewer.PB_Image.Width, ImageViewer.PB_Image.Height)

    End Sub

Si la hauteur et la largeur de l’image affichée sont inférieures à la hauteur et la largeur maximum de la PictureBox alors les dimensions de la PictureBox prennent celles de l’image pour valeur. Sinon elle est redimensionnée proportionnellement aux dimensions de l’image et aux dimensions maximums de la PictureBox. Une fois redimensionnée, elle est placée au centre de la fenêtre.

 

La méthode Image_suivante :

                Public Sub Image_suivante()

                               If current = (tabImages.Count - 1) Then

                                               Afficher_image(0)

                                               current = 0

                               Else

                                               Afficher_image(current + 1)

                                               current += 1

                               End If

                End Sub

Cette méthode affiche l’image qui se situe après l’image actuelle. Si l’index de l’image actuelle est égal au nombre d’éléments présents dans la liste – 1 (car une liste commence à 0) alors current prend 0 pour valeur sinon sa valeur est augmentée de 1.

 

La méthode Image_precedente :

Public Sub Image_precedente()

                If current = 0 Then

                               Afficher_image(tabImages.Count - 1)

                               current = tabImages.Count - 1

                Else

                               Afficher_image(current - 1)

                               current -= 1

                End If

End Sub

Cette méthode fonctionne sur le même principe que Image_suivante. Si l’index de l’image courante est 0  alors current vaut la taille de la liste - 1, dans le cas contraire il y a décrémentation de la valeur de current.

La méthode Rotation_image :

Public Sub Rotation_image(ByVal sensHoraire As Boolean)

If sensHoraire = False Then

ImageViewer.PB_Image.Image.RotateFlip(RotateFlipType.Rotate270FlipNone) 'Rotation de 90° dans le sens anti-horaire

ElseIf sensHoraire = True Then

ImageViewer.PB_Image.Image.RotateFlip(RotateFlipType.Rotate90FlipNone) ' Rotation de 90° dans le sens horaire

                End If

                Redim_image()

End Sub

Cette méthode prend un Booléen en paramètre. Ce booléen vaut True si la rotation se fait sans le sens horaire et False dans le sens anti-horaire. Après la rotation, l’image est redimensionnée pour qu’elle s’affiche correctement. Si elle n’était pas redimensionnée les proportions ne seraient pas conservées et l’affichage serait donc incorrect.

 

La méthode Supprimer_image :

Public Sub Supprimer_image()

ImageViewer.PB_Image.Image.Dispose()

Try ' Si une image est supprimée on l'enlève de la liste et on affiche la suivante

My.Computer.FileSystem.DeleteFile(tabImages(current), FileIO.UIOption.AllDialogs, FileIO.RecycleOption.SendToRecycleBin)

tabImages.RemoveAt(current)

current += 1

Afficher_image(current)

Catch 'Si l'utilisateur clique sur Annuler cela lève une exception

End Try

End Sub

Cette méthode envoi l’image courante à la corbeille. La boite de dialogue demandant confirmation est affichée. Si l’utilisateur clique sur Non ou ferme la boite de dialogue, une exception est levée, dans ce cas aucune instruction n’est exécutée. Si l’utilisateur clique sur Oui l’image est retirée de la liste et l’image suivante est affichée.

Qutrième étape : Création des évènements

Dans la classe ImageViewer, donc celle qui correspond à notre fenêtre, déclarez un objet de type viewer.

Dim viewer As Viewer

Evènements liés aux éléments du menu :

Ouverture d’une image :

Private Sub Ouvrir_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Ouvrir.Click

OpenImage.Filter = "Images| *.jpg; *.jpeg; *.gif; *.png; *.bmp"

If OpenImage.ShowDialog() = DialogResult.OK Then

viewer = New Viewer()

P_Boutons.Visible = True

End If

End Sub

Un filtre est créé pour qu’on ne puisse ouvrir que des images. Si une image est choisie alors le constructeur de la classe Viewer est appelé et les boutons sont affichés.

Copier une image dans le presse-papier :

Private Sub Copier_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Copier.Click

        If PB_Image.Image IsNot Nothing Then

            Clipboard.SetDataObject(PB_Image.Image)

        End If

End Sub

Si une image est affichée alors elle est placée dans le presse-papier. Elle pourra ensuite être collée dans un autre document.

 

Imprimer une image :

Private Sub Imprimer_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Imprimer.Click

        If PB_Image.Image IsNot Nothing Then

            PrintOptions.Document = Me.PrintImage

            If PrintOptions.ShowDialog() = DialogResult.OK Then

                Try

                    PrintImage.Print()

                Catch

                End Try

            End If

        End If

End Sub

 

Private Sub PrintImage_PrintPage(ByVal sender As System.Object, ByVal e As System.Drawing.Printing.PrintPageEventArgs) Handles PrintImage.PrintPage

        e.Graphics.DrawImage(PB_Image.Image, PB_Image.Bounds)

End Sub

 

Ces évènements sont appelés lorsque l’utilisateur veut imprimer une image. Créez deux autres contrôles dans le projet : un PrintDocument, appelé PrintImage et un PrintDialog, appelé PrintOptions. Si une image est affichée, alors le document à imprimer est cette image. Si l’impression est annulée ou ne fonctionne pas, une exception est levée.

Supprimer une image :

Private Sub Supprimer_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Supprimer.Click

        If PB_Image.Image IsNot Nothing Then

            viewer.Supprimer_image()

        End If

End Sub

Si une image est affichée alors on appelle la méthode Supprimer_image.

Quitter :

Private Sub Quitter_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Quitter.Click

        End

End Sub

Cet évènement arrête l’exécution de l’application et ferme la fenêtre.

Evènements liés aux boutons :

Le bouton Précédent :

Private Sub BT_Precedent_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles BT_Precedent.Click

        viewer.Image_precedente()

End Sub

Lorsqu’il y a un clic sur ce bouton, la méthode Image_precedente est appelée.

 

Le bouton Diaporama :

Private Sub BT_Diaporama_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles BT_Diaporama.Click

        Me.FormBorderStyle = Windows.Forms.FormBorderStyle.None

        Me.TopMost = True

        Me.WindowState = FormWindowState.Maximized

        P_Boutons.Hide()

        M_Menu.Hide()

        Cursor.Hide()

        Me.Focus()

        timer.Enabled = True

End Sub

 

Private Sub timer_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles timer.Tick

        viewer.Image_suivante()

End Sub

 

Shadows Sub KeyDown(ByVal sender As System.Object, ByVal e As System.Windows.Forms.KeyEventArgs) Handles MyBase.KeyDown

        If Me.WindowState = FormWindowState.Maximized Then

            If e.KeyCode = Keys.Escape Then

                Me.FormBorderStyle = Windows.Forms.FormBorderStyle.Sizable

                Me.WindowState = FormWindowState.Normal

                Me.TopMost = False

                P_Boutons.Show()

                M_Menu.Show()

                Cursor.Show()

                timer.Enabled = False

            End If

        End If

End Sub

Pour gérer le diaporama, créez un nouveau contrôle de type Timer. Mettez ses propriété Enabled à false et Interval à 5000ms. Une fois le timer déclenché il va appeler la méthode Image_suivante toutes les cinq secondes.

Lorsqu’il y a un clic sur le bouton Diaporama, les bordures de la fenêtre sont masquées, la fenêtre est affichée au premier plan et en plein écran. Les boutons, le curseur et le menu sont cachés et le timer est déclenché.

Pour arrêter le diaporama, ajoutez un évènement de type KeyDown sur la fenêtre. Si la fenêtre est en plein écran et qu’’il y a un appuie sur la touche Echap alors la fenêtre est remise dans son état précédent ; c’est-à-dire mode fenêtré avec bordures,  réaffichage des boutons, du curseur et du menu puis on arrêt du timer.

Le bouton Suivant :

Private Sub BT_Suivant_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles BT_Suivant.Click

        viewer.Image_suivante()

End Sub

Lorsqu’on clique sur ce bouton, la méthode Image_suivante est appelée.

 

Le bouton Rotation Gauche :

Private Sub BT_Gauche_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles BT_Gauche.Click

        viewer.Rotation_image(False)

End Sub

Un clic sur ce bouton appelle la méthode Rotation_image avec False en paramètre, ce qui veut dire que la rotation se fera dans le sens anti-horaire.

Le bouton Rotation Droite :

Private Sub BT_Droite_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles BT_Droite.Click

        viewer.Rotation_image(True)

End Sub

Un clic sur ce bouton appelle la méthode Rotation_image avec True en paramètre, ce qui veut dire que la rotation se fera dans le sens horaire.

Le bouton Supprimer :

Private Sub BT_Supprimer_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles BT_Supprimer.Click

        viewer.Supprimer_image()

End Sub

Ce bouton appelle la méthode Supprimer_Image.

Redimensionnement de la fenêtre :

Private Sub ImageViewer_SizeChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.SizeChanged

        PB_Image.MaximumSize = New Size((Me.Width), (Me.Height - 80))

        If PB_Image.Image IsNot Nothing Then

            viewer.Redim_image()

        End If

End Sub

Ajoutez un évènement SizeChanged sur la fenêtre. Lorsque la taille de la fenêtre change, les dimensions maximum de la PictureBox changent et si une image est affichée elle est redimensionnée.

Me.Height – 80 Permet de ne pas afficher une image au dessus des boutons ou du menu.

vb.net, Visual Studio 2010

Le nouvel OS mobile de Microsoft, Windows Phone 7, nous permet via l’écran tactile capacitif de gérer plusieurs points d’appuis. Nous allons voir dans cet article comment gérer cet écran au sein d’ XNA 4 et en faire une utilisation basique de détection de position.

Nous allons avoir besoin des logiciels et SDK suivants :

XNA Game Studio 4

Visual Studio 2010 + Windows Phone Tools

Maintenant voyons la marche à suivre pour la gestion du Touch. Tout d’abord, nous devons nous assurer que le Touch est disponible pour « lire » nos entrées dans la boucle Update.

 

TouchPanelCapabilities touchCap = TouchPanel.GetCapabilities();
 
             if (touchCap.IsConnected)
             {..}
 

Et l’on récupère l’état actuel du périphérique.

TouchCollection touches = TouchPanel.GetState();

 

On obtient donc une collection de « touches » (Points de pression) qui contient pour chaque touche ses coordonnées ainsi que l’état. Concernant ces états, il y a 4 possibilités :

-Invalid : Problème de reconnaissance
-Moved : La position a été mise à jour ou la position ne change pas
-Pressed : Il s’agit d’une nouvelle position
-Released : La position n’existe plus

 

Passons maintenant à la partie détection d’un appui sur l’écran.

if (touches.Count >= 1)
{

touchposition = (touches[0].Position);
}
 

Ici, on test si il y a au moins un point de pression de répertorier. Nous utilisons touchposition, qui est un Vector2 pour récupérer les coordonnées X et Y du point de pression. Attention ici il s’agit du point 0, l’écran du Windows Phone 7 peut gérer jusqu’à 4 points de pression. Il faudra donc penser lors du développement à tester les 4 points de pression. Ici à cause de l’émulateur seul le clic de la souris permet de simuler un point de pression. (Le nombre de point de pression possibles peut être vérifié via touchCap.MaximumTouchCount) .

Maintenant que nous avons ce Vector2 touchposition, nous pouvons l’utiliser comme nous voulons et très simplement. Par exemple pour afficher les coordonnées du point de pression.

Dans la boucle Draw, nous allons donc écrire les coordonnées du point de pression.

spriteBatch.Begin();         
string positionX = string.Format("X : {0}", touchposition.X);
spriteBatch.DrawString(font1, positionX,new Vector2(50,380), Color.White);
string positionY = string.Format("Y : {0}", touchposition.Y);
spriteBatch.DrawString(font1, positionY,new Vector2(50,420), Color.White);
spriteBatch.End();
 

font1 est un SpriteFont que j’ai ajouté au projet, il correspond à la police Segoe UI Mono. Celle utilisée par défaut par Windows Phone 7.

 

Faisons un petit résumé du code, commençons par la boucle Update :

TouchPanelCapabilities touchCap = TouchPanel.GetCapabilities();
if (touchCap.IsConnected)
{
TouchCollection touches = TouchPanel.GetState();


if (touches.Count >= 1)
{
touchposition = (touches[0].Position);
}
}
 

Et la boucle Draw pour dessiner notre résultat :

GraphicsDevice.Clear(Color.Black);
spriteBatch.Begin();
string positionX = string.Format("X : {0}", touchposition.X);
spriteBatch.DrawString(font1, positionX,new Vector2(50,380), Color.White);
string positionY = string.Format("Y : {0}", touchposition.Y);
spriteBatch.DrawString(font1, positionY,new Vector2(50,420), Color.White);
spriteBatch.End();
 

Voyons maintenant en image ce que l’on vient de réaliser :

Premier screen : Lancement de l’application, pas d’appui coordonnées = 0
Second screen : Simulation d’un point de pression via un clic souris, mise à jour des coordonnées
Troisième screen : Autre clic, changement des coordonnées

Maintenant c’est à votre tour d’utiliser le Touch. A vos Visual Studio !

C#, Visual Studio 2010, Windows phone 7, XNA .net, visual studio 2010, wp7, xna

Introduction

Bonjour,

Tout au long de cet article, vous allez apprendre les animations en WPF. Pour cela, je me suis basé sur le précédent article :

Ce qu’il va nous falloir :

-         Le projet de la fenêtre de notification : Window_Notif.zip (83,36 kb)

-         Expression Blend ( dans ce tutorial j’utilise Expression Blend 4, mais c’est exactement le même principe avec la version 3. )

-     Visual Studio

Une simple animation

Donc, nous nous sommes arrêté à une simple fenêtre qui apparaît et disparait au bout de quelques secondes.

Ce serait quand même beaucoup mieux si tout ceci était animé !

Pour commencer on ouvre le projet dans Expression Blend. Donc comme d’habitude :

File -> Open Project/Solution

Et on lui donne le .sln, exactement comme dans Visual Studio.

Dans l’onglet « Projects », il suffit de double cliquer sur la fenêtre à éditer.

A cet endroit, il faut bien penser à sélectionner [Window] avant de cliquer sur le signe + pour ajouter un storyboard.

Sinon vous créeriez une animation uniquement sur le calque choisi.

Donnez un nom à ce storyboard ( « Pop »  par exemple )

A ce moment le cadre deviens rouge pour montrer que ça enregistre les actions, donc évitez de bouger tout n’importe sinon cela risque de voir. Si éventuellement vous souhaitez deplacer un contrôle ( parce qu’il est mal placé par exemple ). Pensez à cliquer sur la petite boule rouge en haut à gauche pour suspendre l’enregistrement.

Le principe est assez simple, à gauche se trouve une timeline. Le curseur est placé à l’instant 0. Comme on veux faire une animation pour l’apparition, il faut qu’au début de l’animation, la fenêtre soit absente, puis arrive en glissant tout en apparaissant.

Ainsi, curseur à 0 ms, on vérifie que c’est toujours [window] qui est sélectionné, on met l’opacité à 0 du Border et on reste appuyé sur la flèche vers le bas jusqu'à ce que la fenêtre soit hors du cadre noir.

Note : Le fait de rester appuyé sur la touche fléchée vers le bas pose des soucis lors des « ctrl+z » en cas d’erreur mais est très précis et évite de décaler la fenêtre.

Note : Le cadre noir est en quelque sorte notre « champ de vision » tout ce qui est hors de celui ne sera pas visible.

Il ne reste plus qu’à se placer à 1s et de remettre la fenêtre en place et l’opacité du Border à 90%.

 

La première animation est finie !

 

Voici la vidéo des actions à faire :

Vous pouvez également télécharger l'archive du projet fini : Window_Notif_anim.zip (83,36 kb)

 

Voila, ce tutorial est fini , je vous remercie pour votre interêt et vous souhaite un bon codage.

ADO.NET, C#, Visual Studio 2010, WPF tutoriel, wpf, xaml, c#, .net, astuces, fenetre, développement, outils, vitesse d'animation

 

     Comme prévu, dans les nombreuses nouveautés de Silverlight 4, nous retrouvons le support de l’impression. Cette fonctionnalité, qui n’était pas présente avant, est tout de même importante pour des applications métiers et souvent incontournable pour un client, qui a souvent besoin d’imprimer des rapports, graphiques ou même encore des plannings. Cette option indispensable est assez simple à implémenter. Nous verrons comment imprimer tout l’écran, puis comment définir la zone à imprimer. Tout ceci se fera grâce à la classe « PrintDocument » qui nous permettra d’ouvrir notre boîte de dialogue et d’imprimer.

Tout d’abord pour commencer, voici un aperçu de notre application de test :

     - Une Grid contenant notre bouton, notre StackPanel.

     - Deux images, contenues dans le StackPanel.

     - Un bouton « Imprimer » pour lancer l’impression.

 

Comment imprimer l’application ?

Pour commencer n’oubliez pas d’indiquer l’espace nom adéquat : « System.Windows.Printing».

Voici le code XAML de notre application :

En ce qui concerne notre code behind, nous devrons dans le « MainPage » nous abonner à l’évènement « PrintPage » (pour définir ce que nous voulons imprimer) :

     Pour l’évènement « PrintPage », nous définissons la zone à imprimer (ici l’ensemble de notre application) et le nombre de pages à imprimer. En mettant « e.HasMorePages » à « false » nous indiquons à notre application qu’il n’y a pas de pages en plus à imprimer. Si nous attribuons à cette propriété la valeur « true », l’évènement « PrintPage » se reproduira jusqu’à ce que « HasMorePages » passe à « false ».

     En ce qui concerne le bouton, vous n’avez plus qu’à appeler la méthode « Print » pour lancer l’impression et définir en même temps le nom de votre document (pour tester l’impression vous pouvez utiliser  « PDFCreator » ou d’autre logiciel similaire).

 

 

 

 

 

     Comme vous le voyez la zone que nous avons définie pour l’impression est l’application entière (c’est pourquoi ces horribles couleurs étaient là depuis le début). Cela nous a donc imprimé notre « Grid » entière contenant le « StackPanel », le bouton et nos images.

 

Comment personnaliser notre impression ?

     Affiner notre impression est tout aussi simple : il suffit juste de changer la zone à imprimer. Si nous voulons imprimer nos images, nous n’aurons qu’à changer la valeur de « e.PageVisual ».

Ainsi nous aurons juste nos images d’imprimées et sans le bouton « Imprimer ». La couleur saumon du StackPanel est là pour montrer que le fond est tout de même imprimé. Il suffira de définir la couleur du fond à blanc pour n’avoir que nos images sur une feuille blanche.

Dans le cas où nous ne voulons pas garder la disposition de l’écran, il nous suffira juste de créer plusieurs « UIElement » dans l’évènement « PrintPage » et de renseigner à la propriété « PageVisual » le nom de notre « UIElement » racine.

Ainsi dans notre cas, les images seront aligner comme nous le souhaitons, et nous n’aurons plus nos fond apparent ainsi que notre bouton.

Et voici le résultat : nos images correctement placées sans fond coloré et avec un titre. Si notre contenu est trop grand pour être correctement placé dans la « PrintableArea », il sera découpé (ce qui est le cas plus haut).

Nous avons également à notre disposition l’évènement « BeginPrint » qui nous permet de mettre en place d’autres tâches à effectuer avant d’imprimer (ouverture d’une fenêtre pour faire patienter ou visualiser l’envoi du document à l’imprimante). Avec l’évènement « EndPrint » vous pourrez mettre en place d’autres tâches une fois que l’impression sera terminée (comme par exemple envoyer un signal si l’imprimante n’a plus de papier).

 

Conclusion

     L’apparition de cette fonctionnalité avec la sortie de Silverlight 4 nous permet de rendre les applications Silverlight plus accessible pour les clients. En effet beaucoup d’entre eux trouvaient cette fonctionnalité indispensable.

     Même s’il semble facile et rapide de rendre une application Silverlight imprimable, cette fonctionnalité n’en reste pas moins importante de par son utilisation. Comme dit précédemment, pouvoir imprimer son application reste un argument de poids face à un client.

Silverlight, Visual Studio 2010

Visual Studio 2010 intègre un module d'extensions afin de personnaliser ou ajouter des fonctionnalités à l'IDE. Ce module d'extensions est disponible dans Tools -> Extension Manager ou via l'icône  de la barre d'outils.

Via la rubrique Online Gallery, vous pouvez ajouter simplement des extensions à Visual Studio 2010.

Dans cet article, je vous propose de découvrir 3 extensions qui à mon sens sont inévitables pour gagner du temps et de la lisibilité :

• Productivity Power Tools

Ce module, le plus complet des 3 extensions présentées dans cet article ajoute une multitude de fonctionnalités qu'il n'est pas possible d'énumérer dans un seul article. Parmi les fonctionnalité les plus utiles :

• En faisant Ctrl + Click sur une variable ou une méthode, Visual Studio 2010 ouvre le fichier contenant la définition de ce qui a été cliqué et surligne la 1re ligne de déclaration.
• L'ajout de guideline (guide) dans une page de code permet d'aligner des éléments, ou de ne pas dépasser un certain nombre de caractères par ligne. Pour ajouter un guide, placez le curseur à l'endroit où vous souhaitez ajouter le guide, puis click droit -> Guidelines -> Add Guideline

• le Solution Navigator permet de classer les fichiers ouverts, édités, sauvegardés, etc.... Le solution Navigator se trouve à côté du Solution Explorer

Beaucoup d'autres fonctionnalités sont disponibles via ce module : auto-complétion, informations sur les variables, etc...

• VS10x Code Map

Ce module ajoute sur la droite ou la gauche de la fenêtre de code une carte du code regroupé par régions, méthodes, etc... une simple click sur la méthode en question affiche la 1re ligne de la définition de la méthode dans la page de code. Ce module permet également de déplier ou replier toutes les régions contenu dans la page.

• VS10x Method Block Highlighter

Ce module fonctionne avec VS10x Code Map et permet de surligner la définition complète d'une méthode lorsque l'on clique sur la méthode en question dans le Code Map décrit ci-dessus. Un click droit sur une méthode dans le Code Map puis Highlight In Code -> Green permet de surligner toute la méthode de façon permanente en vert. Très utile pour se repérer rapidement dans le code.

Pour plus de modules rendez-vous sur le site de la galerie Visual Studio 2010.

URL originale de l'article

Visual Studio 2010 visual studio 2010, extensions, productivité

Introduction

Dans cet article, on a voir un aperçu des nouvelles fonctionnalités d’ASP.NET qui sont inclus dans le cadre  du Framework .net et Visual Studio 2010.  

Les nouvelles fonctionnalités

1.     Extensibilité du Output Caching

 

1.1.           Contexte:

Le cache est une zone de la mémoire où sont stockées les opérations et cela dans le but d'améliorer les performances. Lorsque nous avons besoin du cache à nouveau, nous recherchons dans ce dernier contrairement à l'exécution d’une nouvelle opération.

1.2.           Problème:

Cette approche  bien sûr est  limitée au niveau de la mémoire. Si nos serveurs  ont un trafic lourd, alors la mémoire consommée par la mise en cache  peut rivaliser avec les exigences de la mémoire à partir d'autres applications ou composants  propre à cette application web.

1.3.           Solution:

Le Extensible Output Caching  permet de configurer un ou plusieurs fournisseurs de Output-Cache pour divers  mécanismes de persistance, tels que les disques durs (localement ou à distance), le stockage des nuages et could storger.

1.4.           Implémentation de la stratégie:

Il est possible de créer un fournisseur personnalisé d’Output-cache comme une classe qui est dérive de ce nouveau type System.Web.Caching.OutputCacheProvider. Par exemple, nous allons créer un fournisseur à l'aide AppFabric (Velocity) comme il est montré dans suivant :

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Caching;   namespace WebAppOutputCacheExperiment.OutputCacheProviders {     public class VelocityCacheProvider : OutputCacheProvider, IDisposable     {         private DataCache dataCache;         const String OutputCacheName = "OutputCache";         public VelocityCacheProvider()         {             DataCacheFactory factory = new DataCacheFactory();             this.dataCache = factory.GetCache(OutputCacheName);         }         public override object Add(string key, object entry, DateTime utcExpiry)         {             this.dataCache.Add(key, entry, utcExpiry - DateTime.UtcNow);             return entry;         }         public override object Get(string key)         {             return this.dataCache.Get(key);         }         public override void Remove(string key)         {             this.dataCache.Remove(key);         }         public override void Set(string key, object entry, DateTime utcExpiry)         {             throw new NotImplementedException();         }         public void Dispose()         {             this.dataCache = null;         }     } }

Exemple 1

-          Vous pouvez ensuite configurer le fournisseur dans le fichier Web.config en utilisant la nouvelle sous-section fournisseur de l'élément OutputCache  voir exemple suivant:

<caching>       <outputCache defaultProvider="AspNetInternalProvider">         <providers>           <add name="VelocityCache" type="WebAppOutputCacheExperiment.OutputCacheProviders.VelocityCacheProvider, WebAppOutputCacheExperiment"/>         </providers>       </outputCache> </caching>

Exemple  2

-          En outre, vous pouvez choisir entre différents fournisseurs d’Output-cache pour chaque contrôle et à chaque demande. La meilleure façon de choisir un autre fournisseur d’Output-cache pour les différents UserControl  est de le faire de façon déclarative en utilisant l'attribut ProviderName, nouveau dans une directive de contrôle :

<%@ OutputCache="" Duration="60" VaryByParam="None" providerName="VelocityCache" %>

Exemple  3

-          Au lieu de spécifier de manière déclarative le fournisseur, vous pouvez  substituez la méthode GetOuputCacheProviderName dans le fichier Global.asax et préciser le fournisseur à utiliser pour une demande spécifique :

public override string GetOutputCacheProviderName(HttpContext context)         {             if (context.Request.Path.EndsWith("CacheWebForm.aspx"))                 return "VelocityCache";             else                 return base.GetOutputCacheProviderName(context);         }

Exemple 4

2.     Redirection permanente d'une page

 

2.1.           Contexte :

Il est de pratique courante dans les applications Web pour se déplacer dans les pages et dans le contenu au fil du temps, qui peut conduire à une accumulation de liens périmés dans les moteurs de recherche.

2.2.           Problème:

Traditionnellement, cela se fait en utilisant la méthode Response.Redirect de transmettre une demande à la nouvelle URL. Toutefois, cette méthode émet un HTTP 302 Found  comme réponse, ce qui entraîne un voyage HTTP extra round lorsque les utilisateurs tentent d'accéder aux anciennes URL.

2.3.           Solution:

ASP.NET 4 ajoute une méthode RedirectPermanent inédit qui facilite d’émettre HTTP 301 Moved Permanently.

2.4.           Implémentation de la stratégie:

 

Response.RedirectPermanent("newlocation/page.aspx");

Exemple 5

3.     Shrinking Session State

 

3.1.           Contexte :

Dans la pratique courante dans les applications Web d’exploiter la session pour stockée des objets.

3.2.           Problème:

Selon la quantité d'information que le développeur veut stocker dans la session, la taille des données sérialisées peut devenir assez grande.

3.3.           Solution:

ASP.NET 4 introduit une nouvelle option de compression pour les deux types de prestataires d'état de session out-of-process. Lorsque l'option de configuration compressionEnabled comme le montre l'exemple suivant est à la valeur true, ASP.NET compresse et décompresser  la session sérialisé en utilisant le class System.IO.Compression.GZipStream .

<sessionState       mode="SQLServer" sqlConnectionString="data source=dbserver;Initial Catalog=aspnetstate" allowCustomSqlDatabase="true" compressionEnabled="true"/>

Exemple 6

4.     Réglage de Meta Tags

 

4.1.           Contexte:

 Les balises Meta permettent notamment d’informer la page sur le Web (MetaData), tels que l'auteur, mots clés, contenu, etc.

4.2.           Problème:

 Nous devons inclure dynamiquement des métadonnées dans nous page, par exemple, à partir d'une source de données relationnelle pour le moteur de recherche afin de donner plus de pertinence à notre site. Il s'agit d'un Search Engine Optimization (SEO).

4.3.           Solution:

 ASP.NET 4 introduit la MetaKeywords une nouvelle propriété, et MetaDescription à la classe Page. La directive @ Page contient les mots-clés et l'attribut Description.

4.4.           Implémentation de la stratégie:

 

<%@ Page="" Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"         CodeBehind="Default.aspx.cs" Inherits="WebAppOutputCacheExperiment._Default" Keywords="page par default" Description="description de la page" %>

Exemple 7

L’output va être comme ceci :

<head id="Head1" runat="server">       <title>Page</title>       <meta name="keywords" content="mots clé de la page" />       <meta name="description" content="description de la page" />     </head>

Exemple 8

5.      Une meilleur contrôle de la ViewState

 

5.1.           Problème:

L’utilisation de la ViewState pour stocker de grandes quantités de données,  provoque une dégradation des performances significative.

5.2.           Solution:

 ASP.NET 4 introduit la ViewStateMode nouvelle propriété dans les contrôles Web qui vous permet de désactiver l'état d'affichage par défaut et activer ensuite seulement pour les contrôles qui en ont besoin dans la page. Cette propriété peut avoir trois valeurs: Activer, désactiver, et Inherit. Ils notamment possible de définir les ViewStateMode au niveau de la page.

5.3.           Implémentation de la stratégie:

 

<%@ Page="" Title="Home" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"       CodeBehind="Default.aspx.cs" Inherits="WebAppOutputCacheExperiment._Default" ViewStateMode="Disabled" %>

Exemple 9

6.     Routage dans ASP.NET 4

 

6.1.           Contexte:

SEO est le moteur de recherche le plus utiliser pour augmenter le trafic sur un site Web,

6.2.           Problème:

 Comment peut-on configurer les applications utilisant notre formulaire de pages Web pour utiliser l'URL se lie pas à des fichiers physiques sur le serveur?

6.3.           Solution:

 Bien que les fonctionnalités de routage soient livrées avec ASP.NET 3.5 SP1, ASP.NET 4 est livré avec de nouveaux atouts pour le rendre plus facile utilisation des mécanismes de routage, y compris les suivantes:

·         La classe PageRouteHandler, qui est un gestionnaire HTTP simple que vous utilisez lorsque vous définissez les routes. La classe transmet les données vers page demandé.

·         Les nouvelles propriétés HttpRequest.RequestContext et Page.RouteData (qui est un raccourci pour HttpRequest.RequestContext.RouteData). Ces propriétés  faciliter l'accès à l'information qui est passée de la route.

·         Les constructrices suivantes qui sont de nouvelles expressions, qui sont définis dans System.Web.Compilation.RouteUrlExpressionBuilder et System.Web.Compilation.RouteValueExpressionBuilder:

o   RouteUrl, qui fournit un moyen simple de créer une URL  correspondante  à une URL de routage dans un contrôle serveur ASP.NET.

o   RouteValue, qui fournit un moyen simple d'extraire des informations de l'objet RouteContext.

·         La classe RouteParameter, facilite la transmission de données contenues dans un objet RouteContext à une requête pour une source de données de contrôle (semblable à FormParameter).

6.4.           Implémentation de la stratégie :

Ouvrez le fichier Global.asax et ajoutez le code suivant pour lier les produits / catégories / (id) format d'URL avec la page physique ProductsCategory.aspx.

Using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Security; using System.Web.SessionState; using System.Web.Routing; using System.Web;   namespace WebAppRoutingExperiment {     public class Global :HttpApplication     {         // New code added         void RegisterRoutes(RouteCollection routes)         {             routes.MapPageRoute("ProductsCategory", "products/category/{id}", "~/ProductsCategory.aspx");         }         void Application_Start(object sender, EventArgs e)         {             // New code added             RegisterRoutes(RouteTable.Routes);         }     } }

Exemple 10

Et enfin, nous allons créer le fichier ProductsCategory.aspx  et ajoutez le code pour obtenir la valeur, la catégorie, et l'affichage dans la page.

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI;   namespace WebAppRoutingExperiment {     public partial class ProductsCategory :Page     {         protected void Page_Load(object sender, EventArgs e)         {             string productCategoryId = this.Page.RouteData.Values["id"] != null ? this.Page.RouteData.Values["id"].ToString() : "No Product Category";             this.lblProductCategoryId.Text = productCategoryId;         }     } }

Exemple 11

7.     Réglage de l’ID de client

 

7.1.           Contexte:

Tous les jours, nous utilisons Ajax et les bibliothèques JavaScript pour créer des Applications Internet Riches (RIA). La nouvelle propriété ClientIDMode traite un problème de longue date dans ASP.NET, à savoir comment créer des contrôles de l'attribut id pour les éléments qu'ils rendent.

Sachant que l'attribut id pour les éléments rendus est important, si votre application contient un script client qui fait référence à ces éléments.

7.2.           Problème:

Jusqu'à ASP.NET 4, l'algorithme de génération de l'attribut id de la propriété ClientID  était concaténer, le conteneur de dénomination (le cas échéant) avec l'ID, et dans le cas des contrôles répétés (comme dans les contrôles de données), d'ajouter un préfixe et un numéro séquentiel.

Même si cela a toujours garanti que les ID des contrôles dans la page sont uniques, l'algorithme a donné lieu à des ID de contrôle qui n'étaient pas prévisibles, ce qui rond difficile de faire référence dans le script client. Cela se produit surtout quand nous utilisons les pages maîtres.

Une astuce pour obtenir une référence à des éléments HTML  comme le montre l’exemple suivant:

var btn = document.getElementById("<% =Button1.ClientID %>");

Exemple 12

Ou, la solution la plus élégante de jQuery, comme montrer dans l’exemple suivant :

var btn = $('<% =Button1.ClientID %>');

Exemple 13

7.3.           Solution:

ASP.NET 4 introduit de nouvelles propriétés ClientIDMode vous permet de spécifier plus précisément la façon dont l'ID client est généré pour les contrôles. Vous pouvez définir la propriété ClientIDMode pour tout contrôle, y compris pour la page.

Les réglages possibles sont les suivantes:

·         AutoID. Ceci est équivalent à l'algorithme de génération de valeurs de propriété ClientID qui a été utilisé dans les versions antérieures d’ASP.NET.

 

·         Statique. Ceci indique que la valeur ClientID sera le même que l'ID, sans la concaténation des identifiants de nommage du conteneur parent. Cela peut être utile dans les UserControl. Parce qu’un UserControl  peut être situés sur des pages différentes et dans les contrôles de conteneurs différents, il peut être difficile d'écrire un script client pour les UserControl qui utilisent l'algorithme AutoID parce que vous ne pouvez pas prédire  les  valeurs d'identité.

 

·         Prévisibles. Cette option est destinée principalement à des contrôles de données qui utilisent des modèles de répétition. Il concatène les propriétés ID de conteneurs de nommage du contrôle, mais la valeur du ClientID  générer ne contiennent pas de chaînes de caractères comme "ctlxxx". Ce paramètre fonctionne en conjonction avec la propriété ClientIDRowSuffix. Vous définissez la propriété cette dernière au nom d'un champ de données, et la valeur de ce champ est utilisé comme suffixe pour la valeur générée ClientID. En règle générale vous devez utiliser la clé primaire d'un enregistrement de données comme la valeur ClientIDRowSuffix.

 

·         Hériter. Ce paramètre est le comportement par défaut pour les contrôles, il précise que la production d'un contrôle d'identité est le même que son parent.

7.4.           Implémentation de la stratégie :

 

Un exemple d’AutoID :

 

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">     <asp:Panel ID="PanelParent"  runat="server">                 <asp:Panel ID="PanelChild" runat="server">                     <asp:TextBox ID="txtEcho" runat="server" ClientIDMode="AutoID" />         </asp:Panel>     </asp:Panel> </asp:Content>

Exemple 14

L’output va être comme ceci :

<div id="MainContent_PanelParent">                  <div id="MainContent_PanelChild">                  <input name="ctl00$MainContent$txtEcho" type="text" id="ctl00_MainContent_txtEcho" />    </div> </div>

 

Un exemple de Statique

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">     <asp:Panel ID="PanelParent"  runat="server">         <asp:Panel ID="PanelChild" runat="server">             <asp:TextBox ID="txtEcho" runat="server" ClientIDMode="Static" />         </asp:Panel>     </asp:Panel> </asp:Content>

 

L’output va être comme ceci :

<div id="MainContent_PanelParent">     <div id="MainContent_PanelChild">         <input name="ctl00$MainContent$txtEcho" type="text" id="txtEcho" />     </div> </div>

 

 

L’exemple de Predictable.

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">     <asp:Panel ID="PanelParent"  runat="server">         <asp:Panel ID="PanelChild" runat="server">             <asp:TextBox ID="txtEcho" runat="server" ClientIDMode="Predictable" />         </asp:Panel>     </asp:Panel> </asp:Content>

 

L’output va être comme ceci :

<div id="MainContent_PanelParent">     <div id="MainContent_PanelChild">         <input name="ctl00$MainContent$txtEcho" type="text" id="MainContent_txtEcho" />     </div> </div>

 

8.     Chart Control

 

8.1.           Problème :

 Vous avez besoin de visualiser les données d'une manière compréhensible dans une application Web, par exemple, un rapport d'analyse financière.

8.2.            Solution :

 ASP.NET 4 introduit un nouveau chart control avec un ensemble de fonctionnalités tels que la pie, area, range, des points, et la distribution de données  avec un support en Ajax. A l'exécution, le contrôle génère une image (un fichier pgn.) Qui est référencé par le côté client.

8.3.           Implémentation de la stratégie :

La première étape est d'ajouter un gestionnaire HTTP pour votre application dans le web.config.

<httpHandlers>     <add path="ChartImg.axd" verb="GET,HEAD,POST" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false" /> </httpHandlers>

Exemple 20

Plus tard, nous ajoutons le contrôle Chart à notre page.

<asp:Chart ID="Chart1" runat="server" />

Exemple 21

La Web Form est affichée  dans l’exemple 22..

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="SalesByDayOfWeek.aspx.cs" Inherits="WebAppCharting.SalesByDayOfWeek" %>     <%@ Register     Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"     Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>         <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">         </asp:Content>         <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">             <div>                 <h3>Sales Reports (By days of the week)</h3>             </div>             <div>                 <asp:Chart ID="chrSalesByDayOfWeek" runat="server" Width="500" Height="350">                     <Series>                         <asp:Series ChartType="Area" Palette="EarthTones" ChartArea="MainChartArea"></asp:Series>                     </Series>                     <ChartAreas>                         <asp:ChartArea Name="MainChartArea" Area3DStyle-Enable3D="true">                         </asp:ChartArea>                     </ChartAreas>                 </asp:Chart>             </div>         </asp:Content>

Exemple 22

Le code-code-behind  del Web Form.

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI;   namespace WebAppChartingExperiement {     public partial class SalesByDayOfWeek :Page     {         protected void Page_Load(object sender, EventArgs e)         {             Random random = new Random();             string[] listDaysOfWeek = { "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" };             foreach (string dayOfWeek in listDaysOfWeek)             {                 double totalSales = random.NextDouble() * 5000 + 1000;                 this.chrSalesByDayOfWeek.Series[0].Points.AddXY(dayOfWeek, totalSales);             }         }     } }

Exemple 23

Le rapport va être affiché tel qu’il est dans la figure 1 :

Figure 1

Maintenant nous allons alimenter la charte avec des données de manière statique.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="SalesByDayOfWeekStatic.aspx.cs" Inherits="WebAppChartingExperiment.SalesByDayOfWeekStatic" %>     <%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"     Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>         <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">         </asp:Content>         <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">             <div>                 <h3>Sales Reports (By days of the week)</h3>             </div>             <div>                 <asp:Chart ID="chrSalesByDayOfWeek" runat="server" Width="500" Height="350">                     <Series>                         <asp:Series ChartType="Area" Palette="EarthTones" ChartArea="MainChartArea">                             <Points>                                 <asp:DataPoint AxisLabel="Sun" YValues="17" />                                 <asp:DataPoint AxisLabel="Mon" YValues="15" />                                 <asp:DataPoint AxisLabel="Tue" YValues="6" />                                 <asp:DataPoint AxisLabel="Wed" YValues="4" />                                 <asp:DataPoint AxisLabel="Thu" YValues="3" />                                 <asp:DataPoint AxisLabel="Fri" YValues="3" />                                 <asp:DataPoint AxisLabel="Sat" YValues="3" />                             </Points>                         </asp:Series>                     </Series>                     <ChartAreas>                         <asp:ChartArea Name="MainChartArea" Area3DStyle-Enable3D="true">                         </asp:ChartArea>                     </ChartAreas>                 </asp:Chart>             </div>         </asp:Content>

Exemple 24

Le résultat du rapport sera traduit par la figure 2.

Figure 2

 

Conclusion:

Nous avons vu dans cet articles les principales nouveautés d’APS.NET 4 qui introduite avec l’arrivé du Framework 4. A présent vous pouvez exploiter ces fonctionnalités après cette introduction sur ASP.NET 4.

 

ASP.NET AJAX, C#, Visual Studio 2010 asp, net, 4, nouveautés

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 !

 

 

 

 

Silverlight, Visual Studio 2010 tutoriel, silverlight, visual studio 2010