重新想象 Windows 8 Store Apps (49) - 输入: 获取输入设备信息, 虚拟键盘, Tab 导航, Pointer, Tap, Drag, Drop
原文:
重新想象 Windows 8 Store Apps (49) - 输入: 获取输入设备信息, 虚拟键盘, Tab 导航, Pointer, Tap, Drag, Drop
重新想象 Windows 8 Store Apps (49) - 输入: 获取输入设备信息, 虚拟键盘, Tab 导航, Pointer, Tap, Drag, Drop
作者：webabcd
介绍
重新想象 Windows 8 Store Apps 之 输入
- 输入设备的相关信息
- SIP（Soft Input Panel）的应用
- Tab 键导航
- Pointer - 指针，鼠标
- Tap - 触摸
- Drag 和 Drop
示例
1、演示如何获取输入设备的相关信息
Input/InputDeviceInfo.xaml
<Page x:Class="XamlDemo.Input.InputDeviceInfo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlDemo.Input" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <Grid Margin="120 0 0 0"> <ScrollViewer Margin="0 0 10 10"> <TextBlock Name="lblMsg" FontSize="14.667" TextWrapping="Wrap" /> </ScrollViewer> </Grid> </Grid> </Page>
Input/InputDeviceInfo.xaml.cs
/* * 演示如何获取输入设备的相关信息 */ using System; using Windows.Devices.Input; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Navigation; namespace XamlDemo.Input { public sealed partial class InputDeviceInfo : Page { public InputDeviceInfo() { this.InitializeComponent(); } protected override void OnNavigatedTo(NavigationEventArgs e) { // 获取鼠标设备的相关信息 MouseCapabilities mouseCapabilities = new MouseCapabilities(); lblMsg.Text = "MouseCapabilities.MousePresent: " + mouseCapabilities.MousePresent; // 是否存在鼠标 lblMsg.Text += Environment.NewLine; lblMsg.Text += "MouseCapabilities.HorizontalWheelPresent: " + mouseCapabilities.HorizontalWheelPresent; // 是否有水平滚轮 lblMsg.Text += Environment.NewLine; lblMsg.Text += "MouseCapabilities.VerticalWheelPresent: " + mouseCapabilities.VerticalWheelPresent; // 是否有垂直滚轮 lblMsg.Text += Environment.NewLine; lblMsg.Text += "MouseCapabilities.SwapButtons: " + mouseCapabilities.SwapButtons; // 是否交换了左右按钮 lblMsg.Text += Environment.NewLine; lblMsg.Text += "MouseCapabilities.NumberOfButtons: " + mouseCapabilities.NumberOfButtons; // 鼠标上的按钮数量 lblMsg.Text += Environment.NewLine; lblMsg.Text += Environment.NewLine; // 获取硬件键盘设备的相关信息 KeyboardCapabilities keyboardCapabilities = new KeyboardCapabilities(); lblMsg.Text += "KeyboardCapabilities.KeyboardPresent: " + keyboardCapabilities.KeyboardPresent; // 是否存在硬件键盘 lblMsg.Text += Environment.NewLine; lblMsg.Text += Environment.NewLine; // 获取触摸设备的相关信息 TouchCapabilities touchCapabilities = new TouchCapabilities(); lblMsg.Text += "TouchCapabilities.TouchPresent: " + touchCapabilities.TouchPresent; // 是否存在触摸设备 lblMsg.Text += Environment.NewLine; lblMsg.Text += "TouchCapabilities.Contacts: " + touchCapabilities.Contacts; // 触摸设备所支持的多点触摸的点数 lblMsg.Text += Environment.NewLine; lblMsg.Text += Environment.NewLine; // 获取 Pointer 设备（Touch, Pen, Mouse）的相关信息 var pointerDeviceList = PointerDevice.GetPointerDevices(); int displayIndex = 0; foreach (PointerDevice pointerDevice in pointerDeviceList) { displayIndex++; lblMsg.Text += "Pointer Device Index: " + displayIndex; lblMsg.Text += Environment.NewLine; lblMsg.Text += "PointerDevice.PointerDeviceType: " + pointerDevice.PointerDeviceType; // Pointer 类型（Touch, Pen, Mouse） lblMsg.Text += Environment.NewLine; lblMsg.Text += "PointerDevice.IsIntegrated: " + pointerDevice.IsIntegrated; // 是否是集成设备 lblMsg.Text += Environment.NewLine; lblMsg.Text += "PointerDevice.MaxContacts: " + pointerDevice.MaxContacts; // 最大的同时触摸点数 lblMsg.Text += Environment.NewLine; lblMsg.Text += "PointerDevice.PhysicalDeviceRect: " + pointerDevice.PhysicalDeviceRect; // 物理设备的 Rect lblMsg.Text += Environment.NewLine; lblMsg.Text += "PointerDevice.ScreenRect: " + pointerDevice.ScreenRect; // Pointer 设备所支持的屏幕的 Rect lblMsg.Text += Environment.NewLine; lblMsg.Text += Environment.NewLine; } } } }
2、演示 SIP（Soft Input Panel）的应用
Input/Keyboard/Demo.xaml
<Page x:Class="XamlDemo.Input.Keyboard.Demo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlDemo.Input.Keyboard" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="120 0 0 0"> <!-- TextBox - 文本输入框 IsTextPredictionEnabled - 是否启用“自动完成”，默认值 true IsSpellCheckEnabled - 是否启用拼音检查，默认值 false --> <TextBox IsTextPredictionEnabled="True" IsSpellCheckEnabled="True" Margin="0 0 10 0" /> <!-- InputScope - 限制 SIP 的输入范围，即设置 SIP 的布局方式 --> <TextBox InputScope="Default" Margin="0 10 10 0" /> <TextBox KeyDown="TextBox_KeyDown_1" Margin="0 10 10 0"> <TextBox.InputScope> <InputScope> <InputScope.Names> <InputScopeName NameValue="TelephoneNumber" /> </InputScope.Names> </InputScope> </TextBox.InputScope> </TextBox> <!-- 对于 ReadOnly 的输入框，即使获取到焦点也不会弹出虚拟键盘 --> <TextBox Name="txtReadOnly" IsReadOnly="True" Margin="0 10 10 0" /> </StackPanel> </Grid> </Page>
Input/Keyboard/Demo.xaml.cs
/* * 演示 SIP（Soft Input Panel）的应用 * * 注： * 1、TextBox, RichEditBox, PasswordBox 等文本输入框获取焦点后，会自动显示虚拟键盘（对于 ReadOnly 的输入框，即使获取到焦点也不会弹出虚拟键盘） * 2、键盘相关的事件有 KeyDown 和 KeyUp * 3、WinRT 的 SIP 支持的 InputScope 类型详见 Windows.UI.Xaml.Input.InputScopeNameValue 枚举 * * * Windows.UI.ViewManagement.InputPane - 软键盘面板 * GetForCurrentView() - 获取当前的 InputPane 对象 * OccludedRect - 软键盘面板所占用的矩形区域 * Hiding - 软键盘隐藏时触发的事件 * Showing - 软键盘显示时触发的事件 * * * 如果需要检测当前某个虚拟按键的状态，可以用如下方法： * CoreWindow.GetAsyncKeyState(VirtualKey virtualKey) * CoreWindow.GetKeyState(VirtualKey virtualKey) * * 监测键盘事件可以通过 CoreWindow.KeyDown 事件 * 关于 CoreWindow 的更多内容请参见：Feature/CoreDemo.xaml.cs */ using System; using Windows.System; using Windows.UI.Core; using Windows.UI.Popups; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Input; namespace XamlDemo.Input.Keyboard { public sealed partial class Demo : Page { public Demo() { this.InitializeComponent(); this.Loaded += Demo_Loaded; } async void Demo_Loaded(object sender, RoutedEventArgs e) { // 检测虚拟按键当前的状态 CoreVirtualKeyStates capitalLockState = Windows.UI.Xaml.Window.Current.CoreWindow.GetKeyState(VirtualKey.CapitalLock); if (capitalLockState == CoreVirtualKeyStates.Locked) { await new MessageDialog("您的键盘处于“大写”输入状态").ShowAsync(); } } private void TextBox_KeyDown_1(object sender, KeyRoutedEventArgs e) { // 判断用户是否按下了 SIP 上的回车键 if (e.Key == VirtualKey.Enter) { // 将焦点移出文本输入框，虚拟键盘会自动隐藏 txtReadOnly.Focus(FocusState.Programmatic); } } } }
3、演示 Control 的 Tab 导航相关属性的应用
Input/Keyboard/TabNavigation.xaml
<Page x:Class="XamlDemo.Input.Keyboard.TabNavigation" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlDemo.Input.Keyboard" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="120 0 0 0"> <!-- 演示 Control 的 Tab 导航相关属性的应用 Control - 控件 TabIndex - Tab 导航的顺序，默认值为 int.MaxValue IsTabStop - 是否加入 Tab 导航，默认值为 true TabNavigation - Tab 导航的工作方式。经测试，没什么效果 --> <Button Content="button 1" TabIndex="3" TabNavigation="Once" /> <Button Content="button 2" Margin="0 10 0 0" TabIndex="1" /> <Button Content="button 3" Margin="0 10 0 0" IsTabStop="False" /> <Button Content="button 4" Margin="0 10 0 0" TabIndex="4" /> <Button Content="button 5" Margin="0 10 0 0" TabIndex="2" /> <ListBox Width="200" Height="300" Margin="0 10 0 0" HorizontalAlignment="Left" VerticalAlignment="Top"> <ListBox.Items> <ListBoxItem Content="ListBoxItem1" /> <ListBoxItem Content="ListBoxItem2" /> <ListBoxItem Content="ListBoxItem3" /> </ListBox.Items> </ListBox> </StackPanel> </Grid> </Page>
4、演示 Pointer 相关事件的应用
Input/Touch/Pointer.xaml
<Page x:Class="XamlDemo.Input.Touch.Pointer" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlDemo.Input.Touch" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <Grid Margin="120 0 0 0"> <Rectangle Name="rectangle" Width="400" Height="100" Fill="Orange" HorizontalAlignment="Left" VerticalAlignment="Top" /> <ScrollViewer Margin="0 110 0 10" HorizontalAlignment="Stretch" VerticalAlignment="Top"> <TextBlock Name="lblMsg" FontSize="14.667" TextWrapping="Wrap" /> </ScrollViewer> </Grid> </Grid> </Page>
Input/Touch/Pointer.xaml.cs
/* * 演示 Pointer 相关事件的应用 * * * PointerRoutedEventArgs - 指针路由事件的事件参数 * OriginalSource - 引发此路由事件的对象 * Handled - 是否将事件标记为已处理 * KeyModifiers - 获取当前按下的辅助键（Windows.System.VirtualKeyModifiers 枚举） * None, Control, Menu, Shift, Windows * Pointer - 获取 Pointer 对象 * Pointer.PointerDeviceType - 指针设备的类型（Touch, Pen, Mouse） * Pointer.PointerId - 指针标识，可以根据此属性来区分多点触摸场景下的不同指针 * GetCurrentPoint(UIElement relativeTo) - 返回当前指针相对于指定元素的 PointerPoint 对象 * PointerPoint.Position - 指针的位置 * PointerPoint.Properties - 返回 PointerPointProperties 对象，有一堆 PointerPoint 的相关属性 * GetIntermediatePoints(UIElement relativeTo) - 返回与此事件关联的 PointerPoint 的中间值（平均值）集合 * * * HoldingRoutedEventArgs - Holding 路由事件的事件参数 * OriginalSource - 引发此路由事件的对象 * Handled - 是否将事件标记为已处理 * PointerDeviceType - 指针设备的类型（Touch, Pen, Mouse） * GetPosition(UIElement relativeTo) - 返回当前指针相对于指定元素的位置 * HoldingState - Holding 状态（Windows.UI.Input.HoldingState 枚举） * Started, Completed, Canceled * * * UIElement.CapturePointer(Pointer value) - 捕获此 UIElement 上的指针，即在 UIElement 之外也可以响应 PointerReleased 事件 * UIElement.ReleasePointerCapture(Pointer value) - 释放对此 UIElement 上的指针的捕获 * UIElement.ReleasePointerCaptures() - 释放全部指针的捕获 * * * 注：通过 CoreWindow.PointerCursor 设置指针光标的样式 */ using System; using Windows.UI.Core; using Windows.UI.Input; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Input; using Windows.UI.Xaml.Shapes; namespace XamlDemo.Input.Touch { public sealed partial class Pointer : Page { public Pointer() { this.InitializeComponent(); // 修改指针光标的样式 Windows.UI.Xaml.Window.Current.CoreWindow.PointerCursor = new CoreCursor(CoreCursorType.Cross, 1); rectangle.PointerEntered += rectangle_PointerEntered; rectangle.PointerExited += rectangle_PointerExited; rectangle.PointerPressed += rectangle_PointerPressed; rectangle.PointerReleased += rectangle_PointerReleased; rectangle.PointerMoved += rectangle_PointerMoved; rectangle.PointerWheelChanged += rectangle_PointerWheelChanged; rectangle.PointerCanceled += rectangle_PointerCanceled; rectangle.PointerCaptureLost += rectangle_PointerCaptureLost; rectangle.Holding += rectangle_Holding; } void rectangle_Holding(object sender, HoldingRoutedEventArgs e) { lblMsg.Text += "Holding"; lblMsg.Text += Environment.NewLine; } void rectangle_PointerCaptureLost(object sender, PointerRoutedEventArgs e) { lblMsg.Text += "PointerCaptureLost " + e.Pointer.PointerId; lblMsg.Text += Environment.NewLine; } void rectangle_PointerCanceled(object sender, PointerRoutedEventArgs e) { lblMsg.Text += "PointerCanceled " + e.Pointer.PointerId; lblMsg.Text += Environment.NewLine; } void rectangle_PointerWheelChanged(object sender, PointerRoutedEventArgs e) { // 判断鼠标滚轮的滚动方向 lblMsg.Text += "PointerWheelChanged " + e.GetCurrentPoint(null).Properties.MouseWheelDelta; lblMsg.Text += Environment.NewLine; } void rectangle_PointerMoved(object sender, PointerRoutedEventArgs e) { // lblMsg.Text += "PointerMoved " + e.Pointer.PointerId; // lblMsg.Text += Environment.NewLine; } void rectangle_PointerReleased(object sender, PointerRoutedEventArgs e) { lblMsg.Text += "PointerReleased " + e.Pointer.PointerId; lblMsg.Text += Environment.NewLine; ((Rectangle)sender).ReleasePointerCapture(e.Pointer); } void rectangle_PointerPressed(object sender, PointerRoutedEventArgs e) { lblMsg.Text += "PointerPressed " + e.Pointer.PointerId; lblMsg.Text += Environment.NewLine; bool hasCapture = ((Rectangle)sender).CapturePointer(e.Pointer); lblMsg.Text += "Got Capture: " + hasCapture; lblMsg.Text += Environment.NewLine; PointerPointProperties props = e.GetCurrentPoint(null).Properties; lblMsg.Text += "接触区域的边框: " + props.ContactRect.ToString(); lblMsg.Text += Environment.NewLine; lblMsg.Text += "原始输入的边框: " + props.ContactRectRaw.ToString(); lblMsg.Text += Environment.NewLine; lblMsg.Text += "触笔设备的筒状按钮是否按下: " + props.IsBarrelButtonPressed.ToString(); lblMsg.Text += Environment.NewLine; lblMsg.Text += "输入是否已由指针设备取消: " + props.IsCanceled.ToString(); lblMsg.Text += Environment.NewLine; lblMsg.Text += "输入是否来自橡皮擦: " + props.IsEraser.ToString(); lblMsg.Text += Environment.NewLine; lblMsg.Text += "输入是否来自滚轮: " + props.IsHorizontalMouseWheel.ToString(); lblMsg.Text += Environment.NewLine; lblMsg.Text += "指针是否在触摸屏的范围内: " + props.IsInRange.ToString(); lblMsg.Text += Environment.NewLine; lblMsg.Text += "是否是反转的值: " + props.IsInverted.ToString(); lblMsg.Text += Environment.NewLine; lblMsg.Text += "输入是否来自鼠标左键: " + props.IsLeftButtonPressed.ToString(); lblMsg.Text += Environment.NewLine; lblMsg.Text += "输入是否来自鼠标中键: " + props.IsMiddleButtonPressed.ToString(); lblMsg.Text += Environment.NewLine; lblMsg.Text += "输入是否来自鼠标右键: " + props.IsRightButtonPressed.ToString(); lblMsg.Text += Environment.NewLine; lblMsg.Text += "输入是否来自主要指针: " + props.IsPrimary.ToString(); lblMsg.Text += Environment.NewLine; lblMsg.Text += "第一个扩展按钮的按下状态: " + props.IsXButton1Pressed.ToString(); lblMsg.Text += Environment.NewLine; lblMsg.Text += "第二个扩展按钮的按下状态: " + props.IsXButton2Pressed.ToString(); lblMsg.Text += Environment.NewLine; lblMsg.Text += "指针施加到触摸屏上的力度（0.0-1.0）: " + props.Pressure.ToString(); lblMsg.Text += Environment.NewLine; lblMsg.Text += "触摸是否被拒绝了: " + props.TouchConfidence.ToString(); lblMsg.Text += Environment.NewLine; lblMsg.Text += "指针状态的更改类型: " + props.PointerUpdateKind.ToString(); // PointerUpdateKind 枚举：LeftButtonPressed, LeftButtonReleased 等等 lblMsg.Text += Environment.NewLine; lblMsg.Text += "指针设备相关的 Orientation: " + props.Orientation.ToString(); lblMsg.Text += Environment.NewLine; lblMsg.Text += "指针设备相关的 Twist: " + props.Twist.ToString(); lblMsg.Text += Environment.NewLine; lblMsg.Text += "指针设备相关的 XTilt: " + props.XTilt.ToString(); lblMsg.Text += Environment.NewLine; lblMsg.Text += "指针设备相关的 YTiltYTilt: " + props.YTilt.ToString(); lblMsg.Text += Environment.NewLine; // 输入设备相关 // props.HasUsage(uint usagePage, uint usageId) // props.GetUsageValue(uint usagePage, uint usageId) } void rectangle_PointerExited(object sender, PointerRoutedEventArgs e) { lblMsg.Text += "PointerExited " + e.Pointer.PointerId; lblMsg.Text += Environment.NewLine; } void rectangle_PointerEntered(object sender, PointerRoutedEventArgs e) { lblMsg.Text += "PointerEntered " + e.Pointer.PointerId; lblMsg.Text += Environment.NewLine; } } }
5、演示 Tap 相关事件的应用
Input/Touch/Tap.xaml
<Page x:Class="XamlDemo.Input.Touch.Tap" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlDemo.Input.Touch" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="120 0 0 0"> <Rectangle Name="rectangle" Width="400" Height="100" Fill="Orange" HorizontalAlignment="Left" /> <TextBlock Name="lblMsg" FontSize="14.667" TextWrapping="Wrap" Margin="0 10 0 0" /> </StackPanel> </Grid> </Page>
Input/Touch/Tap.xaml.cs
/* * 演示 Tap 相关事件的应用 * * * TappedRoutedEventArgs - Tap 路由事件的事件参数 * DoubleTappedRoutedEventArgs - DoubleTap 路由事件的事件参数 * RightTappedRoutedEventArgs - RightTap 路由事件的事件参数 * OriginalSource - 引发此路由事件的对象 * Handled - 是否将事件标记为已处理 * PointerDeviceType - 指针设备的类型（Touch, Pen, Mouse） * GetPosition(UIElement relativeTo) - 返回当前指针相对于指定元素的位置 * * * HoldingRoutedEventArgs - Holding 路由事件的事件参数 * OriginalSource - 引发此路由事件的对象 * Handled - 是否将事件标记为已处理 * PointerDeviceType - 指针设备的类型（Touch, Pen, Mouse） * GetPosition(UIElement relativeTo) - 返回当前指针相对于指定元素的位置 * HoldingState - Holding 状态（Windows.UI.Input.HoldingState 枚举） * Started, Completed, Canceled */ using System; using Windows.UI.Xaml.Controls; namespace XamlDemo.Input.Touch { public sealed partial class Tap : Page { public Tap() { this.InitializeComponent(); rectangle.IsTapEnabled = true; // 默认值就是 true rectangle.IsDoubleTapEnabled = true; // 默认值就是 true rectangle.IsRightTapEnabled = true; // 默认值就是 true rectangle.IsHoldingEnabled = true; // 默认值就是 true rectangle.Tapped += rectangle_Tapped; rectangle.DoubleTapped += rectangle_DoubleTapped; rectangle.RightTapped += rectangle_RightTapped; rectangle.Holding += rectangle_Holding; } void rectangle_Holding(object sender, Windows.UI.Xaml.Input.HoldingRoutedEventArgs e) { lblMsg.Text += "Holding"; lblMsg.Text += Environment.NewLine; } void rectangle_RightTapped(object sender, Windows.UI.Xaml.Input.RightTappedRoutedEventArgs e) { lblMsg.Text += "RightTapped"; lblMsg.Text += Environment.NewLine; } void rectangle_DoubleTapped(object sender, Windows.UI.Xaml.Input.DoubleTappedRoutedEventArgs e) { lblMsg.Text += "DoubleTapped"; lblMsg.Text += Environment.NewLine; } void rectangle_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e) { lblMsg.Text += "Tapped"; lblMsg.Text += Environment.NewLine; } } }
6、关于 AllowDrop, Drop, DragEnter, DragOver, DragLeave
Input/Touch/DragDrop.xaml
<Page x:Class="XamlDemo.Input.Touch.DragDrop" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlDemo.Input.Touch" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="120 0 0 0"> <TextBlock Name="lblMsg" FontSize="14.667" TextWrapping="Wrap"> <Run>关于 AllowDrop, Drop, DragEnter, DragOver, DragLeave 等详见：Controls/GridView/DragItem.xaml</Run> </TextBlock> </StackPanel> </Grid> </Page>
OK
[源码下载]