エクスポート (0) 印刷
すべて展開
情報
要求されたトピックは次のとおりです。しかし、このトピックはこのライブラリには含まれていません。

Windows Phone 8 のインク サポート

2014/06/18

対象: Windows Phone 8 および Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

インクとは、スタイラスまたはタッチで入力された、手書き文字または描画コンテンツのことです。Windows Phone アプリケーションでは、InkPresenter 要素を使用してインクをサポートできます。

このトピックは、次のセクションで構成されています。

次の図は、インク ストロークを表示する InkPresenter を示しています。

UX_InkPresenter

InkPresenter 要素

InkPresenter 要素は、インク機能をサポートする描画サーフェイスを提供します。InkPresenterCanvas から派生し、1 つ以上の UIElement オブジェクトと StrokeCollection を表示できます。

次のコード例は、XAML で InkPresenter 要素を作成する方法を示しています。

<Canvas>
    <TextBlock Text="InkPresenter Control" FontWeight="Bold" Margin="50,30,0,0" />
    <Rectangle Height="500" Width="500" Margin="50,50,0,0" Stroke="Black" />
    <InkPresenter x:Name="MyIP" Height="500" Width="500"
              Margin="50,50,0,0"
              MouseLeftButtonDown="MyIP_MouseLeftButtonDown" 
              LostMouseCapture="MyIP_LostMouseCapture" 
              MouseMove="MyIP_MouseMove" 
              Background="Transparent" Opacity="1" />
</Canvas>

前の例では、Rectangle が、Canvas 要素と同じ余白を持つ InkPresenter に追加されています。これは、視覚的境界を提供するプロパティを InkPresenter が持たないためです。RectangleStroke プロパティは、InkPresenter の境界として動作する Black に設定されています。InkPresenter の Z オーダーは、Rectangle の Z オーダーよりも高い必要があります。そうでないと、Rectangle によって InkPresenter が隠されます。

インク データ

Windows Phone のインクは、StrokeCollection の個別のオブジェクトを含む Stroke オブジェクトです。各 Stroke は、スタイラスの上下のシーケンスおよび移動のシーケンスに対応します。Stroke には、ドット、直線、または曲線を指定できます。各 Stroke には、StylusPoint の個別のオブジェクトを含む StylusPointCollection オブジェクトが含まれます。デジタイザーに接触中にスタイラスが移動すると、StylusPoint のオブジェクトが収集されます。Stroke は、高さ、幅、色、外枠の色などの特性も持ちます。これらの特性は、すべて DrawingAttributes クラスに含まれます。

インクの収集

InkPresenter のイベントに応答することで、プログラムでストロークを作成またはキャプチャできます。処理するイベントは、MouseLeftButtonDownMouseMove、および LostMouseCapture です。

InkPresenter 要素が MouseLeftButtonDown イベントを受け取ると、新しい Stroke オブジェクトが作成され、StrokeCollection 要素の InkPresenter オブジェクトに追加されます。画面に接触中にスタイラスが移動すると、MouseMove イベントが呼び出され、StylusPoint のオブジェクトが収集されて、その Stroke に追加されます。LostMouseCapture イベントが発生すると、作成された Stroke が完了します。

次のコード例は、InkPresenter サーフェイスで入力をキャプチャし、その入力を使用して表示用のストロークを作成するための基本的な手法を示しています。

public Page()
{
    InitializeComponent();
    SetBoundary();
}
Stroke NewStroke;

//A new stroke object named MyStroke is created. MyStroke is added to the StrokeCollection of the InkPresenter named MyIP
private void MyIP_MouseLeftButtonDown(object sender, MouseEventArgs e)
{
    MyIP.CaptureMouse();
    StylusPointCollection MyStylusPointCollection = new StylusPointCollection();
    MyStylusPointCollection.Add(e.StylusDevice.GetStylusPoints(MyIP));
    NewStroke = new Stroke(MyStylusPointCollection);
    MyIP.Strokes.Add(NewStroke);
}

//StylusPoint objects are collected from the MouseEventArgs and added to MyStroke. 
private void MyIP_MouseMove(object sender, MouseEventArgs e)
{
    if (NewStroke != null)
        NewStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(MyIP));
}

//MyStroke is completed
private void MyIP_LostMouseCapture(object sender, MouseEventArgs e)
{
    NewStroke = null;
    
}

//Set the Clip property of the inkpresenter so that the strokes
//are contained within the boundary of the inkpresenter
private void SetBoundary()
{
    RectangleGeometry MyRectangleGeometry = new RectangleGeometry();
    MyRectangleGeometry.Rect = new Rect(0, 0, MyIP.ActualWidth, MyIP.ActualHeight);
    MyIP.Clip = MyRectangleGeometry;
}

指定された場所にあるコード例を使用して、次の InkPresenter 関連タスクを実行できます。

Task

コード例の場所

InkPresenter 要素を使用します。

InkPresenter

高さ、幅、色、外枠の色などの描画属性を指定します。

DrawingAttributes

スタイラス ポイントを反復処理し、ストローク コレクションを操作します。

StylusPoints

X 座標、Y 座標、圧力など、スタイラス ポイントのプロパティを使用します。

StylusPoint

ストロークの境界ボックスを取得します。

Stroke.GetBounds

ストローク コレクションの境界ボックスを取得します。

StrokeCollection.GetBounds

ストローク オブジェクトが交差するかどうかを判断します。

Stroke.HitTest

ストローク コレクションが交差するかどうかを判断します。

StrokeCollection.HitTest

表示:
© 2014 Microsoft