A proper solution to a WPF application using On Screen Keyboard

Question

Hi.
I´ve been working for some time on a good OSK solution for my WPF apps, that are running on a tablet. But it´s hard working with the OSK.exe and tabtip.exe, because of several bugs, strange behaviour and no standardized solution to this ordinary problem.
What I (probably) need is a custom textbox control, which inherits from System.Windows.Controls.TextBox, and overrides some methods.
The simple requirements for this textbox should be:
1. When a user clicks in a textfield, the tabtip.exe (or alike) keyboard should pop up at the bottom of the screen (default).
2. If the keyboard pops up on top of the textbox, the contentframe should scroll so that the textbox is visible.
3. When the textbox loses focus, the keyboard should close automatically, except if the user clicks on another textbox.
This seems like pretty standard behaviour right? Well I´ve looked a long time for solutions (there is no standard microsoft way which is kind of weird), and as said I´ve tried making my own but with no luck. For example, sometimes when I try to kill the process,
it fails. When I click the close button in the upperright corner on the keyboard, like 5-6-7 times, it closes. The behaviour from PC to tablet is not consistent. The ScrollViewer.ScrollToVerticalOffset(x); sometimes doesent work on a tablet, and so on.
So does any of you know a good solution to this common problem?

Answer 1

Hello Farsen.
I have been creating a Win8 app for my business and in learning that I discovered they have "LayoutAware" pages.  The basic idea behind the LayoutAware page is that they move the page up when the keyboard is active and that different layouts
can be set for the tablet orientation.
You could apply the same basic concept to WPF using VisualStateManager.
Here is a real quick example....
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
x:Class="WpfApplication27.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Grid x:Name="LayoutRoot">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="KeyboardOpen">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="grid">
<EasingDoubleKeyFrame KeyTime="0" Value="-130"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="KeyboardClosed"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<VisualStateManager.CustomVisualStateManager>
<ei:ExtendedVisualStateManager/>
</VisualStateManager.CustomVisualStateManager>
<Grid x:Name="grid" HorizontalAlignment="Center" Height="41.92" VerticalAlignment="Center" Width="200" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<TextBox TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" GotFocus="TextBox_GotFocus" LostFocus="TextBox_LostFocus"/>
<Button Content="Button" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="75"/>
</Grid>
</Grid>
</Window>
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
namespace WpfApplication27
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
public MainWindow()
this.InitializeComponent();
// Insert code required on object creation below this point.
private void TextBox_GotFocus(object sender, System.Windows.RoutedEventArgs e)
Process.Start("TabTip.exe");
VisualStateManager.GoToElementState(LayoutRoot, "KeyboardOpen", true);
private void TextBox_LostFocus(object sender, System.Windows.RoutedEventArgs e)
Process[] processlist = Process.GetProcesses();
foreach(Process process in processlist)
if (process.ProcessName == "TabTip")
process.Kill();
VisualStateManager.GoToElementState(LayoutRoot, "KeyboardClosed", true);
break;
Now, I'm sure folks get right tired of my shouting Blend. But... if you have Blend you could make short work of setting this up.
If you open your project in Blend, select the xaml page with the design view showing. 
Select the "States" tab.
Click the "Add State" button and you can double click the state that appears to rename it or rename it directly in xaml.
Change the Transition Duration if desired.
Select the state and you will see that "State Recording" is active.
Just move your items where you want them for that state.
I hope that gives you some ideas.
~Christine
Edit. The red ellipse in the image above circles the "Add State" button.