InkCanvas adalah sebuah control pada Windows Presentation Foundation (WPF) yang memungkinkan user untuk melakukan coretan-coretan pada control tersebut layaknya aplikasi Paint sederhana pada Microsoft Windows. InkCanvas ini tentunya akan sangat digemari terutama oleh anak-anak yang baru mulai belajar komputer. Di sisi lain, Windows MultiPoint Mouse SDK memungkinkan sebuah komputer dapat digunakan oleh lebih dari satu user secara simultan dimana setiap user akan memiliki mouse pointer nya masing-masing. Tentunya akan sangat mengasyikkan apabila serunya melakukan coretan-coretan tersebut dapat dilakukan secara bersama-sama oleh banyak user. Sayangnya, Control yang didukung oleh MultiPoint baru sebatas MultipointButton, MultipointTextBox, dan MultipointCheckBox pada Samples dari Windows MultiPoint Mouse SDK versi 1.5.1. Memang Controls yang ada memungkinkan untuk menjadi Multipointable (dapat dikenai event multipoint) dengan melakukan pengubahan yang cukup rumit.
Terinspirasi oleh Aplikasi Flash dengan Microsoft MultiPoint Mouse SDK, cara termudah yang dapat dilakukan adalah meletakkan MultipointButton transparan di depan InkCanvas kemudian MultipointButton inilah yang akan menerima segala MultipointMouseEvent yang ada dan melakukan penambahan coretan secara manual pada InkCanvas. Langkah-langkahnya adalah sebagai berikut:
- Buatlah sebuah Project dari template "Multipoint Application" yang disediakan oleh Windows MultiPoint Mouse SDK
- Tambahkan InkCanvas pada Window1.xaml dan beri nama icArea
- Tambahkan control MultipointButton tepat diatas InkCanvas pada Window1.xaml dan beri nama mpbDrawing
- Subscribe MultipointMouseDownEvent, MultipointMouseMoveEvent, dan MultipointMouseUpEvent dari mpbDrawing
///
/// This is event handler for window "Loaded" Event.
/// All MultiPoint initialization should happen on this event.
///
private void MultipointWindow_Loaded(object sender, RoutedEventArgs e)
{
// initialize the MulitPoint system
MultipointSdk.Instance.Register(this);
this.mpbDrawing.MultipointMouseDownEvent += new RoutedEventHandler(mpbDrawing_MultiPointMouseDownEvent);
this.mpbDrawing.MultipointMouseUpEvent += new RoutedEventHandler(mpbDrawing_MultiPointMouseUpEvent);
this.mpbDrawing.MultipointMouseMoveEvent += new RoutedEventHandler(mpbDrawing_MultipointMouseMoveEvent);
}
- Tambahkan field untuk menyimpan posisi pertama dan kedua mouse serta variabel bool sebagai penanda apakah mouse sedang didrag.
private int _secondX;
private int _secondY;
private int _firstX;
private int _firstY;
private bool _isDraw = false;
- Definisikan method mpbDrawing_MultiPointMouseDownEvent
private void mpbDrawing_MultiPointMouseDownEvent(object sender, RoutedEventArgs e)
{
MultipointMouseEventArgs args = (MultipointMouseEventArgs)e;
DeviceInfo mouseObject = args.DeviceInfo;
MultipointMouseDevice mpDevice = (MultipointMouseDevice)mouseObject.DeviceVisual;
int x = (int)mpDevice.Position.X;
int y = (int)mpDevice.Position.Y;
if (!_isDraw)
{
_isDraw = true;
_secondX = x;
_secondY = y;
_firstX = x;
_firstY = y;
}
else
{
mpbDrawing_MultiPointMouseUpEvent(sender, e);
}
}
- Definisikan method mpbDrawing_MultipointMouseMoveEvent
private void mpbDrawing_MultipointMouseMoveEvent(object sender, RoutedEventArgs e)
{
if (_isDraw)
{
MultipointMouseEventArgs args = (MultipointMouseEventArgs)e;
DeviceInfo mouseObject = args.DeviceInfo;
MultipointMouseDevice mpDevice = (MultipointMouseDevice)mouseObject.DeviceVisual;
int x = (int)mpDevice.Position.X;
int y = (int)mpDevice.Position.Y;
_firstX = _secondX;
_firstY = _secondY;
_secondX = x;
_secondY = y;
AddLine(_firstX, _firstY, _secondX, _secondY);
}
}
- Definisikan method mpbDrawing_MultiPointMouseUpEvent
private void mpbDrawing_MultiPointMouseUpEvent(object sender, RoutedEventArgs e)
{
MultipointMouseEventArgs args = (MultipointMouseEventArgs)e;
DeviceInfo mouseObject = args.DeviceInfo;
MultipointMouseDevice mpDevice = (MultipointMouseDevice)mouseObject.DeviceVisual;
int x = (int)mpDevice.Position.X;
int y = (int)mpDevice.Position.Y;
_isDraw = false;
}
- Kemudian definisikan method AddLine yang akan melakukan penambahan garis pada icArea
private void AddLine(int x1, int y1, int x2, int y2)
{
Line line = new Line();
line.X1 = x1;
line.Y1 = y1;
line.X2 = x2;
line.Y2 = y2;
line.Stroke = Brushes.Red;
this.icArea.Children.Add(line);
}
Berikut adalah hasil dari program sederhana ini:
Silahkan lakukan modifikasi dengan menambah variabel bool dan koordinat yang ada untuk setiap mouse apabila ingin melakukan coretan secara bersamaan.
Selamat mencoba :D