Catatan Kuliah Pertemuan Ke 10 | 29 november 2013

Catatan Kuliah Pertemuan Ke 10 | 29 november 2013 - Dalam kesempatan ini saya akan menjelaskan tentang cara pembuatan control image yaitu kita memindahkan gambar dengan sekali klik berubah-ubah gambar nya. Langsung aja kita ke langkah-langkah nya

Langakah-langkah membuat image control dengan Software Windows SDK 7 :

• Buka software Windows Phone SDK 7 ( 2010 )
• Pilih File
• Pilih New Project
• Pilih Visual C# > Windows Phone Application
• Beri nama file nya menjadi "Control Image" ( terserah kalian buat apa aja namanya )
• Klik OK
• Pilih Windows Phone OS 7.1
• Sebelum kita memasukan gambar kita harus membuat dulu desai tampilannya seperti gambar di bawah ini:

• Untuk Properties Image dan button nya :

Button

Nama : button1

Content : Lihat Gambar

Image

Nama : image1

• Nah kalau sudah membuat desainnya kita tinggal memasukan gambar nya ke dalam  kolom kotak image tadi untuk membuat gambar nya menjadi bisa di pinddahkan kita harus menambahkan gambar nya 2 buah atau lebih.
• Nah ini adalah cara menambahkan gambar nya
• Klik kanan di Solution Explorer
• Pilih "Add"
• Pilih "New Polder" Seperti gambar di bawah ini:

•  Beri nama polder nya menjadi "Image"
• Setelah membuat polder kita juga harus memasukan gambar di polder tersebut dengan cara

Klik kanan dipada polder "Image" nya  > Pilih Add > Pilih Exsiting item seperti ga,bar di bawah ini

• Setelah itu maka akan muncul gambar di bawah ini nah kita pilih gambar yang di inginkan seperti gambar di bawah ini kalau saya hanya memasukan 2 gambar

• Kalau sudah di pilih gambar 2 tersebut maka akan hasilnya sperti ini di polder nya :

• Sekarang kita tinggal mengatur gambar nya ke kolom image tadi dengan cara memasukan gambar ke Source nya dengan cara:

Klik kotak image tadi ubah source di properties nya seperti gambar di bawah in yang di tandai ( memasukan gambar nya cukup satu aja )

• Sekaran kita tinggal memasukan source nya di tombol "Lihat Gambarnya" dengan cara megklik tombol nya 2 kali maka akan masuk ke "MainPage.xaml.cs" Seperti Source di bawah ini:

using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using Microsoft.Phone.Controls; using System.Windows.Media.Imaging; namespace PhoneApp2 { public partial class MainPage : PhoneApplicationPage { // Constructor public MainPage() { InitializeComponent(); } private void button1_Click(object sender, RoutedEventArgs e) { BitmapImage newImage = new BitmapImage(new Uri("/PhoneApp2;component/Image/Marah.jpg", UriKind.Relative)); image1.Source = newImage; } } }

• Kalau sudah di buat scrip nya maka jalankan aplikasi nya maka hasilnya akan seperti ini:

Sebelum di klik tombolnya

Sesuddah di klik tombolnya

• Kalau di klik 1 kali lagi tombolnya maka gambar tersebut tidak bisa kembali ke gambar senyum sebelumnya 
• Nah kita harus membuat tombol 1 nya lagi kalau mau tombol nya di klik langsung ke gambar sebelumnya lagi
• Buat Button 1 lagi dengan cara mengkopi button yang sudah ada
• Seperti gambar di bawah ini:

• Setelah itu timpa button1 dengan button 2 sehingga kelihatan menjadi 1 seperti gambar di bawah ini:

• Nah kalau sudah maka kita memasukan source code nya lagi di MainPage.xaml..cs nya

Setelah di tambahkan Source Codenya maka Source code akan berubah menjadi seperti ini:

using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using Microsoft.Phone.Controls; using System.Windows.Media.Imaging; namespace PhoneApp2 { public partial class MainPage : PhoneApplicationPage { // Constructor public MainPage() { InitializeComponent(); } private void button1_Click(object sender, RoutedEventArgs e) { BitmapImage newImage = new BitmapImage(new Uri("/PhoneApp2;component/Image/Marah.jpg", UriKind.Relative)); image1.Source = newImage; button1.Visibility = Visibility.Collapsed; button2.Visibility = Visibility.Visible; } private void button2_Click(object sender, RoutedEventArgs e) { BitmapImage newImage = new BitmapImage(new Uri("/PhoneApp2;component/Image/Senyum.jpg", UriKind.Relative)); image1.Source = newImage; button1.Visibility = Visibility.Visible; button2.Visibility = Visibility.Collapsed; } } }

• Setelah itu jalankan aplikasi nya maka akan seperti gambar di bawah ini:

Sebelum di klik

Setelah di klik

 Setelah di klik kembali

Related Post: