WPF Touch Screen Keyboard

Our article regarding, WPF Touch Screen Keyboard; On-screen Keyboard; Virtual keyboard; custom keyboard is a re-usable control and the user needed a touch screen keyboard to enter information in a textbox, password box etc.

Here, WPF Touch Screen Keyboard layout is implemented using Grid, Style and Buttons.

In previous articles we explained Introduction to WPF Panels, How to Create Timer in WPF, Display Password in PasswordBox in WPF using C# and now we will move on to the WPF Touch Screen Keyboard in VB.

We are creating Class library and add that class library .dll file to the WPF application.

Following are the steps to WPF Touch Screen Keyboard

• Add New project as Class library
• Add New WPF form as Usercontrol.xaml in the class library
• Usercontrol.xaml code writes for control like Grid, Style and Buttons
• Usercontrol.xaml code behind source for the OnUserKeyPressed events and other settings
• Add New WPF project
• Add Class library Reference to WPF projects
• Add User control of class library code and other controls like TextBox
• Add Code-behind source for WPF main form
• Test the application of WPF Touch Screen Keyboard

Add new project as class library and WPF Form

• Right click on the solution file and add new project as class library name as “TabletKeyboardUserControl”.
• Add new WPF form and give the name as “Usercontrol.xaml”.

Usercontrol.xaml – .xaml code script

<UserControl x:Class="UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" d:DesignHeight="278" d:DesignWidth="768">
    <UserControl.Resources>
        <Style TargetType="{x:Type Button}" x:Key="Original">
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontFamily" Value="Calibri"/>
            <Setter Property="FontSize" Value="25"/>
            <Setter Property="Width" Value="80" />
            <!--<Setter Property="OverridesDefaultStyle" Value="true"/>-->
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Name="Border" CornerRadius="2" BorderThickness="0" Background="#3E4A96" BorderBrush="#8A8D92">
                            <ContentPresenter  HorizontalAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter TargetName="Border" Property="Background" Value="#787ABD" />
                            </Trigger>
                            <Trigger Property="IsPressed" Value="true">
                            </Trigger>

                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="{x:Type Button}" x:Key="Other">
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="Foreground" Value="white"/>
            <Setter Property="FontFamily" Value="Calibri"/>
            <Setter Property="FontSize" Value="25"/>
            <Setter Property="Width" Value="80" />
            <!--<Setter Property="OverridesDefaultStyle" Value="true"/>-->
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Name="Border" CornerRadius="2" BorderThickness="0" Background="#3E4A96" BorderBrush="#8A8D92">
                            <ContentPresenter  HorizontalAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter TargetName="Border" Property="Background" Value="#787ABD" />
                            </Trigger>
                            <Trigger Property="IsPressed" Value="true">
                            </Trigger>

                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <Grid Name="Grid1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="10*" />
            <ColumnDefinition Width="10*" />
            <ColumnDefinition Width="10*" />
            <ColumnDefinition Width="10*" />
            <ColumnDefinition Width="10*" />
            <ColumnDefinition Width="10*" />
            <ColumnDefinition Width="10*" />
            <ColumnDefinition Width="10*" />
            <ColumnDefinition Width="10*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition Height="40"/>
            <RowDefinition Height="39"/>
            <RowDefinition Height="41"/>
            <RowDefinition Height="40"/>
            <RowDefinition Height="40"/>
            <RowDefinition Height="40" />
        </Grid.RowDefinitions>

        <!-- Region: Column 1-->
        <Button Grid.Row="0" Grid.Column="0" x:Name="btn1" Style="{StaticResource Original}">1</Button>
        <Button Grid.Row="1" Margin="1,5,2,35" Grid.RowSpan="2" x:Name="btn0" Style="{StaticResource Original}">0</Button>
        <Button Grid.Row="2" Margin="1,11,1,30" Grid.RowSpan="2" x:Name="btni" Style="{StaticResource Original}">i</Button>
        <Button Grid.Row="3" Margin="1,17,1,23" Grid.RowSpan="2" x:Name="btnr" Style="{StaticResource Original}">r</Button>
        <Button Grid.Row="4" Margin="1,23,1,17" Grid.RowSpan="2" x:Name="btndash" Style="{StaticResource Original}">-</Button>
        <Button Grid.Column="3" Grid.Row="5" Grid.RowSpan="2" Grid.ColumnSpan="3" Height="40" Width="250" Margin="3,29,3,11" x:Name="btnSpace" Style="{StaticResource Original}">SPACE</Button>
        <!-- EndRegion: Column 1-->

        <!-- Region: Column 2-->
        <Button Grid.Row="0"  Grid.Column="1" x:Name="btn2" Style="{StaticResource Original}">2</Button>
        <Button Grid.Column="1" Margin="1,5,1,0" Height="40" VerticalAlignment="Top" Grid.Row="1" Grid.RowSpan="2" x:Name="btna" Style="{StaticResource Original}">a</Button>
        <Button Grid.Row="2" Grid.Column="1" Margin="1,11,1,29" Grid.RowSpan="2" x:Name="btnj" Style="{StaticResource Original}">j</Button>
        <Button Grid.Row="3" Grid.Column="1" Margin="1,17,1,23" Grid.RowSpan="2" x:Name="btns" Style="{StaticResource Original}">s</Button>
        <Button Grid.Row="4" Grid.Column="1" Margin="1,24,1,16" Grid.RowSpan="2" x:Name="btncomma" Style="{StaticResource Original}">,</Button>
        <Button Grid.Column="6" Grid.Row="5"  Grid.RowSpan="2" Grid.ColumnSpan="3" Height="40" Width="250" Margin="3,29,2,11" x:Name="btnbksp" Style="{StaticResource Original}">Bksp</Button>
        <!-- EndRegion: Column 2-->

        <!-- Region: Column 3-->
        <Button Grid.Row="0" Grid.Column="2" x:Name="btn3" Style="{StaticResource Original}">3</Button>
        <Button Grid.Row="1" Grid.Column="2" Margin="0,5,3,35" Grid.RowSpan="2" x:Name="btnb" Style="{StaticResource Original}">b</Button>
        <Button Grid.Row="2" Grid.Column="2" Margin="1,11,2,29" Grid.RowSpan="2" x:Name="btnk" Style="{StaticResource Original}">k</Button>
        <Button Grid.Row="3" Grid.Column="2" Margin="1,17,2,23" Grid.RowSpan="2" x:Name="btnt" Style="{StaticResource Original}">t</Button>
        <Button Grid.Row="4" Grid.Column="2" Margin="1,24,2,16" Grid.RowSpan="2" x:Name="btndot" Style="{StaticResource Original}">.</Button>
        <Button Grid.Row="5" Grid.RowSpan="2" Grid.ColumnSpan="3" Height="40" Width="250" Margin="3,29,3,11" x:Name="btnCaps" Style="{StaticResource Original}">CAPS</Button>
        <!--<Button Grid.Row="5"   Grid.ColumnSpan="3" >Bksp</Button>-->
        <!-- EndRegion: Column 3-->

        <!-- Region: Column 4-->
        <Button Grid.Row="0" Grid.Column="3" x:Name="btn4" Style="{StaticResource Original}">4</Button>
        <Button Grid.Row="1" Grid.Column="3" Margin="1,6,2,33" Grid.RowSpan="2" x:Name="btnc" Style="{StaticResource Original}">c</Button>
        <Button Grid.Row="2" Grid.Column="3" Margin="2,11,1,29" Grid.RowSpan="2" x:Name="btnl" Style="{StaticResource Original}">l</Button>
        <Button Grid.Row="3" Grid.Column="3" Margin="1,17,2,23" Grid.RowSpan="2" x:Name="btnu" Style="{StaticResource Original}">u</Button>
        <Button Grid.Row="4" Grid.Column="3" Margin="1,24,2,16" Grid.RowSpan="2" x:Name="btnExtension" Style="{StaticResource Original}">!</Button>
        <!-- EndRegion: Column 4-->

        <!-- Region: Column 5-->
        <Button Grid.Row="0" Grid.Column="4" x:Name="btn5" Style="{StaticResource Original}">5</Button>
        <Button Grid.Row="1" Grid.Column="4" Margin="1,6,2,33" Grid.RowSpan="2" x:Name="btnd" Style="{StaticResource Original}">d</Button>
        <Button Grid.Row="2" Grid.Column="4" Margin="2,11,0,29" Grid.RowSpan="2" x:Name="btnm" Style="{StaticResource Original}">m</Button>
        <Button Grid.Row="3" Grid.Column="4" Margin="1,17,1,23" Grid.RowSpan="2" x:Name="btnv" Style="{StaticResource Original}">v</Button>
        <Button Grid.Row="4" Grid.Column="4" Margin="1,24,2,16" Grid.RowSpan="2" x:Name="btnunderscore" Style="{StaticResource Original}">_</Button>
        <!-- EndRegion: Column 5-->

        <!-- Region: Column 6-->
        <Button Grid.Row="0" Grid.Column="5" x:Name="btn6" Style="{StaticResource Original}">6</Button>
        <Button Grid.Row="1" Grid.Column="5" Margin="1,6,1,33" Grid.RowSpan="2" x:Name="btne" Style="{StaticResource Original}">e</Button>
        <Button Grid.Row="2" Grid.Column="5" Margin="2,11,0,29" Grid.RowSpan="2" HorizontalAlignment="Left" Width="80" x:Name="btnn" Style="{StaticResource Original}">n</Button>
        <Button Grid.Row="3" Grid.Column="5" Margin="1,17,2,23" Grid.RowSpan="2" x:Name="btnw" Style="{StaticResource Original}">w</Button>
        <Button Grid.Row="4" Grid.Column="5" Margin="1,24,1,16" Grid.RowSpan="2" x:Name="btncolan" Style="{StaticResource Original}">;</Button>
        <!-- EndRegion: Column 6-->

        <!-- Region: Column 7-->
        <Button Grid.Row="0" Grid.Column="6" x:Name="btn7" Style="{StaticResource Original}">7</Button>
        <Button Grid.Row="1" Grid.Column="6" Margin="2,6,1,33" Grid.RowSpan="2" x:Name="btnf" Style="{StaticResource Original}">f</Button>
        <Button Grid.Row="2" Grid.Column="6" Margin="2,11,1,29" Grid.RowSpan="2" x:Name="btno" Style="{StaticResource Original}">o</Button>
        <Button Grid.Row="3" Grid.Column="6" Margin="1,17,2,23" Grid.RowSpan="2" x:Name="btnx" Style="{StaticResource Original}">x</Button>
        <Button Grid.Row="4" Grid.Column="6" Margin="2,24,1,16" Grid.RowSpan="2" x:Name="btnatrate" Style="{StaticResource Original}">@</Button>
        <!-- EndRegion: Column 7-->

        <!-- Region: Column 8-->
        <Button Grid.Row="0" Grid.Column="7" x:Name="btn8" Style="{StaticResource Original}">8</Button>
        <Button Grid.Row="1" Grid.Column="7" Margin="2,6,1,33" Grid.RowSpan="2" x:Name="btng" Style="{StaticResource Original}">g</Button>
        <Button Grid.Row="2" Grid.Column="7" Margin="2,11,1,29" Grid.RowSpan="2" x:Name="btnp" Style="{StaticResource Original}">p</Button>
        <Button Grid.Row="3" Grid.Column="7" Margin="1,17,2,23" Grid.RowSpan="2" x:Name="btny" Style="{StaticResource Original}">y</Button>
        <Button Grid.Row="4" Grid.Column="7" Margin="2,24,1,16" Grid.RowSpan="2" x:Name="btncom" Style="{StaticResource Original}">.com</Button>
        <!-- EndRegion: Column 8-->

        <!-- Region: Column 9-->
        <Button Grid.Row="0" Grid.Column="8" x:Name="btn9" Style="{StaticResource Original}">9</Button>
        <Button Grid.Row="1" Grid.Column="8" Margin="2,6,1,33" Grid.RowSpan="2" x:Name="btnh" Style="{StaticResource Original}">h</Button>
        <Button Grid.Row="2" Grid.Column="8" Margin="2,11,1,29" Grid.RowSpan="2" x:Name="btnq" Style="{StaticResource Original}">q</Button>
        <Button Grid.Row="3" Grid.Column="8" Margin="2,17,1,23" Grid.RowSpan="2" x:Name="btnz" Style="{StaticResource Original}">z</Button>
        <Button Grid.Row="4" Grid.Column="8" Margin="2,24,1,16" Grid.RowSpan="2" x:Name="btncouk" Style="{StaticResource Original}">.co.in</Button>
        <!-- EndRegion: Column 9-->

    </Grid>
</UserControl>

Usercontrol.xaml – code-behind source

Imports System.ComponentModel
Public Class UserControl1

    Private pvtKeyboardKeyPressed As String = ""
    Public Delegate Sub KeyboardDelegate(ByVal sender As Object, ByVal e As KeyboardEventArgs)
    <Category("Mouse"), Description("Return value of mouseclicked key")> _
    Public Event UserKeyPressed As KeyboardDelegate
    'CapitalLatter Settings 
    Dim CapitallettersArray As Button()
    Dim BolSetForCapitalOrSmall As Boolean = True
    Protected Overridable Sub OnUserKeyPressed(ByVal e As KeyboardEventArgs)
        RaiseEvent UserKeyPressed(Me, e)
    End Sub
    Public Class KeyboardEventArgs
        Inherits EventArgs
        Private ReadOnly pvtKeyboardKeyPressed As String

        Public Sub New(ByVal KeyboardKeyPressed As String)
            Me.pvtKeyboardKeyPressed = KeyboardKeyPressed
        End Sub

        Public ReadOnly Property KeyboardKeyPressed() As String
            Get
                Return pvtKeyboardKeyPressed
            End Get
        End Property
    End Class

#Region "$$$ Set the value for the Retrun Key Events $$$"
    Sub SetValueforKeyPress(ByVal KeyPressVal As String)
        pvtKeyboardKeyPressed = KeyPressVal
        Dim Keyvalue As New KeyboardEventArgs(pvtKeyboardKeyPressed)
        OnUserKeyPressed(Keyvalue)
    End Sub
#End Region

#Region "$$$ All Keys $$$"
    Private Sub btnDigits_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles btn0.Click, btn1.Click, btn2.Click, btn3.Click, btn4.Click, btn5.Click, btn6.Click, btn7.Click, btn8.Click, btn9.Click
        Dim content As String = TryCast(sender, Button).Content.ToString()
        SetValueforKeyPress(content)
    End Sub
    Private Sub btnAlphabets_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles btna.Click, btnb.Click, btnc.Click, btnd.Click, btne.Click, btnf.Click, btng.Click, btnh.Click, btni.Click, btnj.Click, btnk.Click, btnl.Click, btnm.Click, btnn.Click, btno.Click, btnp.Click, btnq.Click, btnr.Click, btns.Click, btnt.Click, btnu.Click, btnv.Click, btnw.Click, btnx.Click, btny.Click, btnz.Click
        Dim content As String = TryCast(sender, Button).Content.ToString()
        SetValueforKeyPress(content)
    End Sub
    Private Sub btnSymbols_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles btndash.Click, btncolan.Click, btnatrate.Click, btncom.Click, btncouk.Click, btnExtension.Click, btnunderscore.Click, btndot.Click, btncomma.Click
        Dim content As String = TryCast(sender, Button).Content.ToString()
        SetValueforKeyPress(content)
    End Sub
    Private Sub btnSpecialOpertions_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnSpace.Click, btnbksp.Click, btnCaps.Click
        Dim content As String = TryCast(sender, Button).Content.ToString()
        If content <> "CAPS" Then
            SetValueforKeyPress(content)
        Else
            SetCapitalValue()
        End If
    End Sub
    Private Sub SetCapitalValue()
        CapitallettersArray = New Button() {btna, btnb, btnc, btnd, btne, btnf, btng, btnh, btni, btnj, btnk, btnl, btnm, btnn, btno, btnp, btnq, btnr, btns, btnt, btnu, btnv, btnw, btnx, btny, btnz, btncom, btncouk}
        For i = 0 To CapitallettersArray.GetUpperBound(0)
            Dim content As String = TryCast(CapitallettersArray(i), Button).Content.ToString()
            If BolSetForCapitalOrSmall Then
                TryCast(CapitallettersArray(i), Button).Content = content.ToString.ToUpper()
            Else
                TryCast(CapitallettersArray(i), Button).Content = content.ToString.ToLower()
            End If
        Next
        If BolSetForCapitalOrSmall Then
            BolSetForCapitalOrSmall = False
        ElseIf BolSetForCapitalOrSmall = False Then
            BolSetForCapitalOrSmall = True
        End If
    End Sub
#End Region
End Class

Add New WPF Application and add reference to the WPF Application

• Right click on the solution file and add new project as WPF Application name as “TESTAPP”
• Right-click on the references folder and Add Reference of your project Class library.

XAML code for Main screen of WPF

<Window x:Class="MainWindow"
    xmlns:Control="clr-namespace:TabletKeyboardUserControl;assembly=TabletKeyboardUserControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="436" Width="800" WindowStyle="None" WindowStartupLocation="CenterScreen">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="150*" />
            <RowDefinition Height="247*" />
        </Grid.RowDefinitions>
        <Control:UserControl1 x:Name="customToolTip" UserKeyPressed="customToolTip_UserKeyPressed" Margin="0,20,0,0" Grid.RowSpan="2" />
        <Label Name="lblKeyboardOutput" Content="Name:" Margin="0,156,687,55" Grid.Row="1" FontSize="20" FontFamily="Calibri"></Label>
        <TextBox Name="TextBox1"  Grid.Row="1" Height="38" HorizontalAlignment="Left" Margin="106,156,0,0" VerticalAlignment="Top" Width="660" FontSize="20" FontFamily="Calibri"></TextBox>

        <Label Name="lblKeyboardOutput2" Content="Roll no:" Margin="0,200,679,12" Grid.Row="1" FontSize="20" FontFamily="Calibri"></Label>
        <TextBox Name="TextBox2"  Grid.Row="1" Height="38" HorizontalAlignment="Left" Margin="106,200,0,0" VerticalAlignment="Top" Width="660" FontSize="20" FontFamily="Calibri"></TextBox>
   
        <!-- EndRegion : PersonalDetails Image and Text  -->

    </Grid>
</Window>

WPF form code-behind source

Class MainWindow 
    Dim bolrepet As Boolean = True
    Dim KeyboardId As String
    Private Sub customToolTip_UserKeyPressed(ByVal sender As Object, ByVal e As TabletKeyboardUserControl.UserControl1.KeyboardEventArgs)
        If KeyboardId <> "" Then
            Dim tb As TextBox = DirectCast(FindName(KeyboardId), TextBox)
            If e.KeyboardKeyPressed <> "Bksp" And e.KeyboardKeyPressed <> "SPACE" And e.KeyboardKeyPressed <> "SUBMIT" Then
                tb.Text += e.KeyboardKeyPressed
            ElseIf e.KeyboardKeyPressed = "Bksp" And tb.Text <> "" Then
                tb.Text = tb.Text.Substring(0, tb.Text.Length - 1)
            ElseIf e.KeyboardKeyPressed = "Bksp" And tb.Text = "" Then
                TextBoxSettingsbyID(tb)
            ElseIf e.KeyboardKeyPressed = "SPACE" Then
                tb.Text += " "
            ElseIf e.KeyboardKeyPressed = "SUBMIT" Then
                'CheckforSubmit()
            End If
        End If
    End Sub

#Region "$$$ Settings for the Keyboard in the textbox events $$$"

    Private Sub GetTextboxIdOnFocus_GotFocus(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles TextBox1.GotFocus, TextBox2.GotFocus
        'Keyboard.Visibility = Windows.Visibility.Visible
        KeyboardId = TryCast(sender, TextBox).Name
    End Sub
    Private Sub TextBoxOnTextChanged_TextChanged(ByVal sender As System.Object, ByVal e As System.Windows.Controls.TextChangedEventArgs) Handles TextBox1.TextChanged, TextBox2.TextChanged
        TextBoxSettingsbyID(sender)
    End Sub
    Private Sub TextBoxSettingsbyID(ByVal TextboxId As TextBox)
        TextboxId.Focus()
        TextboxId.SelectionStart = TextboxId.Text.Length
    End Sub
#End Region

    Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
        TextBox1.Focus()
    End Sub
End Class

Test application of WPF Touch Screen Keyboard

Image may be NSFW.
Clik here to view.

Output

The post WPF Touch Screen Keyboard appeared first on Code Scratcher.