Windows 8 键盘上推自定义处理
原文:
Windows 8 键盘上推自定义处理
InputPaneHelper
KeyboardPage.xaml
KeyboardPage.xaml.cs
在Windows 8 应用程序中，当TextBox控件获得焦点时，输入面板会弹出，如果TextBox控件处于页面下半部分，则系统会将页面上推是的TextBox不被输入面板盖住，但是当TextBox是在FlipView控件中时，系统不会将页面上推，所以这种情况下输入框被输入面板盖住。具体原因不清楚，不知道是不是系统bug。
当输入面板弹出，页面上推的操作可以通过监听InputPane的Showing和Hiding事件来处理，既然当TextBox在FlipView控件时，系统没有很好的处理页面上推，那么开发者可以通过监听InputPane的事件来自己处理上推操作。
Windows 8 的一个实例代码Responding to the appearance of the on-screen keyboard sample中介绍了如果监听处理InputPane的相关操作，参考此实例以FlipView中的TextBox控件为例并对实例代码进行简化处理。
实例中的InputPaneHelper是对InputPane的事件处理的封装，直接拿来使用，InputPaneHelper代码如下：
1 using System; 2 using System.Collections.Generic; 3 using Windows.UI.ViewManagement; 4 using Windows.UI.Xaml; 5 using Windows.Foundation; 6 using Windows.UI.Xaml.Media.Animation; 7 8 namespace HuiZhang212.Keyboard 9 { 10 public delegate void InputPaneShowingHandler(object sender, InputPaneVisibilityEventArgs e); 11 public delegate void InputPaneHidingHandler(InputPane input, InputPaneVisibilityEventArgs e); 12 public class InputPaneHelper 13 { 14 private Dictionary<UIElement, InputPaneShowingHandler> handlerMap; 15 private UIElement lastFocusedElement = null; 16 private InputPaneHidingHandler hidingHandlerDelegate = null; 17 18 public InputPaneHelper() 19 { 20 handlerMap = new Dictionary<UIElement, InputPaneShowingHandler>(); 21 } 22 23 public void SubscribeToKeyboard(bool subscribe) 24 { 25 InputPane input = InputPane.GetForCurrentView(); 26 if (subscribe) 27 { 28 input.Showing += ShowingHandler; 29 input.Hiding += HidingHandler; 30 } 31 else 32 { 33 input.Showing -= ShowingHandler; 34 input.Hiding -= HidingHandler; 35 } 36 } 37 38 public void AddShowingHandler(UIElement element, InputPaneShowingHandler handler) 39 { 40 if (handlerMap.ContainsKey(element)) 41 { 42 throw new System.Exception("A handler is already registered!"); 43 } 44 else 45 { 46 handlerMap.Add(element, handler); 47 element.GotFocus += GotFocusHandler; 48 element.LostFocus += LostFocusHandler; 49 } 50 } 51 52 private void GotFocusHandler(object sender, RoutedEventArgs e) 53 { 54 lastFocusedElement = (UIElement)sender; 55 } 56 57 private void LostFocusHandler(object sender, RoutedEventArgs e) 58 { 59 if (lastFocusedElement == (UIElement)sender) 60 { 61 lastFocusedElement = null; 62 } 63 } 64 65 private void ShowingHandler(InputPane sender, InputPaneVisibilityEventArgs e) 66 { 67 if (lastFocusedElement != null && handlerMap.Count > 0) 68 { 69 handlerMap[lastFocusedElement](lastFocusedElement, e); 70 } 71 lastFocusedElement = null; 72 } 73 74 private void HidingHandler(InputPane sender, InputPaneVisibilityEventArgs e) 75 { 76 if (hidingHandlerDelegate != null) 77 { 78 hidingHandlerDelegate(sender, e); 79 } 80 lastFocusedElement = null; 81 } 82 83 public void SetHidingHandler(InputPaneHidingHandler handler) 84 { 85 this.hidingHandlerDelegate = handler; 86 } 87 88 public void RemoveShowingHandler(UIElement element) 89 { 90 handlerMap.Remove(element); 91 element.GotFocus -= GotFocusHandler; 92 element.LostFocus -= LostFocusHandler; 93 } 94 } 95 }
InputPaneHelper代码比较容易理解，简单的说就是用一个Hash表存储所有需要监听处理键盘上推事件的UIElement（一般情况下应该是TextBox控件），并且通过监听UIElement的焦点事件来判断弹出输入面板是通过那个UIElement触发的，并且通过监听InputPane的Showing和Hiding事件来对键盘上推进行处理。
测试页面KeyboardPage.xaml代码如下：
1 <Page 2 x:Class="HuiZhang212.Keyboard.KeyboardPage" 3 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 4 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 5 xmlns:local="using:HuiZhang212.Keyboard" 6 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 7 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 8 mc:Ignorable="d"> 9 10 <!--键盘上推和隐藏动画--> 11 <Page.Resources> 12 <Storyboard x:Name="MoveMiddleOnShowing"> 13 <DoubleAnimationUsingKeyFrames Duration="0:0:0.733" Storyboard.TargetName="MiddleTranslate" Storyboard.TargetProperty="Y"> 14 <SplineDoubleKeyFrame x:Name="ShowingMoveSpline" KeyTime="0:0:0.733" KeySpline="0.10,0.90, 0.20,1"> 15 </SplineDoubleKeyFrame> 16 </DoubleAnimationUsingKeyFrames> 17 </Storyboard> 18 19 <Storyboard x:Name="MoveMiddleOnHiding"> 20 <DoubleAnimationUsingKeyFrames Duration="0:0:0.367" Storyboard.TargetName="MiddleTranslate" Storyboard.TargetProperty="Y"> 21 <SplineDoubleKeyFrame KeyTime="0:0:0.367" KeySpline="0.10,0.90, 0.20,1" Value="0"> 22 </SplineDoubleKeyFrame> 23 </DoubleAnimationUsingKeyFrames> 24 </Storyboard> 25 </Page.Resources> 26 27 <Grid x:Name="LayoutRoot" Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> 28 <Grid.RenderTransform> 29 <TranslateTransform x:Name="MiddleTranslate" /> 30 </Grid.RenderTransform> 31 <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> 32 <FlipView Margin="100"> 33 <FlipViewItem Background="Yellow"> 34 <TextBox Text="自定义监听键盘上推事件" Name="textbox0" Foreground="Black" VerticalAlignment="Bottom" Width="300"/> 35 </FlipViewItem> 36 <FlipViewItem Background="Blue"> 37 <TextBox Text="系统处理键盘上推事件" Name="textbox1" Foreground="Black" VerticalAlignment="Bottom" Width="300"/> 38 </FlipViewItem> 39 <FlipViewItem Background="Green"> 40 <TextBox Text="自定义监听键盘上推事件" Name="textbox2" Foreground="Black" VerticalAlignment="Top" Width="300"/> 41 </FlipViewItem> 42 </FlipView> 43 </Grid> 44 </Grid> 45 </Page>
MoveMiddleOnShowing和MoveMiddleOnHiding分别是定义的键盘上推和隐藏时的动画，此动画作用在Grid上，当输入面板显示和隐藏时对Grid做此两种动画偏远而达到键盘上推的效果。
测试代码KeyboardPage.xaml.cs如下：
1 using System; 2 using System.Collections.Generic; 3 using System.IO; 4 using System.Linq; 5 using Windows.Foundation; 6 using Windows.Foundation.Collections; 7 using Windows.UI.ViewManagement; 8 using Windows.UI.Xaml; 9 using Windows.UI.Xaml.Controls; 10 using Windows.UI.Xaml.Controls.Primitives; 11 using Windows.UI.Xaml.Data; 12 using Windows.UI.Xaml.Input; 13 using Windows.UI.Xaml.Media; 14 using Windows.UI.Xaml.Navigation; 15 16 // “空白页”项模板在 http://go.microsoft.com/fwlink/?LinkId=234238 上有介绍 17 18 namespace HuiZhang212.Keyboard 19 { 20 /// <summary> 21 /// 可用于自身或导航至 Frame 内部的空白页。 22 /// 参考Responding to the appearance of the on-screen keyboard sample 23 /// FlipView控件中放置的TextBox控件 不会上推 24 /// </summary> 25 public sealed partial class KeyboardPage : Page 26 { 27 public KeyboardPage() 28 { 29 this.InitializeComponent(); 30 31 AddInputPanelElement(textbox0); 32 AddInputPanelElement(textbox2); 33 } 34 35 36 protected override void OnNavigatedFrom(NavigationEventArgs e) 37 { 38 RemoveInputPanelElement(textbox0); 39 RemoveInputPanelElement(textbox2); 40 } 41 42 #region 键盘上推处理 43 private double displacement = 0; 44 private InputPaneHelper inputPaneHelper = new InputPaneHelper(); 45 46 public void AddInputPanelElement(FrameworkElement element) 47 { 48 inputPaneHelper.SubscribeToKeyboard(true); 49 inputPaneHelper.AddShowingHandler(element, new InputPaneShowingHandler(CustomKeyboardHandler)); 50 inputPaneHelper.SetHidingHandler(new InputPaneHidingHandler(InputPaneHiding)); 51 } 52 53 public void RemoveInputPanelElement(FrameworkElement element) 54 { 55 inputPaneHelper.SubscribeToKeyboard(false); 56 inputPaneHelper.RemoveShowingHandler(element); 57 inputPaneHelper.SetHidingHandler(null); 58 } 59 60 private void CustomKeyboardHandler(object sender, InputPaneVisibilityEventArgs e) 61 { 62 // Keep in mind that other elements could be shifting out of your control. The sticky app bar, for example 63 // will move on its own. You should make sure the input element doesn't get occluded by the bar 64 FrameworkElement element = sender as FrameworkElement; 65 Point poppoint = element.TransformToVisual(this).TransformPoint(new Point(0, 0)); 66 displacement = e.OccludedRect.Y - (poppoint.Y + element.ActualHeight + 10); 67 //bottomOfList = MiddleScroller.VerticalOffset + MiddleScroller.ActualHeight; 68 69 70 // Be careful with this property. Once it has been set, the framework will 71 // do nothing to help you keep the focused element in view. 72 e.EnsuredFocusedElementInView = true; 73 74 if (displacement > 0) 75 { 76 displacement = 0; 77 } 78 79 ShowingMoveSpline.Value = displacement; 80 MoveMiddleOnShowing.Begin(); 81 } 82 83 private void InputPaneHiding(InputPane sender, InputPaneVisibilityEventArgs e) 84 { 85 if (displacement != 0.0) 86 { 87 MoveMiddleOnShowing.Stop(); 88 89 if (displacement < 0) 90 { 91 MoveMiddleOnHiding.Begin(); 92 } 93 } 94 } 95 #endregion 96 } 97 }
测试用例中在FlipView的三个item中分别放置一个TextBox，其中textbox0和textbox2是自定义处理键盘上推事件，而textbox1是由系统处理，通过运行程序可以发现textbox1触发弹出键盘不会使页面上推。而textbox0触发弹出键盘有自定义处理，会使页面上推。