ビューを手書きのテキスト入力Text input with the handwriting view

ペンでタップするとテキスト ボックスが展開する

など、UWP のテキスト コントロールでサポートされているテキスト入力をインクの組み込みの手書きのビューをカスタマイズ、 TextBoxRichEditBox、およびこれらから派生したなどのコントロール、 AutoSuggestBoxします。Customize the built-in handwriting view for ink to text input supported by UWP text controls such as the TextBox, RichEditBox, and controls derived from these such as the AutoSuggestBox.

概要Overview

XAML テキスト入力ボックス機能を使用して入力ペンのサポートが組み込まWindows インクします。XAML text input boxes feature embedded support for pen input using Windows Ink. ユーザーはタップ Windows ペンを使用して、テキスト入力ボックスに、テキスト ボックスは個別の入力パネルを開くのではなく、手書きの画面に変換します。When a user taps into a text input box using a Windows pen, the text box transforms into a handwriting surface, rather than opening a separate input panel.

テキストが認識するは、ユーザーを書き込む任意の場所で、テキスト ボックスと候補のウィンドウには、認識結果が表示されます。Text is recognized as the user writes anywhere in the text box, and a candidate window shows the recognition results. ユーザーは結果をタップしてそれを選択したり、さらに書き込んで提案された候補を受け入れたりすることができます。The user can tap a result to choose it, or continue writing to accept the proposed candidate. リテラル (1 文字ずつ) による認識結果は候補ウィンドウに含まれているため、認識はディクショナリ内の単語に制限されません。The literal (letter-by-letter) recognition results are included in the candidate window, so recognition is not restricted to words in a dictionary. ユーザーが手書きで入力すると、受け入れられたテキスト入力は自然な手書き感を維持して Script フォントに変換されます。As the user writes, the accepted text input is converted to a script font that retains the feel of natural writing.

注意

既定では、手書きのビューが有効になっているが、コントロールごとでは無効にし、代わりに、テキスト入力パネルを元に戻すことができます。The handwriting view is enabled by default, but you can disable it on a per-control basis and revert to the text input panel instead.

インクと提案されたテキスト ボックス

ユーザーは、次のような標準的なジェスチャや操作を使用してテキストを編集できます。A user can edit their text using standard gestures and actions, like these:

  • 取り消し線_または_インクを消す - 単語や単語の一部を削除しますstrike through or scratch out - draw through to delete a word or part of a word
  • 結合 - 単語間に円弧を描き、単語間のスペースを削除しますjoin - draw an arc between words to delete the space between them
  • 挿入- スペースを挿入するキャレット記号を描画しますinsert - draw a caret symbol to insert a space
  • 上書き- 既存のテキストの上に書き込み、それを置き換えますoverwrite - write over existing text to replace it

テキスト ボックスにインクの修正

手書きのビューを無効にします。Disable the handwriting view

組み込みの手書きのビューは、既定で有効です。The built-in handwriting view is enabled by default.

アプリケーションでは、既にインクからテキストへの同等の機能を提供するか、テキスト入力の経験がある種の書式設定や特殊文字 (タブ) など手書きからは利用できない依存手書きビューを無効にすることがあります。You might want to disable the handwriting view if you already provide equivalent ink-to-text functionality in your application, or your text input experience relies on some kind of formatting or special character (such as a tab) not available through handwriting.

この例で手書きのビュー設定を無効に、 IsHandwritingViewEnabledのプロパティ、 TextBoxコントロールを false にします。In this example, we disable the handwriting view by setting the IsHandwritingViewEnabled property of the TextBox control to false. 手書きビューをサポートするすべてのテキスト コントロールのようなプロパティをサポートします。All text controls that support the handwriting view support a similar property.

<TextBox Name="SampleTextBox"
    Height="50" Width="500" 
    FontSize="36" FontFamily="Segoe UI" 
    PlaceholderText="Try taping with your pen" 
    IsHandwritingViewEnabled="False">
</TextBox>

手書きビューの配置を指定します。Specify the alignment of the handwriting view

手書きビューの基になるテキスト コントロールの上にあるし、ユーザーの手書き認識の基本設定を格納できるだけのサイズ (を参照してください設定]、[デバイスのペンを -> & Windows インクが手書きを -> に直接記述する場合は、フォントのサイズを ->テキスト フィールド)。The handwriting view is located above the underlying text control and sized to accommodate the user's handwriting preferences (see Settings -> Devices -> Pen & Windows Ink -> Handwriting -> Size of font when writing directly into text field). ビューは、テキスト コントロールと、アプリ内での位置を基準も自動的に配置されます。The view is also automatically aligned relative to the text control and its location within the app.

アプリケーションの UI は、システムが重要な UI に表示が発生する可能性がありますので、大きい方のコントロールを対応するためにフローを変更できません。The application UI does not reflow to accommodate the larger control, so the system might cause the view to occlude important UI.

ここでは、使用する方法を示します、 PlacementAlignmentのプロパティをTextBox HandwritingView整列するために使用する、基になるテキスト コントロールのどのアンカーを指定する、手書き文字を表示します。Here, we show how to use the PlacementAlignment property of a TextBox HandwritingView to specify which anchor on the underlying text control is used to align the handwriting view.

<TextBox Name="SampleTextBox"
    Height="50" Width="500" 
    FontSize="36" FontFamily="Segoe UI" 
    PlaceholderText="Try taping with your pen">
        <TextBox.HandwritingView>
            <HandwritingView PlacementAlignment="TopLeft"/>
        </TextBox.HandwritingView>
</TextBox>

オート コンプリートの候補を無効にします。Disable auto-completion candidates

テキストの修正候補のポップアップは、上のインクの一覧に、ユーザーが元の候補の最上位に位置が正しくない場合に選択できる認識候補を提供する、既定で有効です。The text suggestion popup is enabled by default to provide a list of top ink recognition candidates from which the user can select in case the top candidate is incorrect.

既にアプリケーションが、堅牢なカスタムの認識機能を提供する場合は使用できます、 AreCandidatesEnabledプロパティを次の例に示すように、組み込みの推奨事項を無効にします。If your application already provides robust, custom recognition functionality, you can use the AreCandidatesEnabled property to disable the built-in suggestions, as shown in the following example.

<TextBox Name="SampleTextBox"
    Height="50" Width="500" 
    FontSize="36" FontFamily="Segoe UI" 
    PlaceholderText="Try taping with your pen">
        <TextBox.HandwritingView>
            <HandwritingView AreCandidatesEnabled="False"/>
        </TextBox.HandwritingView>
</TextBox>

手書き文字のフォント設定を使用して、Use handwriting font preferences

ユーザーが選択できるときに使用するフォントの手書き文字ベースの定義済みコレクション インクの認識に基づいてテキストのレンダリング (を参照してください設定、デバイス ペンを -> & Windows インク手書き-> 手書きを使用する場合、フォント->).A user can choose from a pre-defined collection of handwriting-based fonts to use when rendering text based on ink recognition (see Settings -> Devices -> Pen & Windows Ink -> Handwriting -> Font when using handwriting).

注意

ユーザーは、自分の書いたに基づいてフォントを作成することもできます。Users can even create a font based on their own handwriting.

アプリでは、この設定にアクセスでき、テキスト コントロールに認識されたテキストの選択したフォントを使用することができます。Your app can access this setting and use the selected font for the recognized text in the text control.

リッスンこの例で、 TextChangedのイベントをTextBox HandwritingView (または既定のフォント、ない場合) からのテキスト変更が発生した場合、ユーザーの選択したフォントを適用します。In this example, we listen for the TextChanged event of a TextBox and apply the user's selected font if the text change originated from the HandwritingView (or a default font, if not).

private void SampleTextBox_TextChanged(object sender, TextChangedEventArgs e)
{
    ((TextBox)sender).FontFamily = 
        ((TextBox)sender).HandwritingView.IsOpen ?
            new FontFamily(PenAndInkSettings.GetDefault().FontFamilyName) : 
            new FontFamily("Segoe UI");
}

複合コントロールで HandwritingView へのアクセスします。Access the HandwritingView in composite controls

複合コントロールを使用して、 TextBoxまたはRichEditBoxなどのコントロールAutoSuggestBoxサポートも、 HandwritingViewします。Composite controls that use the TextBox or RichEditBox controls, such as AutoSuggestBox also support a HandwritingView.

アクセスする、 HandwritingView複合コントロールで使用して、 VisualTreeHelper API。To access the HandwritingView in a composite control, use the VisualTreeHelper API.

次の XAML スニペットが表示されます、 AutoSuggestBoxコントロール。The following XAML snippet displays an AutoSuggestBox control.

<AutoSuggestBox Name="SampleAutoSuggestBox" 
    Height="50" Width="500" 
    PlaceholderText="Auto Suggest Example" 
    FontSize="16" FontFamily="Segoe UI"  
    Loaded="SampleAutoSuggestBox_Loaded">
</AutoSuggestBox>

対応するコードの分離、無効にする方法を説明します、 HandwritingView上、 AutoSuggestBoxします。In the corresponding code-behind, we show how to disable the HandwritingView on the AutoSuggestBox.

  1. アプリケーションの読み込まれたイベントを処理最初に、ビジュアル ツリーの走査を開始する FindInnerTextBox 関数を呼び出すことです。First, we handle the application's Loaded event where we call a FindInnerTextBox function to start the visual tree traversal.

    private void SampleAutoSuggestBox_Loaded(object sender, RoutedEventArgs e)
    {
        if (FindInnerTextBox((AutoSuggestBox)sender))
            autoSuggestInnerTextBox.IsHandwritingViewEnabled = false;
    }
    
  2. FindVisualChildByName への呼び出しを FindInnerTextBox 関数には、(、AutoSuggestBox から始まります)、ビジュアル ツリーを反復処理すること、開始します。We then begin iterating through the visual tree (starting at an AutoSuggestBox) in the FindInnerTextBox function with a call to FindVisualChildByName.

    private bool FindInnerTextBox(AutoSuggestBox autoSuggestBox)
    {
        if (autoSuggestInnerTextBox == null)
        {
            // Cache textbox to avoid multiple tree traversals. 
            autoSuggestInnerTextBox = 
                (TextBox)FindVisualChildByName<TextBox>(autoSuggestBox);
        }
        return (autoSuggestInnerTextBox != null);
    }
    
  3. 最後に、テキスト ボックスが取得されるまでは、ビジュアル ツリーをこの関数が反復処理します。Finally, this function iterates through the visual tree until the TextBox is retrieved.

    private FrameworkElement FindVisualChildByName<T>(DependencyObject obj)
    {
        FrameworkElement element = null;
        int childrenCount = 
            VisualTreeHelper.GetChildrenCount(obj);
        for (int i = 0; (i < childrenCount) && (element == null); i++)
        {
            FrameworkElement child = 
                (FrameworkElement)VisualTreeHelper.GetChild(obj, i);
            if ((child.GetType()).Equals(typeof(T)) || (child.GetType().GetTypeInfo().IsSubclassOf(typeof(T))))
            {
                element = child;
            }
            else
            {
                element = FindVisualChildByName<T>(child);
            }
        }
        return (element);
    }
    

位置の変更、HandwritingViewReposition the HandwritingView

場合によっては、ことを確認する必要があります、 HandwritingViewされませんが、それ以外の場合の UI 要素について説明します。In some cases, you might need to ensure that the HandwritingView covers UI elements that it otherwise might not.

ここでは、音声入力 (テキスト ボックスと [ディクテーション] ボタンを StackPanel に配置することで実装) をサポートするテキスト ボックスを作成します。Here, we create a TextBox that supports dictation (implemented by placing a TextBox and a dictation button into a StackPanel).

ディクテーションを含む TextBox

StackPanel がテキスト ボックスより大きい、 HandwritingView複合コントロールのすべてがない可能性があります。As the StackPanel is now larger than the TextBox, the HandwritingView might not occlude all of the composite cotnrol.

ディクテーションを含む TextBox

これに対処の PlacementTarget プロパティを設定、 HandwritingViewに UI 要素を配置する必要があります。To address this, set the PlacementTarget property of the HandwritingView to the UI element to which it should be aligned.

<StackPanel Name="DictationBox" 
    Orientation="Horizontal" 
    VerticalAlignment="Top" 
    HorizontalAlignment="Left" 
    BorderThickness="1" BorderBrush="DarkGray" 
    Height="55" Width="500" Margin="50">
    <TextBox Name="DictationTextBox" 
        Width="450" BorderThickness="0" 
        FontSize="24" VerticalAlignment="Center">
        <TextBox.HandwritingView>
            <HandwritingView PlacementTarget="{Binding ElementName=DictationBox}"/>
        </TextBox.HandwritingView>
    </TextBox>
    <Button Name="DictationButton" 
        Height="48" Width="48" 
        FontSize="24" 
        FontFamily="Segoe MDL2 Assets" 
        Content="&#xE720;" 
        Background="White" Foreground="DarkGray"     Tapped="DictationButton_Tapped" />
</StackPanel>

HandwritingView のサイズを変更します。Resize the HandwritingView

サイズを設定することも、 HandwritingView、重要な UI がしません、ビューを確認する必要がある場合に便利ですができます。You can also set the size of the HandwritingView, which can be useful when you need to ensure the view doesn't occlude important UI.

前の例のように、音声入力 (テキスト ボックスと [ディクテーション] ボタンを StackPanel に配置することで実装) をサポートするテキスト ボックスを作成します。Like the previous example, we create a TextBox that supports dictation (implemented by placing a TextBox and a dictation button into a StackPanel).

ディクテーションを含む TextBox

この場合、ディクテーション ボタンが常に表示されていることを確認します。In this case, we want to ensure that the dictation button is always visible.

ディクテーションを含む TextBox

これを行うには、バインドの MaxWidth プロパティ、 HandwritingViewする必要がありますが、UI 要素の幅にします。To do this, we bind the MaxWidth property of the HandwritingView to the width of the UI element that it should occlude.

<StackPanel Name="DictationBox" 
    Orientation="Horizontal" 
    VerticalAlignment="Top" 
    HorizontalAlignment="Left" 
    BorderThickness="1" 
    BorderBrush="DarkGray" 
    Height="55" Width="500" 
    Margin="50">
    <TextBox Name="DictationTextBox" 
        Width="450" 
        BorderThickness="0" 
        FontSize="24" 
        VerticalAlignment="Center">
        <TextBox.HandwritingView>
            <HandwritingView 
                PlacementTarget="{Binding ElementName=DictationBox}“
                MaxWidth="{Binding ElementName=DictationTextBox, Path=Width"/>
        </TextBox.HandwritingView>
    </TextBox>
    <Button Name="DictationButton" 
        Height="48" Width="48" 
        FontSize="24" 
        FontFamily="Segoe MDL2 Assets" 
        Content="&#xE720;" 
        Background="White" Foreground="DarkGray" 
        Tapped="DictationButton_Tapped" />
</StackPanel>

カスタム UI の位置を変更します。Reposition custom UI

情報のポップアップなどのテキスト入力に応答に表示されるカスタムの UI がある場合は、手書きのビューがそのしないようにその UI の位置を変更する必要があります。If you have custom UI that appears in response to text input, such as an informational popup, you might need to reposition that UI so it doesn't occlude the handwriting view.

カスタム UI を含む TextBox

次の例では、リッスンする方法を示しています、 OpenedClosed、およびSizeChangedのイベント、 HandwritingViewを設定する、位置をポップアップします。The following example shows how to listen for the Opened, Closed, and SizeChanged events of the HandwritingView to set the position of a Popup.

private void Search_HandwritingViewOpened(
    HandwritingView sender, HandwritingPanelOpenedEventArgs args)
{
    UpdatePopupPositionForHandwritingView();
}

private void Search_HandwritingViewClosed(
    HandwritingView sender, HandwritingPanelClosedEventArgs args)
{
    UpdatePopupPositionForHandwritingView();
}

private void Search_HandwritingViewSizeChanged(
    object sender, SizeChangedEventArgs e)
{
    UpdatePopupPositionForHandwritingView();
}

private void UpdatePopupPositionForHandwritingView()
{
if (CustomSuggestionUI.IsOpen)
    CustomSuggestionUI.VerticalOffset = GetPopupVerticalOffset();
}

private double GetPopupVerticalOffset()
{
    if (SearchTextBox.HandwritingView.IsOpen)
        return (SearchTextBox.Margin.Top + SearchTextBox.HandwritingView.ActualHeight);
    else
        return (SearchTextBox.Margin.Top + SearchTextBox.ActualHeight);    
}

Retemplate HandwritingView コントロールRetemplate the HandwritingView control

XAML フレームワークのすべてのコントロールで、視覚的な構造との視覚的な動作をカスタマイズすることができます、 HandwritingView特定の要件。As with all XAML framework controls, you can customize both the visual structure and visual behavior of a HandwritingView for your specific requirements.

カスタム テンプレートのチェック アウトを作成する完全な例を表示する、カスタム トランスポート コントロールを作成に関する「方法」、またはカスタム編集コントロールのサンプルします。To see a full example of creating a custom template check out the Create custom transport controls how-to or the Custom Edit Control sample.