hands on lab silverlight for wp7 - stt mandala bandung · erick kurniawan, m.kom, mcts, mcpd, mct 5...

Erick Kurniawan, M.Kom, MCTS, MCPD, MCT

http://actual-training.com

1

Hands On Lab Silverlight for WP7

Hands On Lab ini akan menjelaskan penggunaan VS 2010 untuk membuat aplikasi WP7 menggunakan

Silverlight. Materi yang akan dibahas pada HOL ini adalah:

Project and Solution

Debugging Program

Orientation Page

Pages and Navigation

Displaying List Of Data & Data Binding

Membuat Aplikasi baru dengan Visual Studio Express for Windows Phone 7

1. Buka Visual Studio 2010 for Windows Phone 7.

2. Pilih File → New Project → Silverlight for Windows Phone → Windows Phone Application.

3. Beri nama SimpleCalculator.

4. Pada Solution Explorer perhatikan file yang digenerate oleh Visual Studio.



2

Item Deskripsi

App.xaml / App.xaml.cs Mendefinisikan entry point dari aplikasi, inisialisasi resources, dan mendefiniskan style dari user interface.

MainPage.xaml / MainPage.xaml.cs Halaman utama yang berisi desain aplikasi.

ApplicationIcon.png Icon untuk program yang anda buat yang akan ditampilkan pada application list.

Background.png Icon yang ditampilkan pada start screen

SplashScreenImage.jpg Gambar yang akan dimunculkan ketika aplikasi dijalankan pertama kali.

Properties\AppManifest.xml Manifest file yang dibutuhkan untuk membuat application package.

Properties\AssemblyInfo.cs Mengandung nama dan versi metadata yang di akan ditanamkan pada general assembly.

Properties\WMAppManifest.xml Manifest file yang mengandung metadata spesifik yang berhubungan dengan Windows Phone Silverlight application, termasuk fitur spesifik yang hanya ada di Silverlight untuk Windows Phone

References folder Berisi list library (assembly) yang menyediakan services dan functionality yang dibutuhkan untuk menjalankan aplikasi.

5. Double-click pada halaman MainPage.xaml pada Solution Explorer. Secara default anda dapat

melihat tampilan design Windows Phone disisi kiri. Anda dapat menambahkan elemen baru

seperti tombol, textbox dengan cara drag n drop kedalam tampilan design atau anda juga

dapat menambahkan manual dengan mengetikan kode XAML.

6. Pada StackPanel dengan nama ‘TitlePanel’ ubah teks yang akan ditampilkan sebagai title dari

aplikasi yang dibuat:

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> <TextBlock x:Name="ApplicationTitle" Text="Sample Application" Style="{StaticResource PhoneTextNormalStyle}"/>



3

<TextBlock x:Name="PageTitle" Text="Add" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> </StackPanel>

7. Tambahkan kode berikut pada Grid ‘ContentPanel’, anda dapat menggunakan drag n drop

untuk menambahkan control tersebut.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <TextBox Height="72" HorizontalAlignment="Left" Margin="0,6,0,0" Name="txtFirstNumber" Text="0" VerticalAlignment="Top" Width="460" TextAlignment="Center" /> <TextBlock Height="53" HorizontalAlignment="Left" Margin="12,84,0,0" Name="textBlock1" Text="+" VerticalAlignment="Top" FontSize="36" Width="438" TextAlignment="Center" /> <TextBox Height="72" HorizontalAlignment="Left" Margin="0,143,0,0" Name="txtSecondNumber" Text="0" VerticalAlignment="Top" Width="460" TextAlignment="Center" /> <Button Content="equal" Height="72" HorizontalAlignment="Left" Margin="152,221,0,0" Name="btnEqual" VerticalAlignment="Top" Width="160" /> <TextBlock FontSize="32" Height="53" HorizontalAlignment="Left" Margin="12,330,0,0" Name="tbResult" Text="0" TextAlignment="Center" VerticalAlignment="Top" Width="438" /> </Grid>



4

8. Kemudian buat sebuah Grid baru dengan nama ContentGrid. Kemudian tulis kode XAML

berikut:

<Grid x:Name="ContentGrid" Grid.Row="1"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <TextBox Grid.Column="0" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Name="txtMessage" Margin="20,20,10,20" /> <Button Grid.Column="1" Name="btnClick" Content="Click Me" HorizontalAlignment="Right" Margin="10,20,20,20" Padding="4" /> </Grid>

9. Lakukan double click pada tombol ‘equal’, maka VS akan menambahkan property Click dan

nama method yang akan dipanggil.

<Button Content="equal" Height="72" HorizontalAlignment="Left" Margin="152,221,0,0" Name="btnEqual" VerticalAlignment="Top" Width="160" Click="btnEqual_Click" />

10. Pada tampilan ViewCode tulis kode berikut:

private void btnEqual_Click(object sender, RoutedEventArgs e) { int number1 = int.Parse(txtFirstNumber.Text); int number2 = int.Parse(txtSecondNumber.Text); int result = number1 + number2; tbResult.Text = result.ToString(); }



5

11. Sebelum menjalankan aplikasi anda dapat memilih target deployment dari aplikasi anda. Ada

dua pilihan yaitu Windows Phone Emulator atau Windows Phone Device.

12. Jalankan aplikasi anda dengan menekan tombol F5. Maka Visual Studio akan menjalankan

Emulator.

13. Jika anda melakukan modifikasi aplikasi anda pada Visual Studio, anda tidak perlu untuk

menutup emulator. Cukup modifikasi kemudian klik F5 lagi untuk mendeploy aplikasi yang

baru.

Menambahkan Exception pada Program

1. Tambahkan kode berikut pada method btnEqual_Click

private SolidColorBrush errorBrush = new SolidColorBrush(Colors.Red); private Brush correctBrush = null; private void btnEqual_Click(object sender, RoutedEventArgs e) {



6

bool errorFound = false; if (correctBrush == null) { correctBrush = txtFirstNumber.Foreground; } int number1 = 0; int number2 = 0; if (!int.TryParse(txtFirstNumber.Text, out number1)) { txtFirstNumber.Foreground = errorBrush; errorFound = true; } else { txtFirstNumber.Foreground = correctBrush; } if (!int.TryParse(txtSecondNumber.Text, out number2)) { txtSecondNumber.Foreground = errorBrush; errorFound = true; } else { txtSecondNumber.Foreground = correctBrush; } if (errorFound) { tbResult.Text = "Invalid Inputs"; } else { int result = number1+number2; tbResult.Text = result.ToString(); } }

Menambahkan Halaman Error

1. Untuk error yang tidak tertangani anda dapat membuat halaman untuk menampilkan error

tersebut.

2. Buka aplikasi yang sudah anda buat sebelumnya.

7

3. Klik kanan pada project SimpleCalculator → Add → New Item → pilih template Windows

Phone Potrait Page beri nama ‘ErrorPage.xaml’.

4. Pada halaman ‘ErrorPage.xaml’ tuliskan kode berikut:

 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Border BorderBrush="White"> <TextBlock x:Name="ErrorText" Style="{StaticResource PhoneTextSmallStyle}" TextWrapping="Wrap" /> </Border> </Grid>

5. Tekan F7 untuk membuka tampilan View Code, kemudian tambahkan kode berikut:

public partial class ErrorPage : PhoneApplicationPage {



8

public ErrorPage() { InitializeComponent(); } public static Exception ex; protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e) { ErrorText.Text = "Error : " + ex.Message; } }

6. Pada Solution Explorer klik kanan pada App.xaml dan pilih View Code.

7. Cari event Application_UnhandledException kemudian tambahkan kode berikut:

// Code to execute on Unhandled Exceptions private void Application_UnhandledException(object sender, ApplicationUnhandledExceptionEventArgs e) { if (System.Diagnostics.Debugger.IsAttached) { // An unhandled exception has occurred; break into the debugger System.Diagnostics.Debugger.Break(); } e.Handled = true; ErrorPage.ex = e.ExceptionObject; (RootVisual as Microsoft.Phone.Controls.PhoneApplicationFrame).Source = new Uri("/ErrorPage.xaml", UriKind.Relative); }

8. Dengan menuliskan kode diatas maka jika terjadi kesalahan diluar eksepsi yang kita sediakan

maka pesan kesalahan tersebut akan ditampilkan di halaman ErrorPage.xaml.

9. Misal anda dapat menginputkan selain angka kedalam textbox pada aplikasi anda. 10. Tekan Ctrl+F5 untuk menjalankan program tanpa debug.



9

Navigating Between Pages

Untuk melakukan navigasi antar halaman anda dapat menggukan class NavigationService .

10

1. Buat project Windows Phone Application baru dengan nama ‘NavigatingApp’.

2. Kemudian buat halaman baru, pilih Windows Phone Protrait Page dengan nama ‘Page2.xaml’.

3. Pada ‘MainPage.xaml’ tambahkan kode berikut

 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <HyperlinkButton x:Name="hbButton1" Content="Navigate to Page 2"/> </Grid>

4. Pada halaman ‘Page2.xaml’ tambahkan kode berikut :

 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <HyperlinkButton x:Name="hbButton2" Content="Go back" /> </Grid>

5. Double click ‘hbButton1’ pada MainPage.xaml kemudian tambahkan kode berikut untuk

berpindah ke halaman Page2.xaml

11

private void hbButton1_Click(object sender, RoutedEventArgs e) { this.NavigationService.Navigate( new Uri("/Page2.xaml", UriKind.Relative)); }

6. Double click ‘hbButton2’ pada Page2.xaml untuk kembali ke halaman MainPage.xaml

private void hbButton2_Click(object sender, RoutedEventArgs e) { if (this.NavigationService.CanGoBack) { this.NavigationService.GoBack(); } }

Passing Data Through Pages

Pada contoh aplikasi ini akan ditunjukan bagaimana menggunakan QueryString untuk melempar nilai

antar halaman.

1. Buat project Windows Phone Application dengan nama ‘NavigatingWithParam’.

2. Tambahkan kode xaml berikut pada ‘MainPage.xaml’

 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <StackPanel Orientation="Vertical"> <HyperlinkButton Content="Option 1" TabIndex="1" /> <HyperlinkButton Content="Option 2" TabIndex="2" /> <HyperlinkButton Content="Option 3" TabIndex="3" /> </StackPanel> </Grid>

3. Tambahkan Windows Phone Potrait Page dengan nama ‘Page2.xaml’, kemudian tambahkan

kode xaml berikut.

 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <TextBlock x:Name="lbText" /> </Grid>

4. Buat method berikut pada halaman MainPage.xaml.cs untuk redirect ke halaman Page2.xaml

sekaligus melempar nilai parameter.

private void HyperlinkButton_Click(object sender, RoutedEventArgs e) { HyperlinkButton hb = sender as HyperlinkButton;

12

string url = string.Format("/Page2.xaml?ID={0}", hb.TabIndex); this.NavigationService.Navigate(new Uri(url, UriKind.Relative)); }

5. Tambahkan method tersebut pada event click di HyperlinkButton.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <StackPanel Orientation="Vertical"> <HyperlinkButton Content="Option 1" TabIndex="1" Click="HyperlinkButton_Click" /> <HyperlinkButton Content="Option 2" TabIndex="2" Click="HyperlinkButton_Click" /> <HyperlinkButton Content="Option 3" TabIndex="3" Click="HyperlinkButton_Click" /> </StackPanel> </Grid>

6. Pada halaman Page2.xaml.cs, tambahkan kode berikut untuk mengambil nilai yang dikirimkan

dari MainPage.xaml.

private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e) { lbText.Text = string.Format("Anda memilih option nomor : {0}", this.NavigationContext.QueryString["ID"]); }

Navigating Between Pages Using Global Application Variable

1. Buat Windows Phone Application dengan nama ‘NavigatingWithGlobalVariableApp’.

2. Pada MainPage.xaml tambahkan kode berikut.

 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <StackPanel> <CheckBox x:Name="chkRedColor" Content="I want all red pages" /> <HyperlinkButton Content="Navigate to page2" x:Name="hbToPage2" /> <HyperlinkButton Content="Navigate to page3" x:Name="hbToPage3" /> </StackPanel> </Grid>

3. Tambahkan dua halaman yaitu ‘Page2.xaml’ dan ‘Page3.xaml’

4. Tambahkan property berikut pada App.xaml.cs agar dapat diakses dari halaman yang berbeda.



13

public partial class App : Application { /// <summary> /// Provides easy access to the root frame of the Phone Application. /// </summary> /// <returns>The root frame of the Phone Application.</returns> public PhoneApplicationFrame RootFrame { get; private set; } public bool RedPages { get; set; } /// <summary> /// Constructor for the Application object. /// </summary>

5. Klik pada checkbox, kemudian tambahkan kode berikut pada event ‘Checked’.

private void chkRedColor_Checked(object sender, RoutedEventArgs e) { App a = Application.Current as App; a.RedPages = true; ContentPanel.Background = new SolidColorBrush(Colors.Red); }

6. Klik pada checkbox, kemudian tambahkan kode berikut pada event ‘Unchecked’.

private void chkRedColor_Unchecked(object sender, RoutedEventArgs e) { App a = Application.Current as App; a.RedPages = false; ContentPanel.Background = new SolidColorBrush(Colors.Black); }

7. Double click HyperlinkButton ‘hbToPage2’, kemudian tulis kode berikut untuk berpindah ke

halaman Page2.xaml.

private void hbToPage2_Click(object sender, RoutedEventArgs e) { this.NavigationService.Navigate(new Uri("/Page2.xaml", UriKind.Relative)); }

8. Double click HyperlinkButton ‘hbToPage3’, kemudian tulis kode berikut untuk berpindah ke

halaman Page3.xaml.

9. Pada event load di Page2.xaml, tambahkan kode berikut untuk mengambil nilai dari global var

dan mengubah warna background.

14

private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e) { App a = Application.Current as App; if (a.RedPages) ContentPanel.Background = new SolidColorBrush(Colors.Red); }

10. Sama dengan langkah sebelumnya, tambahkan kode berikut pada Page3.xaml.

private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e) { App a = Application.Current as App; if (a.RedPages) ContentPanel.Background = new SolidColorBrush(Colors.Red); }

Navigating with State

Untuk menyimpan object yang kompleks agar dapat diakses pada halaman yang berbeda, anda dapat

menyimpan di state. Anda dapat menggunakan dictionary state pada object PhoneApplicationServices.

1. Buat Windows Phone Application dengan nama ‘NavigatingWithStateApp’

2. Pada halaman MainPage.xaml tambahkan kode berikut.

 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <TextBlock x:Name="tbMsg" /> <HyperlinkButton x:Name="hlNavigate" Content="Navigate to Page 2" /> </Grid>

3. Pada Page2.xaml tambahkan kode berikut untuk menambahkan object yang akan disimpan pada

state.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <StackPanel> <TextBox x:Name="txtFirst" Text="FirstName" GotFocus="txt_GotFocus"/> <TextBox x:Name="txtLast" Text="LastName" GotFocus="txt_GotFocus" /> <TextBox x:Name="txtCity" Text="City" GotFocus="txt_GotFocus" />



15

<Button x:Name="btnSave" Content="Save" Click="btnSave_Click" /> </StackPanel> </Grid>

4. Buat class dengan nama Person.cs

public class Person { public string FirstName { get; set; } public string LastName { get; set; } public string City { get; set; } public Person(){} }

5. Pada MainPage.xaml di event Loaded, tambahkan kode berikut untuk mengecek apakah object

ada di state.

private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e) { if (PhoneApplicationService.Current.State.ContainsKey("Person")) { Person p = (Person)PhoneApplicationService.Current.State["Person"]; tbMsg.Text = string.Format("Welcome {0} {1} from {2}", p.FirstName, p.LastName, p.City); } }

6. Tambahkan juga kode berikut untuk navigasi ke Page2.xaml.

private void hlNavigate_Click(object sender, RoutedEventArgs e) { this.NavigationService.Navigate(new Uri("/Page2.xaml", UriKind.Relative)); }

7. Pada halaman Page2.xaml tambahkan kode berikut untuk menyimpan nilai kedalam state.

private void SaveOrUpdate() { Person p = null; if (PhoneApplicationService.Current.State.ContainsKey("Person"))



16

{ p = (Person)PhoneApplicationService.Current.State["Person"]; p.FirstName = txtFirst.Text; p.LastName = txtLast.Text; p.City = txtCity.Text; } else { p = new Person(); p.FirstName = txtFirst.Text; p.LastName = txtLast.Text; p.City = txtCity.Text; } PhoneApplicationService.Current.State["Person"] = p; } protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e) { if (PhoneApplicationService.Current.State.ContainsKey("Person")) { Person p = (Person)PhoneApplicationService.Current.State["Person"]; txtFirst.Text = p.FirstName; txtLast.Text = p.LastName; txtCity.Text = p.City; } base.OnNavigatedTo(e); } private void txt_GotFocus(object sender, RoutedEventArgs e) { TextBox txt = sender as TextBox; txt.SelectAll(); } private void btnSave_Click(object sender, RoutedEventArgs e) { SaveOrUpdate(); this.NavigationService.GoBack(); }



17

Displaying List of Data & Data Binding

Pada contoh aplikasi dibawah ini akan ditunjukan penggunaan komponen ListBox untuk menampilkan

data lebih dari satu dan mekanisme data binding pada WP7.

1. Buat Windows Phone Application dengan nama ‘SampleBinding’.

2. Tambahkan folder Images pada solution explorer, kemudian tambahkan beberapa image yang

akan digunakan.

3. Tambahkan class dengan nama SampleUser.cs untuk representasi data yang akan ditampilkan.

public class SampleUser { public string UserName { get; set; } public string Message { get; set; } public string ImageSource { get; set; } }

4. Kemudian tambahkan kode berikut pada file MainPage.xaml untuk menampilkan data pada

ListBox.

<ListBox Height="621" HorizontalAlignment="Left" Margin="6,6,0,0" Name="lstMessage" VerticalAlignment="Top" Width="468"></ListBox>

5. Pada event Load di halaman MainPage.xaml.cs tambahkan kode berikut untuk mengisi sample

data yang akan ditampilkan di ListBox

private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e) { List<SampleUser> lstUser = new List<SampleUser>(); lstUser.Add(new SampleUser { UserName = "Erick", Message = "A Silverlight application is made up of pages that contain elements", ImageSource = "Images/pic1.png" }); lstUser.Add(new SampleUser { UserName = "Reza", Message = "These have properties that determine where they are, how they appear



18

and what they can do in an application", ImageSource = "Images/pic2.png" }); lstUser.Add(new SampleUser { UserName = "Rully", Message = "The Visual Studio tool allows us to manipulate the page content by using the design surface and the element properties pane", ImageSource = "Images/pic1.png" }); lstUser.Add(new SampleUser { UserName = "Firstman", Message = "The Visual Studio tool allows us to manipulate the page content by using the design surface and the element properties pane", ImageSource = "Images/pic2.png" }); lstMessage.ItemsSource = lstUser; }

6. Modifikasi tampilan ListBox sebagai berikut

<ListBox Height="621" HorizontalAlignment="Left" Margin="6,6,0,0" Name="lstMessage" VerticalAlignment="Top" Width="468" SelectionChanged="lstMessage_SelectionChanged"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <Image Source="{Binding ImageSource}" Height="72" Width="72" VerticalAlignment="Top" Margin="0,8,8,0"/> <StackPanel Width="350"> <TextBlock Text="{Binding UserName}" Foreground="Orange" FontSize="28"/> <TextBlock Text="{Binding Message}" TextWrapping="Wrap" FontSize="24" /> </StackPanel> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox>

7. Tambahkan halaman Page2.xaml.

8. Klik pada ListBox kemudian tambahkan kode berikut pada event SelectionChanged.

private void lstMessage_SelectionChanged(object sender, SelectionChangedEventArgs e) { SampleUser listItem = (sender as ListBox).SelectedItem as SampleUser; string url = string.Format("/Page2.xaml?UserName={0}", listItem.UserName); NavigationService.Navigate(new Uri(url, UriKind.Relative));



19

}

9. Tambahkan juga kode untuk mengambil nilai Query String pada Page2.xaml.cs

public Page2() { InitializeComponent(); this.Loaded += new RoutedEventHandler(Page2_Loaded); } void Page2_Loaded(object sender, RoutedEventArgs e) { tbMessage.Text = NavigationContext.QueryString["UserName"]; }

hands on lab silverlight for wp7 - stt mandala bandung · erick kurniawan, m.kom, mcts, mcpd, mct 5...

Documents