On Screen Keyboard


The snippet provided will cover the basics of an on screen keyboard; the only things it doesn't have are numbers, symbols, and extra keys. This will give you the fundementals to build off of. It's written using Microsoft's XNA Framework, however it should be fairly simple to port over to a forms application. I don't really work with forms too often anymore, but in case you switch over to the Windows 8 platform be it Desktop or Phone, this could come in handy for some custom appearances.

Jamie - Studio 41

About the Author

I'm a very difficult person to describe because I'm all over the place. If I could sum me up into one word it would be insane. I'm an incredibly vibrant person. I love surfing, playing guitar, programming, photography, video games, skating, snowboarding, running parkour, hanging out with friends, spending time with my girlfriend, and much more. I'm currently enrolled in college courses and pursuing jobs in my area. Ask if you want to know more.

public class OnScreenKeyboard : DrawableGameComponent {
        ContentManager Content;
        SpriteBatch SpriteBatch;
        SpriteBatch SpriteBatch2;
        SpriteFont Font;

        string [] KeyLines = { "QWERTYUIOP", "ASDFGHJKL", "ZXCVBNM" };
        List<Vector2> KeyLocations;

        public string KeyPressed { get; private set; }

        public OnScreenKeyboard(Game Game)
            : base(Game) {

                KeyPressed = "";
                KeyLocations = new List<Vector2>();

        protected override void LoadContent() {
            if (Content == null)
                Content = new ContentManager(Game.Services, "Content");

            SpriteBatch = new SpriteBatch(Game.GraphicsDevice);
            SpriteBatch2 = new SpriteBatch(Game.GraphicsDevice);
            Font = Content.Load<SpriteFont>("Fonts/Keyboard");


        public override void Draw(GameTime gameTime) {

            int ARW = Game.GraphicsDevice.Viewport.Width / 2;
            int YPos = Game.GraphicsDevice.Viewport.Width - 10 - (int)((Font.MeasureString("A").Y + Font.LineSpacing) * 6.5f);

            List<int> Xs = new List<int>();
            List<int> Ys = new List<int>();


            foreach (string s in KeyLines) {
                SpriteBatch.DrawString(Font, s, new Vector2(ARW - (Font.MeasureString(s).X / 2), YPos), Color.White);

                Xs.Add((int)(ARW - (Font.MeasureString(s).X / 2)));

                YPos += Font.LineSpacing;

            int x = 0;
            int y = 0;
            int z = 0;

            foreach (char c in Keys) {
                if (x >= KeyLines[y].Length) {
                    x = 0;

                KeyLocations.Add(new Vector2(Xs[z] + (Font.MeasureString(c.ToString()).X * x + 1), Ys[z]));


            ReadInput(new Rectangle(Xs[0] - 5, Ys[0] - 5, (int)Font.MeasureString("QWERTYUIOP").X + 5, (int)Font.LineSpacing * 3));


        void ReadInput(Rectangle BoundingRectangle) {
            int i = 0;

            if (InputManager.IsLeftMouseClick) {
                foreach (Vector2 v in KeyLocations) {
                    Rectangle r = new Rectangle((int)v.X, (int)v.Y, (int)Font.MeasureString("A").X, (int)Font.MeasureString("A").Y);

                    if (r.Contains((int)InputManager.MousePosition.X, (int)InputManager.MousePosition.Y))
                        KeyPressed = Keys[i - 1].ToString();

                if (!BoundingRectangle.Contains((int)InputManager.MouseX, (int)InputManager.MouseY))
                    KeyPressed = "null";
lxXTaCoXxl 26 Posting Whiz in Training

It could probably be cleaned up a bit too. :)

tinstaafl 1,161 Posting Maven

Why not use the on screen keyboard that comes with windows?

lxXTaCoXxl 26 Posting Whiz in Training

I developed this for my XNA games, some people like me enjoy recreating the things that are most useful in a GUI. To the best of my knowledge XNA Framework doesn't come with a built in keyboard for Windows based game development; though the Windows Phone and XBOX 360 development platforms have the keyboard built in to the system most of my games are desktop based so you can see the reasoning behind it.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.21 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.