demo .net programming

88
Modul Demo .Net Programming Aplikasi Sederhana menggunakan Microsoft Visual Studio 2010 dan Microsoft Expression Blend 4 RC Modul ini disusun sebagai persembahan dari Komunitas .Net Himpunan Mahasiswa Ilmu Komputer Departemen Ilmu Komputer Institut Pertanian Bogor bekerja sama dengan Microsoft Student Partners Institut Pertanian Bogor atas kunjungan dari SMK Al Ittihad ke Institut Pertanian Bogor pada Tanggal 20 Mei 2010.

Upload: ekozul

Post on 01-Nov-2015

2.680 views

Category:

Documents


6 download

DESCRIPTION

.Net Programming - Windows Presentation Foundation (WPF)

TRANSCRIPT

Page 1: Demo .Net Programming

Modul Demo .Net Programming

Aplikasi Sederhana menggunakan Microsoft Visual Studio 2010

dan Microsoft Expression Blend 4 RC

Modul ini disusun sebagai persembahan dari Komunitas .Net Himpunan

Mahasiswa Ilmu Komputer Departemen Ilmu Komputer Institut Pertanian

Bogor bekerja sama dengan Microsoft Student Partners Institut Pertanian

Bogor atas kunjungan dari SMK Al Ittihad ke Institut Pertanian Bogor pada

Tanggal 20 Mei 2010.

Page 2: Demo .Net Programming

i

Demo .Net Programming

Oleh:

Eko Zulkaryanto [email protected] http://www.ezul.net Microsoft Student Partners Advisor Computer Science Student of Bogor Agricultural University

Aplikasi Sederhana menggunakan Microsoft Visual Studio 2010 dan Microsoft Expression Blend 4 RC

Page 3: Demo .Net Programming

ii

Daftar Isi

Daftar Isi ................................................................................................................... ii

Pengenalan Microsoft Visual Studio 2010 ........................................................... 1

Tentang Microsoft Visual Studio 2010 ............................................................. 1

Cara Memperoleh Microsoft Visual Studio ..................................................... 2

Training Kit dan Training Course .................................................................... 3

Tutorial dan Komunitas ..................................................................................... 5

Tutorial ............................................................................................................. 5

Komunitas ........................................................................................................ 6

Demo Pembuatan Aplikasi Database pada Windows Form ............................ 7

Pendahuluan ........................................................................................................ 7

Penyiapan Database ............................................................................................ 7

Pembuatan Project .............................................................................................. 9

Demo Pembuatan Aplikasi Database pada Windows Presentation

Foundation (WPF) ................................................................................................. 25

Pendahuluan ...................................................................................................... 25

Penyiapan Database .......................................................................................... 25

Pembuatan Project ............................................................................................ 25

Menggunakan Microsoft Expression Blend 4 RC ......................................... 32

Menambahkan Animasi ................................................................................... 36

Manipulasi Database Menggunakan LINQ to SQL pada WPF DataGrid .... 43

Membuat Aplikasi Data Binding Database SQL Server pada Windows Form

................................................................................................................................. 64

Aplikasi Sederhana Virtual Earth WPF Control ............................................... 78

Pendahuluan ...................................................................................................... 78

Pembuatan Project dengan Visual Studio 2010 ............................................ 79

Page 4: Demo .Net Programming

1

Pengenalan Microsoft Visual Studio 2010

Tentang Microsoft Visual Studio 2010

Microsoft Visual Studio merupakan Integrated Development

Invirontment (IDE) yang dibuat oleh Microsoft untuk developer .net yang

paling banyak digunakan saat ini. Menurut Wikipedia, Microsoft Visual

Studio merupakan sebuah perangkat lunak lengkap (suite) yang dapat

digunakan untuk melakukan pengembangan aplikasi, baik itu aplikasi

bisnis, aplikasi personal, ataupun komponen aplikasinya, dalam bentuk

aplikasi console, aplikasi Windows, ataupun aplikasi Web. Visual Studio

mencakup kompiler, SDK, Integrated Development Environment (IDE), dan

dokumentasi (umumnya berupa MSDN Library). Kompiler yang

dimasukkan ke dalam paket Visual Studio antara lain Visual C++, Visual

C#, Visual Basic, Visual Basic .NET, Visual InterDev, Visual J++, Visual J#,

Visual FoxPro, dan Visual SourceSafe.

Microsoft Visual Studio dapat digunakan untuk mengembangkan

aplikasi dalam native code (dalam bentuk bahasa mesin yang berjalan di

atas Windows) ataupun managed code (dalam bentuk Microsoft

Intermediate Language di atas .NET Framework). Selain itu, Visual Studio

juga dapat digunakan untuk mengembangkan aplikasi Silverlight, aplikasi

Windows Mobile (yang berjalan di atas .NET Compact Framework).

Saat ini Microsoft Visual Studio sudah menginjak pada versi 2010

yang rilis pada tanggal 12 April 2010 beserta .Net Framework 4. Microsoft

Visual Studio 2010 masih mendukung versi .Net Framework yang

sebelumnya.

Page 5: Demo .Net Programming

2

Cara Memperoleh Microsoft Visual Studio

Microsoft Visual Studio saat ini bisa Anda peroleh secara gratis untuk

versi express di

http://www.microsoft.com/express/downloads/default.aspx atau dari

miror IIX di

http://geeks.netindonesia.net/files/folders/vs2010/entry186744.aspx.

Anda akan menemui beberapa pilihan seperti pada gambar di bawah ini:

Versi trial yang bisa Anda coba yang disediakan oleh Microsoft

adalah:

a. Visual Studio 2010 Professional

b. Visual Studio 2010 Premium

c. Visual Studio 2010 Ultimate

d. Visual Studio 2010 Test Professional

e. Visual Studio 2010 Team Foundation

Page 6: Demo .Net Programming

3

Anda bisa mengunjungi http://www.microsoft.com/visualstudio/en-

us/download untuk informasi lebih dan mengunduhnya.

Untuk Microsoft Visual Studio 2010 Ultimate Trial bisa juga Anda

peroleh dari IIX di alamat di bawah ini:

Visual Studio 2010 Ultimate (part 1)

http://geeks.netindonesia.net/files/fol

ders/vs2010/entry184178.aspx

Visual Studio 2010 Ultimate (part 2)

http://geeks.netindonesia.net/files/fol

ders/vs2010/entry184179.aspx

Visual Studio 2010 Ultimate (part 3)

http://geeks.netindonesia.net/files/fol

ders/vs2010/entry184180.aspx

Visual Studio 2010 Ultimate (part 4)

http://geeks.netindonesia.net/files/fol

ders/vs2010/entry185863.aspx

Bila yang di lingkungan akademik bisa memperoleh Microsoft Visual

Studio 2010 melalui program MSDN Academic Alliance atau Dreamspark

(http://www.dreamspark.com).

Training Kit dan Training Course

Sejak Microsoft Visual Studio 2010 dirilis pada tanggal 12 April 2010,

Microsoft juga telah menyediakan Training Kit terbaru untuk versi full rilis

ini dan juga Training Course di Channel 9 yang telah ada sejak Versi Beta

tersedia yang akan membantu Anda dalam menggunakan Visual Studio

2010.

Microsoft Visual Studio 2010 dan .Net Framework 4 Training Kit bisa

Anda unduh di http://go.microsoft.com/?linkid=9665216. Training Kit ini

berisi slide presentasi, hands-on labs, dan demo. Konten tersebut dirancang

Page 7: Demo .Net Programming

4

untuk membantu Anda dalam belajar bagaimana memanfaatkan fitur

Visual Studio 2010 dan berbagai macam teknologi di bawah ini:

a. C# 4

b. Visual Basic 10

c. F#

d. Parallel Extensions

e. Windows Communication Foundation

f. Windows Workflow

g. Windows Presentation Foundation

h. ASP.NET 4

i. Windows 7

j. Entity Framework

k. ADO.NET Data Services

l. Managed Extensibility Framework

m. Visual Studio Team System

Training Course Visual Studio 2010 dan .Net Framework 4 berisi

video dan hands-on lab juga dirancang untuk membantu Anda belajar

bagaimana cara memanfaatkan fitir Visual Studio 2010 dan berbagai macam

teknologi yaitu: C# 4.0, Visual Basic 10, F#, Prallel Platform Computing,

WF, WPF, ASP.NET AJAX 4.0, ASP.NET MVC Dynamic Data.

Training Course Visual Studio 2010 dan .Net Framework 4 ini bisa

Anda kunjungi di http://channel9.msdn.com/learn/courses/VS2010/.

Page 8: Demo .Net Programming

5

Tutorial dan Komunitas

Tutorial

Microsoft juga telah menyediakan beberapa tutorial yang sangat

berguna bagi Anda untuk mempelajari teknologi Microsoft menggunakan

Microsoft Visual Studio. Alamat situs atau portal tutorial yang menarik

untuk Anda kunjungi adalah sebagai berikut:

http://www.asp.net

Situs ini sangat berguna bagi Anda sebagai developer website

dengan teknologi ASP.NET. Situs ini berisi video beserta tutorial-

tutorial lainnya yang menggunakan Microsoft Visual Studio. Saat ini

Anda akan didukung penuh di situs ini untuk mempelajari lebih dalam

mengenai fitur-fitur Microsoft Visual Studio 2010 dan ASP.NET 4.

http://www.windowsclient.net

Situs ini akan membantu Anda mempelajari aplikasi windowsclient

yaitu Windows Form dan Windows Presentation Foundation (WPF).

Saat ini disediakan konten untuk mempelajari fitur-fitur Microsoft

Visual Studio 2010 pada aplikasi Windows Form dan WPF 4.

http://www.silverlight.net

Situs ini akan membantu Anda mempelajari Microsoft Silverlight

yang saat ini juga sudah mencapai versi 4. Situs ini berisi video, source

code, showcase, dan tutorial lainnya yang akan membantu Anda.

http://expression.microsoft.com

Situs ini akan membantu Anda sebagai desainer aplikasi WPF,

Silverlight, dan ASP.NET menggunakan Microsoft Expression Studio.

Page 9: Demo .Net Programming

6

Dan masih banyak lagi situs-situs yang perlu Anda kunjungi, seperti:

http://c-sharpcorner.com, http://www.codeplex.com,

http://codeproject.com, dan juga yang lebih penting Anda jangan sampai

melupakan MSDN Library di http://msdn.microsoft.com/library yang

sangat lengkap dan cukup sebagai referensi bagi Anda untuk mempelajari

lebih dalam mengenai Teknologi .Net.

Komunitas

Sampai saat ini telah tersedia komunitas lokal yang banyak

membantu Anda dalam mempelajari teknologi Microsoft dan bisa

membantu Anda lebih dalam dalam mempelajari Microsoft Visual Studio

2010 yaitu http://geeks.netindonesia.net dengan menyediakan fasilitas

seperti artikel blog tentang teknologi, forum, e-book dalam Bahasa

Indonesia, milis ([email protected]) dan lain-lain. E-book bisa Anda

peroleh secara gratis di http://geeks.netindonesia.net/library.

Selain itu, Anda bisa mengunjungi Technet Indonesia di

http://technet.microsoft.com/id-id/default.aspx dan MSDN Indonesia di

http://msdn.microsoft.com/id-id/default.aspx dan juga baru-baru ini

tersedia Forum MSDN Indonesia di

http://social.msdn.microsoft.com/Forums/id-ID.

Dan juga sebagai tambahan Anda bisa mengunjungi alamat berikut:

http://sqlserver-indo.org/, http://wss-id.org/, dan http://mugi.or.id/.

Page 10: Demo .Net Programming

7

Demo Pembuatan Aplikasi Database pada Windows

Form

Pendahuluan

Pada aplikasi desktop Windows Client berbasis .Net Framework terdapat 2

aplikasi yaitu Windows From dan Windows Presentation Foundation

(WPF).

Pada bagian ini kami akan menerangkan cara-cara dalam membuat aplikasi

sederhana menggunakan Windows Form. Aplikasi yang akan kami

terangkan adalah aplikasi yang menampilkan data dari Database yang

sudah dibuat sebelumnya di Microsoft Access 2007 atau 2010.

Penyiapan Database

Database yang kami gunakan adalah Database yang telah kami buat di

Microsoft Access 2010 yang tidak jauh beda dengan Microsoft Access 2007.

Yang perlu Anda ketahui adalah pemberian nama kolom dan tabel tidak

boleh ada spasi. Jika ada spasi akan menyulitkan Anda ketika Anda

memulai membuat project dan melakukan pembuatan program saat

Page 11: Demo .Net Programming

8

koneksi ke database menggunakan Microsoft Visual Studio 2010. Lihat

gambar di bawah ini sebagai contoh penamaan kolom yang sudah benar.

Anda bisa gunakan Underscores atau karakter lainnya seperti pada gambar ini.

Hal yang lain yang perlu diperhatikan adalah hubungan antar tabel (bila

ada). Jika tabel hanya satu tidak perlu perhatikan hubungan antar tabel.

Kemudian pastikan tabel yang buat sudah memiliki primary key yaitu

kolom yang memiliki nilai unik tidak boleh berulang (sebagai pembeda

antar data). Pada database yang kami siapkan, primary key yang kami

gunakan adalah nrp sebagai nomor induk mahasiswa (nrp tidak mungkin

sama). Cara membuat primary key yaitu bisa melalui jendela Design View

dengan cara klik kanan nama tabel misalnya tabel biodata klik Design

View.

Klik kana nrp Klik Primary Key.

Jika sudah, simpan (ctrl + S) dan tutuplah Microsoft Access.

Page 12: Demo .Net Programming

9

Pembuatan Project

Setelah Anda menyiapkan database-nya, sekarang mulailah membuat

project baru pada Microsoft Visual Studio 2008 atau Microsoft Visual Studio

2010.

Buka Microsoft Visual Studio 2010 Anda. Dan Klik New Project.

Atau klik File New Project.

Anda bisa memilih bahasa pemrograman Visual Basic .Net atau Visual C#.

Kali ini kami menggunakan bahasa pemrograman Visual C#.

Pilih Visual C# Windows Windows Form Application.

Beri nama project Anda “StudentData”. Ingat! Nama project tidak boleh ada

spasi.

Page 13: Demo .Net Programming

10

Kemudian Anda akan melihat area desain form1 seperti di bawah ini:

Dan ini adalah yang lihat di jendela Solution Explorer

Selanjutnya temukan jendela Server Explorer.

Jika Anda belum menemukan jendela Server Explorer silahkan klik menu

View Server Explorer.

Page 14: Demo .Net Programming

11

Selanjutnya pada jendela Server Explorer klik kanan Connection Add

Connection.

Setelah itu, ganti Data Source menjadi Microsoft Access Database File.

Page 15: Demo .Net Programming

12

Pilih Microsoft Access Database dan klik OK.

Kemudian pada jendela Add Connection klik Browse ke database yang

telah dibuat berada.

Klik Open kemudian kosongkan user name dan password dan klik OK.

Page 16: Demo .Net Programming

13

Kemudian lihatlah pada jendela Server Explorer dan expand-lah

database44.accdb tersebut sampai terlihat seperti pada gambar di bawah

ini.

Klik kanan project StudentData pada jendela Solution Explorer Add

New Item.

Page 17: Demo .Net Programming

14

Pada jendela Add New Item di bawah ini pilih Data DataSet. Beri nama

MyDataSet.xsd dan klik Add.

Sekarang Drag and Drop tabel biodata ke area MyDataSet.xsd.

Setelah itu, Anda akan menemui pertanyaan seperti di bawah ini, klik Yes.

Database database44.accdb akan terkopi ke project StudentData.

Page 18: Demo .Net Programming

15

Kemudian Anda akan melihat seperti di bawah ini:

Sekarang, bukalah jendela Data Source. Jika Anda belum melihat jendela

Data Source klik menu Data Show Data Sources

Page 19: Demo .Net Programming

16

Klik tanda pin di sebelah kanan atas jendela Data Sources.

Bukalah jendela Form1.cs [Design]

Perluaslah Form1.

Page 20: Demo .Net Programming

17

Kemudian pada jendela Data Sources klik biodata ListBox.

Jika Anda tidak menemui pilihan ListBox, pilihlah Customize dan beri

tanda check list pada ListBox. Klik OK.

Drag and Drop biodata ke area design Form1.

Page 21: Demo .Net Programming

18

Kemudian Anda akan melihat seperti di bawah ini pada Form1.

Sesuaikan ukuran ListBox sehingga seperti di bawah ini:

Page 22: Demo .Net Programming

19

Pada ListBox klik tanda panah kecil di sebelah kanan atas ListBox.

Pada gambar di atas, secara default Display Member berisi nama_lengkap.

Hal ini berarti bahwa ListBox tersebut akan menampilkan data

nama_lengkap dari database. Anda bisa mengubahnya sesuai kebutuhan.

Klik menu Debug Run (Ctrl + F5) atau Start Debugging (F5) untuk

menjalankan program atau aplikasi ini. Hasilnya akan tampak seperti pada

gambar di bawah ini:

Page 23: Demo .Net Programming

20

Kembali ke jendela Data Sources, klik biodata Details.

Drag and Drop biodata dari Jendela Data Sources ke sebelah kanan ListBox.

Page 24: Demo .Net Programming

21

Setelah itu Anda akan melihat tampilan seperti di bawah ini:

Terdapat penambahan Label (contohnya: nrp, nama lengkap, dll) dan

TextBox. Anda bisa mengubah ukuran TextBox agar sesuai, karena

terkadang TextBox untuk nama lengkap diusahakan bisa menampung

panjangnya nama lengkap, apalagi alamat. Sesuaikan dengan kebutuhan.

Page 25: Demo .Net Programming

22

Jalankan kembali, Run (Ctrl + F5).

Melihat data sebelumnya Melihat data terakhir Menyimpan perubahan

Melihat data selanjutnya Menambah data baru Menghapus

data

Melihat data paling awal

Page 26: Demo .Net Programming

23

Anda bisa mengubah judul Form1 menjadi “Data Mahasiswa” melalui

jendela Properties. Klik Form1 kemudian pada jendela Properties carilah

properti Text, kemudian gantilah Form1 menjadi “Data Mahasiswa”,

tampak seperti pada gambar di bawah ini.

Kemudian Anda akan melihat perubahan seperti di bawah ini.

Ubahlah properti Form1 sesuai kebutuhan, misalnya properti Icon diubah

sesuai kebutuhan kita, atau properti StartPosition diubah menjadi

CenterScreen, dan MaximizeBox dari True menjadi False agar window

tidak bisa di maximize.

Page 27: Demo .Net Programming

24

CenterScreen agar nanti posisi Window ketika start up posisinya di tengah

layar.

Anda juga bisa mengganti properti Label nrp menjadi NRP melalui properti

Text.

Hasilnya seperti ini.

Page 28: Demo .Net Programming

25

Demo Pembuatan Aplikasi Database pada Windows

Presentation Foundation (WPF)

Pendahuluan

Bagian ini akan menerangkan pembuatan aplikasi database pada Windows

Presentation Foundation (WPF). Langkah-langkahnya hampir sama pada

aplikasi Windows From, hanya saja WPF di bagian ini lebih menekankan

pada antarmuka pengguna yang lebih menarik dibandingkan Windows

Form.

Bagian ini juga akan mendemokan sedikit tentang penggunaan Microsoft

Expression Blend 4 RC yang digunakan untuk memberi warna gradient

pada window dan beberapa kontrol seperti ListBox.

Penyiapan Database

Database yang digunakan masih sama yaitu database44.accdb.

Pembuatan Project

Buatlah project baru dengan Microsoft Visual Studio 2010. New New

Project Visual C# WPF Application. Beri nama “StudentDataWPF”.

Page 29: Demo .Net Programming

26

Pada jendela Server Explorer klik kanan Data Connections Add

Connection.

Pada Data Sources klik Change pilih Microsoft Access Database File.

Klik OK.

Kemudian Browse database file yang udah kita siapkan (database44.accdb),

kosongkan user name dan password. Klik OK.

Pada Solution Explorer klik kanan project “StudentDataWPF” Add

New Item.

Page 30: Demo .Net Programming

27

Klik Data DataSet. Beri nama StudentDataSet.xsd.

Kemudian Drag and Drop tabel biodata dari Server Explorer ke area

StudentDataSet.xsd.

Page 31: Demo .Net Programming

28

Jika muncul dialog klik Yes agar database44.accdb terkopi ke project. Anda

juga akan melihat tampilan di bawah ini pada jendela StudentDataSet.xsd.

Bukalah jendela MainWindow.xaml dan lihatlah jendela Data Sources.

Pada biodata klik dan pilih ListBox.

Page 32: Demo .Net Programming

29

Jika Anda tidak menemukan pilihan ListBox, Anda bisa memperolehnya

dari pilihan Customize dan beri tanda centang atau Check List pada

ListBox.

Drag and drop biodata dari Data Sources ke area design MainWindw.xaml.

Sesuaikan ukuran ListBox. Anda bisa mengubah properti ListBox melalui

jendela Properties. HorizontalAlignment = Left dan VerticalAlignment =

Stretch.

Page 33: Demo .Net Programming

30

Kembali ke jendela Data Sources. Klik biodata pilih Details. Lakukan

Drag and drop ke area design MainWindow.xaml.

Page 34: Demo .Net Programming

31

Jalankan project Anda sekarang. Klik Debug Start Debugging atau Run

Without Debugging.

Ubahlah properti Title MainWindow menjadi “Data Mahasiswa” melalui

jendela Properties dan properti WindowStartUpLocation = CenterScreen.

Dan ubahlah properti Text pada label nrp, nama lengkap dan lainnya sesuai

dengan keinginan Anda sehingga terlihat seperti pada gambar di bawah ini.

Page 35: Demo .Net Programming

32

Menggunakan Microsoft Expression Blend 4 RC

Sebelumnya Anda telah membuat project dengan Microsoft Visual Studio

2010, selanjutnya sekarang kita masukkan project StudentDataWPF yang

sudah dibuat menggunakan Expression Blend 4 RC.

Carilah project StudentDataWPF dari Windows Explorer, kemudian klik

kanan StudentDataWPF.sln Open With Microsoft Expression Blend 4

(C:\Users\[nama pengguna]\Documents\Visual Studio

2010\Projects\StudentDataWPF).

Page 36: Demo .Net Programming

33

Sekarang kita mulai menambahkan warna bergradient pada background

aplikasi yang kita buat.

Pada jendela Object and Timeline klik Grid dan lihatlah jendela properties.

Pada bagian Brushes klik Gradient Brush.

Untuk membalik warna gradient, klik Reverse Gradient Stop.

Page 37: Demo .Net Programming

34

Untuk mengganti warna, tinggal klik salah satu kontrol silder gradient stop,

kemudian klik warna yang diinginkan.

Selanjutnya pada jendela Object and Timeline klik biodataListBox,

kemudian pada jendela Properties klik Gradient Brush, kemudian Reverse

Gradient Stop dan kurangi warna hitamnya sehingga seperti di bawah ini.

Page 38: Demo .Net Programming

35

Jalankan aplikasi Anda, klik Project Run Project.

Selesai.

Saat Anda kembali ke Visual Studio 2010 akan ada dialog seperti beikut:

Page 39: Demo .Net Programming

36

Klik Yes to All. Maka Anda akan melihat perubahan pada jendela design

MainWindow.xaml pada Visual Studio 2010.

Menambahkan Animasi

Project ini sebenarnya sudah selesai, namun rasanya belum lengkap kalau

belum kita tambahkan sedikit animasi. Anda bisa menambahkan sedikit

animasi melalui Expression Blend 4.

Perbesar ukuran Window dengan cara pada jendela Object and Timeline

klik Window kemudian pada jendela Properties pada bagian Layout

ubahlah Height menjadi 400.

Sekarang kembali ke Expression Blend 4, lihatlah pada jendela Object and

Timeline kemudian klik New pada gambar di bawah ini untuk

menambahkan storyboard sebagai object satu animasi.

Namanya tetap Storyboard1 dan klik OK.

Page 40: Demo .Net Programming

37

Sekarang posisi recording dimatikan dulu karena kita perlu menggeser

grid1 ke bawah terlebih dahulu.

Pada bagian Object and Timeline klik grid1, kemudian geserlah ke bawah

menggunakan keyboard Anda seperti pada gambar di bawah ini.

Selanjutnya tambahkan Label. Caranya: pada jendela Assets klik Controls

Label.

Page 41: Demo .Net Programming

38

Drag and Drop Label ke area design view tepat di atas grid1.

Pastikan Properti HorizontalAlignment Label ini bernilai Left dan

VerticalAlignment bernilai Top.

Hapuslah Text pada Label tersebut. Hidupkan kembali recorder-nya.

Pada jendela Properties, ubahlah ukuran font menjadi “1 pt” ketika timeline

masih pada posisi 0.

Page 42: Demo .Net Programming

39

Dan pada jendela Timeline ubahlah garis kuning Timeline ke posisi 1.

Kemudian pada jendela Properties ubahlah ukuran font menjadi “16 pt”

dan klik Bold.

Matikan kembali recoder.

Kembali ke Microsoft Visual Studio 2010. Jika Anda menemui dialog klik

Yes to All. Pada design view dari MainWindow.xaml, klik Label yang

terakhir di tambahkan tadi.

Pada jendela Properties klik pada Content Apply Data Binding.

Page 43: Demo .Net Programming

40

Kemudian klik nrp.

Jalankan project Anda. Run (ctrl + F5).

Saat aplikasi running animasi hanya berjalan di awal saja. Sekarang kita

ingin ketika nama-nama atau item lainnya pada ListBox dipilih, animasi ini

kembali muncul. Nah bagaimana caranya? Mudah saja, Anda perlu

menambahkan event pada ListBox ketika salah satu nama pada ListBox

tersebut terpilih kemudian memangil animasi tadi yang bernama

Storyboard1.

Page 44: Demo .Net Programming

41

Pada design view MainWindow.xaml klik ListBox kemudian lihatlah pada

jendela Properties klik tab Events Double klik atau tekan Enter pada

SelectionChanged.

Anda akan di bawa ke blok kode event dari ListBox.

Tambahkan kode program berikut pada blok kode event biodataListBox:

Page 45: Demo .Net Programming

42

((System.Windows.Media.Animation.Storyboard)this.Resources["Storyboard1"]).Begin();

Sehingga menjadi seperti ini:

Jalankan kembali Project Anda. Run (ctrl + F5). Dan pilihlah nama lain pada

ListBox. Selesai sudah, Anda telah memanggil kembali animasi tersebut

ketika memilih nama-nama yang lain pada ListBox.

Page 46: Demo .Net Programming

43

Manipulasi Database Menggunakan LINQ to SQL pada

WPF DataGrid

Kali ini kita akan membuat aplikasi yang bisa menampilkan data dari SQL

Server dengan memanfaatkan LINQ to SQL pada WPF. Data akan di

tampilkan pada DataGrid WPF.

DataGrid WPF ini kita peroleh dari WPF Toolkit yang diperoleh dari

http://wpf.codeplex.com, berupa assembly WPFToolkit.dll yang nantinya

akan di tambahkan ke project kita sebagai tambahan referensi assembly.

Ok, sekarang kita mulai buka Microsoft Visual Studio 2008 atau 2010 yang

terinstall di komputer Anda.

Buatlah project baru dengan nama “CustomersData”.

Page 47: Demo .Net Programming

44

Dengan cara New Project Visual C# Windows WPF Application,

dengan target .net framework-nya yaitu .Net Framework 3.5. Beri nama

“CustomersData” dan klik OK.

Page 48: Demo .Net Programming

45

Setelah itu ubahlah properti ukuran Window, WindowStartUpLocation,

dan Title Window. Ikuti kode program di bawah ini.

<Window x:Class="CustomersData.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Customers Data" Height="400" Width="880" WindowStartupLocation="CenterScreen"> <Grid> </Grid> </Window>

Tambahkan WPFToolkit.dll sebagai referensi tambahan.

Caranya: pada Solution Explorer klik kanan pada folder References

Add Reference.

Pada window Add Reference buka tab Browse dan cari WPFToolkit yang

telah disediakan.

Kemudian Klik OK.

Page 49: Demo .Net Programming

46

Secara otomatis WPFToolkit akan langsung muncul di folder

References.

Kembali ke code XAML atau XAML Editor. Tambahkan baris kode di

bawah ini sebagai penggunaan assembly WPFToolkit yang sudah kita

tambahkan.

<Window x:Class="WpfApplication2.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:grid="http://schemas.microsoft.com/wpf/2008/toolkit"

Title="Customers Data" Height="400" Width="880" WindowStartupLocation="CenterScreen">

Cara yang lebih mudah adalah sebagai berikut:

Ketik xmlns:grid="WPFToolkit" akan muncul intellisense, kemudian pilih yang mengandung kata toolkit dan Enter.

Jika Anda sudah selesai menambahkan referensi WPFToolkit, sekarang

buatlah Grid di XAML Editor dengan code program berikut:

<Window x:Class="CustomersData.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

Page 50: Demo .Net Programming

47

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:grid="http://schemas.microsoft.com/wpf/2008/toolkit" Title="Customers Data" Height="400" Width="880" WindowStartupLocation="CenterScreen"> <Grid>

<grid:DataGrid x:Name="MyDataGrid" x:Uid="MyDataGrid" AutoGenerateColumns="False" AlternationCount="2" SelectionMode="Single" Margin="0,30,0,30">

</grid:DataGrid> </Grid> </Window>

Lihatlah ada perubahan pada Design View.

Kemudian kita mulai menggunakan Database.

Pada Solution Explorer klik kanan Data Connection Add Connection.

Kemudian pada Data Source pastikan yang terpilih adalah Microsoft SQL

Server Database File (SqlClient) dan pada Database file name cari atau

browse database SQL yang disediakan yaitu AdventureWorksLT.mdf

misalnya pada C:\Sample DB\AdventureWorksLT.mdf.

Pada Log on to the server tetap pilih Use Windows Authentication.

Lalu klik OK.

Page 51: Demo .Net Programming

48

Pada Server Explorer Anda akan melihat seperti di bawah ini dan Expand-

lah AdventureWorksLT.mdf Tables.

Tambahkan Item LINQ to SQL Classes.

Caranya: Klik kanan project CustomersData di Solution Explorer Add

New Item.

Page 52: Demo .Net Programming

49

Beri nama “Customers.dbml”.

Klik Add.

Dan akan muncul Customers.dbml di Solution Explorer.

Page 53: Demo .Net Programming

50

Lihatlah window Customers.dbml pada project Anda.

Pada Server Explorer, lakukan Drag and Drop tabel Customer ke Design

View atau Window Customers.dbml.

Jika Anda pertanyaan seperti di bawah ini, Klik Yes saja.

Page 54: Demo .Net Programming

51

Kemudian akan terlihat seperti di bawah ini:

Build project Anda.

Pada menu Build Build Solution (Ctrl + Shift + B).

Page 55: Demo .Net Programming

52

Lanjutkan ke XAML Editor dengan cara double klik MainWindow.xaml

pada Solution Explorer dan tambahkan kode program berikut:

<Grid> <grid:DataGrid x:Name="MyDataGrid" x:Uid="MyDataGrid" AutoGenerateColumns="False" AlternationCount="2" SelectionMode="Single" Margin="0,31,0,30">

<grid:DataGrid.Columns> <grid:DataGridTextColumn Binding="{Binding Path=CustomerID}" Header="ID" Width="30"/>

<grid:DataGridTextColumn Binding="{Binding Path=FirstName}" Header="First Name" Width="80"/> <grid:DataGridTextColumn Binding="{Binding Path=LastName}" Header="Last Name" Width="80"/> <grid:DataGridTextColumn Binding="{Binding Path=CompanyName}" Header="Company" Width="200"/>

<grid:DataGridTextColumn Binding="{Binding Path=EmailAddress}" Header="Email" Width="200"/>

<grid:DataGridTextColumn Binding="{Binding Path=Phone}" Header="Phone" Width="100"/>

<grid:DataGridTemplateColumn Header="Update Row">

<grid:DataGridTemplateColumn.CellTemplate> <DataTemplate>

<Button Content="Update" Click="UpdateButton_Click" />

</DataTemplate> </grid:DataGridTemplateColumn.CellTemplate> </grid:DataGridTemplateColumn>

Page 56: Demo .Net Programming

53

<grid:DataGridTemplateColumn Header="Delete Row"> <grid:DataGridTemplateColumn.CellTemplate> <DataTemplate>

<Button Content="Delete" Click="DeleteButton_Click"/>

</DataTemplate> </grid:DataGridTemplateColumn.CellTemplate> </grid:DataGridTemplateColumn> </grid:DataGrid.Columns> </grid:DataGrid> <Button Height="23" Margin="0,4,12,0" Name="RefreshButton" Content="Refresh" VerticalAlignment="Top"

Click="RefreshButton_Click" HorizontalAlignment="Right" Width="126"/>

<Button Height="23" Margin="0,0,12,4" Name="AddButton" Content="Add New" VerticalAlignment="Bottom"

Click="AddButton_Click" HorizontalAlignment="Right" Width="126"/>

</Grid>

Kemudian aktifkan event pada UpdateButton_Click dengan cara klik

kanan UpdateButton_Click Navigate to Event Handler.

Kemudian Anda akan di bawa ke window code C# MainWindow.xaml.cs.

Anda akan melihat block kode berikut:

private void UpdateButton_Click(object sender, RoutedEventArgs e) { }

Page 57: Demo .Net Programming

54

Lakukan hal yang sama untuk DeleteButton_Click, RefreshButton_Click,

dan AddButton_Click. Sehingga Anda melihat code program berikut:

private void UpdateButton_Click(object sender, RoutedEventArgs e) { } private void DeleteButton_Click(object sender, RoutedEventArgs e) { } private void RefreshButton_Click(object sender, RoutedEventArgs e) { } private void AddButton_Click(object sender, RoutedEventArgs e) { }

Page 58: Demo .Net Programming

55

Tambahkan fungsi Refresh.

public void Refresh() { CustomersDataContext db = new CustomersDataContext(); var customers = from c in db.Customers select c; MyDataGrid.ItemsSource = customers; RefreshButton.Content = "Refreshed"; }

Tambahkan kode berikut pada event RefreshButton_Click

private void RefreshButton_Click(object sender, RoutedEventArgs e) { Refresh(); }

UpdateButton_Click akan memanggil fungsi atau method Refresh.

Run project Anda dengan cara ke menu Debug Start Without

Debugging.

Data akan keluar ketika Anda klik button Refresh.

Page 59: Demo .Net Programming

56

Sekarang kita beralih ke even UpdateButton_Click, isi dengan kode

program berikut:

private void UpdateButton_Click(object sender, RoutedEventArgs e) { try { CustomersDataContext db = new CustomersDataContext(); Customer custRow = MyDataGrid.SelectedItem as Customer; Customer cust = (from c in db.Customers

where c.CustomerID == custRow.CustomerID select c).Single(); cust.CustomerID = custRow.CustomerID; cust.FirstName = custRow.FirstName; cust.LastName = custRow.LastName; cust.CompanyName = custRow.CompanyName; cust.EmailAddress = custRow.EmailAddress; cust.Phone = custRow.Phone;

Page 60: Demo .Net Programming

57

db.SubmitChanges(); MessageBox.Show("Row Updated Successfully."); Refresh(); } catch (Exception Ex){ MessageBox.Show(Ex.Message); return; } }

Kemudian pada DeleteButton_Click tambahkan kode progra m di bawah

ini:

private void DeleteButton_Click(object sender, RoutedEventArgs e) { CustomersDataContext db = new CustomersDataContext(); Customer custRow = MyDataGrid.SelectedItem as Customer; var cust = (from c in db.Customers where c.CustomerID == custRow.CustomerID select c).Single(); db.Customers.DeleteOnSubmit(cust); db.SubmitChanges(); MessageBox.Show("Row Deleted Successfully."); Refresh(); }

Sekarang RefreshButton, UpdateButton, dan DeleteButton sudah

berfungsi.

Sekarang Anda tinggal mengatur AddButton. Kita Akan mengatur tombol

AddButton ini memanggil form lain untuk mengisi data baru. Sebelumnya

kita buat Form WPF baru.

Ikuti langkah berikut:

Klik kanan project pada Solution Explorer Add Window

Page 61: Demo .Net Programming

58

Beri nama “AddNew.xaml”.

Page 62: Demo .Net Programming

59

Sekarang ubahlah pada XAML Editor degan kode program berikut:

Title="Add New" Height="300" Width="300" WindowStartupLocation="CenterScreen"> <Grid Margin="10, 10, 10, 10"> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> <RowDefinition/> <RowDefinition/> <RowDefinition/> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Label Content="Customer ID"/> <Label Content="First Name" Grid.Row="1"/> <Label Content="Last Name" Grid.Row="2"/> <Label Content="Company Name" Grid.Row="3"/> <Label Content="Email Address" Grid.Row="4"/> <Label Content="Phone Number" Grid.Row="5" /> <TextBox x:Name="txtCustomerID" Grid.Column="1"/> <TextBox x:Name="txtFirstName" Grid.Column="1" Grid.Row="1"/> <TextBox x:Name="txtLastName" Grid.Column="1" Grid.Row="2"/> <TextBox x:Name="txtCompanyName" Grid.Column="1" Grid.Row="3"/>

<TextBox x:Name="txtEmailAddress" Grid.Column="1" Grid.Row="4"/>

<TextBox x:Name="txtPhone" Grid.Column="1" Grid.Row="5"/> <Button Grid.Column="1" Grid.Row="6" Content="Add" Click="Button_Click"/>

</Grid>

Kemudian Anda akan melihat pada Design View seperti di bawah ini:

Page 63: Demo .Net Programming

60

Kemudiian buatlah even klik pada Button_Click dengan cara klik kanan

Navigate to Event Handler.

Kemudian Anda akan di bawa pada block kode program berikut:

private void Button_Click(object sender, RoutedEventArgs e) { }

Kemudian, pada event Button_Click tambahkan kode program berikut:

Page 64: Demo .Net Programming

61

private void Button_Click(object sender, RoutedEventArgs e) { CustomersDataContext db = new CustomersDataContext(); Customer cust = new Customer(); cust.CustomerID = int.Parse(txtCustomerID.Text); cust.FirstName = txtFirstName.Text; cust.LastName = txtLastName.Text; cust.CompanyName = txtCompanyName.Text; cust.EmailAddress = txtEmailAddress.Text; cust.Phone = txtPhone.Text; cust.ModifiedDate = DateTime.Today; cust.PasswordHash = "default"; cust.PasswordSalt = "default"; cust.rowguid = Guid.NewGuid(); db.Customers.InsertOnSubmit(cust); db.SubmitChanges();

MessageBox.Show("New Data Added Successfully.\nPlease Click Refresh Button.");

this.Close(); }

Selesai.

Untuk AddNew.xaml urusannya udah selesai. Sekarang kita panggil dari

MainWindow.xaml, yaitu dari AddButton, caranya masuk ke event

AddButton_Click pada MainWindow.xaml.cs. Tambahkan kode program

berikut:

private void AddButton_Click(object sender, RoutedEventArgs e) { AddNew an = new AddNew(); an.Show(); RefreshButton.Content = "Refresh"; }

OK. Sudah selesai.

Sekarang jalankan project Anda. Debug Start Without Debugging.

Page 65: Demo .Net Programming

62

Ketika Anda meng-klik tombol Add New akan muncul window berikut:

Anda bisa mencoba isi data Anda di sini dengan catatan Customer ID harus

unik tidak boleh sama dengan yang sudah ada dari Database.

Contoh pengisian:

Page 66: Demo .Net Programming

63

Klik Add dan klik tombol Refresh. Maka data Anda akan muncul di urutan

ke 702.

Anda juga bisa update data langsung pada tabel tersebut dengan cara

double klik yang akan di ubah kemudian klik update.

Page 67: Demo .Net Programming

64

Membuat Aplikasi Data Binding Database SQL Server

pada Windows Form

Buka Microsoft Visual Studio 2008 atau 2010

Buat Project baru dengan Nama “CustomerData”.

New Project Visual C# Windows Form Application. Beri nama

project Anda dengan nama “CustomerData” dan target versi .net

framework yang dipakai adalah .Net Framework 3.5.

Secara otomatis Solution Name juga menjadi “CustomerData”. Biarkan data

ceck pada Create directory for Solution dan biarkan unceck pada Add to

Source Control.

Kemudian Klik OK.

Page 68: Demo .Net Programming

65

Setelah Anda mengklik OK, Anda akan melihat bagian design dari Aplikasi

Windows Form yang telah Anda buat (Form1.cs [Design])dan project Anda

di Solution Explorer (sebelah kanan).

Ubahlah ukuran Form sesuai kebutuhan.

Page 69: Demo .Net Programming

66

Tambahkan item Linq to SQL.

Caranya: Klik kanan Project Anda di Solution Explorer Add New

Item Visual C# Items Data Linq to SQL Classes.

Beri nama “Customer.dbml”

Page 70: Demo .Net Programming

67

Lalu klik Add.

Setelah itu Anda akan melihat Server Explorer, Customer.dbml, serta

Solution Explorer seperti di bawah ini:

Buatlah Data Connection baru.

Caranya: Klik kanan Data Connections pada Server Explorer Add

Connection.

Kemudian pada Data Source pastikan yang terpilih adalah Microsoft SQL

Server Database File (SqlClient) dan pada Database file name cari atau

browse database SQL yang disediakan yaitu AdventureWorksLT.mdf

misalnya pada C:\Sample DB\AdventureWorksLT.mdf.

Page 71: Demo .Net Programming

68

Pada Log on to the server tetap pilih Use Windows Authentication.

Lalu klik OK.

Setelah klik OK maka ada pertanyaan “The database file „C:/Sample

DB/AdventureWorkLT.mdf does not exist. Would you like to create it?”,

maka klik Yes.

Pada Server Explorer Anda akan melihat seperti di bawah ini dan Expand-

lah AdventureWorksLT.mdf Tables.

Page 72: Demo .Net Programming

69

Pilih Customer dan CustomerAddress, dengan menekan control klik

Customer klik CustomerAddress. Kemudian Drag and Drop ke ruangan

luas di Customer.dbml.

Setelah itu Anda akan melihat seperti di bawah ini:

Dari gambar di atas terdapat hubungan tabel antara Customer dengan

Customer Address yaitu one to many karena satu Customer bisa saja

mempunyai alamat lebih dari satu. Tabel Customer memberikan Primary

Key „CustomerID‟ sebagai Foreign Key pada tabel CustomerAddress.

Build Project Anda.

Page 73: Demo .Net Programming

70

Bukalah window Data Source di sebelah kanan atau buka melalui menu

pada Visual Studio 2010 Anda. Klik Data Show Data Sources.

Kemudian akan muncul window Data Sources seperti di bawah ini dan klik

Add New Data Source.

Page 74: Demo .Net Programming

71

Akan muncul wizard seperti di bawah ini dan pilih Object kemudian pilih

Next.

Check Customer kemudian klik Finish.

Kemudian akan terlihat tampilan pada window Data Sources sebagai

berikut:

Page 75: Demo .Net Programming

72

Kemudian bukalah tab atau window Form1.cs [design].

Tips:

Page 76: Demo .Net Programming

73

Jika terlihat warning pada window Error List maka rebuild project Anda.

Klik menu Build Rebuild Solution.

Setelah itu akan terlihat seperti ini.

Pada Data Sources klik Customer Details

Kemudian klik NameStyle [None]

Page 77: Demo .Net Programming

74

Kemudian juga untuk yang lainnya seperti di bawah ini.

Tips:

Yang di beri perlakuan [None] berarti data tersebut tidak di pilih. Dan

pilihan Details, nanti pada form design akan di buatkan label dan textBox

secara otomatis oleh Visual Studio.

Kemudian expand-lah pada CustomerAddress dan beri [None] pada

rowguid.

Setelah Anda selesai melakukan perlakuan di atas maka sekarang Drag and

Drop Customer ke Form1.cs [Design] .

Page 78: Demo .Net Programming

75

Kemudian Drag and Drop CustomerAddress ke Form1.cs[Design] pada

sebelah kanannya.

Kemudian akan muncul GridView. Karena Anda tidak mengubah pada

CustomerAddress menjadi yang lain seperti Details atau yang lainnya.

Lihatkan gambar berikut:

Page 79: Demo .Net Programming

76

Kemudian double klik pada bagian paling atas pada design Form1 untuk membuat Form1_Load, Kemudian Anda akan dibawa ke kode program Form1.cs.

Pada Form1_Load isi kode program berikut: CustomerDataContext db = new CustomerDataContext(); this.customerBindingSource.DataSource = db.Customers;

Kemudian jalankan dengan cara klik Debug Start Without Debugging (Ctrl + F5)

Page 80: Demo .Net Programming

77

Hasilnya:

Page 81: Demo .Net Programming

78

Aplikasi Sederhana Virtual Earth WPF Control

Pendahuluan

Virtual Earth WPF Control merupakan library yang dipakai untuk

membuat aplikasi yang memanfaatkan Virtual Earth. Virtual Earth WPF

Control digunakan untuk aplikasi Windows Presentation Foundation

(WPF).

Virtual Earth WPF Control bisa Anda peroleh dari

http://vewpf.codeplex.com/.

Pada halaman tab Download, unduhlah VirtualEarthWPFControl.dll.

Page 82: Demo .Net Programming

79

Pembuatan Project dengan Visual Studio 2010

Buatlah project baru dengan Microsoft Visual Studio 2010. Pilih Visual C#

Windows WPF Application. Beri nama “MapApp”.

Page 83: Demo .Net Programming

80

Tambahkan VirtualEarthWPFControl.dll yang sudah diunduh sebagai

reference tambahan di project kita. Pada Solution Explorer klik kanan

References Add Reference

Browse dimana VirtualEarthWPFControl.dll berada. Klik OK.

Definisikan reference tambahan tersebut pada MainWindow.xaml yaitu

dengan mengetikkan kode xaml (dibaca “zammel”) berikut:

xmlns:ve="clr-namespace:VirtualEarthWPFControl;assembly=VirtualEarthWPFControl"

Atau cara mudahnya lihat gambar di bawah, setelah ketik vir tekan ctrl + space lalu pilihVirtualEarthWPFControl.

Page 84: Demo .Net Programming

81

Kemudian ubah ukuran Window, judul Window, dan properti lainnya,

samakan dengan kode di bawah ini:

<Window x:Class="MapApp.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="My Map" Height="400" Width="700" WindowStartupLocation="CenterScreen"> <Grid> </Grid> </Window>

Selanjutnya kita buat 2 kolom dengan memanfaatkan tag Grid. Ikuti kode

xaml berikut:

<Grid> <Grid.ColumnDefinitions> <ColumnDefinition MaxWidth="200"/> <ColumnDefinition/> </Grid.ColumnDefinitions> </Grid>

Pada design view dari MainWindow.xaml akan terlihat ada 2 kolom seperti

pada gambar di bawah ini:

Page 85: Demo .Net Programming

82

Sekarang kita tambahkan TextBox dan Button ke kolom pertama. Dengan

cara tambahkan kode xaml di bawah ini:

<Grid> <Grid.ColumnDefinitions> <ColumnDefinition MaxWidth="200"/> <ColumnDefinition/> </Grid.ColumnDefinitions> <TextBox Height="30" Margin="10,10,10,0" Name="txtCari" VerticalAlignment="Top" FontSize="18" /> <Button Height="40" Margin="10,50,10,0" Content="Cari" FontSize="18" FontWeight="Bold" VerticalAlignment="Top"/> </Grid>

Akan terlihat seperti ini:

Sekarang tambahkan kontrol VirtualEarth di kolom ke dua:

<Grid> <Grid.ColumnDefinitions> <ColumnDefinition MaxWidth="200"/> <ColumnDefinition/> </Grid.ColumnDefinitions> <TextBox Height="30" Margin="10,10,10,0" Name="txtCari" VerticalAlignment="Top" FontSize="18" /> <Button Height="40" Margin="10,50,10,0" Content="Cari" FontSize="18" FontWeight="Bold" VerticalAlignment="Top"/> <ve:VEMap Name="map" BorderBrush="Blue" BorderThickness="5" Grid.Column="1" Margin="10,10,10,10"/> </Grid>

Akan terlihat seperti di bawah ini:

Page 86: Demo .Net Programming

83

Sekarang kita aktifkan Button/Tombol Cari, agar ketika inputan nama kota

di ketik di TextBox kemudian tombol Cari di klik maka langsung tertuju ke

peta kota yang dicari. Caranya tambahkan event Click pada button/tombol

Cari, dengan menambahkan kode xaml di bawah ini:

<Button Height="40" Margin="10,50,10,0" Content="Cari" FontSize="18" FontWeight="Bold" VerticalAlignment="Top" Click="Button_Click"/>

Cari mudahnya ketika sudah di ketik Click=, maka akan muncul pilihan

<New Event Handler>, klik saja pilihan tersebut sehingga button

mempunyai event klik baru.

Klik kanan Button_Click Navigate to Event Handler.

Anda akan di bawa ke blok kode berikut:

private void Button_Click(object sender, RoutedEventArgs e) { }

Page 87: Demo .Net Programming

84

Tambahkan kode berikut:

private void Button_Click(object sender, RoutedEventArgs e) { map.Find(txtCari.Text); }

Selesai, sekarang jalankan aplikasi ini (Crlt + F5).

Page 88: Demo .Net Programming

85

Ketik “Bogor” pada TextBox lalu klik tombol Cari, maka aplikasi akan

mencari kota “Bogor” jika ada akan tampil peta Bogor.

Biar tambah enak dilihat, kita beri warna gradien pada background,

tambahkan kode xaml berikut:

</Grid> <Window.Background> <LinearGradientBrush EndPoint="0,0" StartPoint="0,1"> <GradientStop Color="Black" Offset="0"/> <GradientStop Color="Blue" Offset="1"/> </LinearGradientBrush> </Window.Background> </Window>

Selamat mencoba!