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 :

Image non disponible

É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 :

Image non disponible

Étape 3

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

Image non disponible

Étape 4

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

Image non disponible

Étape 5

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

 
Sélectionnez
<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 :

Image non disponible

Étape 6

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

Image non disponible

É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 :

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

Voir ci-dessous :

Image non disponible

Étape 8

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

Image non disponible

É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 :

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

Voir ci-dessous :

Image non disponible

É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 :

 
Sélectionnez
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)
Image non disponible

É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 :

 
Sélectionnez
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
Image non disponible
Image non disponible

É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 :

 
Sélectionnez
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
Image non disponible
Image non disponible

É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 :

 
Sélectionnez
Layout(Keyboard)
Image non disponible

É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 :

 
Sélectionnez
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
Image non disponible

É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 :

Image non disponible

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

Image non disponible

É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 :

Image non disponible

Étape 17

Fermez l'application et la fenêtre du navigateur en cliquant sur le bouton Fermer Image non disponible 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.