HANDS ON LAB

Workshop Visual Studio 2010

Windows Presentation Foundation

(Studi Kasus: Aplikasi Pencarian pada Peta Menggunakan Hand
Writing Recognition)

By:
Eko Zulkaryanto & M. Farhad Idris
(Microsoft Student Partners Advisor)
Tujuan dari sesi ini adalah membuat aplikasi pencarian pada peta menggunakan Hand
Writing Recognition.

Hand Writing Recognition.

Langkah-langkah awal dalam membuat aplikasi hand writing recognition dengan WPF
adalah:

1. Buka Visual Studio 2010 dan Buatlah project baru (Visual C#  Windows  WPF
Application) beri nama “SearchOnMapByHWR”.
2. Di Tab MainWindow.xaml dan di tab XAML anda akan melihat code berikut:

<Window x:Class="SearchOnMapByHWR.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>

</Grid>
</Window>

3. Ubah ukuran dan Title Windows dengan mengubah code seperti di bawah ini:
Title="Search On Map" Height="400" Width="400">

4. Kemudian kita buat control InkCanvas, TextBox dan Button di dalam tag Grid.
Dengan mengetikkan code program di bawah ini:
<Grid>
<InkCanvas Name="theInkCanvas" Height="auto" Width="auto"
Background="Aquamarine" Margin="10,5,5,100" />

1
 <TextBox VerticalAlignment="Bottom" Name="textBox1"
Background="Azure" Margin="10,0,5,60"
Height="30"></TextBox>

<Button HorizontalAlignment="Left" VerticalAlignment="Bottom"

Height="40" Width="75" Click="btnRecognize_Click" Name="btnRecognize"
Margin="10,0,0,5" Content="Recognize"/>

<Button HorizontalAlignment="Right" VerticalAlignment="Bottom"

Content="Clear" Height="40" Width="75" Name="btnClear"
Click="btnClear_Click" Margin="0,0,5,5"/>

</Grid>
5. Pastikan setiap button mempunyai event Click seperti diatas.

Hasilnya akan seperti ini:

6. Selanjutnya double klik btnRecognize dan Anda akan melihat block code seperti ini:
private void btnRecognize_Click(object sender, RoutedEventArgs e)
{

}
7. Kemudian tambahkan referensi dari .dll file yang telah disediakan yaitu IACore.dll,
IALoader.dll, dan IAWinFx.dll.
8. Tambahkan code berikut:

using System.Windows.Ink;

2
9. Dan ikuti code program di bawah ini :
private void btnRecognize_Click(object sender, RoutedEventArgs e)
{
InkAnalyzer theInkAnalyzer = new InkAnalyzer();
try
{
theInkAnalyzer.AddStrokes(theInkCanvas.Strokes);
}
catch
{
MessageBox.Show("Ditulis donk!");
}
AnalysisStatus status = theInkAnalyzer.Analyze();

if (status.Successful)
{
textBox1.Text = theInkAnalyzer.GetRecognizedString();
}
else
{
MessageBox.Show("Maaf tulisan Anda jelek!");
this.theInkCanvas.Strokes.Clear();
}
}

10. Run (Control + F5).

11. Hasilnya seperti ini:

12. Kemudian di MainWindow.xaml di bagian designer, double klik btnClear. Kemudian

Anda akan melihat code program berikut:
private void btnClear_Click(object sender, RoutedEventArgs e)
{

3
 }
13. Tambahkan code program di bawah ini:
private void btnClear_Click(object sender, RoutedEventArgs e)
{
this.theInkCanvas.Strokes.Clear();
textBox1.Text = "";
}

14. Selesai.

Search On Map (Using Microsoft Virtual Earth)

1. Ubah ukuran Window menjadi 600 x 920 dengan cara menganti code dengan
code ini:
<Window x:Class="SearchOnMapByHWR.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Search on Map " Height="600" Width="920">

2. Dari projek sebelumnya buatlah 2 kolom dengan cara menambahkan code

berikut:

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400"/>
<ColumnDefinition MinWidth="500"/>
</Grid.ColumnDefinitions>

<InkCanvas Name="theInkCanvas" Height="auto" Width="auto"

Background="Aquamarine" Grid.Row="1" Margin="10,5,5,100" />
3. Aturlah bahwa control-kontrol yang telah Anda buat sebelumnya berada di
kolom pertama dengan menambahkan code program di bawah ini:

<InkCanvas Name="theInkCanvas" Height="auto" Width="auto"

Background="Aquamarine" Margin="10,5,5,100" Grid.Column="0" />

<TextBox VerticalAlignment="Bottom" Name="textBox1"

Background="Azure" Margin="10,0,5,60"
Height="30" Grid.Column="0" />

<Button HorizontalAlignment="Left" VerticalAlignment="Bottom"

Height="40" Width="75" Click="btnRecognize_Click"
Name="btnRecognize" Margin="10,0,0,5" Content="Recognize" Grid.Column="0"/>

<Button HorizontalAlignment="Right" VerticalAlignment="Bottom"

Content="Clear" Height="40" Width="75" Name="btnClear"
Click="btnClear_Click" Margin="0,0,5,5" Grid.Column="0"/>

4. Pada tab designer tampak seperti ini:

4
5. Tambahkan button baru dengan nama btnSearch dengan cara menambahkan
code di bawah ini:

<Button Content="Search on Map" Width="85"

Height="40" Name="btnSearch" VerticalAlignment="Bottom"
Margin="0,0,0,5" Click="btnSearch_Click" Grid.Column="0"/>

</Grid>
Pastikan juga event click dari btnSearch sudah dibuat juga.
Hasilnya seperti ini (Control + F5):

5
 6. Selanjutnya kita ke MainWindow.xaml.cs, tambahkan assembly reference
“VirtualEarthWPFControl.dll”.
7. Kembali ke MainWindow.xaml di bagian XAML view. Tambahkan reference
dengan menambahkan code berikut:

<Window x:Class="SearchOnMapByHWR.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ve="clr-
namespace:VirtualEarthWPFControl;assembly=VirtualEarthWPFControl"
Title="Search on Map " Height="600" Width="900">

8. Tambahkan control Virtual Earth dengan menambahkan code berikut:

<ve:VEMap BorderBrush="Red" BorderThickness="2"

Background="Red" Name="map" Height="auto"
Width="auto" Grid.Column="1" Margin="10,5,5,5"/>

</Grid>

9. Double klik pada button btnSearch atau dengan cara klik kanan seperti di bawah
ini:

6
 Klik Navigate to Event Handler

10. Kemudian Anda melihat blok kode dari event btnSearch, tambahkan code
program berikut:

private void btnSearch_Click(object sender, RoutedEventArgs e)

{
if (textBox1.Text != "")
{
map.Find(textBox1.Text);
}
else
{
MessageBox.Show("Tidak ada input.");
}
}
11. Run (Control + F5).
Hasilnya seperti ini:

7
12. Selesai. Anda bias mencoba sendiri dengan menuliskan kata “Jakarta” pada
inkCanvas. Kemudian klik button Recognize, jika sudah benar bahwa tulisan Anda
dikenali sebagai kata Jakarta, klik Search On Map. Lihat gambar di bawah:
Mode Road:

Mode Aerial:

8
Tim Penyusun :
1. Eko Zulkaryanto
Microsoft Student Partners Advisor
Computer Science Student, Bogor Agricultural University
Eko.zulkaryanto@live.com atau ekozul@student-partners.com
http://zulkaryanto.wordpress.com
http://student.netindonesia.net/blogs/ekozul

2. M. Farhad Idris
Microsoft Student Partners Advisor
Computer Science Student, Bogor Agricultural University
farhadalaydrus@live.com
http://kodingsambilngopi.blogspot.com
http://student.netindonesia.net/blogs/farhadalaydrus