How to use Inking in a WinForms application
Product Version | Product | Author | Last modified |
---|---|---|---|
2017.2.502 | RadGridView for WinForms | Dimitar Karamfilov | January 11, 2018 |
The below example demonstrates how one can use the InkEdit control which comes with the Microsoft Tablet PC Platform SDK, to enter data in RadGridView using a pen device.
First, you need to add a reference to the Microsft.Ink.dll. This assembly is part of the Microsoft Tablet PC Platform SDK (1.7 is the latest version).
Detailed information about the ink support in WinForms and WPF can be found in the following article: https://docs.microsoft.com/en-us/dotnet/framework/wpf/advanced/the-ink-object-model-windows-forms-and-com-versus-wpf#enabling-ink-in-an-application
Let’s start with the example.
To use pen input, we will first need a custom editor which will host the InkEdit control. The InkEdit control inherits the standard RichTextBox, therefore we need RadHostItem in order to add it inside RadGridView.
class GridInkEditor : BaseGridEditor
{
InkEdit inkEdit1;
public override object Value
{
get
{
return inkEdit1.Text;
}
set
{
inkEdit1.Text = value == null ? "" : value.ToString();
}
}
protected override RadElement CreateEditorElement()
{
this.inkEdit1 = new InkEdit();
this.inkEdit1.RecoTimeout = 1000;
this.inkEdit1.UseMouseForInput = true;
var host = new RadHostItem(inkEdit1);
host.BackColor = System.Drawing.Color.White;
return host;
}
}
Class GridInkEditor
Inherits BaseGridEditor
Private inkEdit1 As InkEdit
Public Overrides Property Value As Object
Get
Return inkEdit1.Text
End Get
Set(ByVal value As Object)
inkEdit1.Text = If(value Is Nothing, "", value.ToString())
End Set
End Property
Protected Overrides Function CreateEditorElement() As RadElement
Me.inkEdit1 = New InkEdit()
Me.inkEdit1.RecoTimeout = 1000
Me.inkEdit1.UseMouseForInput = True
Dim host = New RadHostItem(inkEdit1)
host.BackColor = System.Drawing.Color.White
Return host
End Function
End Class
When the editor is created we should add a GridViewTextBoxColumn which will display the text. Once the users start editing operation, the InkControl will appear and the user will be able to enter the data using a pen.
public RadForm1()
{
InitializeComponent();
radGridView1.Columns.Add(new GridViewTextBoxColumn() { Name = "InkColumn" });
radGridView1.AutoSizeColumnsMode = GridViewAutoSizeColumnsMode.Fill;
radGridView1.EnableGrouping = false;
radGridView1.AllowAddNewRow = false;
for (int i = 0; i < 10; i++)
{
radGridView1.Rows.Add("Row Index" + i);
}
radGridView1.Font = new Font("Segoe UI", 16, FontStyle.Regular);
radGridView1.TableElement.RowHeight = 50;
radGridView1.EditorRequired += RadGridView1_EditorRequired;
}
private void RadGridView1_EditorRequired(object sender, EditorRequiredEventArgs e)
{
if (radGridView1.CurrentColumn.Name == "InkColumn")
{
e.EditorType = typeof(GridInkEditor);
}
}
Class SurroundingClass
Public Sub New()
InitializeComponent()
radGridView1.Columns.Add(New GridViewTextBoxColumn() With {
.Name = "InkColumn"
})
radGridView1.AutoSizeColumnsMode = GridViewAutoSizeColumnsMode.Fill
radGridView1.EnableGrouping = False
radGridView1.AllowAddNewRow = False
For i As Integer = 0 To 10 - 1
radGridView1.Rows.Add("Row Index" & i)
Next
radGridView1.Font = New Font("Segoe UI", 16, FontStyle.Regular)
radGridView1.TableElement.RowHeight = 50
AddHandler radGridView1.EditorRequired, AddressOf RadGridView1_EditorRequired
End Sub
Private Sub RadGridView1_EditorRequired(ByVal sender As Object, ByVal e As EditorRequiredEventArgs)
If radGridView1.CurrentColumn.Name = "InkColumn" Then
e.EditorType = GetType(GridInkEditor)
End If
End Sub
End Class
You can download a VB and C# project from the following link.