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.