Microsoft Silverlight 4 - Tutoriel 21 : Clavier virtuel

Clavier virtuel pour Silverlight

| Peter Bull | Deepin Prayag (Traduction) |

Traducteur

Deepin

Ce tutoriel fait partie d'une série de niveau débutant-intermédiaire pour apprendre Silverlight 4 par le biais d'exemples pas à pas.

Langage : VB.NET

Public visé : niveau Intermédiaire

Commentez ce tutoriel : Commentez

- Titre : Microsoft Silverlight 4 - Tutoriel 21 : Clavier virtuel

- Auteurs : Peter Bull, Deepin Prayag (Traduction)

- Traducteur : Deepin

- Parution : 19 avril 2012

- Mise à jour : 19 avril 2012

- Licence : Copyright ® 2012 Peter Bull. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- Traduction

- Introduction

- Clavier virtuel pour Silverlight

- Étape 1

- Étape 2

- Étape 3

- Étape 4

- Étape 5

- Étape 6

- Étape 7

- Étape 8

- Étape 9

- Étape 10

- Étape 11

- Étape 12

- Étape 13

- Étape 14

- Étape 15

- Étape 16

- Étape 17

- Conclusion

- Liens

- Remerciements

Traduction

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Peter Bull, Microsoft Silverlight 4 - On-Screen Keyboard for Silverlight.

Introduction

Virtual Keyboard est un clavier virtuel en Silverlight avec la prise en charge pour copier une entrée dans le presse-papier et qui peut ensuite être collée dans une autre application.

Clavier virtuel pour Silverlight

Étape 1

Démarrez Microsoft Visual Web Developer 2010 Express, ensuite sélectionnez Fichier puis Nouveau Projet... Sélectionnez Visual Basic ensuite Application Silverlight dans les modèles installés, sélectionnez un emplacement si vous le souhaitez, puis entrez un nom pour le projet et appuyez sur OK :

Étape 2

Une nouvelle fenêtre Nouvelle application Silverlight devrait apparaître, décochez la case Héberger l'application Silverlight sur un nouveau site Web, puis sélectionnez la Version de Silverlight ciblée :

Étape 3

Une page vierge nommée MainPage.xaml devrait alors apparaître :

Étape 4

Puis dans la section Tous les contrôles Silverlight de la Boîte à outils, sélectionnez le contrôle Canvas :

Étape 5

Dessinez deux Canvas sur la page, ensuite dans le volet XAML au-dessus de </Grid> modifiez les lignes <Canvas> comme ceci :

<Canvas Height="35" Width="400" VerticalAlignment="Top" HorizontalAlignment="Left" Name="Toolbar"></Canvas>
<Canvas Height="265" Width="400" Margin="0,35,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Name="Content"></Canvas>

Voir ci-dessous :

Étape 6

Puis dans la section Contrôles Silverlight communs de la Boîte à outils, sélectionnez le contrôle TextBox :

Étape 7

Dessinez un TextBox sur la barre d'outils du Canvas et dans le volet XAML, en dessous de la balise <Canvas> et au-dessus de </Canvas> modifiez TextBox comme ceci :

<TextBox Canvas.Left="6" Canvas.Top="6" Height="23" Width="388" Name="Buffer"/>

Voir ci-dessous :

Étape 8

Puis dans la section Tous les contrôles Silverlight de la Boîte à outils, sélectionnez le contrôle StackPanel :

Étape 9

Dessinez un StackPanel sur le grand Canvas Content en glissant le StackPanel de la Boîte à outils sur le Canvas, ensuite dans le volet XAML entre les balises <Canvas> et </Canvas> modifiez la ligne <StackPanel > comme ceci :

<StackPanel Height="200" Width="400" Name="Keyboard"/>

Voir ci-dessous :

Étape 10

Faites un clic droit sur la page ou sur l'entrée pour MainPage.xaml dans l'Explorateur de solutions et choisissez l'option Afficher le code. Dans la vue de code, en dessous de la ligne Inherits UserControl tapez le code suivant :

Private _rowOne As String(,) = {{"`", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "-", "="},
{"&#172;", "!", """", "£", "$", "%", "^", "&", "*", "(", ")", "_", "+"}}
Private _rowTwo As String(,) = {{"q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]"},
{"q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "{", "}"}}
Private _rowThree As String(,) = {{"a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "#"},
{"a", "s", "d", "f", "g", "h", "j", "k", "l", ":", "@", "~"}}
Private _rowFour As String(,) = {{"\", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/"},
{"|", "z", "x", "c", "v", "b", "n", "m", "<", ">", "?"}}
Private _panel As New StackPanel
Private _panelOne As New StackPanel
Private _panelTwo As New StackPanel
Private _panelThree As New StackPanel
Private _panelFour As New StackPanel
Private _panelFive As New StackPanel
Private _isShift As Boolean = False
Private _isCaps As Boolean = False

Public Enum Special
None = 0
BackSpace = 1
Tab = 2
Enter = 3
CapsLock = 4
Shift = 5
Space = 6
Home = 7
[End] = 8
Insert = 9
Delete = 10
Copy = 11
Paste = 12
End Enum

Public Event SpecialPressed(ByVal Value As Special)
Public Event KeyPressed(ByVal Value As Object)

Étape 11

Pendant que nous en sommes à la vue de code pour MainPage.xaml, en dessous du End Sub pour Public Sub New() tapez les Sub suivants :

Private Sub UpdateRow(ByRef Row As StackPanel, ByRef Source As String(,), _
ByRef Shift As Boolean, ByRef Count As Integer)
For Each Item As Button In Row.Children
For Index As Integer = 0 To Count
If Shift Then
If CStr(Item.Content) = CStr(Source(0, Index)) Then
Item.Content = Source(1, Index)
End If
Else
If CStr(Item.Content) = CStr(Source(1, Index)) Then
Item.Content = Source(0, Index)
End If
End If
Next
Next
End Sub

Private Sub Button_Click(ByVal sender As System.Object, _
ByVal e As System.Windows.RoutedEventArgs)
Dim _value As New Object
Dim _command As New Object
_value = CType(sender, Button).Content
_command = CType(sender, Button).Tag
If Not _command Is Nothing Then
_value = Nothing
Select Case _command
Case Special.BackSpace, Special.Copy, Special.Paste, _
Special.Home, Special.End, Special.Insert, Special.Delete
RaiseEvent SpecialPressed(_command)
Case Special.Shift
_isShift = Not _isShift
UpdateRow(_panelOne, _rowOne, _isShift, 12)
UpdateRow(_panelTwo, _rowTwo, _isShift, 11)
UpdateRow(_panelThree, _rowThree, _isShift, 11)
UpdateRow(_panelFour, _rowFour, _isShift, 10)
Case Special.CapsLock
_isCaps = Not _isCaps
Case Special.Tab
_value = vbTab
Case Special.Enter
_value = vbCrLf
Case Special.Space
_value = " "
End Select
End If
If Not _value Is Nothing Then
If _isCaps Xor _isShift Then
_value = CStr(_value).ToUpper
Else
_value = CStr(_value).ToLower
End If
RaiseEvent KeyPressed(_value)
End If
End Sub

Étape 12

Toujours dans la vue de code pour MainPage.xaml, en dessous du End Sub pour Private Sub Button_Click(…) tapez les Sub suivants :

Private Sub Add(ByRef Panel As StackPanel, ByRef Content As Object, _
ByRef Tag As Object, ByRef Width As Double, ByRef Height As Double)
Dim _btn As New Button
AddHandler _btn.Click, AddressOf Button_Click
_btn.Content = Content
_btn.Tag = Tag
_btn.Margin = New Thickness(0.5)
_btn.Width = Width
_btn.Height = Height
Panel.Children.Add(_btn)
End Sub

Public Sub AddRow(ByRef Row As StackPanel, ByRef Source As String(,), _
ByRef Count As Integer)
For Index As Integer = 0 To Count
Add(Row, Source(0, Index).ToUpper, Nothing, 25, 25)
Next
End Sub

Public Sub Layout(ByVal Panel As StackPanel)
_panelOne.Orientation = Orientation.Horizontal
_panelTwo.Orientation = Orientation.Horizontal
_panelThree.Orientation = Orientation.Horizontal
_panelFour.Orientation = Orientation.Horizontal
_panelFive.Orientation = Orientation.Horizontal
_panelOne.Margin = New Thickness(5, 0, 5, 0)
_panelTwo.Margin = New Thickness(5, 0, 5, 0)
_panelThree.Margin = New Thickness(5, 0, 5, 0)
_panelFour.Margin = New Thickness(5, 0, 5, 0)
_panelFive.Margin = New Thickness(5, 0, 5, 0)
AddRow(_panelOne, _rowOne, 12)
Add(_panelOne, "BkSp", Special.BackSpace, 50, 25)
_panel.Children.Add(_panelOne)
Add(_panelTwo, "Tab", Special.Tab, 37, 25)
AddRow(_panelTwo, _rowTwo, 11)
Add(_panelTwo, "?", Special.Enter, 37, 25)
_panel.Children.Add(_panelTwo)
Add(_panelThree, "Caps", Special.CapsLock, 48, 25)
AddRow(_panelThree, _rowThree, 11)
Add(_panelThree, Nothing, Special.Enter, 25, 25)
_panel.Children.Add(_panelThree)
Add(_panelFour, "Shift", Special.Shift, 37, 25)
AddRow(_panelFour, _rowFour, 10)
Add(_panelFour, "Shift", Special.Shift, 62, 25)
_panel.Children.Add(_panelFour)
Add(_panelFive, "Copy", Special.Copy, 50, 25)
Add(_panelFive, "Paste", Special.Paste, 50, 25)
Add(_panelFive, "Space", Special.Space, 150, 25)
Add(_panelFive, "Home", Special.Home, 40, 25)
Add(_panelFive, "End", Special.End, 40, 25)
Add(_panelFive, "Ins", Special.Insert, 25, 25)
Add(_panelFive, "Del", Special.Delete, 25, 25)
_panel.Children.Add(_panelFive)
Panel.Children.Add(_panel)
End Sub

Étape 13

En restant toujours dans la vue de code, dans le constructeur Public Sub New(), en dessous de la ligne InitializeComponent() tapez le code suivant :

Layout(Keyboard)

Étape 14

Puisque nous en sommes toujours à la vue de code, en dessous du End Sub pour le constructeur Public Sub New() tapez les Sub gestionnaires d'événements suivants :

Private Sub Button_SpecialPressed(ByVal Value As Special) _
Handles Me.SpecialPressed
Buffer.Focus()
Select Case Value
Case Special.BackSpace
If Not Buffer.SelectionStart = 0 Then
Buffer.Select(Buffer.SelectionStart - 1, 1)
Buffer.SelectedText = ""
End If
Case Special.Home
Buffer.SelectionStart = 0
Case Special.End
Buffer.SelectionStart = Buffer.Text.Length
Case Special.Delete
If Not Buffer.SelectionStart = Buffer.Text.Length Then
Buffer.Select(Buffer.SelectionStart, 1)
Buffer.SelectedText = ""
End If
Case Special.Copy
If Buffer.Text.Length > 0 Then
Clipboard.SetText(Buffer.Text)
End If
Case Special.Paste
If Not Buffer.SelectionStart = 0 Then
Buffer.SelectedText = Clipboard.GetText
End If
End Select
End Sub

Private Sub Button_KeyPressed(ByVal Value As Object) _
Handles Me.KeyPressed
Buffer.Focus()
Buffer.SelectedText = Value
End Sub

Étape 15

Enregistrez le projet maintenant que vous avez terminé l'application Silverlight. Sélectionnez Debug ensuite Démarrer le débogage ou cliquez sur Démarrer le débogage :

Une fois que vous l'aurez fait, ce qui suit apparaîtra dans une nouvelle fenêtre du navigateur :

Étape 16

Vous pouvez cliquer sur n'importe lequel des boutons pour ajouter le caractère au Buffer TextBox. Qui plus est vous pouvez utiliser Shift et Caps Lock, tout comme sur un clavier réel :

Étape 17

Fermez l'application et la fenêtre du navigateur en cliquant sur le bouton Fermer en haut à droite de la fenêtre de l'application et du navigateur Web pour Arrêter l'application.

Conclusion

Ceci était un clavier virtuel simple démontrant comment un clavier virtuel peut être créé en Silverlight. La disposition de touches utilisée est celle du Royaume-Uni ou "EN-GB", vous pouvez modifier les tableaux de String _rowOne, _rowTwo, _rowThree et _rowFour pour correspondre à votre disposition de touches, tel qu'échanger Q et A pour la disposition azerty, etc. Personnalisez-la !

Liens

Télécharger le code source du tutoriel.

Démonstration en ligne du tutoriel.

Remerciements

Je tiens ici à remercier Peter Bull de m'avoir autorisé à traduire son tutoriel.
Je remercie tomlev pour sa relecture technique et ses propositions.
Je remercie également ClaudeLELOUP pour sa relecture orthographique et ses propositions.