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

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

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

概要Overview

XAML テキスト入力ボックスでは、Windows Ink を使用したペン入力の埋め込みがサポートされています。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.

この例では、TextBox コントロールの IsHandwritingViewEnabled プロパティを 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 Ink] -> [手書き] -> [Size of font when writing directly into text field](テキスト フィールドに直接入力するときのフォトのサイズ) を参照してください)。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.

ここで、TextBox HandwritingViewPlacementAlignment プロパティを使用する方法を示し、手書きビューを整列するために使用される基になるテキスト コントロール上のアンカーを指定します。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 Ink] -> [手書き] -> [Font when using handwriting](手書きを使用するときのフォント) を参照してください)。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.

この例では、TextBoxTextChanged イベントをリッスンし、テキストの変更が 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>

対応するコードビハインドでは、AutoSuggestBoxHandwritingView を無効にする方法を示しています。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. 最後に、この関数は、TextBox が取得されるまで、ビジュアル ツリーを通して反復されます。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);
    }
    

HandwritingView の位置を変更するReposition the HandwritingView

場合によっては、HandwritingView 以外ではカバーできない可能性のある UI 要素が確実にカバーされるようにする必要があります。In some cases, you might need to ensure that the HandwritingView covers UI elements that it otherwise might not.

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

ディクテーションをサポートするテキスト ボックスのスクリーンショット

StackPanel が TextBox より大きくなったため、HandwritingView によってすべての複合コントロールが遮られるとは限りません。As the StackPanel is now larger than the TextBox, the HandwritingView might not occlude all of the composite cotnrol.

TextBox の一部を隠している HandwritingView のコントロールと、TextBox が完全に隠されるように再配置された HandwritingView のコントロールのスクリーンショット

これに対処するには、HandwritingView の PlacementTarget プロパティに整列される必要がある 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

ビューにより重要な UI が遮られないことを確実にする必要があるときに便利な場合がある、HandwritingView のサイズを設定することもできます。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.

前の例のように、ディクテーションをサポートする TextBox を作成します (TextBox とディクテーション ボタンを 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 のスクリーンショット

この場合、確実にディクテーション ボタンが表示されるように HandwritingView のサイズを変更します。In this case, we resize the HandwritingView to ensure that the dictation button is visible.

ディクテーション ボタンを隠している HandwritingView のコントロールと、確実にディクテーション ボタンが表示されるようにサイズが変更された HandwritingView のコントロールのスクリーンショット

これを行うには、HandwritingView の MaxWidth プロパティを、見えなくなる 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

次の例では、ポップアップの位置を設定するために、HandwritingViewOpenedClosedSizeChanged イベントをリッスンする方法を示します。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);    
}

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.

カスタム テンプレートを作成する完全な例を表示するには、「カスタム トランスポート コントロールを作成する」の方法または「Custom Edit Control sample」 (カスタムの編集コントロールのサンプル) を確認してください。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.