一个WPF下的虚拟键盘实现

给上位机触摸屏做一个虚拟键盘，这玩意儿不就是一排的网格里面放满button嘛 。说归这样说 依然还是有一堆细节需要你去处理的。不论如何 先画个键盘吧。

 

简单的从网上找个键盘位图做参照使用 4行Grid 布局一下 是不是有模有样。主要是按键的样式要想好看的话的花一些功夫。然后所有的button需要绑定同一个事件，由于WPF里的事件是路由事件 我们直接在最外面的Grid上写 ButtonBase.Click="ButtonGrid_Click" 即可 ，以前竟然没发现还可以这样ButtonBase 了解了。然后有几个蓝色的Fun按键需要做特殊处理和定义， 还有就算我们做成的userControl控件，需要把事件暴露给外部 让按特定键的时候外部写自己的处理逻辑。

按键和事件定义

public Action<object> MyKeyDown;
private String valueString;

internal String ValueString
{
    get { return valueString; }
}
public enum EKeyitem
{
    DEl,
    AC,
    OK,
    Shift,
    A
}

事件触发

private void ButtonGrid_Click(object sender, RoutedEventArgs e)
{
    Button clickedButton = (Button)e.OriginalSource;    //获取click事件触发源，即按了的按钮
    if ((String)clickedButton.Content == "DEL")
    {
        MyKeyDown(EKeyitem.DEl);
    }
    else if ((String)clickedButton.Content == "AC")
    {
        MyKeyDown(EKeyitem.AC);
    }
    else if ((String)clickedButton.Content == "确认")
    {
        MyKeyDown(EKeyitem.OK);
        //this.Close();
    }
    else if ((String)clickedButton.Content == "A/a")
    {
        for (int j = 1; j < 4; j++)
        {
            Grid grd = ButtonGrid.Children[j] as Grid;
            int count2 = grd.Children.Count;
            for (int i = 0; i < count2; i++)
            {
                Button buttonTemp = grd.Children[i] as Button;
                String contentTemp = buttonTemp.Content as String;
                if (contentTemp == "AC" || contentTemp == "A/a")
                    continue;
                buttonTemp.Content = contentTemp[0] > 90 ? contentTemp.ToUpper() : contentTemp.ToLower();
            }
        }
        
    }
    else
    {
        MyKeyDown((String)clickedButton.Content);
    }
}

 

外部使用，常规usercontrol一样使用，先是引入命名空间xmlns:local="clr-namespace:xxx，由于虚拟键盘有一个特性 ，比如我们点击文本框那么它应该出现，且出现的位置刚好在文本框下方，我点回车虚拟键盘消失，那么这里有一丁丁的奇技淫巧，那就是可以进行绝对定位的canvas组件。

<Grid>    
<TextBox Width="300" Height="50" FontSize="25" Name="tbx_QueryCode" Text="" PreviewMouseDown="tbx_QueryCode_PreviewMouseDown" KeyDown="tbx_QueryCode_KeyDown" GotFocus="tbx_QueryCode_GotFocus"></TextBox>
<Canvas Name="vkContext" Focusable="False" >
            <local:VKeyBoard Canvas.Left="50" Focusable="False" Canvas.Top="100" Visibility="Hidden"  x:Name="myvk"></local:VKeyBoard>
        </Canvas>
    </Grid>

文本框获取焦点时

private void tbx_QueryCode_GotFocus(object sender, RoutedEventArgs e)
{
    myvk.Visibility = Visibility.Visible;
    focusTbx = tbx_QueryCode;
    RePointKeyBoard();
}

虚拟键盘的聚焦

public void RePointKeyBoard()
{
    if (focusTbx != null)
    {
        Point p = focusTbx.TranslatePoint(new Point(0, 0), windContent);
                                                                        
        this.myvk.SetValue(Canvas.LeftProperty, p.X);
        this.myvk.SetValue(Canvas.TopProperty, p.Y + focusTbx.Height);
    }

}

还有就是虚拟键盘外露给我们事件的处理。

开始时绑定事件

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    myvk.MyKeyDown = MyKeyDown;

}

外露事件处理

//虚拟键盘事件
private void MyKeyDown(object _key)
{
    if (focusTbx == null)
    {
        myvk.Visibility = Visibility.Hidden;
        return;
    }
    EKeyitem key = EKeyitem.A;
    if (_key.GetType() == typeof(EKeyitem))
        key = (EKeyitem)_key;

    if (key == EKeyitem.DEl)
    {
        if (focusTbx.Text.Length > 0)
        {
            focusTbx.Text = focusTbx.Text.Substring(0, focusTbx.Text.Length - 1);
        }
    }
    else if (key == EKeyitem.AC)
    {
        focusTbx.Text = "";
    }
    else if (key == EKeyitem.OK)
    {

        myvk.Visibility = Visibility.Hidden;
        if (vm.LoginOK == true && focusTbx == tbx_QueryCode)
        {
            valueString = focusTbx.Text;
            //this.Close();
            BarCodeInputKeyDown();
        }
    }
    else if (key == EKeyitem.Shift)
    {

    }
    else
    {
        focusTbx.Text += _key.ToString();
    }
}