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 :-)
Tidak ada komentar:
Posting Komentar