收集筆跡

Windows Presentation Foundation （WPF）平臺會收集數位筆跡作為其功能的核心部分。本主題討論 WPF 中收集墨水的方法。

先決條件

若要使用下列範例，您必須先安裝 Visual Studio 和 Windows SDK。您也應該了解如何撰寫適用於 WPF 的應用程式。如需開始使用 WPF 的詳細資訊，請參閱說︰我的第一個 WPF 桌面應用程式。

使用 InkCanvas 項目

System.Windows.Controls.InkCanvas 項目提供了在 WPF 中收集筆跡最簡單的方式。使用 InkCanvas 項目來接收和顯示筆跡輸入。您通常是使用手寫筆，其與數位板互動來產生筆跡筆劃以輸入筆跡。此外，滑鼠也可以代替手寫筆。建立的筆劃一概以 Stroke表示，可以程式設計方式及使用者輸入來操作。 InkCanvas 可讓使用者選取、修改或刪除現有的 Stroke。

使用 XAML 可以設定筆跡收集，如將 InkCanvas 項目新增至樹狀結構一樣容易。下列範例會將 InkCanvas 新增至 Visual Studio 中建立的預設 WPF 專案：

<Grid>
  <InkCanvas/>
</Grid>

InkCanvas 項目也可以包含子項目，以將筆跡註釋功能新增至幾乎任何類型的 XAML 項目。例如，若要將筆跡功能新增至文字項目，只要將它變成 InkCanvas 的子項目即可：

<InkCanvas>
  <TextBlock>Show text here.</TextBlock>
</InkCanvas>

新增以筆跡標記映像的支援就是這麼簡單：

<InkCanvas>
  <Image Source="myPicture.jpg"/>
</InkCanvas>

InkCollection 模式

InkCanvas 透過其 EditingMode 屬性，提供各種輸入模式的支援。

操作筆跡

InkCanvas 支援許多筆跡編輯作業。例如，InkCanvas 支援筆背面橡皮擦的功能，不需要任何其他程式碼將此功能新增至項目。

選擇

設定選取模式就像將 InkCanvasEditingMode 屬性設定為 Select 一樣簡單。

以下程式碼會根據 CheckBox 值設定編輯模式：

// Set the selection mode based on a checkbox
if ((bool)cbSelectionMode.IsChecked)
{
    theInkCanvas.EditingMode = InkCanvasEditingMode.Select;
}
else
{
    theInkCanvas.EditingMode = InkCanvasEditingMode.Ink;
}

' Set the selection mode based on a checkbox
If CBool(cbSelectionMode.IsChecked) Then
    theInkCanvas.EditingMode = InkCanvasEditingMode.Select
Else
    theInkCanvas.EditingMode = InkCanvasEditingMode.Ink
End If

繪圖屬性

使用 DrawingAttributes 屬性來變更筆跡筆劃的外觀。例如，DrawingAttributes 的 Color 成員會設定轉譯 Stroke 的色彩。

下例會將所選筆劃的色彩變更為紅色：

// Get the selected strokes from the InkCanvas
StrokeCollection selection = theInkCanvas.GetSelectedStrokes();

// Check to see if any strokes are actually selected
if (selection.Count > 0)
{
    // Change the color of each stroke in the collection to red
    foreach (System.Windows.Ink.Stroke stroke in selection)
    {
        stroke.DrawingAttributes.Color = System.Windows.Media.Colors.Red;
    }
}

' Get the selected strokes from the InkCanvas
Dim selection As StrokeCollection = theInkCanvas.GetSelectedStrokes()

' Check to see if any strokes are actually selected
If selection.Count > 0 Then
    ' Change the color of each stroke in the collection to red
    Dim stroke As System.Windows.Ink.Stroke
    For Each stroke In  selection
        stroke.DrawingAttributes.Color = System.Windows.Media.Colors.Red
    Next stroke
End If

預設繪圖屬性

DefaultDrawingAttributes 屬性可讓您存取在 InkCanvas 中建立之筆劃的高度、寬度和色彩等屬性。變更 DefaultDrawingAttributes 之後，未來所有輸入 InkCanvas 的筆劃都會以新的屬性值呈現。

除了修改程式碼後置檔案中的 DefaultDrawingAttributes 之外，您還可以使用 XAML 語法來指定 DefaultDrawingAttributes 屬性。

下一個範例示範了如何設定 Color 屬性。若要使用此程式碼，請在 Visual Studio 2005 中建立稱為 "HelloInkCanvas" 的新 WPF 專案。將 MainWindow.xaml 檔案中的程式碼取代為下列程式碼：

<Window x:Class="HelloInkCanvas.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Ink="clr-namespace:System.Windows.Ink;assembly=PresentationCore"
    Title="Hello, InkCanvas!" Height="300" Width="300"
    >
  <Grid>
    <InkCanvas Name="inkCanvas1" Background="Ivory">
      <InkCanvas.DefaultDrawingAttributes>
        <Ink:DrawingAttributes xmlns:ink="system-windows-ink" Color="Red" Width="5" />
      </InkCanvas.DefaultDrawingAttributes>
    </InkCanvas>

    <!-- This stack panel of buttons is a sibling to InkCanvas (not a child) but overlapping it, 
         higher in z-order, so that ink is collected and rendered behind -->
    <StackPanel Name="buttonBar" VerticalAlignment="Top" Height="26" Orientation="Horizontal" Margin="5">
      <Button Click="Ink">Ink</Button>
      <Button Click="Highlight">Highlight</Button>
      <Button Click="EraseStroke">EraseStroke</Button>
      <Button Click="Select">Select</Button>
    </StackPanel>
  </Grid>
</Window>

接下來，將以下按鈕事件處理常式新增至 MainWindow 類別內的程式碼後置檔案：

// Set the EditingMode to ink input.
private void Ink(object sender, RoutedEventArgs e)
{
    inkCanvas1.EditingMode = InkCanvasEditingMode.Ink;

    // Set the DefaultDrawingAttributes for a red pen.
    inkCanvas1.DefaultDrawingAttributes.Color = Colors.Red;
    inkCanvas1.DefaultDrawingAttributes.IsHighlighter = false;
    inkCanvas1.DefaultDrawingAttributes.Height = 2;
}

// Set the EditingMode to highlighter input.
private void Highlight(object sender, RoutedEventArgs e)
{
    inkCanvas1.EditingMode = InkCanvasEditingMode.Ink;

    // Set the DefaultDrawingAttributes for a highlighter pen.
    inkCanvas1.DefaultDrawingAttributes.Color = Colors.Yellow;
    inkCanvas1.DefaultDrawingAttributes.IsHighlighter = true;
    inkCanvas1.DefaultDrawingAttributes.Height = 25;
}

// Set the EditingMode to erase by stroke.
private void EraseStroke(object sender, RoutedEventArgs e)
{
    inkCanvas1.EditingMode = InkCanvasEditingMode.EraseByStroke;
}

// Set the EditingMode to selection.
private void Select(object sender, RoutedEventArgs e)
{
    inkCanvas1.EditingMode = InkCanvasEditingMode.Select;
}

複製此程式碼之後，請在 Visual Studio 中按 F5 執行偵錯工具中的程式。

請注意 StackPanel 如何將按鈕放在 InkCanvas 的上層。如果您嘗試在按鈕上方書寫，則　InkCanvas 會收集筆跡並轉譯在按鈕後方。這是因為相對於子系，按鈕和 InkCanvas 為同級。而且按鈕的級別高於疊置順序，所以筆跡轉譯在其後。

另請參閱

意見反應

此頁面對您有幫助嗎？

Last updated on 2025-05-07