Assalamu'alaikum warahmatullahi wabarakatuh
Kita berjumpa lagi di tutorial windows phone, kali ini saya akan membahas tutorial yang sedikit "expert", apa maksud dari "expert"? maksudnya, pada tutorial kemarin2 biasanya saya membahas dasar-dasar untuk membuat aplikasi pada windows phone, nah untuk kali ini saya akan membuat aplikasi yang lebih menarik lagi, mengapa ini begitu menarik? karna pada aplikasi ini user diberikan interface-interface yang semakin membuat menarik user. okeh kita langsung aja buat new project.
1. Open aplikasi microsoft visual studio 2010 expert for windows phone
2. pilih new project, lalu kita pilih menu visual C# dan pada menu bagian kanan pilih juga windos phone aplication
3. beri nama project kita dengan nama"imageControll" atau untuk namanya bebas, suka suka kalian
4. mari mengoding riaaaaaaa
nah setelah kita buat, mari buat dulu skema aplikasinya dengan menambahkan beberapa element. aplikasi yang akan kita buat ini sebagai gambarannya mampu menampilkan gambar yang dipilih user, dan mampu menscroll layar, karna gambarnya cukup banyak. menarik bukan? yok mari ikuti tutorial ini dengan serius, kembali ke tujuan, maka tambahkan beberapa element ke dalam aplikasi tersebut diantaranya tambahkan element Image dan text block.
posisinya buat seperti gini, oh iya lupa sebelumnya kalian harus tambahkan image terlebih dahulu, caranya seperti ini
penjelasannya klik pada nama projectnya, lalu klik kanan kemudian ada menu seperti diatas, dan pilih new folder. mengapa membuat new folder terlebih dahulu? karna kita akan menggunakan gambar yang banyak, untuk memudahkan dan supaya terlihat rapi maka kita membuat new folder. beri nama folder tersebut dengan "Images" langkah selanjutnya
nah lalu klik pada folder images, klik kanan dan akan muncul menu seperti ini kemudian pilih Existing Item. nanti akan masuk dimana anda menyimpan gambar yang akan kita masukan, kalian masukan gambar apa saja, tapi anda masukan harus ada 10 gambar. nah setelah kalian tambahkan gambar, langkah selanjutnya tambahkan element lagi. tadikan anda telah menambahkan element image dan text block jangan lupa kedua element itu beri nama. saya memberi nama untuk Image "outputIMG" dan untuk text block "outputTB". langkah selanjutnya tambahkan element grid, nah grid ini untuk apa? grid ini untuk membuat seperti table, jadi untuk membuat table di windows phone itu kita memakai grid.
cara membuat colomn dan row nya ketikan koding ini
<Grid Height="450" HorizontalAlignment="Left" Margin="26,284,0,0" Name="grid1" VerticalAlignment="Top" Width="417">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="67*" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="65*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="87" />
<RowDefinition Height="63" />
<RowDefinition Height="111" />
<RowDefinition Height="39" />
<RowDefinition Height="75" />
<RowDefinition Height="75" />
</Grid.RowDefinitions>
ini akan membuat table, copas aja kalau kalian belum mengerti. langkah selanjutnya kalian tambahkan element image di setiap colom dan rownya, total yang kalian masukan element imagenya itu ada 9. sebelumnya kalian beri nama itu element imagenya kalau saya memeberikan nama, mulai dari image 1 sampai image 9, tadikan kita memasukan 10 image, nah satu lagi untuk apa? satu lagi itu untuk element "outputIMG" sebagai tampilan awalnya saja
tampilan yang kalian buat harus sama kaya gini yah
kalian pasti bertanya, itu mengapa gridnya keluar dari emulatornya? nah menariknya pada aplikasi ini kita akan menggunakan Scrollviewer, jadi user bisa menggeser grid tersebut ke atas. sekarang cara menambahkan image ke dalam element image,
pada properties image kalian pilih "Source" nanti klik pada bagian kanan dari "Source" nanti akan muncul seperti ini, kalian pilih imagenya
ini koding yang sangat sensitif, karna beberapa kali juga saya gagal, karna koding ini. saya sarankan anda mengikuti koding ini yah, koding ini berupa scrollviewer yang bisa di scroll oleh user
<ScrollViewer Margin="5,0,1,-146" Height="787" VerticalAlignment="Bottom">
<Grid Height="450" HorizontalAlignment="Left" Margin="26,284,0,0" Name="grid1" VerticalAlignment="Top" Width="417">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="67*" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="65*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="87" />
<RowDefinition Height="63" />
<RowDefinition Height="111" />
<RowDefinition Height="39" />
<RowDefinition Height="75" />
<RowDefinition Height="75" />
</Grid.RowDefinitions>
<Image Height="150" HorizontalAlignment="Left" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="150" Source="/ImageControl2;component/Images/2.jpg" Tap="Image1" ImageFailed="image1_ImageFailed" Grid.ColumnSpan="2" Grid.RowSpan="2" />
<Image Grid.Column="1" Height="150" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="150" Source="/ImageControl2;component/Images/3.png" Tap="Image2" ImageFailed="image2_ImageFailed" Grid.RowSpan="2" />
<Image Grid.Column="2" Height="150" HorizontalAlignment="Left" Name="image3" VerticalAlignment="Top" Width="129" Source="/ImageControl2;component/Images/4.jpg" Tap="Image3" ImageFailed="image3_ImageFailed" Stretch="Fill" Grid.RowSpan="2" />
<Image Grid.Row="2" Height="150" Name="image4" Stretch="Fill" VerticalAlignment="Top" Width="150" Source="/ImageControl2;component/Images/5.jpg" Tap="Image4" ImageFailed="image4_ImageFailed" Margin="0,0,134,0" Grid.RowSpan="2" Grid.ColumnSpan="2" />
<Image Grid.Column="1" Grid.Row="2" Height="150" HorizontalAlignment="Left" Name="image5" Stretch="Fill" VerticalAlignment="Top" Width="150" Source="/ImageControl2;component/Images/6.jpg" Tap="Image5" ImageFailed="image5_ImageFailed" Grid.RowSpan="2" />
<Image Grid.Column="2" Grid.Row="2" Height="150" HorizontalAlignment="Left" Name="image6" Stretch="Fill" VerticalAlignment="Top" Width="129" Source="/ImageControl2;component/Images/7.jpg" Tap="Image6" Grid.RowSpan="2" /
<Image Grid.Row="4" Height="150" HorizontalAlignment="Left" Name="image7" Stretch="UniformToFill" VerticalAlignment="Top" Width="150" Source="/ImageControl2;component/Images/8.jpg" Tap="Image7" Grid.ColumnSpan="2" Grid.RowSpan="2" />
<Image Grid.Column="1" Grid.Row="4" Height="150" HorizontalAlignment="Left" Name="image8" Stretch="UniformToFill" VerticalAlignment="Top" Width="150" Source="/ImageControl2;component/Images/10.jpg" Tap="Image8" Grid.RowSpan="2" />
<Image Grid.Column="2" Grid.Row="4" Height="150" HorizontalAlignment="Left" Name="image9" Stretch="Fill" VerticalAlignment="Top" Width="126" Source="/ImageControl2;component/Images/9.jpg" Tap="Image9" Grid.RowSpan="2" />
<TextBlock Grid.ColumnSpan="3" Height="30" HorizontalAlignment="Left" Margin="101,-44,0,0" Name="outputTB" Text="" VerticalAlignment="Top" Width="202" />
</Grid>
</ScrollViewer>
mohon maaf saya tidak bisa menjelaskan koding ini satu persatu, yang jelas kita telah menggunakan scroll viewer. untuk yang berwarna biru perlu kalian perhatikan, itu merupakan link yang telah kita masukan di "source" image. jika koding ini terjadi error maka kalian perhatikan koding ini,
lalu langkah selanjutnya pada image yang berada di grid klik dan kemudian ke bagian propertis, kalian pilih event, dan pilih tap
ini berguna agar saat image yg user pilih, akan keluar di bagian "outputIMG" dan "outputTB" istilahnya element image ini akan berguna seperti button.
lalu kalian masuk ke MainPage.xaml.cs
masukan namespace ini, karna jika tidak system tidak akan bisa membaca Image.
kalian ketikan koding ini yah, ingat link gambarnya harus sesuai dengan yng telah kita masukan. ini baru sampai Image4, untuk yang lainnya sama seperti ini tinggal copas aja. dan jgn lupa linknya jangan sampai tertukar. akhirnya membuat aplikasi ini telah selesai. bagaimana jadinya? nih check this out!!
selamat mencoba dan berkreasi :D
0 komentar:
Posting Komentar