Dicoding's Blog

WP Module #2 : Silverlight Control Toolkit

Modul berikut dapat didownload di link berikut (http://1drv.ms/1Bw104G).

Pendahuluan

Modul ini dibuat untuk rekan developer sekalian di Indonesia yang ingin memulai untuk memperlajari cara membuat aplikasi mobile berbasis Windows Phone. Anda dapat mendowload kode program dari contoh yang terdapat di modul ini di folder yang sama dengan tempat anda mendownload modul ini.

Sekarang terdapat 2 metode untuk membuat aplikasi Windows Phone. Yang pertama menggunakan xaml dan silverlight seperti yang terdapat di modul ini dan yang kedua menggunakan WinRT dimana aplikasi Windows Phone yang dibuat dapat berjalan secara universal (membuat satu aplikasi yang dapat dijalankan langsung di Windows Phone dan Windows). Modul ini hanya berisi cara membuat aplikasi Windows Phone menggunakan xaml dan silverlight dimana aplikasi yang dibuat menggunakan xaml dan Silverlight tetap dapat berjalan di Windows Phone 8 / Windows Phone 8.1.

Modul berikut dibuat menggunakan visual studio 2013 yang sudah diinstal dengan Windows Phone SDK yang dapat didownload di link berikut. Untuk memulai membuat aplikasi Windows Phone rekan sekalian dapat memilih New Project lalu memilih Blank App (Windows Phone Silverlight) seperti gambar berikut.

image

 

 

 

 

 

 

 

Semoga modul ini dapat bermanfaat bagi rekan sekalian dan Selamat Berkarya!

Silverlight Control Toolkit adalah kontrol komponen open source yang dapat membantu dalam pembuatan aplikasi kita. Berikut ini adalah beberapa control yang disediakan oleh Silverlight Control Toolkit yang dapat kita gunakan :

· Autocomplete Textbox

· Context Menu

· Custom Messagebox

· Date + Time Converters

· Date & Time Picker

· Expander View

· Feathered Transitions

· Gestures

· Hubtile

· Listpicker

· Lockablepivot

· Longlist Selector

· Multi Select List

· Performance Progress Bar

· Phone Textbox

· Rating Control

· Slide in Effect

· Toggle Switch

· Tilt Effect

· Transitions

· Wrappanel

Seluruh komponen di atas dapat anda download source code nya di http://silverlight.codeplex.com/. Disini akan dibahas beberapa control yang sering digunakan dalam pembuatan aplikasi. Sebelumnya kita lihat bagaimana cara memakai Silverlight Control Toolkit terlebih dahulu.

 

 

Cara menggunakan dan menginstall Silverlight Control Tookit

Pertama – tama buka visual studio yang telah terinstal windows phone SDK dan buat project baru

image

 

 

 

 

 

 

Untuk menggunakan Silverlight Control Toolkit kita perlu menambahkan libray Silverlight Control Tookit untuk menginstall nya dapat klik kanan di bagian references lalu pilih “Manage NuGet Packages” dimana untuk melakukan hal ini PC kita harus terkoneksi dengan internet. Atau download terlebih dahulu library nya di http://silverlight.codeplex.com/

image

 

 

 

 

 

 

 

Setelah itu akan muncul halaman seperti ini dan kita cari “Windows Phone Tookit” setelah itu tinggal pilih install.

image

Jika terjadi error anda dapat mendownload dll Silverlight Control Toolkit disini. Cara menambahkan dll Silverlight Control Toolkit adalah sebagai berikut.

image

Kita klik kanan References lalu pilih add reference dan kita tinggal browse dan pilih dll Silverlight Toolkit pada gambar berikut.

image

Setelah itu kita bisa lihat di bagian references terdapat komponen seperti berikut.

image

Jika telah sukses maka project kita sudah terinstall Silverlight Control Toolkit dan untuk menggunakan nya anda dapat menambahkan perintah using di bagian xaml dengan perintah

xmlns:toolkit=”clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit”

using diatas digunakan untuk mendeklarasikan bahwa page yang kita isikan using itu akan menggunakan Silverlight Control Toolkit

 

Autocomplete Textbox

Autocomplete textbox adalah komponen yang digunakan untuk membuah sebuah textbox memiliki fitur autocomplete. Untuk menggunakan autocomplete textbox pertama – tama kita buat dahulu kontrol autocomplete textbox di xaml dengan menuliskan tag berikut :

<toolkit:AutoCompleteBox Name=”autotxt” VerticalAlignment=”Top” Margin=”0,12″/>

Setelah itu jangan lupa tambahkan kode program untuk memberikan list kata – kata yang akan ada di dalam autocomplete textbox. Berikut adalah kode program yang ditambahkan untuk membuat autocomplete textbox

public List<string> words;

private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)

{

words = new List<string>();

words.Add(“nokia lumia 520”);

words.Add(“nokia lumia 720”);

words.Add(“nokia lumia 820”);

autotxt.ItemsSource = words;

}

Maka setelah kode program tersebut dijalankan hasilnya akan seperti ini.

image

Selain itu kita tidak hanya bisa memberikan satu informasi di dalam autocomplete kita juga bisa memberikan beberapa informasi dalam autocomplete seperti gambar berikut.

image

Untuk membuat format seperti gambar di atas kita dapat terlebih dahulu membuat class yang diberi nama AutoComplete yang berisi:

public class AutoComplete

{

public string nama { get; set; }

public string harga { get; set; }

}

Setelah itu kita buat autocomplete yang berbeda seperti berikut ini.

<toolkit:AutoCompleteBox Name=”autotxt” Margin=”0,12″ ValueMemberPath=”nama”>

<toolkit:AutoCompleteBox.ItemTemplate>

<DataTemplate>

<StackPanel Margin=”0,7″>

<TextBlock Margin=”8,0″ Text=”{Binding nama}”/>

<TextBlock FontSize=”{StaticResource PhoneFontSizeNormal}” Foreground=”#ff666666″ Margin=”8,-6,8,2″ Text=”{Binding harga}”/>

</StackPanel>

</DataTemplate>

</toolkit:AutoCompleteBox.ItemTemplate>

</toolkit:AutoCompleteBox>

ValueMemberPath=”nama” adalah daftar yang diambil untuk memunculkan autocomplete textbox. Dan berikut adalah potongan kode program untuk memunculkan autocomplete textbox.

public List<AutoComplete> words;

private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)

{

words = new List<AutoComplete>();

words.Add(new AutoComplete() { nama = “nokia lumia 520”, harga = “Rp 1.500.000,00” });

words.Add(new AutoComplete() { nama = “nokia lumia 620”, harga = “Rp 1.800.000,00” });

words.Add(new AutoComplete() { nama = “nokia lumia 720”, harga = “Rp 2.000.000,00” });

autotxt.ItemsSource = words;

}

 

 

Context Menu

Context Menu adalah menu tambahan yang akan muncul pada saat sebuah button ditekan. Untuk menggunakan context menu pertama tama kita buat sebuah button dan menambahkan toolkit agar context menu dapat dimunculkan seperti berikut.

<Button Margin=”0,0″VerticalAlignment=”Center” Padding=”12″ Content=”Context Menu” FontSize=”18″>

<toolkit:ContextMenuService.ContextMenu>

<toolkit:ContextMenu>

<toolkit:MenuItem Header=”Menu 1″ Click=”MenuItem_Click”/>

<toolkit:MenuItem Header=”Menu 2″ Click=”MenuItem_Click”/>

<toolkit:MenuItem Header=”Menu 3″ Click=”MenuItem_Click”/>

</toolkit:ContextMenu>

</toolkit:ContextMenuService.ContextMenu>

</Button>

Maka setelah kode program tersebut dijalankan hasil nya akan seperti ini.

image

Setelah itu aplikasi akan memunculkan item mana yang telah dipilih. Dan berikut adalah potongan kode program di dalam event MenuItem_Click. Selain itu kita juga bisa menambahkan event baru di setiap context menu nya.

private void MenuItem_Click(object sender, RoutedEventArgs e)

{

MessageBox.Show((string)((MenuItem)sender).Header);

}

Dan hasil nya setelah kode program tersebut dijalankan seperti berikut.

image

 

Custom Messagebox

Custom messagebox adalah pesan peringatan dari sistem untuk user. Namun jika menggunakan Silverlight Control Toolkit maka ada beberapa macam Messagebox yang disediakan berikut adalah beberapa contoh dari Custom Messagebox.

image

Berikut adalah basic messagebox dimana di dalam nya kita dapat memberikan dua buah pilihan “yes” atau “no” untuk membuat basic messagebox berikut adalah potongan kode program untuk menampilkan basic messagebox.

private void Button_Click(object sender, RoutedEventArgs e)

{

CustomMessageBox messageBox = new CustomMessageBox()

{

Caption = “Apakah anda yakin”,

Message = “Anda akan keluar dari aplikasi ini”,

LeftButtonContent = “yes”,

RightButtonContent = “no”,

IsFullScreen = false

};

messageBox.Dismissed += (s1, e1) =>

{

switch (e1.Result)

{

case CustomMessageBoxResult.LeftButton:

MessageBox.Show(“Anda memilih Yes”);

break;

case CustomMessageBoxResult.RightButton:

MessageBox.Show(“Anda memilih No”);

break;

case CustomMessageBoxResult.None:

// Do something.

break;

default:

break;

}

};

messageBox.Show();

}

IsFullScreen adalah pilihan jika kita ingin membuat messagebox menjadi full screen pada saat ditampilkan.

Selanjutnya adalah messagebox with hyperlink button seperti gambar berikut.

image

Messagebox berikut hampir sama dengan messagebox yang pertama namun perbedaan nya adalah messagebox berikut memiliki hyperlink button seperti gambar di atas yang membuat user dapat melihat hyperlink yang berkaitan dengan pertanyaan atau peryataan yang kita tampilkan di dalam messagebox. Berikut adalah potongan kode program untuk membuat messagebox with hyperlink button.

private void Button_Click(object sender, RoutedEventArgs e)

{

HyperlinkButton hyperlinkButton = new HyperlinkButton()

{

Content = “Privacy Statement”,

Margin = new Thickness(0, 28, 0, 8),

HorizontalAlignment = HorizontalAlignment.Left,

NavigateUri = new Uri(“http://silverlight.codeplex.com/”, UriKind.Absolute)

};

TiltEffect.SetIsTiltEnabled(hyperlinkButton, true);

CustomMessageBox messageBox = new CustomMessageBox()

{

Caption = “Allow this application to access and use your location?”,

Message = “Sharing this information helps us provide and improve the location-based services offered for this phone. We won’t use the information to identify or contact you.”,

Content = hyperlinkButton,

LeftButtonContent = “allow”,

RightButtonContent = “cancel”,

IsFullScreen = false

};

messageBox.Dismissed += (s1, e1) =>

{

switch (e1.Result)

{

case CustomMessageBoxResult.LeftButton:

// Do something.

break;

case CustomMessageBoxResult.RightButton:

// Do something.

break;

case CustomMessageBoxResult.None:

// Do something.

break;

default:

break;

}

};

messageBox.Show();

}

Yang membedakan dengan basic messagebox adalah adanya penambahan property Content = hyperlinkButton pada saat membuat custommessagebox.

Selanjutnya adalah messagebox dengan checkbox seperti gambar berikut.

image

Hampir sama dengan hyperlink button hanya anda dapat memberikan checkbox pada saat aplikasi menampilkan messagebox. Berikut ada potongan kode program untuk membuat messagebox dengan checkbox.

private void Button_Click(object sender, RoutedEventArgs e)

{

CheckBox checkBox = new CheckBox()

{

Content = “Do not ask me again”,

Margin = new Thickness(0, 14, 0, -2)

};

TiltEffect.SetIsTiltEnabled(checkBox, true);

CustomMessageBox messageBox = new CustomMessageBox()

{

Caption = “Would you like to rate and review this application?”,

Message =

“Thank you for trying out the Windows Phone Toolkit.\n\nWe would really like to hear what you think about it. Would you mind spending a couple of minutes to rate and review this application in the Marketplace?”,

Content = checkBox,

LeftButtonContent = “ok”,

RightButtonContent = “cancel”,

IsFullScreen = false

};

messageBox.Dismissed += (s1, e1) =>

{

switch (e1.Result)

{

case CustomMessageBoxResult.LeftButton:

// Launch Marketplace review task.

// Do not ask again.

break;

case CustomMessageBoxResult.RightButton:

case CustomMessageBoxResult.None:

if ((bool)checkBox.IsChecked)

{

// Do not launch Marketplace review task.

// Do not ask again.

}

else

{

// Do not launch Marketplace review task.

// Ask again later.

}

break;

default:

break;

}

};

messageBox.Show();

}

Content = checkBox adalah pengisian property yang membuat message box berikut memiliki checkbox. Selain itu masih terdapat juga messagebox with list picker dan messagebox with pivot yang dapat anda lihat di silverlight.codeplex.com

 

 

Date & Time Picker

Date dan time picker adalah control tambahan silverlight tookit yang berfungi sebagai pengambil waktu dan tanggal. Untuk membuat date dan time picker anda hanya perlu menambahkan control berikut di xaml.

<toolkit:DatePicker/>

<toolkit:TimePicker/>

Berikut adalah contoh dari date picker.

image

Dan berikut adalah contoh dari penggunaan time picker.

image

Pada gambar di atas kita dapat melihat bahwa icon yes dan no di bagian bawah tidak muncul. Untuk memunculkan nya anda perlu membuat folder di project anda dan diberi nama “Toolkit.Content” dan simpanan lah icon yang anda pilih di sana jangan lupa untuk penamaan icon tersebut diharuskan “ApplicationBar.Cancel.png” dan “ApplicationBar.Check.png” dan setelah membuat folder dan icon tersebut maka hasilnya akan seperti ini.

image   image

 

Expander View

Expander View adalah control untuk menampilkan data dalam bentuk expander. Berikut adalah contoh penggunaan data expander view.

image

Untuk membuat nya pertama tama kita membuat xaml terlebih dahulu seperti berikut.

<ListBox VerticalAlignment=”Stretch” Height=”539″>

<ListBox.Items>

<StackPanel Orientation=”Vertical” Width=”450″ Height=”Auto”>

<toolkit:ExpanderView Name=”s1″ Header=”Semester 1″ Foreground=”white” FontSize=”30″>

<toolkit:ExpanderView.Items>

<ListBox x:Name=”semester1″ ScrollViewer.VerticalScrollBarVisibility=”Disabled”>

<ListBox.ItemTemplate>

<DataTemplate>

<StackPanel Margin=”-20,0,0,10″ Orientation=”Vertical”>

<StackPanel Orientation=”Horizontal” Width=”450″>

<TextBlock Margin=”30,0,0,0″ TextWrapping=”Wrap” Width=”400″ Text=”{Binding NamaMKul}” Foreground=”white” FontSize=”16″></TextBlock>

</StackPanel>

<StackPanel Orientation=”Horizontal” Width=”450″>

<TextBlock Margin=”30,0,15,0″ Text=”SKS” Foreground=”white” FontSize=”16″></TextBlock>

<TextBlock Margin=”0,0,0,0″ Text=”: ” Foreground=”white” FontSize=”16″></TextBlock>

<TextBlock Margin=”0,0,0,0″ Text=”{Binding JumlahSKS}” Foreground=”white” FontSize=”16″></TextBlock>

</StackPanel>

</StackPanel>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

</toolkit:ExpanderView.Items>

</toolkit:ExpanderView>

<toolkit:ExpanderView Name=”s2″ Header=”Semester 2″ Foreground=”white” FontSize=”30″>

<toolkit:ExpanderView.Items>

<ListBox x:Name=”semester2″ ScrollViewer.VerticalScrollBarVisibility=”Disabled”>

<ListBox.ItemTemplate>

<DataTemplate>

<StackPanel Margin=”-20,0,0,10″ Orientation=”Vertical”>

<StackPanel Orientation=”Horizontal” Width=”450″>

<TextBlock Margin=”30,0,0,0″ TextWrapping=”Wrap” Width=”400″ Text=”{Binding NamaMKul}” Foreground=”white” FontSize=”16″></TextBlock>

</StackPanel>

<StackPanel Orientation=”Horizontal” Width=”450″>

<TextBlock Margin=”30,0,15,0″ Text=”SKS” Foreground=”white” FontSize=”16″></TextBlock>

<TextBlock Margin=”0,0,0,0″ Text=”: ” Foreground=”white” FontSize=”16″></TextBlock>

<TextBlock Margin=”0,0,0,0″ Text=”{Binding JumlahSKS}” Foreground=”white” FontSize=”16″></TextBlock>

</StackPanel>

</StackPanel>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

</toolkit:ExpanderView.Items>

</toolkit:ExpanderView>

</StackPanel>

</ListBox.Items>

</ListBox>

Bagian yang diberi warna merah dan biru adalah header atau per satu bagian dari item yang dapat di expand dalah hal ini kita membuat contoh list mata kuliah di setiap mata kuliah. Setelah itu kita membuat class MataKuliah yang isinya seperti berikut.

public class MataKuliah

{

public string NamaMKul { get; set; }

public string JumlahSKS { get; set; }

public string Semester { get; set; }

}

Setelah itu di bagian kode program dimasukkan list yang akan ditampilkan. Dan berikut adalah potongan kode program untuk menampilkan data ke dalam expander view.

public List<MataKuliah> _matakuliah;

_matakuliah = new List<MataKuliah>();

_matakuliah.Add(new MataKuliah() { NamaMKul = “Sejarah Komputer”, JumlahSKS = “3”, Semester = “1” });

_matakuliah.Add(new MataKuliah() { NamaMKul = “Aljabar”, JumlahSKS = “2”, Semester = “1” });

_matakuliah.Add(new MataKuliah() { NamaMKul = “Pemograman Mobile”, JumlahSKS = “3”, Semester = “2” });

_matakuliah.Add(new MataKuliah() { NamaMKul = “Statistik”, JumlahSKS = “3”, Semester = “2” });

semester1.ItemsSource = (from item in _matakuliah where item.Semester == “1” select item).ToList();

semester2.ItemsSource = (from item in _matakuliah where item.Semester == “2” select item).ToList();

(from item in _matakuliah where item.Semester == “1” select item).ToList(); adalah filter agar yang ditampilkan di bagian semester1 hanya mata kuliah di semester1.

 

 

Listpicker

List picker adalah control yang digunakan untuk kita mengambil item yang terdapat dalam sebuah list. Berikut adalah gambaran dari penggunaan list picker.

image   image

Dua buah contoh diatas diambil menggunakan list picker. Untuk menggunakan list picker terlebih dahulu kita menambahkan kode xaml seperti berikut :

<toolkit:ListPicker ExpansionMode=”FullScreenOnly” x:Name=”myLst” Header=”Tipe”

BorderThickness=”2″ BorderBrush=”Black” SelectedIndex=”-1″>

<toolkit:ListPicker.FullModeItemTemplate>

<DataTemplate>

<TextBlock Text=”{Binding}” Margin=”0 24 24 24″ TextWrapping=”Wrap” Style=”{StaticResource PhoneTextTitle2Style}” />

</DataTemplate>

</toolkit:ListPicker.FullModeItemTemplate>

</toolkit:ListPicker>

ExpansionMode adalah pengaturan apakah list akan ditampilkan selalu fullscreen atau tidak. Setelah itu kita perlu menambahakan di bagian code untuk menampilkan daftar list nya. Berikut adalah potongan kode program untuk menampilkan list ke dalam listpicker.

List<string> _tipe = new List<string>();

_tipe.Add(“Nokia Lumia 520”);

_tipe.Add(“Nokia Lumia 620”);

_tipe.Add(“Nokia Lumia 720”);

myLst.ItemsSource = _tipe;

 

 

Performance Progress Bar

Performance progress bar adalah sebuah kontrol yang menunjukan kepada user bahwa aplikasi kita sedang menjalankan sebuah proses. Berikut adalah contoh dari performance progress bar.

image

Titik – titik berwarna merah tersebut akan berjalan terus sebelum proses yang kita kerjakan selesai. Berikut adalah cara membuat progress bar di xaml.

<ProgressBar VerticalAlignment=”Top” x:Name=”performanceProgressBar” Visibility=”Visible” IsIndeterminate=”True”/>

Setelah itu berikut adalah kode program untuk menjalankan progress bar.

performanceProgressBar.IsIndeterminate = true;

performanceProgressBar.Visibility = Visibility.Visible;

Dan berikut adalah kode program untuk menghentikan progress bar jika proses yang kita lakukan sudah selesai.

performanceProgressBar.IsIndeterminate = false;

performanceProgressBar.Visibility = Visibility.Visible;

 

 

Phone Textbox

Phone textbox adalah beberapa kontrol tambahan dari silverlight control toolkit untuk penambahan fitur textbox kita. Berikut adalah controh dari phone textbox kontrol.

image

Yang pertama adalah kita dapat menambahkan text di dalam textbox yang pada saat textbox tersebut kita tap maka text Nama tersebut akan hilang. Berikut adalah potongan kode program untuk membuat textbox dengan template text.

<toolkit:PhoneTextBox x:Name=”nama” Hint=”Nama” />

Setelah itu adalah textbox dengan indikator maxlength seperti gambar berikut.

image

Maka textbox tersebut hanya akan dibatasi sampai 160 karakter saja. Berikut adalah kode xaml untuk membuat textbox dengan indikator maxlength.

<toolkit:PhoneTextBox Hint=”text” MaxLength=”160″ LengthIndicatorVisible=”True” InputScope=”Text”/>

Setelah itu terdapat juga kontrol dengan indikator length namun dengan tampilan multiline seperti berikut.

image

Berikut adalah kode xaml untuk membuat kontrol seperti di atas.

<toolkit:PhoneTextBox MinHeight=”200″ DisplayedMaxLength=”500″ LengthIndicatorVisible=”True” TextWrapping=”Wrap” AcceptsReturn=”True” />

Dan yang terahir adalah textbox dengan button di samping kanan nya seperti gambar berikut.

image

Berikut adalah kode xaml untuk membuat textbox seperti di atas.

<toolkit:PhoneTextBox Hint=”Search” ActionIcon=”/Toolkit.Content/Search.png” ActionIconTapped=”Search_ActionIconTapped”/>

ActionIconTapped adalah method yang akan dijalankan pada saat button di samping textbox di tekan.

 

 

Toggle Switch

Toggle switch adalah kontrol di dalam silverlight yang berfungsi seperti saklar untuk menunjukan true atau false. Berikut adalah contoh dari toggle switch.

image   image

Berikut adalah kode xaml untuk membuat toggle switch seperti di atas.

<toolkit:ToggleSwitch Header=”Wi Fi networking”/>

Header adalah text yang akan ditampilkan di atas toggle switch.

 

 

Tilt Effect

Tilt effect adalah effect yang membuat kontrol di applikasi kita misalnya button terasa lebih responsive pada saat di sentuh karena ada sedikit pergerekan pada saat kontrol tersebut disentuh. Untuk menjalankan tilt effect anda cukup memasukkan kode berikut di header xaml.

toolkit:TiltEffect.IsTiltEnabled=”True”

Seperti gambar berikut.

image

Setelah itu maka button yang dibuat akan terasa ada effect tilt.

 

 

Transitions

Transitions adalah kontrol di dalam silverlight yang membuat effect saat perpindahan antar page di windows phone. Berikut ini adalah beberapa transition mode yang dapat dipakai pada saat perpindahan page.

· ForwardIn

· ForwardOut

· BackwardIn

· BackwardOut

Berikut ini adalah transition yang dapat dipilih.

· Roll

· Rotate

· Slide

· Swivel

· Turnstile

Sebelum menggunakan transitions effect pertama – tama buka app.xaml.cs lalu masuk ke bagian InitializePhoneApplication() lalu rubah kode berikut :

RootFrame = new PhoneApplicationFrame();

Menjadi

RootFrame = new TransitionFrame();

Agar aplikasi dapat menjalankan transitions effect saat perpindahan page. Berikut ini adalah potongan kode program yang dapat anda pakai untuk membuat transitions effect. Anda dapat copy setiap kode berikut di tiap halaman yang anda buat. Kode program ini disimpan di setelah phone:PhoneApplicationPage.

<toolkit:TransitionService.NavigationInTransition>

<toolkit:NavigationInTransition>

<toolkit:NavigationInTransition.Backward>

<toolkit:TurnstileTransition Mode=”BackwardIn” />

</toolkit:NavigationInTransition.Backward>

<toolkit:NavigationInTransition.Forward>

<toolkit:TurnstileTransition Mode=”ForwardIn” />

</toolkit:NavigationInTransition.Forward>

</toolkit:NavigationInTransition>

</toolkit:TransitionService.NavigationInTransition>

<toolkit:TransitionService.NavigationOutTransition>

<toolkit:NavigationOutTransition>

<toolkit:NavigationOutTransition.Backward>

<toolkit:TurnstileTransition Mode=”BackwardOut” />

</toolkit:NavigationOutTransition.Backward>

<toolkit:NavigationOutTransition.Forward>

<toolkit:TurnstileTransition Mode=”ForwardOut” />

</toolkit:NavigationOutTransition.Forward>

</toolkit:NavigationOutTransition>

</toolkit:TransitionService.NavigationOutTransition>

Share this:

Co-Founder dan COO Dicoding Indonesia, dapat dikontak melalui alamat email : kevin[at]dicoding[dot]com