[WPF Application] Contoh Sederhana Penggunaan Virtual Earth WPF Control

Tulisan ini akan memberi sedikit penjelasan tentang pemakaian library atau assembly reference dalam format file dengan ekstensi .dll. Kali ini library yang digunakan adalah Virtual Earth WPF Control yang diperoleh dari http://www.codeplex.com, tepatnya di http://vewpf.codeplex.com/. Silahkan download file dll dari situs tersebut untuk memulai mempelajari pembuatan contoh sederhana yang menggunakan ‘VirtualEarthWPFControl.dll’ tersebut. Anda akan banyak menemukan contoh project-project yang dikembangkan oleh para developer .net di situs tersebut.

Dasar pembuatan contoh aplikasi ini juga sempat saya presentasikan di Microsoft Innovation Center Universitas Indonesia (MIC UI) ketika acara MSP Gathering Jabodetabek 2.0.

Setelah Anda mendapatkan file tersebut, yang Anda lakukan selanjutnya adalah membuat project WPF Application di Visual Studio misalnya dengan nama ‘MyVE’.
Kemudian, menambahkan ‘VirtualEarthWPFControl.dll’ sebagai Assembly Reference tambahan untuk project. Klik kanan dan pilih Add Reference seperti gambar di bawah ini:

Buka tab browse dan pilih file yang Anda cari (‘VirtualEarthWPFControl.dll’).
Setelah itu kita buka ‘Window1.xaml’, dan tambahkan kode Assembly reference yang mereferensi ke ‘VirtualEarthWPFControl.dll’, ikuti kode dan gambar di bawah:

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


Atur Ukuran windows seperti pada gambar di atas. Kemudian lanjutkan dengan membuat grid dengan 2 kolom. Kolom pertama untuk textBox input dan tombol pencarian dan kolom ke-2 untuk wilayah Virtual Earth.

<Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="110"/>
            <ColumnDefinition Width="500"/>
        </Grid.ColumnDefinitions>
</Grid>

Kemudian tambahkan object virtual earth ke kolom ke-2 (hitungan kolom dalam program dimulai dari 0, ke-2=berarti kolom 1).

<ve:VEMap BorderBrush="Blue" BorderThickness="5" Grid.Column="1" Name="map"/>

Silahkan Anda Run (Ctrl+F5), maka virtual earth akan berada pada kolom ke-2.
Kemudian kita tambahkan textBox dan Button seperti kode di bawah ini:

<Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="110"/>
            <ColumnDefinition Width="500"/>
        </Grid.ColumnDefinitions>
        
        <ve:VEMap BorderBrush="Blue" BorderThickness="5" Grid.Column="1" Name="map"/>
        <TextBox Height="23" Margin="5,10,5,0" Name="txtCari" VerticalAlignment="Top" />
        <Button Height="23" Margin="40,40,40,0" Name="btnCari" VerticalAlignment="Top" Click="btnCari_Click">Cari</Button>
</Grid>

Perhatikan gambar berikut untuk membuat btnCari_Click:

Klik New Event Handler.
kemudian, klik kanan btnCari_Click, klik navigate to Event Handler, seperti pada gambar di bawah ini:

Tambahkan kode berikut:

map.Find(txtCari.Text);

Kode tersebut melakukan pencarian pada peta ketika Button ‘btnCari’ di klik, dengan inputan yang dimasukkan pada textBox ‘txtCari’.
Untuk membuat background windows menjadi gradient, ikuti penambahan code pada ‘Window1.xaml’ di bawah tag ‘Grid’ seperti di bawah ini.

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

Sekarang kode lengkapnya adalah seperti ini:

<Window x:Class="MyVE.Window1"
    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="Peta Virtual" Height="400" Width="700" WindowStartupLocation="CenterScreen">
    
<Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="110"/>
            <ColumnDefinition Width="500"/>
        </Grid.ColumnDefinitions>
        
        <ve:VEMap BorderBrush="Blue" BorderThickness="5" Grid.Column="1" Name="map"/>
        <TextBox Height="23" Margin="5,10,5,0" Name="txtCari" VerticalAlignment="Top" />
        <Button Height="23" Margin="40,40,40,0" Name="btnCari" VerticalAlignment="Top" Click="btnCari_Click">Cari</Button>
</Grid>

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

Sekarang jalankan (Ctrl+F5).
Hasilnya adalah seperti ini:

Semoga Anda tertarik untuk mencoba🙂 .

About

Seseorang yang terus berusaha menjadi seorang programmer dan blogger sejati di jagad Raya ini.

Tagged with: ,
Posted in WPF
9 comments on “[WPF Application] Contoh Sederhana Penggunaan Virtual Earth WPF Control
  1. pemula says:

    Gak bisa jalan yah Kak… Tolong dong Kak, soalnya saya punya tugas buat virtual map seperti ini….

    Tolong solusinya Kak…

  2. pemula says:

    nambahin Kak….
    pesan Error: ‘VEMap’ is undefined

    ini kenapa ya Kak?

  3. ecko says:

    Jangan lupa add reference ke dll virtualmapwpfcontrol… atau dll-nya korup…

  4. pemula says:

    saya sudah add reference-nya Kak…..

    tetap saja tidak bisa.

    ttg masalah korup saya sudah donlot 2x dari link yang Kak beritahukan terapi tidak jalan juga Kak…..

  5. pemula says:

    bagaimana kak Solusinya…….?

    saya punya tugas buat virtual denah yang bekerja sebagai denah petunjuk lokasi pasien dari sebuah denah Rumah Sakit.

    Saya butuh Bantuan Kak, atau Kakak punya ide lain terkait dengan tugas saya ini…………..

    saya mohon bantuannya Kak..

  6. Good tip. I did it and it worked. Thanks.Paris hippiques

  7. dianmayasari says:

    k’zul q calon Msp.. q disuruh membuat aolikasi di winphone7 oya gmn cara untuk desain tampilan dgn menggunakan WPF di VStudio untuk winphone7 q udh add di fb,.. mohon bantuannya ya..

  8. […] Untuk mengembangkan aplikasi dengan Bing Maps Silverlight Control tentunya tidak terlalu jauh dengan di aplikasi WPF. Di Codeplex juga disediakan VirtualEarthWPFControl yang dulu pernah saya coba di gathering MSP Jabodetabek di UI. […]

  9. windupurnomo says:

    mantaf euy, ane dapet link ini dari google🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Community

INDC

MUGI

WSS-ID

SQLServer-Indo

Indonesia Student Portal

Pengunjung
  • 120,657 orang
Yg lg OL di sini
site statistics
%d bloggers like this: