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

Read More

Catatan Kuliah Pertemuan ke 9 22 November 2013 Navigation Page

Catatan Kuliah Pertemuan ke 9 22 November 2013 Navigation Page - Dalam kesempatan ini saya akan menjelaskan tentang membuat Navigation Page yaitu tentang perpindahan halaman dari halaman 1 kel halaman 2, 3 dll.  Kalau mau tata caranya maka saya akan membuat langkah-langkah nya di bawah ini

Langkah-Langkah Navigation Page :

•  Buka Software windows Phone SDK 7.1
• Pilih File
• Pilih New Project
• Pilih Visual C# > Windows Phone Application
• Beri nama file nya menjadi Tugas Napigation Page ( terserah kalian buat apa aja namanya )
• Klik OK
• Pilih Windows Phone OS 7.1
•  Buat Desain Untuk Tampilan nya seperti gambar di bawah ini :

• Beri nama Setiap Komponen ToolBox nya Di Proprties

TextBlock

Text : Masukan Nama

TextBox

Nama : NameTextBox

Text : Kosongkan

 TextBlock

Nama :NamaTextBlock

Text : Kosongkan

Button 1

Nama : MyButton1

Content : Kirim ke Page 2

Button 2

Nama : MyButton2

Content : Kirim ke Page 3

Button 3

Nama : MyButton3

Content : Kirim ke Page4

 Button 4

Nama : MyButton4

 Content : Kirim ke Page5

• Untuk membuat halaman 2, 3 , 4 dan 5 Dengan cara Menambahkan Halaman di Solution Explorer nya
• Klik Kanan Di "TugasNavigationPage" 
• Pilih "Add"
• Pilih "New Polder" Seperti gambar di bwah ini:

• Beri nama foldernya "View"
• Nah sekarang kalau kita sudah membuat Polder nya tinggal kita membuat halaman 2, 3, 4 dan 5 di dalam poldernya dengan cara seperti di atas
• Klik kanan di Polder "View"
• Pilih "Add"
• Pilih "New Item"
• Pilih Visual C#
• Pilih "Windows Phone Portrait Page"
• Beri nama nya dengan Page 2
• Untuk membuat Page 3, 4 dan 5 tinggal kita mengulang yang tadi tapi beri nama Page 3, Page 4 dan Page 5 seperti gambar di bawah ini :

• Untuk membedakan halaman nya beri nama Halamnya dengan Page 2, Page 3, Page 4 dan Page 5 dengan cara kita memasukan namanya di Page Title nya di source codenya  seperti gambar yang di tandai di bawah ini:

•  Buat Desaign di Page 2, 3, 4 dan 5 nya

Desain Page 2

Desain Page 3

Desain Page4

 Desain Page 5

• Setelah itu masukan scrip scrip di bawah ini

MainPage.xaml.cs

private void Page2BT_Click(object sender, RoutedEventArgs e) { String dua = NameTextBox.Text; NavigationService.Navigate(new Uri("/View/Page2.xaml?dua=" + dua, UriKind.Relative)); } private void Page3BT_Click(object sender, RoutedEventArgs e) { String tiga = NameTextBox.Text; NavigationService.Navigate(new Uri("/View/Page3.xaml?tiga=" + tiga, UriKind.Relative)); } private void Page4BT_Click(object sender, RoutedEventArgs e) { String empat = NameTextBox.Text; NavigationService.Navigate(new Uri("/View/Page4.xaml?empat=" + empat, UriKind.Relative)); } private void Page5BT_Click(object sender, RoutedEventArgs e) { String lima = NameTextBox.Text; NavigationService.Navigate(new Uri("/View/Page5.xaml?lima=" + lima, UriKind.Relative)); } protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e) { string satu = ""; if (NavigationContext.QueryString.TryGetValue("satu", out satu)) { NamaTextBlock.Text = String.Format("Nama = {0}", satu); } }

Page2.xaml.cs

private void Page2BT_Click(object sender, RoutedEventArgs e) { String satu = NameTextBox.Text; NavigationService.Navigate(new Uri("/MainPage.xaml?satu=" + satu, UriKind.Relative)); } private void Page3BT_Click(object sender, RoutedEventArgs e) { String tiga = NameTextBox.Text; NavigationService.Navigate(new Uri("/View/Page3.xaml?tiga=" + tiga, UriKind.Relative)); } private void Page4BT_Click(object sender, RoutedEventArgs e) { String empat = NameTextBox.Text; NavigationService.Navigate(new Uri("/View/Page4.xaml?empat=" + empat, UriKind.Relative)); } private void Page5BT_Click(object sender, RoutedEventArgs e) { String lima = NameTextBox.Text; NavigationService.Navigate(new Uri("/View/Page5.xaml?lima=" + lima, UriKind.Relative)); } protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e) { string dua = ""; if (NavigationContext.QueryString.TryGetValue("dua", out dua)) { NamaTextBlock.Text = String.Format("Nama = {0}", dua); } }

Page3.xaml.cs

private void Page2BT_Click(object sender, RoutedEventArgs e) { String satu = NameTextBox.Text; NavigationService.Navigate(new Uri("/MainPage.xaml?satu=" + satu, UriKind.Relative)); } private void Page3BT_Click(object sender, RoutedEventArgs e) { String dua = NameTextBox.Text; NavigationService.Navigate(new Uri("/View/Page2.xaml?dua=" + dua, UriKind.Relative)); } private void Page4BT_Click(object sender, RoutedEventArgs e) { String empat = NameTextBox.Text; NavigationService.Navigate(new Uri("/View/Page4.xaml?empat=" + empat, UriKind.Relative)); } private void Page5BT_Click(object sender, RoutedEventArgs e) { String lima = NameTextBox.Text; NavigationService.Navigate(new Uri("/View/Page5.xaml?lima=" + lima, UriKind.Relative)); } protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e) { string tiga = ""; if (NavigationContext.QueryString.TryGetValue("tiga", out tiga)) { NamaTextBlock.Text = String.Format("Nama = {0}", tiga); } }

Page4.xaml.cs

private void Page2BT_Click(object sender, RoutedEventArgs e) { String satu = NameTextBox.Text; NavigationService.Navigate(new Uri("/MainPage.xaml?satu=" + satu, UriKind.Relative)); } private void Page3BT_Click(object sender, RoutedEventArgs e) { String dua = NameTextBox.Text; NavigationService.Navigate(new Uri("/View/Page2.xaml?dua=" + dua, UriKind.Relative)); } private void Page4BT_Click(object sender, RoutedEventArgs e) { String tiga = NameTextBox.Text; NavigationService.Navigate(new Uri("/View/Page3.xaml?tiga=" + tiga, UriKind.Relative)); } private void Page5BT_Click(object sender, RoutedEventArgs e) { String lima = NameTextBox.Text; NavigationService.Navigate(new Uri("/View/Page5.xaml?lima=" + lima, UriKind.Relative)); } protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e) { string empat = ""; if (NavigationContext.QueryString.TryGetValue("empat", out empat)) { NamaTextBlock.Text = String.Format("Nama = {0}", empat); } }

Page5.xaml.cs

private void Page2BT_Click(object sender, RoutedEventArgs e) { String satu = NameTextBox.Text; NavigationService.Navigate(new Uri("/MainPage.xaml?satu=" + satu, UriKind.Relative)); } private void Page3BT_Click(object sender, RoutedEventArgs e) { String dua = NameTextBox.Text; NavigationService.Navigate(new Uri("/View/Page2.xaml?dua=" + dua, UriKind.Relative)); } private void Page4BT_Click(object sender, RoutedEventArgs e) { String tiga = NameTextBox.Text; NavigationService.Navigate(new Uri("/View/Page3.xaml?tiga=" + tiga, UriKind.Relative)); } private void Page5BT_Click(object sender, RoutedEventArgs e) { String empat = NameTextBox.Text; NavigationService.Navigate(new Uri("/View/Page4.xaml?empat=" + empat, UriKind.Relative)); } protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e) { string lima = ""; if (NavigationContext.QueryString.TryGetValue("lima", out lima)) { NamaTextBlock.Text = String.Format("Nama = {0}", lima); } }

• Nah kalau sudah di buat scrip nya makan hasilnya akan seperti ga,bar di bawah ini :

Read More

Pertemuan ke 6 Windows Phone

Clash And Silverlight

• Pertama-tama Klik File > New Project > Windows Phone Aplication C#
• Beri nama "(sesuai keinginan kalain )" samakan dengan soultion name
• Pilih Windows Phone OS 7.l lalu OK
• Buat Button dan Textbox seperti di bawah ini

• Element yang ada di mainPage.xaml adalah sebuah class sepertii button seperti gambar di bawah ini :

• maksudnya element sperti (grid) dan (button) itu merupakan sebuah class dari net liberary. Button yang kita buat merupakan sebuah class kita juga bisa mengaksesnya lewat MainPage.xml.cs dengan cara meng klik 2 kali tombol button yang kita buat tadi seperti gambar di bawah ini

• di button tersebut kita bisa mengedit nama seperti mengubah namanya tinggi nya lebarnya dll. Dan jika kita ingin memasukan sebuah element button lagi kita hanya harus mengegeserkan tombol button dari Toolbox yang ada di pinggir nya seperti gambar di bawah ini
  
• Sekian 

Read More