Keyboard OSK Control

WOW. It seems that most of my posts are written because I got ideas while I was answering the question on Silverlight.Net.

Today, I would like to introduce my OSK but it is only done very simply.
It doesnt support NumLk ScrLk Shift CapLk those function keys….
In other words, it support mainly input of words.

Let me paste the code here for all of you.

Page.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
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;
using System.Windows.Markup;
using System.ComponentModel;

namespace Testing
{
    public partial class Page : UserControl
    {
        string[] keystring = new string[49] { "`", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "-", "=", "<", "Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P", "&#91;", "&#93;", "\\", "A", "S", "D", "F", "G", "H", "J", "K", "L", ";", "'", "Z", "X", "C", "V", "B", "N", "M", ",", ".", "?", " " };
        public Page()
        {
            InitializeComponent();
            Loaded += new RoutedEventHandler(Page_Loaded);
        }

        public void Page_Loaded(object sender, RoutedEventArgs e)
        {
            for (int i = 0; i <= 48; i++)
            {
                Button k = new Button();
                k.Content = keystring&#91;i&#93;;
                k.Width = 20; k.Height = 20;
                if (i == 48 )
                {
                    k.Width = 220;
                    k.Margin = new Thickness(-30, 80, 0, 0);
                }
                else if (i >= 38 )
                {
                    k.Margin = new Thickness((i-38 ) * 20 - 20, 60, 180 -((i-38 ) * 20 - 20), 20);
                }
                else if (i >= 27)
                {
                    k.Margin = new Thickness((i-27) * 20 - 30, 40, 180 - ((i-27) * 20 - 30), 40);
                }
                else if (i >= 14)
                {
                    k.Margin = new Thickness((i - 14) * 20 - 40 , 20, 180 - ((i - 14) * 20 - 40), 60);
                }
                else
                {
                    k.Margin = new Thickness(i * 20 - 50, 0, 180 - i * 20 + 50, 80);
                }
                KeyBoard.Children.Add(k);
                k.Click += new RoutedEventHandler(k_Click);
            }          
        }

        void k_Click(object sender, RoutedEventArgs e)
        {
            Button temp = sender as Button;
            if (temp.Content.ToString() == "<" )
            {
                if (tb.Text.Length != 0)
                {
                    tb.Text = tb.Text.Remove(tb.Text.Length - 1, 1);
                }
            }
            else
            {
                tb.Text += temp.Content.ToString();
            }
        }
        #region Drag and Drop Starts Here
        private bool isMouseCaptured;
        private Point mousePosition;
        void DragNDrop_MouseMove(object sender, MouseEventArgs e)
        {
            FrameworkElement item = sender as FrameworkElement;
            if (isMouseCaptured)
            {

                // Calculate the current position of the object.
                double deltaV = e.GetPosition(null).Y - mousePosition.Y;
                double deltaH = e.GetPosition(null).X - mousePosition.X;
                double newTop = deltaV + (double)KeyBoard.GetValue(Canvas.TopProperty);
                double newLeft = deltaH + (double)KeyBoard.GetValue(Canvas.LeftProperty);

                // Set new position of object.
                KeyBoard.SetValue(Canvas.TopProperty, newTop);
                KeyBoard.SetValue(Canvas.LeftProperty, newLeft);

                // Update position global variables.
                mousePosition = e.GetPosition(null);
            }
        }
        void DragNDrop_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            FrameworkElement item = sender as FrameworkElement;
            isMouseCaptured = false;
            item.ReleaseMouseCapture();
            mousePosition.X = mousePosition.Y = 0;
            item.Cursor = null;
            item.Opacity *= 2;
        }
        void DragNDrop_MouseEnter(object sender, MouseButtonEventArgs e)
        {

            FrameworkElement item = sender as FrameworkElement;
            mousePosition = e.GetPosition(null);
            isMouseCaptured = true;
            item.CaptureMouse();
            item.Opacity *= 0.5;
        }
        #endregion Drag and Drop Starts Here
    }
}
&#91;/sourcecode&#93;

<strong><em>Page.xaml</em></strong>

<UserControl x:Class="Testing.Page"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
    <Grid x:Name="LayoutRoot" Background="White">
        <TextBox x:Name="tb" Width="120" Height="25" Margin="8,8,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" d:LayoutOverrides="Width, Height"/>
        <Canvas HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch">
         <Grid x:Name="KeyBoard"  Background="White" Height="100" Width="300" Canvas.Left="8" Canvas.Top="192">
          <Rectangle HorizontalAlignment="Stretch" Margin="0,0,18,0" VerticalAlignment="Stretch" Fill="#FFFF0000" Height="100" MouseLeftButtonDown="DragNDrop_MouseEnter" MouseMove="DragNDrop_MouseMove" MouseLeftButtonUp="DragNDrop_MouseLeftButtonUp" />
         </Grid>
        </Canvas>
    </Grid>
</UserControl>

One for remind, the osk can move actually with the Drag and Drop code inside code-behind.
Of course, I will upload some pics here too.

Live With Light!
SteveWong (Hong Kong)

Advertisements

3 thoughts on “Keyboard OSK Control

  1. Hey we was just looking at your website on my Garmin Phone and I was thinking about how well it will work on the new ipad thats coming out. Fleeting thought…. Anyway thanks!

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s