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", "-", "="},
{"¬", "!", """", "£", "$", "%", "^", "&", "*", "(", ")", "_", "+"}}
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▲
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.
