Erick Kurniawan | MCTS, MCPD, MVP
Hands On Lab WP7 (Silverlight App)Simple Silverlight
ApplicationPada Hands On Lab ini dibahas pembuatan
aplikasi-aplikasi yang sederhana menggunakan Silverlight for
Windows Phone 7.Simple Web BrowserPada tutorial kali ini kita akan
membuat sebuah Web Browser sederhana dengan menggunakan Wondows
Phone 7 Silverlight Application.1. Buka Visual Studio 2010 Express
for Windows Phone 7.2. Buat aplikasi baru dengan Silverlight. Pilih
Silverlight for Windows Phone Windows Phone Applicationberi nama
SimpleWebBrowser.
3. Pada solution explorer, klik kanan Reference Add Reference
tambahkan Microsoft.Phone.Control.WebBrowser.
4. Pada xaml tambahkan namespace untuk menggunakan web
browser.
5. Tambahkan control texbox beri nama txtUrl. 6. Tambahkan
control button beri nama btnBrowse, dan ubah peoperty content
menjadi Browse.7. Tambahkan WebBrowser control, beri nama
myBrowser.
8. Double click pada btnBrowse kemudian tambahkan kode
berikut:private void btnBrowse_Click(object sender, RoutedEventArgs
e){ Uri webUri = new Uri(txtUrl.Text, UriKind.Absolute);
if (webUri != null) myBrowser.Navigate(webUri);}
9. Tekan F5 untuk menjalankan program pada phone emulator.10.
Ketikan alamat yang ingin anda kunjingu, kemudian tekan tombol
browse.
Simple Image Viewer Pada tutorial kali ini kita akan membuat
sebuah aplikasi image viewer sederhana menggunakan Silverlight App
di Windows Phone 7.1. Buka VS 2010 Express for Windows Phone 7.2.
File New Project Silverlight for Windows Phone Windows Phone
Application3. Beri nama projectnya SimpleImageViewer.
4. Pada langkah selanjutnya kita akan membuat struktur data yang
digunakan untuk menyimpan data image yang akan ditampilkan.5. Klik
kana pada Project di solution explorer Add New Item pilih Class
beri nama Gambar.cs.
public class Gambar { public string FileName { get; set; }
public ImageSource FileGambar { get; set; } }
6. Tambahkan ListBox kedalam Grid ContentGrid.
7. Klik kanan pada project kemudian tambahkan folder baru dengan
nama images. Folder ini akan digunakan untuk menampung image yang
akan kita tampilkan.8. Tambahkan beberapa file image kedalam folder
tersebut.9. Tambahkan method GetGambar() dan GetGambars() berikut
pada MainPage.xaml.cs.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;using
System.Collections.ObjectModel;
namespace SimpleImageViewer{ public partial class MainPage :
PhoneApplicationPage { public MainPage() {
InitializeComponent();
SupportedOrientations = SupportedPageOrientation.Portrait |
SupportedPageOrientation.Landscape;
lstGambar.ItemsSource = GetGambars(); }
private ImageSource GetGambar(string fileName) { return new
BitmapImage(new Uri(string.Format("images/{0}", fileName),
UriKind.Relative)); }
private ObservableCollection GetGambars() { ObservableCollection
lstGbr = new ObservableCollection(){ new
Gambar(){FileGambar=GetGambar("1.jpg"),FileName="1.jpg"}, new
Gambar(){FileGambar=GetGambar("2.jpg"),FileName="2.jpg"}, new
Gambar(){FileGambar=GetGambar("3.jpg"),FileName="3.jpg"}, new
Gambar(){FileGambar=GetGambar("4.jpg"),FileName="4.jpg"} }; return
lstGbr; }
}}
10. Tekan F5 untuk menjalankan program pada emulator. Anda dapat
melihat bahwa file-file gambar yang ada pada folder images akan
ditampilkan.
Simple Media Player
Pada tutorial kali ini kita akan membuat sebuah program media
player sederhana untuk memainkan file video pada Windows Phone 7.1.
Buat project Silverlight for Windows Phone baru dengan nama
SimpleMediaPlayer
2. Tambahkan button control kemudian beri nama btnPlay, ubah
property content menjadi Play.3. Tambahkan media control beri nama
mediaElement1. Control ini akan digunakan untuk menampilkan video
yang akan kita putar. 4. Klik kanan pada project Add Existing Item
tambahkan 1 file .wmv kedalam project. File ini yang nanti akan
kita putar ketika user menekan tombol Play.
5. Double click pada tombol btnPlay kemudian masukan kode
berikut:private void btnPlay_Click(object sender, RoutedEventArgs
e){ mediaElement1.Source = new Uri("Wildlife.wmv",
UriKind.Relative); mediaElement1.Play();}6. Tekan F5 untuk
menjalankan program pada emulator.