CODEWITHSUNDEEP
wpfunicodeon-screen-keyboard
Julius
Julius

Reputation: 745

How to display backspace, shift, etc symbols in onscreen keyboard in WPF

TL;DR;

1.In WPF how can I display key symbols (e.g. backspace, as well as custom symbols that I will invent) so that they seamlessly sit alongside letters and numbers on other keys?

2.How can I apply a glow effect to the text on these keys so that letters, numbers, and symbols (e.g. backspace) glow in the same way?

Longer version;

I am writing an onscreen keyboard in WPF using a Border for the outline of each key and a TextBlock to display the text, for example the 'A' key might be defined as;

<Border>
  <Border.Tag>
    <KeyValue Key="A" Function="{x:Null}" />
  </Border.Tag>
  <TextBlock Text="A" />
</Border>

A function key, such as backspace, might be;

<Border>
  <Border.Tag>
    <KeyValue Key="{x:Null}" Function="{x:Static Functions.Backspace}" />
  </Border.Tag>
  <TextBlock Text="BACKSPACE" />
</Border>

For special keys such as Return, Backspace, Shift, Caps Lock, etc, I would prefer to display a symbol, for example ⏎ rather than "Return"/"Enter". I also have custom keys which will need a custom character that does not exist in the unicode character list.

I found that Unicode includes definitions for the standard characters (check out the below link which is very useful if you don't scroll down too far and crash your browser);

http://unicode-table.com/en/search/?q=return

This gives me ⏎ = U+23CE or ⏎ for return, for example.

My issues:

  1. I will be using a font which may not include these extended characters. This article suggests that only the core characters in unicode are covered by most fonts;

http://www.typography.com/faq/question.php?faqID=41

  1. I want to use custom symbols (which I will invent) so unicode characters couldn't meet my requirements completely anyway.

  2. I am not sure where to start if I go down the route of creating vector graphics for the symbols. They will need to support a glow animation which will occur on all keys (letters, numbers and symbols) and will be triggered when a key is 'pressed'. BitmapEffects was obsoleted after .Net 3.5 as it software rendered. The article below suggests using the DropShadowEffect - how should I create the symbols so that I can use the same approach for making the keys glow?

OuterGlowBitmapEffect Alternative Without BitmapEffects

Thanks for reading and for any help you offer. Julius

EDITTED to include a clearer example of how key values are stored in the key Tags.

Upvotes: 1

Views: 1597

Answers (2)

kenny
kenny

Reputation: 22414

For the visual stuff I would look at adding icon images.

<Geometry x:Key="appbar_user_path">
    F1 M 24,12C 27.5,12 29,14 28.4952,18.1979C 28.9462,18.4566 29.25,18.9428 29.25,19.5C 29.25,20.1818 28.7951,20.7574 28.1723,20.9397C 27.9121,21.8672 27.508,22.6882 27,23.3449L 27,26.5C 28.6667,26.8333 30,27 32,28C 34,29 34.6667,29.9167 36,31.25L 36,36L 12,36L 12,31.25C 13.3333,29.9167 14,29 16,28C 18,27 19.3333,26.8333 21,26.5L 21,23.3449C 20.492,22.6882 20.0879,21.8672 19.8277,20.9397C 19.2049,20.7574 18.75,20.1818 18.75,19.5C 18.75,18.9428 19.0538,18.4566 19.5048,18.1979C 19,14 20.5,12 24,12 Z
</Geometry>

For the On-Screen-Keyboard, I think you'll want to dig into TextCompositionManager and Help with the WPF TextCompositionManager events

static void SendTextCompenstation( string key )
{
    var textcomp = new TextComposition( InputManager.Current, UiControl, key );
    TextCompositionManager.StartComposition( textcomp );
}

Upvotes: 1

kidshaw
kidshaw

Reputation: 3461

It depends how your handling the key press event.

  • if you are binding to a command then you can use the command parameter to control what the key value actually is and thus breaking it from what is displayed.
  • Alternatively, if doing this in an event handler - use a button property, such as Tag which you can inspect in your handler.

Then replace your text box button contents with something else that can represent your custom keys, an image would work - a path would be better since that will support the same effects applied to your text box.

Upvotes: 1

Related Questions