|
|
Using the InkPicture Control
If you have not already done so, you need to create a new Windows Forms application and then add the InkPicture control to the form:
Right-click on the Toolbox.
Select Customize.
Select the .NET Framework Components tab.
Check InkPicture and then click OK.
You can now add an instance of the InkPicture control to your form as it is now visible in the Toolbox. You can select it and then draw a rectangle shape on your form. It will be positioned in the area in which you draw the rectangle.
The InkPicture control has some unique properties that we have the ability to manipulate. By default, the control captures ink and displays the ink so you don't have to do anything special with it. If you were to save and then run the current sample, you would see that the control does allow you to write with your pen (see Figure 13.5).
Figure 13.5: The control displays ink by default.
You can close the running sample to return to the IDE, and we'll look at some of the properties provided by the InkPicture control.
Property Description
Like InkEdit, InkPicture also has its own set of properties. We'll look at the ActiveX properties, the Managed Library properties, and then a set of properties that are general to both.
ActiveX Only
The ActiveX control provides a set of properties that are specific to it.
hWnd: Returns the window handle to which the control is bound
MouseIcon: Returns or sets the current custom mouse icon
MousePointer: Returns or sets a value that indicates the type of mouse pointer that appears when the mouse is over a particular part of the control
tbpropicturePicture: Returns the graphics file to appear on the control
Managed Library Only
The Managed Library has a set of properties that are unique.
AccessibleDescription: Returns or sets the description of the control that the accessibility client applications use
AccessibleName: Returns or sets the name of the control that the accessibility client applications use
AccessibleRole: Returns or sets the role of the control that the accessibility client applications use
Anchor: Returns or sets which edges of the control are anchored to the edges of its container
BackgroundImage: Returns or sets the background image that appears in the control; allows you to add a picture that can be used for markup
BorderStyle: Returns or sets the border style for the control
ClipInkToMargin: Returns a value that specifies whether to clip strokes when they are outside the default margin
CollectingInk: Returns the value that specifies whether the control is collecting ink
ContextMenu: Returns or sets the shortcut menu to appear when the user right-clicks the control
DefaultMargin: Returns the default margin that the MarginX and MarginY properties use
Dock: Returns or sets to which edge of the parent container the control is docked
Handle: Gets the window handle to which the control is bound
Image: Returns or sets the image that appears in the control
Location: Returns or sets the coordinates of the upper-left corner of the control relative to the upper-left corner of its container
Size: Returns or sets the height and width of the control in pixels
General
The ActiveX and Managed Libraries both offer these properties.
AutoRedraw: Returns or sets a value that specifies whether the InkPicture repaints when the window is invalidated
BackColor: Returns or sets the background color for the control. The default background color is the system window background color, which is typically white
CollectionMode: Returns or sets the collection mode that determines whether ink, gestures, or ink and gestures are recognized as the user writes
Cursor: Returns or sets the cursor that appears when the mouse pointer is over the control
Cursors: Returns the number of cursors available for use in the ink-enabled region; each cursor corresponds to the tip of a pen or other ink input device
DefaultDrawingAttributes: Returns or sets the default drawing attributes to use when collecting and displaying ink
DesiredPacketDescription: Returns or sets the packet description of the control
DynamicRendering: Returns or sets the value that specifies whether the control dynamically renders the ink as it is collected
EditingMode: Returns or sets a value that specifies whether the control is in ink mode, deletion mode, or selecting/editing mode
Enabled: Returns or sets a value that determines whether the control can respond to user-generated events
EraserMode: Returns or sets the value that specifies whether ink is erased by stroke or by point
EraserWidth: Returns or sets the value that specifies the width of the eraser pen tip
Note This property also appears in the InkOverlay object.
Ink: Returns or sets the Ink object that is associated with the InkPicture control
InkEnabled: Returns or sets a value that specifies whether the InkPicture control collects pen input
MarginX: Returns or sets the x-axis margin around the window rectangle in screen coordinates
MarginY: Returns or sets the y-axis margin around the window rectangle in screen coordinates
Selection: Returns or sets the collection of ink strokes that are currently selected
SizeMode: Returns or sets how the control handles image placement and sizing
SupportHighContrastInk: Returns a value that specifies whether ink is rendered as just one color when the system is in High Contrast mode
SupportHighContrastSelectionUI: Returns or sets a value that specifies whether all selection user interfaces are drawn in high contrast when the system is in High Contrast mode
Tablet: Returns the Tablet object that the InkPicture control is currently using to collect input; returns the object that represents the tablet hardware, such as manufacturer information
If you quickly browse the list, you will see some interesting properties and many will already look familiar to you because the InkEdit control shares many of the same properties.
As you remember, the InkPicture control is most often used to annotate images. With that in mind, it's important to learn about the properties that control ink selection and ink erasing. The first thing we'll deal with is removing (erasing) ink from the control. Your application can offer two erasing modes:
Point erase: Allows the user to erase a single pixel at a time
Stroke erase: Allows the user to erase the entire stroke, if the user touches anywhere on a stroke
Supporting erase functionality is imperative to many applications because it allows users to easily erase and reenter drawings that they have produced with ink. With the form you already have, add two buttons to the form with the properties shown in Table 13.3.
It's now very quick and easy to add the erasing capability. Create the click events for both controls and then add the following code into the appropriate procedures:
Private Sub btnErasePoint_Click(ByVal sender As System.Object, ByVal e
As System.EventArgs) Handles btnErasePoint.Click
InkPicture1.EraserMode = InkOverlayEraserMode.PointErase
InkPicture1.EditingMode = InkOverlayEditingMode.Delete
End Sub
Private Sub btnEraseStroke_Click(ByVal sender As System.Object, ByVal e
As System.EventArgs) Handles btnEraseStroke.Click
InkPicture1.EraserMode = InkOverlayEraserMode.StrokeErase
InkPicture1.EditingMode = InkOverlayEditingMode.Delete
End Sub
The first line of code in each procedure sets the EraserMode property to Point or Ink respectively, whereas the second line of code sets the EditingMode property to Delete. These are the only two properties required for erasing. You should save the application and then test out the erasing. At this time, you can erase, but you don't have a way to begin drawing again. This can be handled with another button and a single line of code. Add the button shown in Table 13.4 to the form.
Table 13.4: Adding btnDraw to the form Name
Test
btnDraw
Draw
Next, in the button's click event, you can add the following line of code, which again uses the EditingMode property, but now sets it to Ink:
InkPicture1.EditingMode = InkOverlayEditingMode.Ink
You can now move back and forth between the two different types of ink deletion and can also support drawing. Along these same lines, you might want to give the user the ability to select ink. Again, we can use the EditingMode property, but this time we can set it to Select. Add another button to the form called btnSelection and change its Text property to 'Selection.' Within the button's click event procedure, you can add the following line of code:
InkPicture1.EditingMode = InkOverlayEditingMode.Select
Your application now provides the ability to select ink, erase ink, and draw ink. We're now going to look at how we can alter the appearance of the ink collected in the control beginning with antialiasing. When you typically draw a line on a computer screen, its edges often have jagged edges. To antialias the controls so that they appear smooth, you use the Form_Load event and add the following line of code:
InkPicture1.DefaultDrawingAttributes.AntiAliased = True
Now, as you draw on the InkPicture control, the ink will be antialiased. There are certainly a number of additional properties, but these are some of the most important. In later chapters, we cover additional properties as we need them and you can refer to the SDK for additional information if needed.
|
|
| |
