與眾不同 windows phone (24) - Input（輸入）之軟鍵盤類型, XNA 方式啟動軟鍵盤, UIElement 的 Touch 相關事件, 觸摸塗鴉

[索引頁]
[源碼下載]

與眾不同 windows phone (24) - Input（輸入）之軟鍵盤類型, XNA 方式啟動軟鍵盤, UIElement 的 Touch 相關事件, 觸摸塗鴉

作者：webabcd


介紹
與眾不同 windows phone 7.5 (sdk 7.1) 之輸入

• 指定軟鍵盤的類型
• XNA 方式啟動軟鍵盤，並獲取用戶輸入的信息
• UIElement 的 Touch 相關事件
• 塗鴉板

示例
1、演示如何指定軟鍵盤的類型
InputScopeDemo.xaml

<phone:PhoneApplicationPage 
    x:Class="Demo.Input.Keyboard.InputScopeDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <StackPanel Orientation="Vertical">

            <!--SIP 包含數字和小數點，按住句號鍵可以顯示“.,-”-->
            <TextBox InputScope="Number" />

            <!--SIP 按“123”鍵切換到電話號碼鍵盤，按住句號鍵可以顯示“.,-”-->
            <TextBox InputScope="NameOrPhoneNumber" />

            <!--SIP 默認顯示數字和符號鍵盤-->
            <TextBox InputScope="CurrencyChinese" />

            <!--SIP 顯示電話撥號鍵盤-->
            <TextBox>
                <TextBox.InputScope>
                    <InputScope>
                        <InputScopeName NameValue="TelephoneNumber" />
                    </InputScope>
                </TextBox.InputScope>
            </TextBox>

            <!--后台將此 TextBox 的 InputScope 設置為“EmailUserName”-->
            <!--SIP 包括 @ 和 .com 鍵，按住 .com 鍵可以顯示“.org .com .edu .net”-->
            <TextBox Name="textBox" KeyDown="textBox_KeyDown" />
            
        </StackPanel>
    </Grid>

</phone:PhoneApplicationPage>

InputScopeDemo.xaml.cs

/*
 * 演示如何指定 SIP（Soft Input Panel）的輸入范圍
 * 本 Demo 只演示常用 SIP 布局，更多的布局請參見：http://msdn.microsoft.com/en-us/library/hh393998(v=vs.92)
 */

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

using System.Windows.Navigation;

namespace Demo.Input.Keyboard
{
    public partial class InputScopeDemo : PhoneApplicationPage
    {
        public InputScopeDemo()
        {
            InitializeComponent();
        }

      
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            /*
             * 通過指定 TextBox 的 InputScope 來決定關聯 SIP 的布局方式
             * 
             * System.Windows.Input.InputScopeNameValue 枚舉有多個值，每個值所對應的 SIP 布局請參見：http://msdn.microsoft.com/en-us/library/hh393998(v=vs.92)
             */

            InputScope scope = new InputScope();
            InputScopeName name = new InputScopeName();

            name.NameValue = InputScopeNameValue.EmailUserName;
            scope.Names.Add(name);

            textBox.InputScope = scope;
        }

        private void textBox_KeyDown(object sender, KeyEventArgs e)
        {
            // 判斷用戶是否按下了 SIP 上的回車鍵
            if (e.Key == Key.Enter)
            {
                MessageBox.Show("用戶按下了回車鍵");

                // 轉移焦點，虛擬鍵盤會自動隱藏
                this.Focus();
            }
        }
    }
}

2、演示如何以 XNA 方式啟動軟鍵盤，並獲取用戶輸入的信息
XNAKeyboard.xaml

<phone:PhoneApplicationPage 
    x:Class="Demo.Input.Keyboard.XNAKeyboard"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        
        <Button Content="顯示軟鍵盤" Click="Button_Click" />
        
    </Grid>

</phone:PhoneApplicationPage>

XNAKeyboard.xaml.cs

/*
 * 演示如何以 XNA 的方式啟動軟鍵盤，並獲取用戶輸入的信息
 */

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework;

namespace Demo.Input.Keyboard
{
    public partial class XNAKeyboard : PhoneApplicationPage
    {
        public XNAKeyboard()
        {
            InitializeComponent();
        }

        private void LaunchSIP()
        {
            string title = "請輸入文本";
            string description = "用於演示 XNA 啟動軟鍵盤";
            string defaultText = "hello webabcd";

            /*
             * Guide.BeginShowKeyboardInput(PlayerIndex player, string title, string description, string defaultText, AsyncCallback callback, Object state) - 顯示軟鍵盤
             *     player - 在 windows phone 下只能是 PlayerIndex.One
             *     title - SIP 對話框上顯示的標題
             *     description - SIP 對話框上顯示的描述
             *     defaultText - SIP 對話框中的文本框的默認文本
             *     callback - 回調方法
             *     state - 上下文
             */

            Guide.BeginShowKeyboardInput(PlayerIndex.One, title, description, defaultText, GetText, null);
        }

        private void GetText(IAsyncResult result)
        {
            /*
             * 獲取用戶輸入的文本信息
             */
            string resultString = Guide.EndShowKeyboardInput(result);

            this.Dispatcher.BeginInvoke(delegate
            {
                // 顯示用戶輸入的信息
                MessageBox.Show("用戶輸入的文本：" + resultString);
            });
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            LaunchSIP();
        }  
    }
}

3、演示如何響應 UIElement 的 Touch 相關事件
UIElementTouchEvent.xaml

<phone:PhoneApplicationPage 
    x:Class="Demo.Input.Touch.UIElementTouchEvent"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <StackPanel Orientation="Vertical">

            <Rectangle Width="100" Height="100" Fill="Red" 
                       Tap="Rectangle_Tap"
                       DoubleTap="Rectangle_DoubleTap"
                       Hold="Rectangle_Hold" />

            <TextBlock Name="lblMsg" TextWrapping="Wrap" Margin="0 15 0 0" Text="觸摸紅色方塊以演示 Tap 事件，DoubleTap 事件，Hold 事件" />
            
        </StackPanel>
    </Grid>

</phone:PhoneApplicationPage>

UIElementTouchEvent.xaml.cs

/*
 * 演示 UIElement 支持的 Touch 相關的事件
 * 
 * UIElement - UI 元素
 *     Tap - 單擊事件（事件參數：GestureEventArgs）
 *     DoubleTap - 雙擊事件（事件參數：GestureEventArgs）
 *     Hold - 較長時間觸摸某一 UIElement 時所觸發的事件（事件參數：GestureEventArgs）
 *     
 * GestureEventArgs
 *     GetPosition(UIElement relativeTo) - 獲取觸摸點相對於指定 UIElement 的坐標
 */

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace Demo.Input.Touch
{
    public partial class UIElementTouchEvent : PhoneApplicationPage
    {
        public UIElementTouchEvent()
        {
            InitializeComponent();
        }

        private void Rectangle_Tap(object sender, System.Windows.Input.GestureEventArgs e)
        {
            lblMsg.Text = "Rectangle 的 Tap 事件被觸發，觸摸點相對於 LayoutRoot 的坐標為：" + e.GetPosition(LayoutRoot).ToString();
        }

        private void Rectangle_DoubleTap(object sender, System.Windows.Input.GestureEventArgs e)
        {
            lblMsg.Text = "Rectangle 的 DoubleTap 事件被觸發，觸摸點相對於 LayoutRoot 的坐標為：" + e.GetPosition(LayoutRoot).ToString();
        }

        private void Rectangle_Hold(object sender, System.Windows.Input.GestureEventArgs e)
        {
            lblMsg.Text = "Rectangle 的 Hold 事件被觸發，觸摸點相對於 LayoutRoot 的坐標為：" + e.GetPosition(LayoutRoot).ToString();
        }
    }
}

4、演示如何開發塗鴉板程序
InkPresenterDemo.xaml

<phone:PhoneApplicationPage 
    x:Class="Demo.Input.Touch.InkPresenterDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        
        <InkPresenter x:Name="inkPresenter" Cursor="Stylus" Background="Blue" 
                      MouseMove="inkPresenter_MouseMove" MouseLeftButtonDown="inkPresenter_MouseLeftButtonDown">

            <TextBlock Text="請塗鴉" />
            
        </InkPresenter>

    </Grid>

</phone:PhoneApplicationPage>

InkPresenterDemo.xaml.cs

/*
 * 演示如何把手機當做一個塗鴉板
 * 
 * 本 Demo 只是做一個簡單的示例，詳細說明在之前的 Silverlight 系列文章中已經寫過，請參考 http://www.cnblogs.com/webabcd/archive/2008/11/17/1334768.html
 */

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

using System.Windows.Ink;

namespace Demo.Input.Touch
{
    public partial class InkPresenterDemo : PhoneApplicationPage
    {
        // 塗鴉筆畫對象
        private Stroke _newStroke;

        public InkPresenterDemo()
        {
            InitializeComponent();
        }

        private void inkPresenter_MouseMove(object sender, MouseEventArgs e)
        {
            _newStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(inkPresenter));
        }

        private void inkPresenter_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            AddStroke();
        }

        private void AddStroke()
        {
            _newStroke = new Stroke();
            _newStroke.DrawingAttributes.Width = 3d;
            _newStroke.DrawingAttributes.Height = 3d;
            _newStroke.DrawingAttributes.Color = Colors.Green;
            _newStroke.DrawingAttributes.OutlineColor = Colors.Red;

            inkPresenter.Strokes.Add(_newStroke);
        }
    }
}

 

OK
[源碼下載]