APPLICTION BAR

Pada kesempatan kali ini kita akan mempelajari mengenai aplication bar,ada 2 hal yang akan kita pelajari pada kesempatan kali ini yaitu :

1.      Aplication Bar Icon Button

2.      Aplocation Bar Menu Item

Jadi bisa di bilang aplication bar ini selain dapat menapilkan icon dan menu pada windows phone ,untuk lebih lanjut kita langsung praktekan saja ya,

Seperti biasa buka aplikasi microsoft windows phone 2010 lau pilih option C# pada desktop di kiri lalu lihat desktop yang tengah dan pilih windows phone application setelah itu cari create directory from solution dan checklist lalu tunggu beberapa saat aplikasi akan meloading template yang dipilih. Jangan lupa memberi nama pada project yang akan digunakan untuk saat ini saya akan memberi nama aplication bar. Setelah itu kita cari properties dan solution explorer.

Setelah project terbuka terlebih dahulu kita membuat folder image yang akan di tampilkan dan akan di kontrol pada project kali ini,cara membuat folder baru ialah :

1.    Sorot nama project kita pada solution explorer

2.    Kemudian klik kanan dan pilih add folder

3.    Setelah itu beri nama folder “images”,seperti pada gambar di bawah ini

 Setelah membuat folder baru kita bikin lagi folder untuk icon dan menu dengan nama aplication bar,di situ pula kita menyimpan image yang akan kita gunakan untuk project. caranya sebagai berikut :

1.    Sorot folder image kita pada solution explorer

2.    Kemudian klik kanan dan pilih add folder

3.    Kemudian pilih add exitingitem untuk memasukan icon dan menu item serta gambar yang akan kita gunakan pada project kali ini

Setelah folder dan image kita masukan,barulah kita buat project nya,

Untuk menampilkan icon dan menu item kita tinggal mengatur nya seperti pada gambar di bawah ini

<!--Sample code showing usage of ApplicationBar--> <phone:PhoneApplicationPage.ApplicationBar> <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True"> <shell:ApplicationBarIconButton x:Name="add" IconUri="/images/appbar/appbar.add.rest.png" Text="add" Click="add_Click" /> <shell:ApplicationBarIconButton x:Name="cancel" IconUri="/Images/appbar/appbar.cancel.rest.png" Text="cancel" Click="cancel_Click" /> <shell:ApplicationBarIconButton x:Name="check" IconUri="/images/appbar/appbar.check.rest.png" Text="check" Click="check_Click" /> <shell:ApplicationBarIconButton x:Name="download" IconUri="/Images/appbar/appbar.download.rest.png" Text="download" Click="download_Click" /> <shell:ApplicationBar.MenuItems> <shell:ApplicationBarMenuItem x:Name="menuitem1" Text="PROFIL" Click="menuitem1_Click" /> <shell:ApplicationBarMenuItem x:Name="menuitem2" Text="GALLERY" Click="menuitem2_Click" /> </shell:ApplicationBar.MenuItems> </shell:ApplicationBar> </phone:PhoneApplicationPage.ApplicationBar> </phone:PhoneApplicationPage>

 

Inilah hasil setelah kita atur koding nya sama dengan yang di atas :

 

MENU ITEM 1

Nah sekarang untuk membuat icon dan menu item itu berfungsi kita tinggal mengatur nya pada mainpage.xaml.cs.Menu item 1 akan kita fungsikan untuk menampilkan profil si pembuat projetc,caranya kita buat item baru dengan nama “menu1.xaml”,keudian isi konten nya seperti di bawah ini :

Setelah itu atur navigate uri pada mainpage.xaml.cs nya agar menu 1 menampilkan profil

private void menuitem1_Click(object sender, EventArgs e)         {             NavigationService.Navigate(new Uri("/images/menu1.xaml", UriKind.Relative));         }

 

Nah setelah kita ketikan itu maka hasilnya pun menu item 1 setelah di klik akan muncul seperti di bawah ini :

 

Begitu juga pada menu item dan icon yang lain seperti itu,kita membuat page tujuannya terlebih dahulu kemudian kita atur pada mainpage.xaml.cs menu item atau icon ini akan kita hubungkan kemana.

MENU ITEM 2

Seperti yang sebelumnya kita buat ite baru dan beri nama tes saja,setelah itu atur konten nya seperti di bawah ini :

 

Setelah itu kita atur pada mainpage.xaml.cs agar menu 2 setelah di klik akan menampilkan gallery

private void menuitem2_Click(object sender, EventArgs e)         {             NavigationService.Navigate(new Uri("/images/tes.xaml", UriKind.Relative));         }

 

Inilah hasil menu 2 setelah di klik

 

ICON ADD

Koding pada mainpage.xaml.cs

private void menuitem2_Click(object sender, EventArgs e)         {             NavigationService.Navigate(new Uri("/images/iconadd.xaml", UriKind.Relative));         }

 

Tampilan project setelah di klik

 

ICON DOWNLOAD

Koding pada mainpage.xaml.cs

private void menuitem2_Click(object sender, EventArgs e)         {             NavigationService.Navigate(new Uri("/images/downloadicon.xaml", UriKind.Relative));         }

 

Tampilan project setelah di klik

 

Begitulah seterus nya pada ICON CANCEL dan ICON CHECK,

Selamat mencoba dan semoga bermanfaat ya J

IMAGE CONTROL

29 November 2013

Pada kesempatan kali ini kita akan mempelajari mengenai image control,ada 2 hal yang akan kita pelajari pada kesempatan kali ini yaitu :

1.      Menampilkan image

2.      Mengontrol image melalui C#

Seperti biasa buka aplikasi microsoft windows phone 2010  Jangan lupa memberi nama pada project yang akan digunakan untuk saat ini saya akan memberi control image1. 

Setelah project terbuka terlebih dahulu kita membuat folder image yang akan di tampilkan dan akan di kontrol pada project kali ini,cara membuat folder baru ialah :

11.    Sorot nama project kita pada solution explorer

22.    Kemudian klik kanan dan pilih add folder

33.    Setelah itu beri nama folder “images”,seperti pada gambar di bawah ini

 

Setelah membuat folder barulah kita menambahkan image yang akan kita tampilkan dan yang akan kita kontrol,caranya sebagai berikut :

11.    Sorot nama project kita pada solution explorer

22.    Kemudian klik kanan dan pilih add exitingitem

33.    Setelah itu kita pilih images yang akan kita tampilkan dan kontrol,seperti pada gambar di bawah ini

 

Setelah folder dan image kita masukan,barulah kita buat project nya,

Untuk menampilkan image kita menggunakan toolbar image dan pada source nya pilih dengan gambar yang akan kita tampilkan,seperti pada gambar di bawah ini :

 

 

Nah sekarang untuk menampilkan dan mengontrol image kita tinggal menambahkan toolbar grid pada project yang tadi da atur agar terdapat tiga kolom dan tiga baris pada grid tersebut,untuk mengatur nya kita bisa menggunakan syntax di bawah ini :

<Grid Height="284" HorizontalAlignment="Left" Margin="33,291,0,0" Name="grid1" VerticalAlignment="Top" Width="417"> <Grid.ColumnDefinitions> <ColumnDefinition Width="134" /> <ColumnDefinition Width="149" /> <ColumnDefinition Width="134*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="99" /> <RowDefinition Height="110" /> <RowDefinition Height="75*" /> </Grid.RowDefinitions>

Setelah kita mengatur nya kita bisa mengisikan kolom dan baris dengan image yang kita inginkan,dan syntax yang kita bisa masukan untuk menampilkan image tersebut ialah :

Image 1 <Image Height="93" HorizontalAlignment="Left" Margin="1,3,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="120" Source="/ImageControl1;component/images/biru.png" ImageFailed="image1_ImageFailed" Tap="image1_Tap" /> Image 2      <Image Height="93" HorizontalAlignment="Left" Margin="14,2,0,0" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="120" Grid.Column="1" Source="/ImageControl1;component/images/ijo.png" ImageFailed="image2_ImageFailed" Tap="image2_Tap" /> Image 3 <Image Height="93" HorizontalAlignment="Left" Margin="6,4,0,0" Name="image3" Stretch="Fill" VerticalAlignment="Top" Width="120" Grid.Column="2" Source="/ImageControl1;component/images/red.png" Tap="image3_Tap" /> Image 4 <Image Height="93" HorizontalAlignment="Left" Margin="2,8,0,0" Name="image4" Stretch="Fill" VerticalAlignment="Top" Width="120" Grid.Row="1" Source="/ImageControl1;component/images/Untitled-1.jpg" Tap="image4_Tap" /> Image 5 <Image Height="93" HorizontalAlignment="Left" Margin="14,8,0,0" Name="image5" Stretch="Fill" VerticalAlignment="Top" Width="120" Grid.Column="1" Grid.Row="1" Source="/ImageControl1;component/images/LA KELAS 2.jpg" Tap="image5_Tap" /> Image 6 <Image Height="93" HorizontalAlignment="Left" Margin="8,8,0,0" Name="image6" Stretch="Fill" VerticalAlignment="Top" Width="120" Grid.Column="2" Grid.Row="1" Source="/ImageControl1;component/images/lambang.jpg" Tap="image6_Tap" /> Image 7 <Image Height="93" HorizontalAlignment="Left" Margin="1,0,0,0" Name="image7" Stretch="Fill" VerticalAlignment="Top" Width="120" Grid.Row="2" Source="/ImageControl1;component/images/2.jpg" Tap="image7_Tap" /> Image 8 <Image Height="93" HorizontalAlignment="Left" Margin="14,4,0,0" Name="image8" Stretch="Fill" VerticalAlignment="Top" Width="120" Grid.Column="1" Grid.Row="2" Source="/ImageControl1;component/images/1aa0.jpg" Tap="image8_Tap" /> Image 9 <Image Height="93" HorizontalAlignment="Left" Margin="8,6,0,0" Name="image9" Stretch="Fill" VerticalAlignment="Top" Width="120" Grid.Column="2" Grid.Row="2" Source="/ImageControl1;component/images/10.jpg" Tap="image9_Tap" /> </Grid>

Ketika image telah di tentukan kita akan mengontrol gambar yang mana yang akan di tampilkan pada image utama,yaitu dengan koding sebagai berikut :

private void image1_ImageFailed(object sender, ExceptionRoutedEventArgs e)         {         }         private void image1_Tap(object sender, GestureEventArgs e)         {             BitmapImage newimage = new BitmapImage(new Uri("images/biru.png", UriKind.Relative));             myimage.Source = newimage;             MyTeksBlock.Text = "lencana kelas 7";         }         private void image2_ImageFailed(object sender, ExceptionRoutedEventArgs e)         {         }         private void image2_Tap(object sender, GestureEventArgs e)         {             BitmapImage newimage = new BitmapImage(new Uri("images/ijo.png", UriKind.Relative));             myimage.Source = newimage;             MyTeksBlock.Text = "lencana kelas 8";         }         private void image3_Tap(object sender, GestureEventArgs e)         {             BitmapImage newimage = new BitmapImage(new Uri("images/red.png", UriKind.Relative));             myimage.Source = newimage;             MyTeksBlock.Text = "lencana kelas 9";         }         private void image4_Tap(object sender, GestureEventArgs e)         {             BitmapImage newimage = new BitmapImage(new Uri("images/untitled-1.jpg", UriKind.Relative));             myimage.Source = newimage;             MyTeksBlock.Text = "lambang buat di baju";         }         private void image5_Tap(object sender, GestureEventArgs e)         {             BitmapImage newimage = new BitmapImage(new Uri("images/LA KELAS 2.jpg", UriKind.Relative));             myimage.Source = newimage;             MyTeksBlock.Text = "lencana cadangan";         }         private void image6_Tap(object sender, GestureEventArgs e)         {             BitmapImage newimage = new BitmapImage(new Uri("images/lambang.jpg", UriKind.Relative));             myimage.Source = newimage;             MyTeksBlock.Text = "lambang smp darul hikmah";         }         private void image7_Tap(object sender, GestureEventArgs e)         {             BitmapImage newimage = new BitmapImage(new Uri("images/2.jpg", UriKind.Relative));             myimage.Source = newimage;             MyTeksBlock.Text = "lambang di topi";         }         private void image8_Tap(object sender, GestureEventArgs e)         {             BitmapImage newimage = new BitmapImage(new Uri("images/1aa0.jpg", UriKind.Relative));             myimage.Source = newimage;             MyTeksBlock.Text = "lencana dulu";         }         private void image9_Tap(object sender, GestureEventArgs e)         {             BitmapImage newimage = new BitmapImage(new Uri("images/10.jpg", UriKind.Relative));             myimage.Source = newimage;             MyTeksBlock.Text = "lencana pelatih muda";         }     } }

Dengan koding tersebut kita akan menampilkan dan mengontrol image sesuai dengan kehendak kita seperti pada gambar di bawah ini

tampilan awal

tampilan ketika gambar yang kita inginkan muncul di image utama

 

selamat mencoba dan semoga bermanfaat ya :-)