Xamarin Form Ebook 2020

Cross Platform Mobile Develpment with Xamarin & Visual Studio 2019
KATA PENGANTAR
Penulis mendedikasikan buku ini kepada Komunitas Microsoft User Group Indonesia yang selalu
memberi dukungan dan dorongan kepada penulis untuk terus memiliki semangat untuk berkarya dan
berbagi.
Tidak lupa penulis juga mengucapkan terima kasih kepada Microsoft Indonesia atas dukungan dan
dedikasinya pada komunitas MUGI sehingga kami bisa selalu terus berkarya.
Buku ini ditujukan untuk pengembang yang ingin mempelajari pembuatan aplikasi mobile cross
platform (Android, IOS, dan UWP) dengan menggunakan platform Xamarin dan bahasa pemrograman
C# dan IDE Visual Studio 2019.
Untuk menghubungi penulis anda dapat mengirimkan email ke alamat erick@actual-training.com atau
ke reza.faisal@gmail.com.
Akhir kata semoga buku ini dapat bermanfaat bagi komunitas IT di Indonesia.
Yogyakarta, 21 Februari 2020
Erick Kurniawan & M. Reza Faisal
1
DAFTAR ISI
Kata Pengantar........................................................................................................................................ 1
Daftar Isi .................................................................................................................................................. 2
Bab 1 – Pengenalan Xamarin Form ......................................................................................................... 4
Apa itu Xamarin ................................................................................................................................... 4
Cara Install Xamarin Forms.................................................................................................................. 5
Memulai Membuat Project Xamarin Form ......................................................................................... 6
Menjalankan Aplikasi Android............................................................................................................. 7
Menjalankan Aplikasi Xamarin Forms pada IOS .................................................................................. 8
Menjalankan Aplikasi Xamarin Forms pada UWP/Win 10. ................................................................. 9
Bab 2 – Desain Tampilan menggunakan Layout ................................................................................... 10
Pendahuluan ..................................................................................................................................... 10
Application Lifecycle pada Xamarin Forms ....................................................................................... 10
Xamarin Forms UI (User Interface).................................................................................................... 10
Page ................................................................................................................................................... 10
View ................................................................................................................................................... 11
Layout ................................................................................................................................................ 11
Practice #2.1 Penggunaan StackLayout ......................................................................................... 11
Practice #2.2 Contoh Penggunaan Absolute Layout...................................................................... 12
Practice #2.3 Menggunakan Relative Layout ................................................................................ 12
Practice #2.4 Menggunakan GridLayout ....................................................................................... 13
Task #2.1 Menggunakan Scroll View pada Xamarin Form ............................................................. 14
Task #2.2 Kalkulator Sederhana .................................................................................................... 14
Image View ........................................................................................................................................ 15
Task #2.3 Menggunakan Image View ............................................................................................ 15
Bab 3 – Menampilkan Data Pada ListView ........................................................................................... 20
Pendahuluan ..................................................................................................................................... 20
Binding Data yang bertipe List Of String ........................................................................................... 20
Practice #3.1 Menampilkan Data bertipe List Of String ................................................................ 20
Practice #3.2 Menampilkan Data dari Objek Data Model ............................................................. 21
Practice #3.3 Menampilkan Gambar pada Cell ............................................................................. 23
Practice #3.4 Kustomisasi Baris pada ListView .............................................................................. 25
BAB 4 – Navigasi.................................................................................................................................... 27
2
Pendahuluan ..................................................................................................................................... 27
Jenis-jenis Navigasi pada Xamarin Forms .......................................................................................... 27
Practice #4.1 Menambahkan Navigasi Sederhana ........................................................................ 27
Practice #4.2 Membuat Dropdown Menu ..................................................................................... 28
#Practice 4.3 Menggunakan Modal Form ..................................................................................... 29
Practice #4.4 Membuat Popup Alert ............................................................................................. 30
Practice #4.5 Mengirimkan Data Antar Page ................................................................................. 32
Practice #4.6 Menggunakan objek Application.Current.Properties .............................................. 33
Practice #4.7 Menggunakan Master Page ..................................................................................... 34
#Practice 4.8 Menambahkan Tab Page ......................................................................................... 37
#Practice 4.9 Menambahkan Shell ................................................................................................ 40
#Practice 4.10 Shell Navigation ..................................................................................................... 42
#Practice 4.11 Mengirimkan Parameter Dengan Route ................................................................ 43
#Practice 4.12 Fitur Search Pada Shell .......................................................................................... 44
BAB 5 – Local Storage dengan SQLite................................................................................................ 48
Pendahuluan ..................................................................................................................................... 48
Bekerja dengan SQL Lite .................................................................................................................... 48
Practice #5.1 Membuat Aplikasi Daftar Pegawai dengan SQLite .................................................. 48
Bab 6 - Menggunakan REST Services pada Xamarin Forms .................................................................. 56
#Practice 5.2 Mengakses REST Services Menggunakan Fiddler. ................................................... 56
#Practice 5.3 Mengakses REST Services dari Xamarin Forms. ....................................................... 57
BAB 7 – Android Deployment (Membuat APK)..................................................................................... 64
Cara Membuat APK pada Xamarin Form ...................................................................................... 64
BAB 8 - Xamarin Essentials .................................................................................................................... 68
Practice 8.1 Instalasi Xamarin Essential......................................................................................... 68
Practice 8.3 Xamarin Essentials: Check Battery Status .................................................................. 70
Practice 8.4 Xamarin Essentials: Menggunakan Geolocation........................................................ 72
Practice 8.5 Xamarin Essentials: Menggunakan Geocoding .......................................................... 73
Practice 8.6 Xamarin Essentials: Menggunakan Map .................................................................... 75
3
BAB 1 – PENGENALAN XAMARIN FORM

APA ITU XAMARIN
Xamarin adalah platform pengembangan aplikasi mobile dari Microsoft. Dengan Xamarin anda dapat
membuat aplikasi mobile cross platform pada perangkat Android, IOS, dan Windows 10 (Universal
Windows Platform). Saat ini terdapat 3 produk Xamarin yang dapat anda pilih yaitu:
• Xamarin for Android

• Xamarin for IOS
• Xamarin Forms
Seperti namanya Xamarin for Android digunakan jika anda ingin membuat aplikasi native Android.
Sedangkan Xamarin for IOS digunakan untuk membuat aplikasi native IOS. Jika anda menggunakan
salah satu atau kedua teknologi tersebut maka anda dapat membagi komponen yang sudah anda buat
pada satu project untuk digunakan di project yang lain. Namun yang dapat dibagi hanya komponen
selain UI (User Interface). Xamarin for Android dan Xamarin for IOS masih menggukanan komponen
UI yang spesifik dengan platform.
Xamarin Forms adalah teknologi yang lebih baru, kelebihan dari Xamarin Forms adalah dapat
menggunakan satu UI yang dapat di gunakan pada platform yang berbeda. Dengan Xamarin Forms
anda cukup mengembangkan satu aplikasi dengan target platform yang berbeda. Xamarin Forms
menggunakan format XAML (eXtensible Application Markup Language) untuk membuat tampilan UI.
Arsitektur dari platform Xamarin dapat dilihat pada gambar dibawah ini:
Gambar dibawah ini menunjukan level pembagian kode pada Xamarin.
4
Pada gambar diatas dapat dilihat bahwa dengan menggunakan Xamarin Forms anda tidak perlu
membuat UI yang spesifik untuk masing-masing platform Android dan IOS. UI cross-platform dapat
dibuat dengan menggunakan bahasa XAML.
Microsoft baru-baru ini sudah membuat platform Xamarin Forms menjadi platform open source, dan
anda dapat mendownload kode Xamarin Forms pada link berikut
https://github.com/xamarin/Xamarin.Forms.
CARA INSTALL XAMARIN FORMS

Untuk membuat aplikasi Xamarin Forms, anda harus menginstal tools Visual Studio 2019 Community.
Anda dapat mendownload Visual Studio 2019 versi komunitas yang gratis pada alamat berikut:
• Download Visual Studio 2019 Community: https://visualstudio.microsoft.com/downloads/
Saat ini anda juga dapat menggunakan Macbook untuk pengembangan aplikasi Xamarin karena anda
dapat menginstal Visual Studio 2019 versi Mac yang juga dapat didownload secara gratis
Pada saat melakukan instalasi pilih fitur .NET Core Cross Platform Development untuk mengistall
Xamarin Forms dan ASP.NET and web development jika anda ingin membuat backend dengan
teknologi .NET (ASP.NET Web API).
5
MEMULAI MEMBUAT PROJECT XAMARIN FORM

Untuk memulai membuat project Xamarin Form, buka Visual Studio 2019, kemudian buat project
Cross Platform App – beri nama projectnya Latihan1.
Pilih tombol Create, Kemudian akan muncul jendela pilihan template sebagai berikut:
Untuk membuat project kosong, maka pilih template Blank App, kemudian untuk Platform Anda dapat
memilih Android, IOS, dan UWP (Untuk UWP anda harus menggunakan sistem operasi Windows 10
dan harus menginstal Windows SDK).
6
Setelah project selesai dibuat maka anda akan dapat melihat tampilan solution explorer pada Visual
Studio yang berisi 3 project.
• Project Latihan: berisi project .NET Standard yang akan dishare secara otomatis ke project
yang mempunyai platform spesifik seperti Android dan IOS. Kita akan banyak memodifikasi
kode pada project ini.
• Android: project spesifik untuk platform Android.
• IOS: project spesifik untuk platform IOS.
• UWP (Windows 10) – jika anda menggunakan sistem operasi Windows 10 dan menginstal
Windows 10 SDK.
MENJALANKAN APLIKASI ANDROID

Untuk menjalankan aplikasi Xamarin Forms pada platform Android, anda dapat menggunakan Android
Emulator Manager (AVD).
Pilih salah satu emulator yang akan anda gunakan untuk mencoba menjalankan aplikasi Android. Klik
kanan pada project Android dan pilih set as startup project untuk menjalankan project Android.
Kemudian anda dapat memilih tipe dari emulator dan sistem operasi Android yang akan dibuat. Untuk
contoh ini digunakan emulator dengan menggunakan operating system Android Oreo (SDK 27).
Tekan CTRL+F5 untuk menjalankan program Android. Jika anda menggunakan arsitektur Intel x86 anda
membutuhkan Intel HAXM dan menonaktifkan fitur Hyper-V di Windows 10.
7
Untuk instalasi intel HAXM dapat didownload di https://software.intel.com/en-us/articles/intel-

hardware-accelerated-execution-manager-intel-haxm. Untuk mendisable fitur Hyper-V masuk ke
command prompt dengan role administrator kemudian jalankan perintah dism.exe /Online /Disable-
Feature:Microsoft-Hyper-V-All.
Setelah dijalankan maka anda dapat melihat tampilan emulator sebagai berikut:
MENJALANKAN APLIKASI XAMARIN FORMS PADA IOS

Langkah pertama adalah mengarahkan project utama ke IOS project dengan cara klik kanan pada
solution explorer, kemudian pilih Latihan1.IOS sebagai startup project.
Untuk menjalankan aplikasi IOS anda membutuhkan komputer Mac. Anda dapat menjalankan IOS
simulator lewat Visual Studio namun tetap membutuhkan komputer Mac yang diremote lewat Visual
Studio.
Untuk terkoneksi dengan komputer Mac, pilih Tools – IOS – Xamarin Mac Agent.
Maka akan muncul tampilan sebagai berikut:
8
Untuk dapat terkoneksi dengan komputer Mac, mengkompilasi kode, dan menjalankan aplikasi pada
IOS simulator, anda harus terhubung dengan komputer Mac yang berada pada satu jaringan. Adapun
requirement yang dibutuhkan untuk diinstal pada komputer Mac adalah sebagai berikut:
• Komputer Mac yang menjalankan OS X dengan versi terbaru.

• Visual Studio for Mac.
• Apple’s Xcode versi terbaru (Anda dapat menginstalnya di AppStore melalui aplikasi iTunes).
MENJALANKAN APLIKASI XAMARIN FORMS PADA UWP/WIN 10.

Untuk menjalankan aplikasi Xamarin Forms pada Windows, ubah startup project menjadi UWP.
Untuk menjalankan aplikasi UWP anda dapat menggunakan simulator yang sudah terinstal di Visual
Studio. Alternatif lain anda juga dapat langsung memasang aplikasi tersebut pada komputer anda
(menggunakan OS Win 10).
Dapat anda lihat bahwa tampilan aplikasi yang dijalankan sama persis dengan aplikasi yang dipasang
pada OS Android. Ini menunjukan bahwa dengan Xamarin Forms anda dapat membuat aplikasi native
yang dapat dijalankan multiplatform.
9
BAB 2 – DESAIN TAMPILAN MENGGUNAKAN LAYOUT
PENDAHULUAN
Bab ini akan menjelaskan salah satu komponen yang terpenting pada Xamarin Forms yaitu UI (User
Interface). Pada modul ini anda akan mempelajari bagaimana cara menggunakan objek Page, View,
dan Layout pada Xamarin Forms. Untuk membuat komponen UI di Xamarin Forms digunakan bahasa
XAML (eXtensible Application Markup Language), bagi anda pengembang .NET yang sudah pernah
menggunakan platform WPF (Windows Presentation Foundation) atau Windows Phone pasti tidak
asing dengan bahasa markup ini.
APPLICATION LIFECYCLE PADA XAMARIN FORMS

Xamarin Forms mempunyai application lifecycle yang sederhana. Ada tiga method utama yang
digunakan untuk menangani method lifecycle, ketiga proses tersebut adalah:
• OnStart: method ini akan dipanggil ketika aplikasi pertama kali dijalankan. Berguna untuk
mengambil nilai kedalam memory yang dibutuhkan oleh aplikasi.
• OnSleep: method ini akan dipanggil setiap kali app berpindah ke mode background. Berguna
untuk membersihan dan inisiasi backgroud calls.
• OnResume: method ini akan dipanggil ketika app masuk ke mode resume setelah
sebelumnya masuk ke mode background. Berguna untuk reload nilai kedalam memory dan
mengembalikan nilai dari backgroud threads.
Ketika pengguna memilih tombol Back atau Home pada ponsel, maka aplikasi yang sedang aktif pada
saat itu akan masuk ke mode background. Ketika pengguna memilih kembali aplikasi tersebut, maka
app tersebut di resume dan app tersebut dibawa kembali ke mode foreground. Saat ketika aplikasi
dijalankan pertama kali, saat app masuk ke mode background dan masuk ke mode foreground lagi,
sampai app tersebut ditutup (terminate).
XAMARIN FORMS UI (USER INTERFACE)

Ada tiga komponen utama yang membentuk Xamarin Forms UI yaitu:
• Page: Halaman yang digunakan untuk menampilkan view yang disusun menggunakan layout.
• Views: komponen kontrol yang ada pada Xamarin Forms seperti Entry, Button, dll.
• Layout: komponen yang digunakan untuk mengatur posisi views pada halaman.
PAGE
Class Page adalah kontainer utama untuk setiap tampilan pada halaman aplikasi di Xamarin Forms.
Class ini diturunkan dari class Xamarin.Forms.VisualElement. Class Page adalah baseclass untuk
membuat dari semua class UI pada Xamarin Forms. Berikut adalah beberapa contoh Page yang umum
digunakan:
• ContentPage
• MasterDetailPage
• NavigationPage
• TabbedPage
10
• CarouselPage
VIEW
View adalah kontrol interaktif yang ada pada Page. Berikut ini adalah jenis-jenis view yang ada pada
Xamarin Forms.
• Basic – fundamental views

o Label
o Image
o Button
o BoxView
• List – scrollabe dan selectable list
o ListView
o Text Entry – entry input pengguna menggunakan keyboard
o Entry
o Editor
• Selection – pilihan pengguna yang lebih dari satu.
o Picker
o DatePicker
o TimePicker
o Stepper
o Slider
o Switch
• User Feedback – notifikasi pengguna
o Activity
LAYOUT
Layout adalah wadah yang digunakan untuk pengaturan posisi kontrol (view, atau layout lain). Ada
beberapa macam layout yang didukung oleh Xamarin Form yaitu:
• StackLayout: mengatur kontrol secara horisontal atau vertikal.

• AbsoluteLayout: pengaturan posisi berdasarkan letak yang pasti.
• RelativeLayout: pengaturan posisi kontrol berdasarkan kontrol yang lain.
• Grid: membuat layout yang terdiri dari kolom dan baris seperti tabel.
• Flex: flex layout adalah layout yang paling fleksible, karena dapat berfungsi sebagai stack
layout atau grid layout.
PRACTICE #2.1 PENGGUNAAN STACKLAYOUT

Pada contoh dibawah ini akan ditunjukan bagaimana cara menggunakan StackLayout untuk mengatur
view.
1. Pada project Latihan1, tambahkan forms xaml page baru baru dengan nama
SampleStackLayout.xaml. Kemudian tambahkan kode xaml berikut:
<StackLayout>
11
<StackLayout Spacing="0">
<Label Text="Posisi Start atau flush left" HorizontalOptions="Start"/>
<Label Text="Posisi Center" HorizontalOptions="Center"/>
<Label Text="Posisi End atau flush right" HorizontalOptions="End"/>
</StackLayout>
<StackLayout Spacing="0" Orientation="Horizontal">
<Label Text="Posisi Start" HorizontalOptions="Start"/>
<Label Text="Posisi Center" HorizontalOptions="CenterAndExpand"/>
<Label Text="Posisi End" HorizontalOptions="End"/>
</StackLayout>
</StackLayout>
2. Pada file App.xaml.cs tambahkan kode berikut untuk menjalankan halaman ini pada saat
program pertama kali dijalankan.
public App()
{
InitializeComponent();
MainPage = new SampleStackLayout();

}
PRACTICE #2.2 CONTOH PENGGUNAAN ABSOLUTE LAYOUT

Pada contoh dibawah ini akan ditunjukan cara untuk menggunakan Absoule Layout.
1. Pada project Xamarin Forms, tambahkan xaml page baru dengan nama
AbsoluteLayout.xaml. kemudian tambahkan kode xaml berikut:
<AbsoluteLayout>
<Label Text="I'm centered on iPhone 4 but no other device"
AbsoluteLayout.LayoutBounds="115,150,100,100" LineBreakMode="WordWrap" />
<Label Text="I'm bottom center on every device."
AbsoluteLayout.LayoutBounds=".5,1,.5,.1" AbsoluteLayout.LayoutFlags="All"
LineBreakMode="WordWrap" />
<BoxView Color="Olive" AbsoluteLayout.LayoutBounds="1,.5, 25, 100"
AbsoluteLayout.LayoutFlags="PositionProportional" />
<BoxView Color="Red" AbsoluteLayout.LayoutBounds="0,.5,25,100"
<BoxView Color="Blue" AbsoluteLayout.LayoutBounds=".5,0,100,25"
</AbsoluteLayout>
public App()
{
MainPage = new AbsoluteLayout();
}
PRACTICE #2.3 MENGGUNAKAN RELATIVE LAYOUT

RelativeLayout dapat digunakan untuk memposisikan elemen menggunakan automatic scaling pada
ukuran layar yang berbeda. Penggunaan layout ini memanfaatkan relasi antar view. Setiap view akan
dapat diposisikan terhadap view sebelah/tetangganya.
1. Pada project Xamarin Forms, tambahkan xaml page baru dengan nama RelativeLayout.xaml.
kemudian tambahkan kode xaml berikut:
12
<RelativeLayout>
<BoxView Color="Red" x:Name="redBox"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,Factor=.15,Constant=0}"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Width,Factor=1,Constant=0}"
RelativeLayout.HeightConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Height,Factor=.8,Constant=0}" />
<BoxView Color="Blue"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=redBox,Property=Y,Factor=1,Constant=50}"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=redBox,Property=X,Factor=1,Constant=50}"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToView,ElementName=redBox,
Property=Width,Factor=.5,Constant=0}"
RelativeLayout.HeightConstraint="{ConstraintExpression
Type=RelativeToView,ElementName=redBox,
Property=Height,Factor=.5,Constant=0}" />
</RelativeLayout>
public App()
{
MainPage = new RelativeLayout();
}
PRACTICE #2.4 MENGGUNAKAN GRIDLAYOUT

Dengan menggunakan GridLayout, kita dapat memposisikan view berdasarkan alamat row dan kolom
sama seperti ketika kita menggunakan spreadsheet di Microsoft Excel atau html table.
1. Pada project Xamarin Forms, tambahkan xaml page baru dengan nama GridLayout.xaml.
kemudian tambahkan kode xaml berikut:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="Top Left" Grid.Row="0" Grid.Column="0" />
<Label Text="Top Right" Grid.Row="0" Grid.Column="1" />
<Label Text="Bottom Left" Grid.Row="1" Grid.Column="0" />
<Label Text="Bottom Right" Grid.Row="1" Grid.Column="1" />
</Grid>
public App()
{
MainPage = new GridLayout();
}
13
TASK #2.1 MENGGUNAKAN SCROLL VIEW PADA XAMARIN FORM

1. Scroll View dapat digunakan untuk menambahkan horizontal/vertical scrolling untuk
memperluas tampilan.
2. Pada project Xamarin Forms tambahkan halaman dengan nama SampleScrollview.xaml,
kemudian tambahkan kode berikut:
<ScrollView VerticalOptions="FillAndExpand">
<StackLayout HeightRequest="1000">
<Label Text="Practice 2.1" FontSize="40" HorizontalOptions="Center"/>
<Label x:Name="lblDetail" Text="Label ini digunakan untuk menampilkan detail"
FontSize="20" HorizontalOptions="CenterAndExpand"/>
<Button x:Name="btnHello" Text="Hello Button" HorizontalOptions="Center"
VerticalOptions="Fill" />
<Entry x:Name="entryHello" Placeholder="Username" VerticalOptions="Center"
Keyboard="Text"/>
<Image x:Name="helloImg" Source="icon.png" Aspect="AspectFit"
HorizontalOptions="Center" VerticalOptions="Fill"/>
</StackLayout>
</ScrollView>
3. Kemudian pada code behind tambahkan kode berikut untuk menambahkan event pada
tombol klik.
public partial class MainPage : ContentPage

{
public MainPage()
{
btnHello.Clicked += BtnHello_Clicked;
}
private void BtnHello_Clicked(object sender, EventArgs e)

{
lblDetail.Text = entryHello.Text;
}
}
4. Tekan tombol F5 untuk menjalankan aplikasi pada emulator.
TASK #2.2 KALKULATOR SEDERHANA

1. Pada project Xamarin Forms tambahkan page xaml dengan nama KalkulatorPage.xaml.
2. Kemudian tambahkan desain xaml berikut pada halaman KalkulatorPage.xaml.
<StackLayout Orientation="Vertical">
<Label Text="Masukan Bilangan 1 :" FontSize="Medium" />
<Entry x:Name="entryBil1" Placeholder="masukan bilangan 1" Keyboard="Numeric" />
<Label Text="Masukan Bilangan 2 :" FontSize="Medium" />
<Entry x:Name="entryBil2" Placeholder="masukan bilangan 2" Keyboard="Numeric" />
<Label Text="Hasil :" FontSize="Medium" />
<Entry x:Name="entryHasil" IsEnabled="false" />
<StackLayout Orientation="Horizontal">
<Button x:Name="btnTambah" Text="Tambah" />
<Button x:Name="btnKurang" Text="Kurang" />
<Button x:Name="btnKali" Text="Kali" />
<Button x:Name="btnBagi" Text="Bagi" />
14
</StackLayout>
</StackLayout>
3. Tambahkan juga kode program C# pada file KalkulatorPage.xaml.cs.
public partial class KalkulatorPage : ContentPage

{
public KalkulatorPage()
{
btnTambah.Clicked += Btn_Clicked;
btnKurang.Clicked += Btn_Clicked;
btnKali.Clicked += Btn_Clicked;
btnBagi.Clicked += Btn_Clicked;
}
private void Btn_Clicked(object sender, EventArgs e)

{
double hasil = 0;
var myBtn = (Button)sender;
switch(myBtn.Text)
{
case "Tambah":
hasil = Convert.ToDouble(entryBil1.Text) +
Convert.ToDouble(entryBil2.Text);
break;
case "Kurang":
hasil = Convert.ToDouble(entryBil1.Text) -
break;
case "Kali":
hasil = Convert.ToDouble(entryBil1.Text) *
break;
case "Bagi":
hasil = Convert.ToDouble(entryBil1.Text) /
break;
}
entryHasil.Text = hasil.ToString();
}
}
4. Jalankan program diatas pada emulator dengan menekan tombol Ctrl+F5.
IMAGE VIEW
Image View digunakan untuk menampilkan image. Sumber image dapat berasal dari local folder
maupun dari sumber url pada server di cloud.
• Pada Android: simpan file gambar pada Resources/drawable folder.

• Pada IOS9 keatas: gunakan Asset Lists dan Image Sets.
TASK #2.3 MENGGUNAKAN IMAGE VIEW

1. Buat halaman dengan nama SampleImage.xaml, kemudian tambahkan kode xaml berikut:
<Image Source="monkey1.png" Aspect="AspectFit" HorizontalOptions="Center"
15
VerticalOptions="Center" />
2. Pada folder Resources\drawable di android project tambahkan file monkey1.png yang akan
ditampilkan.
3. Untuk menambahkan event handler pada saat image tersebut dipilih, anda dapat
menambahkan event berikut:
<Image Source="monkey1.png" Aspect="AspectFit"

HorizontalOptions="Center"
VerticalOptions="Center">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
</Image.GestureRecognizers>
</Image>
4. Kemudian tambahkan code behind sebagai berikut:
async private void TapGestureRecognizer_Tapped(object sender, EventArgs e)

{
Image image = (Image)sender;
await image.FadeTo(0.5, 450);
await Task.Delay(1000);
await image.FadeTo(1, 450);
}
5. Jalankan aplikasinya, maka akan ditampilkan hasil sebagai berikut:
16
Task #2.4 Menggunakan Flex Layout
1. Tambahkan page xaml dengan nama SampleFlex.xaml, kemudian tambahkan kode xaml
berikut ini:
<FlexLayout Direction="Column"
AlignItems="Center"
JustifyContent="SpaceEvenly">
<Label Text="FlexLayout in Action"

FontSize="Large" />
<Image Source="monkey1.png" />
<Button Text="Do-Nothing Button" />
<Label Text="Another Label" />

</FlexLayout>
2. Jalankan aplikasi dengan menekan tombol F5 untuk menampilkan output sebagai berikut:
Task #2.5 Menggunakan Flex Layout untuk Wrapping Items
1. Buat xaml page dengan nama FlexWrapping.xaml

2. Tambahkan kode berikut:
<Grid>
<ScrollView>
<FlexLayout x:Name="flexLayout"
Wrap="Wrap"
JustifyContent="SpaceAround" />
</ScrollView>
<ActivityIndicator x:Name="activityIndicator"
IsRunning="True"
VerticalOptions="Center" />
</Grid>
17
3. Kemudian pada code behind tambahkan kode berikut untuk menampilkan image dari
internet.
public partial class FlexWrapping : ContentPage

{
[DataContract]
class ImageList
{
[DataMember(Name = "photos")]
public List<string> Photos = null;
}
public FlexWrapping()
{
LoadBitmapCollection();
}
async void LoadBitmapCollection()

{
using (WebClient webClient = new WebClient())
{
try
{
// Download the list of stock photos
Uri uri = new
Uri("https://raw.githubusercontent.com/xamarin/docs-
archive/master/Images/stock/small/stock.json");
byte[] data = await webClient.DownloadDataTaskAsync(uri);
// Convert to a Stream object

using (Stream stream = new MemoryStream(data))
{
// Deserialize the JSON into an ImageList object
var jsonSerializer = new
DataContractJsonSerializer(typeof(ImageList));
ImageList imageList =
(ImageList)jsonSerializer.ReadObject(stream);
// Create an Image object for each bitmap

foreach (string filepath in imageList.Photos)
{
Image image = new Image
{
Source = ImageSource.FromUri(new Uri(filepath))
};
flexLayout.Children.Add(image);
}
}
}
catch
{
flexLayout.Children.Add(new Label
{
Text = "Cannot access list of bitmap files"
});
}
}
activityIndicator.IsRunning = false;
activityIndicator.IsVisible = false;
18
}
}
4. Tekan tombol F5 untuk menampilkan hasilnya:
19
BAB 3 – MENAMPILKAN DATA PADA LISTVIEW
PENDAHULUAN
Modul ini akan membahas bagaimana menggunakan kontrol ListView pada Xamarin Forms. ListView
adalah salah satu kontrol yang banyak digunakan untuk menampilkan data pada layar ponsel yang
memiliki keterbatasan ukuran. Untuk menampilkan data dari sumber data kedalam view/kontrol maka
digunakan mekanisme data binding.
BINDING DATA YANG BERTIPE LIST OF STRING
Mekanisme binding umum digunakan pada Xamarin Form. Binding adalah mengaitkan data yang ada
pada data source (sumber data) ke kontrol tertentu. Ada dua macam jenis binding yaitu one-way
binding dan two-way binding. One-way binding digunakan hanya untuk menampilkan data saja,
sedangkan two-way binding digunakan untuk menampilkan dan mengedit data.
PRACTICE #3.1 MENAMPILKAN DATA BERTIPE LIST OF STRING

1. Pada project Xamarin Forms tambahkan halaman xaml baru (Form Xaml Page) dengan nama
BindingListString.xaml.
2. Kemudian tambahkan kode berikut:
<ListView x:Name="listView" />

3. Pada file BindingListString.xaml.cs tambahkan kode C# berikut untuk menampilkan data
berupa objek List kedalam kontrol ListView.
public BindingListString()
{
List<string> items = new List<string> { "First", "Second", "Third" };
listView.ItemsSource = items;
}
4. Anda juga dapat mengambil informasi data/item yang dipilih pada ListView, caranya adalah
dengan menambahkan event handler ‘ItemTapped’ kedalam ListView.
public BindingListString()
{
List<string> items = new List<string> { "First", "Second", "Third" };
listView.ItemsSource = items;
//untuk mengambil nilai item ketika diklik pada baris

listView.ItemTapped += async (sender, e) =>
{
await DisplayAlert("Tapped", e.Item.ToString() + " was selected",
"OK");
((ListView)sender).SelectedItem = null;
};
}
5. Setelah itu masuk ke halaman App.xaml.cs dan ubah kode program berikut di bagian
constructor seperti berikut :
20
public App()
{
MainPage = new Modul3.BindingListString();
}
6. Tekan F5 untuk menjalankan program pada emulator.
PRACTICE #3.2 MENAMPILKAN DATA DARI OBJEK DATA MODEL

Pada contoh berikut dijelaskan cara menampilkan data dari objek data model yang sudah disiapkan
sebelumnya.
1. Pada project Xamarin Forms, tambahkan folder baru dengan nama Models, kemudian
tambahkan class dengan nama ListItem.cs.
public class ListItem

{
public string Title { get; set; }
public string Description { get; set; }
}
2. Untuk class yang digunakan untuk Binding, pastikan menggunakan Public
3. Kemudian tambahkan halaman xaml baru (Form Xaml Page) dengan nama
BindingToDataModel.xaml, kemudian tambahkan kode xaml berikut:
<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Modul3.BindingToDataModel">
<ListView ItemsSource="{Binding ListItems}" ItemTapped="ListViewItemTapped">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding Title}" Detail="{Binding Description}" DetailColor="Red"
/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
4. Pada halaman xaml diatas digunakan ItemTemplate untuk mengatur data yang akan
ditampilkan pada kontrol ListView. Keyword Binding digunakan untuk mengikatkan data
yang diambil dari objek data model kedalam kontrol ListView.
5. Element TextCell digunakan untuk menampilkan dua informasi yaitu title dan description.
6. Pada file BindingToDataModel.xaml.cs tambahkan kode berikut ini.
public partial class BindingToDataModel : ContentPage

{
public BindingToDataModel()
21
{
BindingContext = new ListViewDataModelViewModel();
}
public class ListViewDataModelViewModel : BindableObject

{
private List<ListItem> lstItems;
public ListViewDataModelViewModel()
{
lstItems = new List<ListItem>
{
new ListItem { Title="Mystic", Description="Mystic team blue badge"
},
new ListItem {Title="Instinct",Description="Instinct team yellow
badge" },
new ListItem {Title="Valor",Description="Valor team red badge" }
};
}
public List<ListItem> ListItems
{
get { return lstItems; }
set {
lstItems = value;
OnPropertyChanged("ListItems");
}
}
}
}
7. Jika ada merah pada ListItem tambahkan using Modul3.Models;
8. Property BindingContext digunakan untuk mengarahkan sumber data yang akan ditampilkan
pada halaman xaml.
9. Class ListViewDataModelViewModel.cs. akan digunakan untuk membuat objek ListItems
yang akan ditampilkan kedalam kontrol ListView.
10. Pada kode diatas dapat dilihat bahwa class ListViewDataModelViewModel diturunkan dari
class BindableObject, ini bertujuan agar kita dapat menggunakan method
OnPropertyChanged() yang akan memberi tahu program bahwa ada objek yang berubah.
11. Untuk mengambil informasi dari data yang dipilih pada kontrol ListView, anda dapat
menambahkan event ItemTapped ke dalam class BindingToDataModel seperti ditunjukan
pada kode berikut:
private async void ListViewItemTapped(object sender, ItemTappedEventArgs e)

{
ListItem item = (ListItem)e.Item;
await DisplayAlert("Tapped", item.Title.ToString() + " was selected",
"OK");
((ListView)sender).SelectedItem = null;
}
12. Setelah itu masuk ke halaman App.xaml.cs dan ubah kode program berikut di bagian
constructor seperti berikut :
public App()
{
MainPage = new Bab3.BindingToDataModel();
}
13. Tekan tombol F5 untuk menjalankan aplikasi pada android emulator.
22
PRACTICE #3.3 MENAMPILKAN GAMBAR PADA CELL

Pada contoh yang sebelumnya anda sudah menggunakan ListView ItemTemplate untuk menampilkan
informasi berupa Text dan Detail. Kontrol ListView pada Xamarin juga menyediakan template yang
menampilkan tidak hanya data berupa text, pada contoh dibawah ini kita akan mencoba untuk
menampilkan data berupa gambar pada kontrol ListView.
1. Pada project Xamarin Forms, tambahkan halaman xaml baru dengan nama
ListViewImageCell.xaml.
2. Kemudian tambahkan kode xaml berikut ini:
<ListView x:Name="listView" ItemsSource="{Binding ListItems}">

<DataTemplate>
<ImageCell ImageSource="{Binding Source}" Text="{Binding Title}"
Detail="{Binding Description}" />
</DataTemplate>
</ListView>
3. Pada kode xaml diatas dapat dilihat bahwa elemen Data Template yang digunakan berbeda
dengan contoh sebelumnya yang menggunakan element TextCell, pada kasus ini digunakan
element ImageCell untuk menampilkan data berupa image dan text.
4. Pada folder Models modifikasi class ListItem.cs yang sebelumnya sudah dibuat. Tambahkan
property Source yang akan digunakan untuk menyimpan informasi gambar.

{
public string Source { get; set; }
}
5. Pada file ListViewImageCell.xaml.cs tambahkan kode berikut ini
public partial class ListViewImageCell : ContentPage

{
public ListViewImageCell()
{
BindingContext = new ListViewImageCellViewModel();
}
public class ListViewImageCellViewModel : BindableObject

{
private List<ListItem> listItems;
23
{
get { return listItems; }
set
{
listItems = value;
}
}
public ListViewImageCellViewModel()
{
listItems = new List<ListItem>
{
new ListItem { Source="first.png", Title="Mystic",
Description="Mystic team blue badge" },
new ListItem { Source="second.png",
Title="Instinct",Description="Instinct team yellow badge" },
new ListItem { Source="third.png",
Title="Valor",Description="Valor team red badge" }
};
}
}
}
6. Tambahkan juga class dengan nama ListViewImageCellViewModel.cs. Class ini berisi objek-
objek yang akan ditampilkan pada kontrol ListView.
7. Kode diatas mirip dengan contoh sebelumnya, hanya ada tambahan inisialisasi satu property
baru yaitu Source yang berisi nama file image yang akan ditampilkan.
8. Untuk menambahkan image yang akan ditampilkan, tambahkan image yang akan
ditampilkan kedalam project Android Navtive (untuk aplikasi android) di folder
Resources\drawable. Pada contoh berikut ditambahkan tiga file bertipe .png kedalam folder
tersebut. Anda dapat download asset tersebut pada file contoh di github.
9. Kemudian tekan tombol F5 untuk menjalankan program pada emulator, hasil dari aplikasi
yang sudah dibuat dapat dilihat pada kode berikut ini. Jangan lupa untuk mengganti
inisalisasi page yang diload oleh aplikasi pada App.xaml.cs
24
PRACTICE #3.4 KUSTOMISASI BARIS PADA LISTVIEW

Selain menampilkan teks dan gambar pada kontrol ListView yang sudah dibuat pada contoh
sebelumnya, kita juga dapat membuat tampilan sendiri sesuai dengan kebutuhan. Pada contoh
dibawah ini ditunjukan bagaimana cara menampilkan ListView yang mempunyai baris yang sudah
dikustomisasi.
1. Pada project Xamarin Forms, tambahkan halaman xaml baru dengan nama
ListViewCustom.xaml. Kemudian tambahkan xaml berikut ini.
<ListView x:Name="listView" ItemsSource="{Binding ListItems}" RowHeight="80"

BackgroundColor="Black">
<DataTemplate>
<ViewCell>
<StackLayout HorizontalOptions="StartAndExpand" Orientation="Horizontal"
Padding="25,10,55,15">
<StackLayout HorizontalOptions="StartAndExpand" Orientation="Vertical">
<Label HorizontalOptions="Start" FontSize="20" FontAttributes="Bold"
TextColor="White" Text="{Binding Title}"/>
<Label HorizontalOptions="Start" FontSize="12" FontAttributes="Bold"
TextColor="White" Text="{Binding Description}"/>
</StackLayout>
<Label HorizontalOptions="End" FontSize="25" TextColor="Aqua"
Text="{Binding Price}" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView>
2. Pada kode xaml diatas dapat dilihat bahwa kontrol ListView dapat mempunyai ItemTemplate
yang berupa ViewCell. Element ViewCell ini sangat fleksible sehingga dapat diisi dengan
element lain. Pada contoh diatas dapat dilihat bahwa ViewCell diisi dengan tiga kontrol label
yang disusun menggunakan StackLayout.
3. Pada folder Models modifikasi class ListItem yang sebelumnya sudah dibuat dengan
menambahkan property baru yaitu Price.

{
public string Source { get; set; }
public string Price { get; set; }
}
4. Tambahkan kode pada file ListViewCustom.xaml.cs sebagai berikut:
public partial class ListViewCustom : ContentPage

{
public ListViewCustom()
{
BindingContext = new ListViewCustomViewModel();
}
public class ListViewCustomViewModel : BindableObject

{
private List<ListItem> listItems;
25
{
get { return listItems; }
set
{
listItems = value;
}
}
public ListViewCustomViewModel()
{
listItems = new List<ListItem>
{
new ListItem { Title="Pokeball", Description="Pokeball Red",
Price="Rp.10.000" },
new ListItem {Title="Masterball",Description="Masterball
Blue",Price="Rp.20.000" },
new ListItem {Title="Ultraball",Description="Ultraball
Yellow",Price="Rp.50.000" }
};
}
}
5. Untuk menjalankan program tekan tombol F5, maka anda akan dapat melihat hasilnya pada
android emulator. Jangan lupa untuk mengganti inisalisasi page yang diload oleh aplikasi
pada App.xaml.cs
26
BAB 4 – NAVIGASI
PENDAHULUAN
Pada bab ini akan dibahas bagaimana cara membuat navigasi antar halaman pada aplikasi Xamarin
Forms. Navigasi digunakan untuk memudahkan pengguna untuk berpindah antar halaman. Selain itu
pada modul ini juga akan dibahas bagaimana cara untuk mengirimkan parameter antar halaman dan
membuat berbagai macam model navigasi seperti menu, tabs, dan master pages.
JENIS-JENIS NAVIGASI PADA XAMARIN FORMS

Ada beberapa jenis navigasi yang dapat digunakan pada Xamarin Forms, beberapa diantaranya yaitu:
• Hierarchical
• Modal
• Tabs
• Master Pages
PRACTICE #4.1 MENAMBAHKAN NAVIGASI SEDERHANA

Pada contoh yang pertama akan ditunjukan bagaimana cara untuk menggunakan navigasi, cara ini
digunakan untuk memanggil halaman selanjutnya dari halaman pertama.
1. Pada project Xamarin Forms tambahkan halaman xaml baru dengan nama
NavigationPage1.xaml. Kemudian tambahkan kode xaml berikut.
<StackLayout>
<Label Text="Home Page" FontSize="40"></Label>
<Button Text="Go To Second Page" x:Name="btnSecond"></Button>
</StackLayout>
2. Pada kode xaml diatas terdiri dari dua kontrol yaitu label dan button. Jika tombol ditekan
maka diharapkan halaman 2 akan ditampilkan.
3. Untuk mengaktifkan mekanisme navigasi pada halaman, tambahkan objek NavigationPage
pada file App.xam.cs.
public App()
{
MainPage = new NavigationPage(new NavigationPage1());
}
4. Pada kode diatas dapat dilihat bahwa ketika memanggil halaman NavigationPage1 untuk
pertama kali, maka objek NavigationPage juga harus dibuat agar fitur navigasi dapat
digunakan.
5. Pada file NavigationPage1.xaml.cs tambahkan kode berikut:
public partial class NavigationPage1 : ContentPage

{
public NavigationPage1()
{
btnSecond.Clicked += BtnSecond_Clicked;
}
private async void BtnSecond_Clicked(object sender, EventArgs e)
27
{
await Navigation.PushAsync(new NavigationPage2());
}
}
6. Method Navigation.PushAsync() diatas digunakan untuk memanggil halaman selanjutnya
yaitu halaman NavigationPage2.
7. Pada project portable, tambahkan halaman xaml dengan nama NavigationPage2.xaml.
Kemudian tambahkan kode berikut:
<StackLayout>
<Label Text="Second Page" FontSize="40"></Label>
<Button x:Name="btnBack" Text="Back"/>
</StackLayout>
8. Kemudian tambahkan kode pada NavigationPage2.xaml.cs. Method Navigation.PopAsync()
digunakan untuk kembali ke halaman sebelumnya.

{
public NavigationPage2()
{
btnBack.Clicked += async (sender, e) =>
{
await Navigation.PopAsync(true);
};
}
}
9. Tekan tombol F5 untuk menjalankan aplikasi. Ketika tombol “Go To Second Page” dipilih maka
otomatis halaman kedua akan ditampilkan.
10. Untuk kembali ke halaman sebelumnya, anda dapat menekan tombol “BACK” atau menekan
tombol panah dipojok kiri atas.
PRACTICE #4.2 MEMBUAT DROPDOWN MENU

Pada contoh dibawah ini akan ditunjukan bagaimana menggunakan kontrol Dropdown Menu dan cara
navigasi antar halaman.
1. Pada project Xamarin Forms, tambahkan halaman xaml dengan nama DropdownMenu.xaml.
kemudian tambahkan kode xaml berikut ini:

<ContentPage>
<ContentPage.ToolbarItems>
<ToolbarItem Text="Home" Order="Secondary" Clicked="Navigate"
CommandParameter="NavigationPage1" />
<ToolbarItem Text="Second" Order="Secondary" Clicked="Navigate"
CommandParameter="NavigationPage2" />
</ContentPage.ToolbarItems>
<ContentPage.Content>
</ContentPage.Content>
</ContentPage>
2. Pada kode xaml diatas dapat dilihat penambahan ToolbarItems untuk membuat menu
dropdown.
28
3. Kemudian tambahkan kode pada DropdownMenu.xaml.cs.
public partial class DropdownMenu : ContentPage

{
public DropdownMenu()
{
}
protected async void Navigate(object sender, EventArgs args)

{
string type = (string)((ToolbarItem)sender).CommandParameter;

Type pageType = Type.GetType("Bab4." + type + ", Modul4");
Page page = (Page)Activator.CreateInstance(pageType);
await this.Navigation.PushAsync(page);
}
}
4. Pada kode diatas ketika toolbar menu item dipilih maka program akan melakukan
pengecekan item mana yang dipilih, kemudian membuat instan objek dari Page yang dituju,
dan terakhir mengarahkan ke halaman yang dituju.
5. Untuk melihat hasilnya pada android emulator, tekan tombol F5. Jangan lupa untuk
mengganti inisalisasi page yang diload oleh aplikasi pada App.xaml.cs.
#PRACTICE 4.3 MENGGUNAKAN MODAL FORM

Modal Forms digunakan untuk menampilkan form bertipe modal. Ada tiga alternatif penggunaan
modal form pada Xamarin Forms yaitu:
• Modal Form untuk Navigasi

• Modal Form untuk Alert
• Modal Form untuk Action Sheet pop-up menu
Dengan menggunakan modal form anda dapat menampilkan halaman full-screen. Ketika modal form
ditampilkan, maka navigation bar tidak akan ditampilkan sampai form modal tersebut ditutup.
1. Pada project portable tambahkan halaman xaml baru dengan nama ModalPage.xaml.
Kemudian tambahkan kode berikut:

<ContentPage Title="Contoh Modal" xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<StackLayout>
<Label Text="First Page" FontSize="40" />
<Button Text="Go to Second Page Modally" Clicked="Navigate" />
</StackLayout>
</ContentPage>
2. Buat juga halaman xaml dengan nama ModalSecondPage.xaml, kemudian tambahkan kode
berikut:
29
<StackLayout>
<Label Text="Second Page" FontSize="40" />
<Button Text="Pop back to First Page" Clicked="Navigate" />
</StackLayout>
</ContentPage>
3. Untuk menampilkan Modal Form yang sudah dibuat pada langkah sebelumnya, tambahkan
kode berikut pada file ModalPage.xaml.cs.
public partial class ModalPage : ContentPage

{
public ModalPage()
{
}

{
await Navigation.PushModalAsync(new ModalSecondPage(), false);
}
}
4. Pada kode diatas dapat dilihat bahwa method Navigation.PushModalAsync digunakan untuk
memanggil form modal.
5. Untuk dapat kembali ke halaman sebelunya, anda dapat menambahkan kode berikut pada file
ModalSecondPage.xaml.cs.
public partial class ModalSecondPage : ContentPage

{
public ModalSecondPage()
{
}

{
await Navigation.PopModalAsync();
}
}
6. Tekan tombol F5 untuk menjalankan program pada Android Emulator. Tampilan pemanggilan
modal form dapat dilihat pada gambar berikut ini. Jangan lupa untuk mengganti inisalisasi
page yang diload oleh aplikasi pada App.xaml.cs.
PRACTICE #4.4 MEMBUAT POPUP ALERT

Selain untuk menampilkan halaman baru seperti pada contoh sebelumnya, modal form juga dapat
digunakan untuk membuat popup Alert.
1. Pada project Xamarin Forms tambahkan halaman xaml dengan nama PopupMainPage.xaml.
kemudian tambahkan kode xaml berikut ini.

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
30
xmlns:local="clr-namespace:Modul4;assembly=Modul4"
<TabbedPage.Children>
<local:AlertPage Title="Alerts" Icon="icon.png" />
<local:ActionSheetPage Title="ActionSheets" Icon="icon.png" />
</TabbedPage.Children>
</TabbedPage>
2. Kemudian tambahkan juga halaman baru dengan nama AlertPage.xaml.

x:Class="Modul4.AlertPage">
<StackLayout Padding="0,20,0,0">
<Label Text="DisplayAlert" FontSize="Large" HorizontalOptions="Center" />
<Button Text="Alert Simple" Clicked="OnAlertSimpleClicked" />
<Button Text="Alert Yes/No" Clicked="OnAlertYesNoClicked" />
</StackLayout>
</ContentPage>
3. Pada file PopupMainPage.xaml.cs ubahlah sebagai berikut:
public partial class PopupMainPage : TabbedPage

{
public PopupMainPage()
{
}
}
4. Pada file AlertPage.xaml.cs tambahkan kode berikut ini untuk menampilkan popup display
alert.
public partial class AlertPage : ContentPage

{
public AlertPage()
{
}
async void OnAlertSimpleClicked(object sender, EventArgs e)
{
await DisplayAlert("Alert", "You have been alerted", "OK");
}
async void OnAlertYesNoClicked(object sender, EventArgs e)
{
var answer = await DisplayAlert("Question?", "Would you like to play a
game", "Yes", "No");
}
}
5. Selain alert kita juga dapat membuat action sheet popup. Action Sheet mirip seperti Alert
hanya saja ada tambahan tombol konfirmasi, dan nilai kembalian konfirmasi dari pengguna
dapat diambil. Untuk itu tambahkan halaman xaml dengan nama ActionSheetPage.xaml.

31
<StackLayout Padding="0,20,0,0">
<Label Text="DisplayActionSheet" FontSize="Large" HorizontalOptions="Center" />
<Button Text="ActionSheet Simple" Clicked="OnActionSheetSimpleClicked" />
<Button Text="ActionSheet Cancel/Delete"
Clicked="OnActionSheetCancelDeleteClicked" />
</StackLayout>
</ContentPage>
6. Tambahkan code-behind pada file ActionSheetPage.xaml.cs.
public partial class ActionSheetPage : ContentPage

{
public ActionSheetPage()
{
}
async void OnActionSheetSimpleClicked(object sender, EventArgs e)
{
var action = await DisplayActionSheet("ActionSheet: Send to?", "Cancel",
null, "Email", "Twitter", "Facebook");
}
async void OnActionSheetCancelDeleteClicked(object sender, EventArgs e)
{
var action = await DisplayActionSheet("ActionSheet: SavePhoto?",
"Cancel", "Delete", "Photo Roll", "Email");
}
}
11. Untuk mengaktifkan mekanisme navigasi pada halaman, tambahkan objek PopupMainPage
pada file App.xam.cs.
PRACTICE #4.5 MENGIRIMKAN DATA ANTAR PAGE

Pada aplikasi yang cukup kompleks dan terdiri lebih dari satu halaman dibutuhkan mekanisme untuk
mengirimkan data antar halaman.
Ada beberapa cara yang dapat digunakan untuk mengirimkan data antar halaman. Cara yang pertama
dan yang paling mudah adalah mengimkan data melalui objek konstruktor.
1. Pada project Xamarin Forms, tambahkan attribut name pada halaman NavigationPage2.xaml
yg sebelumnya sudah dibuat. Sehingga tampilannya berikut ini.

<ContentPage>
<StackLayout>
<Label x:Name ="lblParam" Text="Second Page" FontSize="40"></Label>
<Button x:Name="btnBack" Text="Back"/>
32
</StackLayout>
</ContentPage>
2. Kemudian tambahkan kode berikut pada halaman NavigationPage2.xaml.cs yang sudah

dibuat pada latihan sebelumnya.
public NavigationPage2(string param)

{
lblParam.Text = "Nama anda : " + param;
{
};
}
3. Dapat dilihat pada kode diatas bahwa pada konstruktor NavigationPage2 ditambahkan satu
parameter yaitu param yang bertipe string. Kemudian nilai dari parameter tersebut akan
ditampilkan pada kontrol lblParam.
4. Untuk mengirimkan data pada saat objek NavigationPage2 dibuat, tambahkan kode berikut
pada NavigationPage1.xaml.cs.

{
--------
private async void BtnSecond_Clicked(object sender, EventArgs e)
{
await Navigation.PushAsync(new NavigationPage2("Erick Kurniawan"));
}
}
5. Tekan tombol F5 untuk menjalankan program pada Android Emulator. Jangan lupa untuk
mengganti inisalisasi page yang diload oleh aplikasi pada App.xaml.cs.
PRACTICE #4.6 MENGGUNAKAN OBJEK APPLICATION.CURRENT.PROPERTIES

Selain menggunakan parameter pada konstruktor, anda juga dapat juga menggunakan objek
Application.Current.Properties untuk mengirimkan data antar halaman. Objek ini mirip seperti objek
session pada aplikasi web yang juga berfungsi untuk menyimpan data yang dapat diakses oleh
halaman lain.
1. Pada file app.cs, tambahkan kode berikut untuk membuat objek

Application.Current.Properties pada saat program dijalankan pertama kali.
public App()
{
Application.Current.Properties["id"] = "22002321";
MainPage = new NavigationPage(new NavigationPage1());
}
33
2. Kemudian untuk mengambil nilai dari objek tersebut pada halaman NavigationPage2,
tambahkan kode berikut:

{
public NavigationPage2(string param)
{
lblParam.Text = "Nama anda : " + param + "id

"+(string)Application.Current.Properties["id"];

{
};
}
}
3. Tekan tombol F5 untuk menjalankan program pada Android Emulator. Tampilan dapat dilihat
pada gambar berikut ini. Jangan lupa untuk mengganti inisalisasi page yang diload oleh aplikasi
pada App.xaml.cs
PRACTICE #4.7 MENGGUNAKAN MASTER PAGE

Master Page adalah salah satu jenis template navigasi yang sudah disediakan pada Xamarin Forms.
Dengan menggunakan master page pengguna dapat memilih menu pada area disebelah kiri halaman,
dan konten dari aplikasi akan ditampilkan di area kanan halaman.
1. Pada project portable, tambahkan kode xaml berikut pada halaman MainPage.xaml.
<MasterDetailPage>
<MasterDetailPage.Master>
<local:MasterPage x:Name="masterPage" />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<local:ContactsPage />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
2. Langkah pertama yang harus dilakukan adalah dengan membuat container yang akan diisi
dengan halaman master dan halaman navigasi.
3. Pada project portable Modul4, tambahkan class dengan nama MasterPageItem.cs. Class ini
berisi data dari menu yang akan ditampilkan pada MasterPageItem.
public class MasterPageItem

{
public string IconSource { get; set; }
public Type TargetType { get; set; }
}
34
4. Kemudian pada MainPage.cs tambahkan kode berikut ini.
public partial class MainPage : MasterDetailPage

{
public MainPage ()
{
InitializeComponent ();
masterPage.ListView.ItemSelected += OnItemSelected;
}
void OnItemSelected (object sender, SelectedItemChangedEventArgs e)

{
var item = e.SelectedItem as MasterPageItem;
if (item != null) {
Detail = new NavigationPage ((Page)Activator.CreateInstance
(item.TargetType));
masterPage.ListView.SelectedItem = null;
IsPresented = false;
}
}
}
5. Kemudian tambahkan halaman xaml dengan nama MasterPage.xaml. Halaman ini akan berisi
daftar menu yang akan ditampilkan.
<?xml version="1.0" encoding="UTF-8"?>

x:Class="Modul4.MasterPage"
Padding="0,40,0,0"
Icon="icon.png"
Title="Personal Organiser">
<StackLayout VerticalOptions="FillAndExpand">
<ListView x:Name="listView" VerticalOptions="FillAndExpand"
SeparatorVisibility="None">
<DataTemplate>
<ImageCell Text="{Binding Title}"
ImageSource="{Binding IconSource}" />
</DataTemplate>
</ListView>
</StackLayout>
</ContentPage>
6. Pada halaman master page ditambahkan kontrol ListView untuk menampilkan menu.
Kemudian pada MasterPage.xaml.cs tambahkan kode berikut:
public partial class MasterPage : ContentPage

{
public ListView ListView { get { return listView; } }
public MasterPage()
{
var masterPageItems = new List<MasterPageItem> ();

masterPageItems.Add (new MasterPageItem {
35
Title = "Contacts",
IconSource = "contacts.png",
TargetType = typeof(ContactsPage)
});
Title = "TodoList",
IconSource = "todo.png",
TargetType = typeof(TodoListPage)
});
Title = "Reminders",
IconSource = "reminders.png",
TargetType = typeof(ReminderPage)
});
listView.ItemsSource = masterPageItems;
}
}
4. Jika Terdapat tanda merah pada ContactsPage, TodoListPage dan ReminderPage abaikan.
Karena halaman tersebut belum dibuat. Selanjutnya akan membuat classhalaman tersebut
7. Untuk menampilkan halaman di bagian detail tambahkan halaman xaml dengan nama
ContactsPage.xaml.

Title="Contacts Page">
<StackLayout>
<Label Text="Contacts data goes here" HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage>
8. Kemudian tambahkan juga halaman xaml dengan nama ReminderPage.xaml.

Title="Reminder Page">
<StackLayout>
<Label Text="Reminder data goes here" HorizontalOptions="Center"
</StackLayout>
</ContentPage>
9. Terakhir tambahkan halaman xaml dengan nama TodoListPage.xaml.

Title="TodoList Page">
<StackLayout>
36
<Label Text="Todo list data goes here" HorizontalOptions="Center"

</StackLayout>
</ContentPage>
10. Pada file App.xaml.cs tambahkan kode berikut untuk menjalankan halaman MainPage ketika
aplikasi dijalankan untuk pertama kali.
public App ()
{
MainPage = new Modul4.MainPage();
}
#PRACTICE 4.8 MENAMBAHKAN TAB PAGE

Selain Master Page, Xamarin Forms juga menyediakan template untuk menggunakan Tab Page. Tab
Page digunakan jika ingin menampilkan banyak halaman yang akan digabungkan pada satu halaman
saja.
1. Pada project portable tambahkan halaman xaml baru dengan nama TabbedPageDemo.xaml.
Kemudian tambahkan kode xaml berikut:

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:local="clr-namespace:Modul4;assembly=Modul4">
<TabbedPage.Resources>
<ResourceDictionary>
<local:NonNullToBooleanConverter x:Key="booleanConverter" />
</ResourceDictionary>
</TabbedPage.Resources>
<TabbedPage.ItemTemplate>
<DataTemplate>
<ContentPage Title="{Binding Name}" Icon="monkeyicon.png">
<StackLayout Padding="5, 25">
<Label Text="{Binding Name}"
Font="Bold,Large"
HorizontalOptions="Center" />
<Image Source="{Binding PhotoUrl}"
WidthRequest="200"
HeightRequest="200" />
<StackLayout Padding="50, 10">
<Label Text="Family:"
HorizontalOptions="FillAndExpand" />
<Label Text="{Binding Family}"
Font="Bold,Medium" />
</StackLayout>
<StackLayout Orientation="Horizontal"
IsVisible="{Binding Subfamily,
Converter={StaticResource booleanConverter}}">
<Label Text="Subfamily:"
<Label Text="{Binding Subfamily}"
</StackLayout>
37
IsVisible="{Binding Tribe,
Converter={StaticResource booleanConverter}}">
<Label Text="Tribe:"
<Label Text="{Binding Tribe}"
</StackLayout>
<Label Text="Genus:"
<Label Text="{Binding Genus}"
</StackLayout>
</StackLayout>
</StackLayout>
</ContentPage>
</DataTemplate>
</TabbedPage.ItemTemplate>
</TabbedPage>
2. Pada elemen TabbedPage dapat ditambahkan template yang berisi layout dari Tab halaman
yang akan dibuat.
3. Untuk menambahkan icon berupa file .png, anda dapat menaruh icon tersebut kedalam
project Droid pada folder Resources\drawable seperti yang sudah ditunjukan pada modul
sebelumnya.
4. Kemudian tambahkan kode berikut pada file App.cs untuk menjalankan halaman
TabbedPageDemo ketika aplikasi dijalankan untuk pertama kali.
public App()
{
MainPage = new TabbedPageDemo();
}
5. Buat class baru dengan nama MonkeyDataModel.cs. Class ini akan digunakan sebagai sumber
data yang ditampilkan pada kontrol Tab.
public class MonkeyDataModel

{
public string Name { set; get; }
public string Family { set; get; }
public string Subfamily { set; get; }
public string Tribe { set; get; }
public string Genus { set; get; }
public string PhotoUrl { set; get; }
public static IList<MonkeyDataModel> All { set; get; }
static MonkeyDataModel ()
{
All = new ObservableCollection<MonkeyDataModel> {
new MonkeyDataModel {
Name = "Chimpanzee",
Family = "Hominidae",
Subfamily = "Homininae",
Tribe = "Panini",
Genus = "Pan",
38
PhotoUrl =
"http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/Schimpanse_Zoo_Leipzig.j
pg/640px-Schimpanse_Zoo_Leipzig.jpg"
},
Name = "Orangutan",
Family = "Hominidae",
Subfamily = "Ponginae",
Genus = "Pongo",
PhotoUrl =
"http://upload.wikimedia.org/wikipedia/commons/b/be/Orang_Utan%2C_Semenggok_Forest
_Reserve%2C_Sarawak%2C_Borneo%2C_Malaysia.JPG"
},
Name = "Tamarin",
Family = "Callitrichidae",
Genus = "Saguinus",
PhotoUrl =
"http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Tamarin_portrait_2_edit3
.jpg/640px-Tamarin_portrait_2_edit3.jpg"
}
};
}
}
6. Tambahkan kode NonNullToBooleanConverter.cs pada project portable. Kode ini digunakan

untuk mengkonversi data yang akan ditampilkan pada tab jika datanya bernilai null.
class NonNullToBooleanConverter : IValueConverter

{
public object Convert (object value, Type targetType, object parameter,
CultureInfo culture)
{
if (value is string) {
return !string.IsNullOrEmpty ((string)value);
}
return value != null;

}
public object ConvertBack (object value, Type targetType, object

parameter, CultureInfo culture)
{
return null;
}
}
7. Langkah terakhir tambahkan kode pada file TabbedPageDemo.cs.
public TabbedPageDemo()
{
ItemsSource = MonkeyDataModel.All;
}
39
#PRACTICE 4.9 MENAMBAHKAN SHELL

Xamarin.Forms 4.0 memperkenalkan fitur-fitur baru yang luar biasa untuk membantu merampingkan
pengembangan saat membangun aplikasi mobile yang cantik dengan C #. Penekanan utama adalah
Xamarin.Forms Shell baru, yang berupaya mengurangi kerumitan membangun aplikasi mobile dengan
menyediakan fitur arsitektur aplikasi mendasar. Seperti hierarki visual, navigasi, routing berbasis URI,
dan penanganan pencarian terintegrasi.
Pada tutorial ini anda akan melihat betapa mudahnya memasang fitur shell pada aplikasi Xamarin.
Bentuk Shell dengan berbagai jenis skema navigasi dan cara menavigasi ke sub-halaman.
1. Untuk membuat shell dari awal, anda dapat membuat project baru kemudian pilih template
untuk membuat shell seperti gambar dibawah ini.
2. Namun jika anda sudah memiliki project Xamarin Forms, maka anda dapat menambahkan
Shell dengan cara menambahkan halaman xaml yang diturunkan dari class Shell.
3. Pada Xamarin Forms project tambahkan xaml baru dengan nama AppShell.xaml
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
x:Class="Latihan1.AppShell">
</Shell>
4. Kemudian pada code behind tambahkan kode sebagai berikut:
public partial class AppShell : Shell

{
public AppShell()
{
}
}
5. Kemudian pada App class tambahkan kode berikut ini untuk membuka shell pertama kali.
public App()
{
MainPage = new AppShell();
}
40
6. Untuk menambahkan menu anda dapat menggunakan FlyoutItem atau menggunakan TabBar.
7. Untuk menampilkan menu yang dapat di slide di sebelah kiri, anda dapat menggunakan flyout
item. Kodenya adalah sebagai berikut:
<Shell ---------
xmlns:views="clr-namespace:Latihan1.Bab3">
<FlyoutItem Title="List Sample"
FlyoutDisplayOptions="AsMultipleItems">
<ShellContent Title="Binding List String">

<views:BindingListString />
</ShellContent>
<ShellContent Title="Binding Data Model">
<views:BindingToDataModel />
</ShellContent>
<ShellContent Title="Custom ListView">

<views:ListViewCustom />
</ShellContent>
</FlyoutItem>
</Shell>
8. Tampilannya dapat dilihat sebagai berikut:
9. Menu yang ditmbahkan bisa juga berupa tab.

<Tab Title="Tab Menu">
<ShellContent Title="Binding List">
<views:BindingListString/>
</ShellContent>
<ShellContent Title="Image Cell">
<views:ListViewImageCell />
</ShellContent>
</Tab>
<ShellContent Title="Binding List String">
</ShellContent>
<ShellContent Title="Binding Data Model">
</ShellContent>
<ShellContent Title="Custom ListView">
41
</ShellContent>
</FlyoutItem>
10. Anda dapat melihat tampilannya sebagai berikut:
#PRACTICE 4.10 SHELL NAVIGATION

Xamarin Shell mempunyai URI-based navigation yang menggunakan mekanisme routes sehingga kita
dapat berpindah navigasi tanpa harus mengikuti mekanisme navigasi hirarki standard.
1. Pada aplikasi yang sudah kita buat sebelumnya, tambahkan code behind sebagai berikut:
public AppShell()
{
Routing.RegisterRoute("liststring", typeof(BindingListString));
Routing.RegisterRoute("imagecell", typeof(ListViewImageCell));
Routing.RegisterRoute("datamodel", typeof(BindingToDataModel));
Routing.RegisterRoute("customlist", typeof(ListViewCustom));
}
2. Kemudian pada bagian xaml tambahkan route berikut ini:

<Tab Title="Tab Menu">
<ShellContent Title="Binding List" Route="liststring">
<views:BindingListString/>
</ShellContent>
<ShellContent Title="Image Cell" Route="imagecell">
<views:ListViewImageCell />
</ShellContent>
</Tab>
<ShellContent Title="Binding List String" Route="liststring">
</ShellContent>
<ShellContent Title="Binding Data Model" Route="datamodel">
</ShellContent>
<ShellContent Title="Custom ListView" Route="customlist">
42
</ShellContent>
</FlyoutItem>
3. Pada halaman BindingListString yang sudah dibuat sebelumnya tambahkan tmbol untuk
navigasi halaman.
<StackLayout>
<Button x:Name="btnImageCell"
Text="Ke Halaman Image Cell" Clicked="btnImageCell_Clicked" />
</StackLayout>
4. Untuk navigasi dengan menggunakan route yang sudah dibuat, anda dapat menambahkan
perintah berikut ini:
private async void btnImageCell_Clicked(object sender, EventArgs e)

{
await Shell.Current.GoToAsync("imagecell");
}
#PRACTICE 4.11 MENGIRIMKAN PARAMETER DENGAN ROUTE

1. Selain menggunakan route untuk navigasi, anda juga dapat mengirimkan nilai via navigasi
dengan cara berikut:
2. Pada halaman BindingListString yang sudah anda buat sebelumnya, tambahkan kode berikut
untuk mengirimkan nilai.
private async void btnImageCell_Clicked(object sender, EventArgs e)

{
var nama = "Erick";
await Shell.Current.GoToAsync($"//imagecell?nama={nama}");
}
3. Kemudian pada halaman ListViewImageCell tambahkan label untuk menampilkan nilai

parameter yang dikirimkan.
<StackLayout>
<Button x:Name="btnImageCell"
Text="Ke Halaman Image Cell" Clicked="btnImageCell_Clicked" />
</StackLayout>
4. Kemudian tambahkan attribute berikut untuk mengambil nilai parameter:
43
[QueryProperty("Nama","nama")]
public partial class ListViewImageCell : ContentPage
5. Kemudian tambahkan property untuk mengambil data.
public string Nama

{
set
{
lblPar.Text = Uri.UnescapeDataString(value);
}
}
#PRACTICE 4.12 FITUR SEARCH PADA SHELL

1. Untuk membuat halaman yang memiliki fitur search, tambahkan halaman baru dengan nama
ContohSearch.
2. Kemudian pada project buat folder dengan nama Data dan Controls.
3. Folder Data digunakan untuk menambahkan list untuk data dummy. Pada folder Data
tambahkan file dengan nama MonkeyData.cs
public static IList<Animal> Monkeys { get; private set; }
static MonkeyData()
{
Monkeys = new List<Animal>();
Monkeys.Add(new Animal
{
Name = "Baboon",
Location = "Africa & Asia",
Details = "Baboons are African and Arabian Old World monkeys
belonging to the genus Papio, part of the subfamily Cercopithecinae.",
ImageUrl =
"https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serenge
ti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
});
Monkeys.Add(new Animal
{
Name = "Capuchin Monkey",
Location = "Central & South America",
Details = "The capuchin monkeys are New World monkeys of the
subfamily Cebinae. Prior to 2011, the subfamily contained only a single genus,
Cebus.",
44
ImageUrl = "
https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Capuchin_Costa_Rica.jpg/
200px-Capuchin_Costa_Rica.jpg"
});
}}
4. Kemudian tambahkan juga folder Controls, kemudian tambahkan file dengan nama
MonkeySearchHandler.cs. file ini digunakan untuk menangani mekanisme search.
public class MonkeySearchHandler : SearchHandler

{
protected override void OnQueryChanged(string oldValue, string newValue)
{
base.OnQueryChanged(oldValue, newValue);
if (string.IsNullOrWhiteSpace(newValue))
{
ItemsSource = null;
}
else
{
ItemsSource = MonkeyData.Monkeys
.Where(monkey =>
monkey.Name.ToLower().Contains(newValue.ToLower()))
.ToList<Animal>();
}
}
protected override async void OnItemSelected(object item)

{
base.OnItemSelected(item);
await Task.Delay(1000);
await
Shell.Current.GoToAsync($"monkeydetails?name={((Animal)item).Name}"); }
}
5. Pada ContohSearch tambahkan kode xaml berikut ini:

<ContentPage mc:Ignorable="d"
x:Class="Latihan1.Bab4.ContohSearch"
xmlns:controls="clr-namespace:Latihan1.Controls"
xmlns:data="clr-namespace:Latihan1.Data"
Title="Monkey">
<Shell.SearchHandler>
<controls:MonkeySearchHandler Placeholder="Enter search term"
ShowsResults="true"
DisplayMemberName="Name" />
</Shell.SearchHandler>
<CollectionView Margin="20"
ItemsSource="{x:Static data:MonkeyData.Monkeys}"
ItemTemplate="{StaticResource AnimalTemplate}"
SelectionMode="Single"
SelectionChanged="OnCollectionViewSelectionChanged" />
</ContentPage>
6. Kemudian tambahkan kode pada method OnCollectionViewSelectionChanged.
45
async void OnCollectionViewSelectionChanged(object sender,

SelectionChangedEventArgs e)
{
try
{
string monkeyName = (e.CurrentSelection.FirstOrDefault() as
Animal).Name;
await Shell.Current.GoToAsync($"monkeydetails?name={monkeyName}");
}
catch (Exception ex)
{
await DisplayAlert("Error", $"{ex.InnerException.Message}","OK");

}
7. Karena ketika kita memilih salah satu item akan dibuka halaman details, maka tambahkan
halaman baru dengan nama DetailSearch.xaml

<ContentPage
x:Class="Latihan1.Bab4.DetailSearch" Title="Monkey Detail">
<ScrollView>
<StackLayout Margin="20">
<Label Text="{Binding Location}"
FontAttributes="Italic"
<Image Source="{Binding ImageUrl}"
HeightRequest="200"
WidthRequest="200"
HorizontalOptions="CenterAndExpand" />
<Label Text="{Binding Details}"/>
</StackLayout>
</ScrollView>
</ContentPage>
8. Kemudian pada folder ViewModels tambahkan class dengan nama MonkeyDetailViewModel,

kemudian tambahkan kode berikut ini:
[QueryProperty("MonkeyName", "name")]
public class MonkeyDetailViewModel : INotifyPropertyChanged
{
public string MonkeyName
{
set
{
Animal monkey = MonkeyData.Monkeys.FirstOrDefault(m => m.Name ==
Uri.UnescapeDataString(value));
if (monkey != null)
{
Name = monkey.Name;
Location = monkey.Location;
Details = monkey.Details;
ImageUrl = monkey.ImageUrl;
OnPropertyChanged("Name");
OnPropertyChanged("Location");
46
OnPropertyChanged("Details");
OnPropertyChanged("ImageUrl");
}
}
}
public string Name { get; set; }

public string Location { get; private set; }
public string Details { get; private set; }
public string ImageUrl { get; private set; }
#region INotifyPropertyChanged
public event PropertyChangedEventHandler PropertyChanged;
void OnPropertyChanged([CallerMemberName] string propertyName = null)

{
PropertyChanged?.Invoke(this, new
PropertyChangedEventArgs(propertyName));
}
#endregion
}
9. Tambahkan route untuk ke halaman detail pada AppShell.cs
Routing.RegisterRoute("monkeylist", typeof(ContohSearch));
Routing.RegisterRoute("monkeydetails", typeof(DetailSearch));
10. Kemudian jalankan aplikasinya, dan pilih menu navigasi Monkey List.
11. Ketikan keyword yang diinginkan, setelah dipilih maka akan ditampilkan halaman detail.
47
BAB 5 – LOCAL STORAGE DENGAN SQLITE
PENDAHULUAN
Pada modul ini akan dibahas bagaimana bekerja dengan media penyimpanan lokal berupa database
yaitu SQL Lite untuk menyimpan persistance data pada perangkat Android. Modul ini juga akan
membahas bagaimana cara untuk bekerja dengan REST Services pada aplikasi backend.
BEKERJA DENGAN SQL LITE

Pada subbab berikut akan dibahas bagaimana cara untuk menyimpan data secara lokal menggunakan
database SQLite. Contoh aplikasi yang akan dibuat adalah aplikasi untuk menyimpan dan
memanipulasi data Pegawai.
PRACTICE #5.1 MEMBUAT APLIKASI DAFTAR PEGAWAI DENGAN SQLITE

1. Buat Xamarin Form solution dengan nama SampleSQLite.
2. Kemudian tambahkan library SQLite-Net-PCL pada semua project agar dapat menggunakan
SQLite.
3. Klik kanan pada solution 'SampleSQLite'. Kemudian pilih NuGET package dan tambahkan paket
SQLite-Net-PCL pada solution (ketiga project baik itu .NET Standard, Android, maupun IOS),
kemudian klik install.
4. Kemudian tambahkan juga library Plugin.NetStandardStorage pada NuGET.
5. Pada project portable tambahkan class dengan nama Employee.cs yang akan digunakan untuk
menyimpan data pegawai pada database SQLite.
using SQLite.Net.Attributes;
using System;
48
namespace SampleSQLite
{
public class Employee
{
[PrimaryKey, AutoIncrement]
public long EmpId { get; set; }
[NotNull]
public string EmpName { get; set; }
public string Designation { get; set; }
public string Department { get; set; }
public string Qualification { get; set; }
}
}
6. Keyword PrimaryKey menandakan bahwa field EmpId adalah primary key. Autoincrement
menunjukan bahwa kode EmpId akan digenerate otomatis oleh SQLite secara berurutan.
7. Pada project .NET Standard tambahkan juga class dengan nama DataAccess.cs. Kemudian
tambahkan kode berikut:
using Plugin.NetStandardStorage.Abstractions.Interfaces;
using Plugin.NetStandardStorage.Implementations;
using SQLite;
using System;
using System.Collections.Generic;
using System.IO;
using System.Text;
{
public class DataAccess
{
SQLiteConnection database;
public SQLiteConnection GetConnection()

{
SQLiteConnection sqliteConnection;
var sqliteFileName = "MyDb.db3";
IFolder folder = new FileSystem().LocalStorage;
string path = Path.Combine(folder.FullPath, sqliteFileName);
sqliteConnection = new SQLiteConnection(path);
return sqliteConnection;
}
public DataAccess()
{
database = GetConnection();
database.CreateTable<Employee>();
}
public IEnumerable<Employee> GetAllEmployees()

{
return database.Query<Employee>("select * from Employee order by
EmpName");
}
public int SaveEmployee(Employee employee)

{
return database.Insert(employee);
}
49
public int DeleteEmployee(Employee employee)

{
return database.Delete(employee);
}
public int EditEmployee(Employee employee)

{
return database.Update(employee);
}
}
}
8. Kode diatas adalah kode yang digunakan untuk membuat table baru dan perintah untuk CRUD
(Create, Read, Update, Delete).
9. Pada project .NET Standard tambahkan juga kode berikut pada file App.xaml.cs. Kode dibawah
ini bertujuan untuk membuat instance class static yang dapat diakses dari semua form tanpa
harus membuat instance class-nya.
public partial class App : Application

{
private static DataAccess dbUtils;
public static DataAccess DBUtils
{
get
{
if (dbUtils == null)
{
dbUtils = new DataAccess();
}
return dbUtils;
}
}
public App()
{
MainPage = new NavigationPage(new ManageEmployee());
}
}
10. Class App adalah class yang akan dijalankan untuk pertama kali ketika aplikasi tersebut
dijalankan.
11. Untuk menampilkan data pegawai, buat halaman xaml baru dengan nama
ManageEmployee.xaml. Kemudian tambahkan kode berikut.
x:Class="SampleSQLite.ManageEmployee" Title="Manage Employee">
<StackLayout>
<ListView x:Name="lstEmployee" HasUnevenRows="False"
ItemSelected="LstEmployee_ItemSelected"
Header="Header Value" Footer="Footer">
<ListView.HeaderTemplate>
<DataTemplate>
50
BackgroundColor="Blue" Padding="5,5,5,5">
<Label Text="Name" FontSize="Medium"
FontAttributes="Bold" TextColor="White"/>
<Label Text="Designation" FontSize="Medium"
<Label Text="Department" FontSize="Medium"
</StackLayout>
</DataTemplate>
</ListView.HeaderTemplate>
<DataTemplate>
<ViewCell>
Padding="5,5,5,5">
<Label Text="{Binding EmpName}" FontSize="Medium" />
<Label Text="{Binding Department}" FontSize="Medium" />
<Label Text="{Binding Qualification}"
FontSize="Medium"/>
<Button Text="delete" HeightRequest="15"
CommandParameter="{Binding EmpId}" Clicked="btnDeleteClick" FontSize="Micro" />
</StackLayout>
</ViewCell>
</DataTemplate>
<ListView.FooterTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal" Padding="5,5,5,5">
<Button Text="Add New Employee" Clicked="OnNewClicked" />
</StackLayout>
</DataTemplate>
</ListView.FooterTemplate>
</ListView>
</StackLayout>
</ContentPage>
12. Pada kode xaml diatas ditambahkan sebuah kontrol ListView untuk menampilkan data yang
akan diambil dari media penyimpanan lokal SQLIte.
13. Pada file ManageEmployee.xaml.cs tambahkan kode berikut.
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class ManageEmployee : ContentPage
{
public ManageEmployee()
{
}
protected override void OnAppearing()

{
lstEmployee.ItemsSource = App.DBUtils.GetAllEmployees();
}
private async void LstEmployee_ItemSelected(object sender,

SelectedItemChangedEventArgs e)
{
if (e.SelectedItem == null)
51
{
return;
}
var empDetail = (Employee)e.SelectedItem;
await Navigation.PushAsync(new ShowEmployee(empDetail));
}
public async void OnNewClicked(object sender, EventArgs args)

{
await Navigation.PushAsync(new AddEmployee());
}
public async void btnDeleteClick(object sender, EventArgs args)

{
var item = (Button)sender;
if (item.Text == "delete")
{
var result = await DisplayAlert("Konfirmasi", "Apakah anda yakin
akan mendelete data "+item.CommandParameter.ToString()+" ?", "Yes", "No");
if (result)
{
var empId = Convert.ToInt64(item.CommandParameter.ToString());
App.DBUtils.DeleteEmployee(new Employee { EmpId = empId });
OnAppearing();
}
}
}
}
}
14. Kode diatas digunakan untuk menampilkan data pegawai yang diambil dari media
penyimpanan lokal dan juga menangani event untuk memilih data yang ada pada kontrol
ListView untuk ditampilkan detailnya.
15. Kode diatas juga menangani proses delete data ketika tombol delete yang ada di dalam
ListView dipilih.
16. Untuk menangani penambahan data pegawai baru, buat halaman xaml baru dengan nama
AddEmployee.xaml. Kemudian tambahkan kode xaml berikut ini:
x:Class="SampleSQLite.AddEmployee" Title="Add Employee">
<StackLayout>
<TableView Intent="Settings" BackgroundColor="White">
<TableRoot>
<TableSection Title="Add New Employee">
<EntryCell x:Name="txtEmpName" Label="Employee Name"
Keyboard="Text" />
<EntryCell x:Name="txtDesign" Label="Designation"
Keyboard="Text" />
<EntryCell x:Name="txtDepartment" Label="Department"
Keyboard="Text" />
<EntryCell x:Name="txtQualification" Label="Qualification"
Keyboard="Text" />
<ViewCell>
<ContentView Padding="0,0">
<ContentView.Content>
52
<Button BackgroundColor="#fd6d6d" Text="Save"

TextColor="White" Clicked="OnSaveClicked" />
</ContentView.Content>
</ContentView>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
</StackLayout>
</ContentPage>
17. Kemudian tambahka kode pada file AddEmployee.xaml.cs sebagai berikut.
{
public partial class AddEmployee : ContentPage
{
public AddEmployee ()
{
}
public async void OnSaveClicked(object sender, EventArgs args)

{
var newEmployee = new Employee()
{
EmpName = txtEmpName.Text,
Department = txtDepartment.Text,
Designation = txtDesign.Text,
Qualification = txtQualification.Text
};
App.DBUtils.SaveEmployee(newEmployee);
await Navigation.PushAsync(new ManageEmployee());
}
}
}
18. Untuk menampilkan halaman detail pegawai per record, tambahkan halaman xaml dengan
nama ShowEmployee.xaml. Halaman ini juga memiliki tombol edit record.
x:Class="SampleSQLite.ShowEmployee" Title="Show Employee">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
53
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Label Grid.Row ="0" Grid.Column="0" Grid.ColumnSpan="2"

FontSize="Large" FontAttributes="Bold" Text="Employee Details" />
<Label Grid.Row ="1" Grid.Column="1" Text="Name" />
<Entry Grid.Row="1" Grid.Column="2" x:Name="txtEmpName" Text
="{Binding EmpName}" />
<Label Grid.Row ="2" Grid.Column="1" Text="Designation" />
<Entry Grid.Row="2" Grid.Column="2" x:Name="txtDesignation" Text
="{Binding Designation}"/>
<Label Grid.Row ="3" Grid.Column="1" Text="Department" />
<Entry Grid.Row="3" Grid.Column="2" x:Name="txtDepartment" Text
="{Binding Department}"/>
<Label Grid.Row ="4" Grid.Column="1" Text="Qualification" />
<Entry Grid.Row="4" Grid.Column="2" x:Name="txtQualification" Text
="{Binding Qualification}" />
<Button Grid.Row ="5" Grid.Column="1" Text="Edit Details"
FontSize="Small" HeightRequest="20" Clicked="OnEditClicked" />
</Grid>
</ContentPage>
19. Kemudian tambahkan kode berikut pada file ShowEmployee.xaml.cs.
{
public partial class ShowEmployee : ContentPage
{
private Employee currEmp;
public ShowEmployee(Employee employee)
{
currEmp = employee;
BindingContext = currEmp;
}
public async void OnEditClicked(object sender, EventArgs args)

{
currEmp.EmpName = txtEmpName.Text;
currEmp.Department = txtDepartment.Text;
currEmp.Designation = txtDesignation.Text;
currEmp.Qualification = txtQualification.Text;
App.DBUtils.EditEmployee(currEmp);
await Navigation.PopAsync();
}
}
}
20. Tekan tombol F5 untuk menjalankan program pada Android Emulator.
54
55
BAB 6 - MENGGUNAKAN REST SERVICES PADA XAMARIN FORMS

Pada contoh dibawah ini REST Services yang dibangun menggunakan framework ASP.NET Web API
yang sudah dipasang pada layanan komputasi awan Microsoft Azure.
Adapun alamat dari REST Service yang digunakan:
http://actservices.azurewebsites.net/api/TodoItem/
Untuk pengecekan apakah Web Services tersebut dapat berjalan, anda dapat menggunakan tool
Fiddler. Anda dapat mengunduh tools fiddler secara gratis pada tautan berikut ini:
https://www.telerik.com/download/fiddler.
#PRACTICE 5.2 MENGAKSES REST SERVICES MENGGUNAKAN FIDDLER.

1. Langkah pertama yang akan dilakukan adalah melakukan percobaan untuk mengakses contoh
backend services yang sudah tersedia.
2. Buka tools fiddler, kemudian arahkan ke tab Composer. Pilih method GET untuk mengambil
dari dari REST Services, kemudian tambahkan alamat berikut
http://actservices.azurewebsites.net/api/TodoItem/. Kemudian tekan tombol Execute.
3. Pada jendela bagian kiri akan ditampilkan hasil-nya. Status yang tertera adalah 200 OK yang
menunjukan bahwa request ke server berhasil.
4. Data JSON yang dikembalikan dapat dilihat pada gambar dibawah ini.
56
#PRACTICE 5.3 MENGAKSES REST SERVICES DARI XAMARIN FORMS.

1. Buat project Xamarin Forms baru dengan nama TodoREST.
2. Klik kanan pada solution kemudian pilih Manage Nuget Package for Solution. Kemudian
tambahkan library Newtonsoft.Json. Library ini digunakan untuk kebutuhan manipulasi file
json seperti serialisasi dan deserialisasi.
3. Pada project .NET Standard, tambahkan class dengan nama TodoItem.cs. Class ini akan
digunakan untuk membuat objek yang dapat menampung data dari REST Services. Tambahkan
kode c# berikut:
namespace TodoREST
{
public class TodoItem
{
public string ID { get; set; }
57
public string Name { get; set; }

public string Notes { get; set; }
public bool Done { get; set; }
}
}
4. Pada project .NET Standard, tambahkan juga class dengan nama Constants.cs untuk
menyimpan alamat url dari REST Services.
public static class Constants

{
public static string RestUrl =
"http://actservices.azurewebsites.net/";
}
5. Pada project .NET Standard, tambahkan foder dengan nama Data. Kemudian pada folder
tersebut tambahkan interface baru dengan nama IRestService.cs. Interface ini berisi method-
method yang akan digunakan untuk menampilkan, menambahkan, mengedit, dan mendelete
data.
using System.Threading.Tasks;
using TodoREST.Models;
namespace TodoREST.Data
{
public interface IRestService
{
Task<List<TodoItem>> RefreshDataAsync();
Task SaveTodoItemAsync(TodoItem item, bool isNewItem);
Task DeleteTodoItemAsync(string id);
}
}
6. Pada folder Data, tambahkan class dengan nama RestServices.cs. Class ini digunakan untuk
mengakses REST Services menggunakan class HttpClient dan menampung datanya kedalam
objek koleksi yang sudah disediakan.
namespace TodoREST.Data
{
public class RestServices : IRestServices
{
private HttpClient client;
public List<TodoItem> Items { get; private set; }
public RestServices()
{
client = new HttpClient();
}
public async Task DeleteTodoItemAsync(string id)

{
var uri = new Uri(String.Format("{0}/{1}", Constants.RestUrl +
"api/TodoItem", id));
try
{
var response = await client.DeleteAsync(uri);
if (response.IsSuccessStatusCode)
{
58
Debug.WriteLine(@"TodoItem berhasil didelete.");

}
}
{
Debug.WriteLine(@"Kesalahan {0}", ex.Message);
}
}
public async Task<List<TodoItem>> RefreshDataAsync()

{
Items = new List<TodoItem>();
var uri = new Uri(Constants.RestUrl + "api/TodoItem");
try
{
var response = await client.GetAsync(uri);
{
var content = await response.Content.ReadAsStringAsync();
Items =
JsonConvert.DeserializeObject<List<TodoItem>>(content);
}
}
{
Debug.WriteLine("Error: " + ex.Message);
}
return Items;
}
public async Task SaveTodoItemAsync(TodoItem item, bool isNewItem = false)

{
var uriPost = new Uri(Constants.RestUrl+ "api/TodoItem");
var uriPut = new Uri(String.Format("{0}/{1}", Constants.RestUrl +
"api/TodoItem", item.ID));
try
{
var json = JsonConvert.SerializeObject(item);
var content = new StringContent(json, Encoding.UTF8,
"application/json");
HttpResponseMessage response = null;
if (isNewItem)
{
response = await client.PostAsync(uriPost, content);
}
else
{
response = await client.PutAsync(uriPut, content);
}
{
Debug.WriteLine(@"TodoItem berhasil disimpan.");
}
}
{
Debug.WriteLine(@"Kesalahan {0}", ex.Message);
59
}
}
}
}
7. Class diatas berisi method-method untuk mengakses REST Services yang digunakan untuk
menampilkan, menambah, mengedit, dan mendelete data.
8. Untuk mengakses class RestServices dengan lebih mudah maka buat kode berikut pada class
App.xaml.cs.
namespace TodoREST
{
public partial class App : Application
{
private static IRestServices empServices;
public static IRestServices EmpServices
{
get
{
if (empServices == null)
{
empServices = new RestServices();
}
return empServices;
}
}
public App()
{----}
}
}
9. Langkah selanjutnya adalah menampilkan data yang sudah diambil dari REST Services. Untuk
itu pada project .NET Standard tambahkan halaman xaml dengan nama TodoListPage.xaml.
Halaman ini digunakan untuk menampilkan informasi todolist pada kontrol ListView.
x:Class="TodoREST.TodoListPage" Title="TodoList Page">
<ContentPage.ToolbarItems>
<ToolbarItem Text="+" Clicked="OnAddItemClicked">>
<ToolbarItem.Icon>
<OnPlatform x:TypeArguments="FileImageSource" Android="plus.png" />
</ToolbarItem.Icon>
</ToolbarItem>
</ContentPage.ToolbarItems>
<ListView x:Name="listView" ItemSelected="OnItemSelected"
IsPullToRefreshEnabled="True" Refreshing="ListView_Refreshing" >
<DataTemplate>
<ViewCell>
<StackLayout Padding="20,0,0,0"
HorizontalOptions="StartAndExpand" Orientation="Horizontal">
VerticalTextAlignment="Center" />
<Image Source="check.png" IsVisible="{Binding Done}" />
</StackLayout>
</ViewCell>
</DataTemplate>
60
</ListView>
</ContentPage>
10. Tambahkan gambar plus.png dan icon.png pada project Android (folder Resources\drawable).
Dengan klik kanan pada drawable > Add > Existing Item... > kemudian cari gambar icon
11. Kemudian tambahkan kode berikut pada file TodoListPage.xaml.cs.
namespace TodoREST
{
public partial class TodoListPage : ContentPage
{
public TodoListPage()
{
}
private void ListView_Refreshing(object sender, EventArgs e)

{
OnAppearing();
listView.IsRefreshing = false;
}
protected async override void OnAppearing()

{
base.OnAppearing();
listView.ItemsSource = await App.EmpServices.RefreshDataAsync();
}
void OnAddItemClicked(object sender, EventArgs e)

{
var todoItem = new TodoItem()
{
ID = Guid.NewGuid().ToString()
};
var todoPage = new TodoItemPage(true);
todoPage.BindingContext = todoItem;
Navigation.PushAsync(todoPage);
}
void OnItemSelected(object sender, SelectedItemChangedEventArgs e)

{
var todoItem = e.SelectedItem as TodoItem;
var todoPage = new TodoItemPage();
todoPage.BindingContext = todoItem;
Navigation.PushAsync(todoPage);
}
}
}
12. Kode diatas berisi method yang digunakan untuk menampilkan data todo list kedalam kontrol
ListView, dan menambahkan event ketika list tersebut dipilih.
13. Tambahkan halaman xaml baru dengan nama TodoItemPage.xaml. Halaman ini digunakan
untuk menampilkan detail todo, mengedit, dan mendelete data.
x:Class="TodoREST.TodoItemPage" Title="Detail Todo">
61
<StackLayout VerticalOptions="StartAndExpand">
<Label Text="Name" />
<Entry x:Name="nameEntry" Text="{Binding Name}" Placeholder="task
name" />
<Label Text="Notes" />
<Entry x:Name="notesEntry" Text="{Binding Notes}" />
<Label Text="Done" />
<Switch x:Name="doneSwitch" IsToggled="{Binding Done}" />
<Button Text="Save" Clicked="OnSaveActivated" />
<Button Text="Delete" Clicked="OnDeleteActivated" />
<Button Text="Cancel" Clicked="OnCancelActivated" />
</StackLayout>
</ContentPage>
14. Tambahkan kode berikut pada file TodoItemPage.xaml.cs.
namespace TodoREST
{
public partial class TodoItemPage : ContentPage
{
bool isNewItem;
public TodoItemPage(bool isNew = false)
{
isNewItem = isNew;
}
async void OnSaveActivated(object sender, EventArgs e)

{
var todoItem = (TodoItem)BindingContext;
await App.EmpServices.SaveTodoItemAsync(todoItem, isNewItem);
}
async void OnDeleteActivated(object sender, EventArgs e)

{
var todoItem = (TodoItem)BindingContext;
await App.EmpServices.DeleteTodoItemAsync(todoItem.ID);
}
void OnCancelActivated(object sender, EventArgs e)

{
Navigation.PopAsync();
}
}
}
15. Tekan tombol CTRL+F5 untuk menjalankan kode tersebut pada emulator.
62
63
BAB 7 – ANDROID DEPLOYMENT (MEMBUAT APK)
CARA MEMBUAT APK PADA XAMARIN FORM

1. Klik kanan pada project Android, kemudian pilih Archive.
2. Setelah langkah ini dikerjakan maka Visual Studio akan menyiapkan semua file yang nanti
akan dikompilasi menjadi file .apk.
64
3. Setelah selesai pilih tombol Distribute untuk mendistribusikan .apk yang akan dibuat. Ada
dua pilihan yaitu Ad Hoc dan Google Play. Pilih Ad Hoc untuk mendistribusikan .apk tanpa
melalui google play.
4. Anda akan diminta untuk membuat sertifikat Android Keystore, masukan data yang
dibutuhkan seperti gambar dibawah ini, kemudian tekan tombol Create.
5. Setelah proses signing identity pada aplikasi yang kita buat, pilih tombol Save As.
65
6. Beri nama .apk tersebut, misalnya modul2.modul2
7. Anda akan diminta untuk memasukan password yang sebelumnya sudah anda buat ketika
membuat Android Keystore.
66
8. Anda dapat melihat bahwa kita sudah berhasil membuat file .apk yang siap untuk
didistribusikan.
67
BAB 8 - XAMARIN ESSENTIALS
Xamarin Essentials menyediakan satu API yang dapatbekerja dengan IOS, Android, dan aplikasi UWP
yang dapat diakses dari satu share code. Xamarin Essentials menyediakan banyak feature yang dapat
digunakan seperti:
• Accelerometer • Email • Phone Dialer

• App Information • File System Helpers • Platform Extensions
• Barometer • Flashlight • Preferences
• Battery • Geocoding • Secure Storage
• Clipboard • Geolocation • Share
• Color Converters • Gyroscope • SMS
• Compass • Launcher • Text-to-Speech
• Connectivity • Magnetometer • Unit Converters
• Detect Shake • MainThread • Version Tracking
• Device Display • Maps • Vibrate
Information • Open Browser
• Device Information • Orientation Sensor
PRACTICE 8.1 INSTALASI XAMARIN ESSENTIAL

1. Buat project blank Xamarin Forms dengan nama SampleXamarinEssentials.
2. Kemudian klik kanan pada project Xamarin Forms kemudian pilih Nuget Package
3. Kemudian cari Xamarin Essentials. Jika anda menggunakan Visual Studio 2019, maka Xamarin
Essentials sudah terpasang secara default ketika anda membuat project baru.
68
Practice 8.2 Xamarin Essentials: App Information
1. Dengan menggunakan API ini anda dapat mengetahui informasi dari aplikasi.
2. Anda dapat mengambil informasi yang ada oada AndroidManifest.xml seperti:
• Build – android:versionCode in manifest node
• Name - android:label in the application node
• PackageName: package in the manifest node
• VersionString – android:versionName in the application node
3. Pada project SampleXamarinEssentials tambahkan halaman xaml baru dengan nama
XEAppInformation.
4. Kemudian tambahkan xaml kode berikut:
<StackLayout>
<Button x:Name="btnAppName" Text="Nama Aplikasi"
Clicked="btnAppName_Clicked" />
<Button x:Name="btnPackageName" Text="Nama Package"
Clicked="btnPackageName_Clicked" />
<Button x:Name="btnVersion" Text="Nama Versi"
Clicked="btnVersion_Clicked" />
<Button x:Name="btnBuildNum" Text="Build Number"
Clicked="btnBuildNum_Clicked" />
</StackLayout>
5. Kemudian tambahkan kode berikut untuk menampilkan informasi aplikasi.
private async void btnAppName_Clicked(object sender, EventArgs e)

{
var appName = AppInfo.Name;
await DisplayAlert("Keterangan", $"Nama Aplikasi: {appName}", "OK");
}
private async void btnPackageName_Clicked(object sender, EventArgs e)

{
await DisplayAlert("Keterangan", $"Nama Package:
{AppInfo.PackageName}", "OK");
}
private async void btnVersion_Clicked(object sender, EventArgs e)

{
await DisplayAlert("Keterangan", $"Nama Versi:
{AppInfo.VersionString}", "OK");
}
private async void btnBuildNum_Clicked(object sender, EventArgs e)

{
await DisplayAlert("Keterangan", $"Build Number:
{AppInfo.BuildString}", "OK");
}
6. Jalankan aplikasi pada devices/emulator dengan menekan tombol F5, maka akan dihasilkan
tampilan sebagai berikut:
69
PRACTICE 8.3 XAMARIN ESSENTIALS: CHECK BATTERY STATUS

1. Anda juga dapat mengambil informasi battery status menggunakan API Xamarin Essentials.
Informasi dati battery yang dapat diambil adalah:
• Battery dalam keadaan di charging
• Battery dalam keadaan Full
• Battery dalam keadaan tidak dicharging
• Power pada device dalam keadaan dicharge atau menggunakan battery
• Deteksi bila battery masuk dalam keadaan Energy Saver.
2. Pada android project tambahkan kode berikut untuk mengijinkan aplikasi untuk mengakses
battery status. Buka file AssemblyInfo.cs pada Properties untuk menambahkan konfigurasi
berikut ini:
[assembly: UsesPermission(Android.Manifest.Permission.BatteryStats)]
3. Buat halaman dengan nama XEBatteryInfo, kemudian tambahkan kode berikut:
<StackLayout>
<Button x:Name="btnBatteryStatus" Text="Cek Status"
Clicked="btnBatteryStatus_Clicked" />
</StackLayout>
4. Kemudian tambahkan kode berikut ini:
public XEBatteryInfo()
{
Battery.BatteryInfoChanged += Battery_BatteryInfoChanged;
Battery.EnergySaverStatusChanged += Battery_EnergySaverStatusChanged;
}
70
private async void Battery_EnergySaverStatusChanged(object sender,

EnergySaverStatusChangedEventArgs e)
{
//bisa on,off, atau Unknown
var status = e.EnergySaverStatus;
await DisplayAlert("Keterangan",$"Energy Status:{status}","OK");
}
private async void Battery_BatteryInfoChanged(object sender,

BatteryInfoChangedEventArgs e)
{
var level = e.ChargeLevel;
var state = e.State;
var source = e.PowerSource;
await DisplayAlert("OK",$"Reading: Level: {level}, State: {state}, Source:
{source}","OK");
}
private async void btnBatteryStatus_Clicked(object sender, EventArgs e)

{
var level = Battery.ChargeLevel; // returns 0.0 to 1.0 or 1.0 when on AC
or no battery.
var state = Battery.State;

var keterangan = string.Empty;
switch (state)
{
case BatteryState.Charging:
keterangan += "Battery di Charge\n";
break;
case BatteryState.Full:
keterangan += "Battery sudah Penuh\n";
break;
case BatteryState.Discharging:
case BatteryState.NotCharging:
keterangan += "Battery tidak di charge\n";
break;
case BatteryState.NotPresent:
case BatteryState.Unknown:
keterangan += "Status battery tidak ditemukan\n";
break;
}
var source = Battery.PowerSource;
switch (source)
{
case BatteryPowerSource.Battery:
keterangan += "Menggunakan Battery\n";
break;
case BatteryPowerSource.AC:
keterangan += "Menggunakan AC Power\n";
break;
case BatteryPowerSource.Usb:
keterangan += "Charge menggunakan Usb\n";
break;
case BatteryPowerSource.Wireless:
keterangan += "Charge menggunakan Wireless\n";
break;
case BatteryPowerSource.Unknown:
keterangan += "Charge tidak diketahui\n";
break;
71
await DisplayAlert("Keterangan", keterangan, "OK");

}
}
5. Kemudian jalankan aplikasi pada device untuk melihat hasilnya
PRACTICE 8.4 XAMARIN ESSENTIALS: MENGGUNAKAN GEOLOCATION

Geolocation API digunakan untuk mengambil lokasi dari devices berupa informasi koordinat (latitude,
dan longitude).
1. Buat halaman baru dengan nama XEGeolocation, kemudian tambahkan xaml berikut:
<StackLayout>
<Button x:Name="btnGeolocation" Text="Geoloation" />
</StackLayout>
2. Tambahkan permission berikut pada Android Project. Tambahkan kode berikut pada file
AssemblyInfo.cs.
[assembly: UsesPermission(Android.Manifest.Permission.AccessCoarseLocation)]
[assembly: UsesPermission(Android.Manifest.Permission.AccessFineLocation)]
[assembly: UsesFeature("android.hardware.location", Required = false)]
[assembly: UsesFeature("android.hardware.location.gps", Required = false)]
[assembly: UsesFeature("android.hardware.location.network", Required = false)]
3. Kemudian tambahkan kode berikut untuk mengambil informasi geolocation.
private async void btnGeolocation_Clicked(object sender, EventArgs e)

{
try
{
var request = new GeolocationRequest(GeolocationAccuracy.Medium);
var location = await Geolocation.GetLocationAsync(request);
if (location != null)
{
await DisplayAlert("Keterangan",
$"Latitude: {location.Latitude}, Longitude:
{location.Longitude}, Altitude: {location.Altitude}","OK");
}
}
catch (FeatureNotSupportedException fnsEx)
{
await DisplayAlert("Error", fnsEx.Message, "OK");
}
72
catch (FeatureNotEnabledException fneEx)

{
await DisplayAlert("Error", fneEx.Message, "OK");
}
catch (PermissionException pEx)
{
await DisplayAlert("Error", pEx.Message, "OK");
}
{
await DisplayAlert("Error", ex.Message, "OK");
}
}
4. Kemudian jalankan aplikasinya, jika anda belum mengaktifkan fitur lokasi pada devices, maka
akan ditampilkan notifikasi sebagai berikut:
5. Agar aplikasi dapat digunakan aktifkan fitur location/GPS pada devices. Maka akan
ditampilkan informasi geolocationnya.
PRACTICE 8.5 XAMARIN ESSENTIALS: MENGGUNAKAN GEOCODING

Geocoding API menyediakan informasi geocode placemark (alamat tertentu) menjadi koordinat
latitude dan longitude, dan sebaliknya koordinat menjadi placemark (reverse geocode coordinates).
1. Buat halaman baru dengan nama XEGeocoding dan tambahkan kode xaml berikut:
<StackLayout>
<Entry x:Name="txtAlamat" Placeholder="Masukan Alamat" />
<Button x:Name="btnGeocoding" Text="Geocoding"
Clicked="btnGeocoding_Clicked" />
</StackLayout>
73
2. Kemudian tambahkan code behind berikut untuk menampilkan geocode.
private async void btnGeocoding_Clicked(object sender, EventArgs e)

{
try
{
var address = txtAlamat.Text;
var locations = await Geocoding.GetLocationsAsync(address);
var location = locations?.FirstOrDefault();
if (location != null)
{
await DisplayAlert("Keterangan",
$"Latitude: {location.Latitude}, Longitude:
{location.Longitude}, Altitude: {location.Altitude}", "OK");
}
}
{
}
{
}
3. Kemudian jalankan aplikasi dan ketikan alamat tertentu, maka akan ditampilkan posisi
latitude dan longitude dari alamat tersebut.
4. Anda juga dapat melakukan reverse geocoding dari koordinat latitude dan longitude.
5. Tambahkan entry pada halaman xaml untuk memasukan data latitude dan longitude.
private async void btnReverseGeo_Clicked(object sender, EventArgs e)

{
try
{
double lat = Convert.ToDouble(txtLatitude.Text);
double lon = Convert.ToDouble(txtLongitude.Text);
var placemarks = await Geocoding.GetPlacemarksAsync(lat, lon);
74
var placemark = placemarks?.FirstOrDefault();

if (placemark != null)
{
var geocodeAddress =
$"AdminArea: {placemark.AdminArea}\n" +
$"CountryCode: {placemark.CountryCode}\n" +
$"CountryName: {placemark.CountryName}\n" +
$"FeatureName: {placemark.FeatureName}\n" +
$"Locality: {placemark.Locality}\n" +
$"PostalCode: {placemark.PostalCode}\n" +
$"SubAdminArea: {placemark.SubAdminArea}\n" +
$"SubLocality: {placemark.SubLocality}\n" +
$"SubThoroughfare: {placemark.SubThoroughfare}\n" +
$"Thoroughfare: {placemark.Thoroughfare}\n";
await DisplayAlert("Keterangan",geocodeAddress,"OK");
}
}
{
}
{
}
}
PRACTICE 8.6 XAMARIN ESSENTIALS: MENGGUNAKAN MAP

Map API dapat digunakan untuk menampilkan posisi/lokasi tertentu kedalam google map.
1. Buat halaman baru dengan nama XEMap. Kemudian tambahkan kode xaml berikut:
<StackLayout>
<Button x:Name="btnMap" Text="Map" Clicked="btnMap_Clicked" />
<Button x:Name="btnPlacemark" Text="Placemark"
Clicked="btnPlacemark_Clicked" />
</StackLayout>
2. Tambahkan kode berikut ketika tombol Map ditekan.
75
public async Task NavigateToBuilding25()

{
var location = new Location(47.645160, -122.1306032);
var options = new MapLaunchOptions { Name = "Microsoft Building 25" };
await Map.OpenAsync(location, options);

}
private async void btnMap_Clicked(object sender, EventArgs e)

{
await NavigateToBuilding25();
}
3. Jalankan aplikasi untuk membuka map sesuai lokasi yang telah ditentukan.
4. Anda juga dapat memasukan informasi placemark yang lebih lengkap sebagai berikut:
private async void btnPlacemark_Clicked(object sender, EventArgs e)

{
var placemark = new Placemark
{
CountryName = "United States",
AdminArea = "WA",
Thoroughfare = "Microsoft Building 25",
Locality = "Redmond"
};
var options = new MapLaunchOptions { Name = "Microsoft Building 25" };
await Map.OpenAsync(placemark, options);

}
76

Xamarin Form Ebook 2020

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Xamarin Form Ebook 2020

Diunggah oleh

Hak Cipta:

Format Tersedia

Cross Platform Mobile Develpment with Xamarin & Visual Studio 2019

Yogyakarta, 21 Februari 2020

Erick Kurniawan & M. Reza Faisal

BAB 1 – PENGENALAN XAMARIN FORM

• Xamarin for Android

Gambar dibawah ini menunjukan level pembagian kode pada Xamarin.

CARA INSTALL XAMARIN FORMS

• Download Visual Studio 2019 Community: https://visualstudio.microsoft.com/downloads/

MEMULAI MEMBUAT PROJECT XAMARIN FORM

MENJALANKAN APLIKASI ANDROID

Untuk instalasi intel HAXM dapat didownload di https://software.intel.com/en-us/articles/intel-

MENJALANKAN APLIKASI XAMARIN FORMS PADA IOS

Maka akan muncul tampilan sebagai berikut:

• Komputer Mac yang menjalankan OS X dengan versi terbaru.

MENJALANKAN APLIKASI XAMARIN FORMS PADA UWP/WIN 10.

BAB 2 – DESAIN TAMPILAN MENGGUNAKAN LAYOUT

APPLICATION LIFECYCLE PADA XAMARIN FORMS

XAMARIN FORMS UI (USER INTERFACE)

• Basic – fundamental views

• StackLayout: mengatur kontrol secara horisontal atau vertikal.

PRACTICE #2.1 PENGGUNAAN STACKLAYOUT

MainPage = new SampleStackLayout();

PRACTICE #2.2 CONTOH PENGGUNAAN ABSOLUTE LAYOUT

PRACTICE #2.3 MENGGUNAKAN RELATIVE LAYOUT

PRACTICE #2.4 MENGGUNAKAN GRIDLAYOUT

TASK #2.1 MENGGUNAKAN SCROLL VIEW PADA XAMARIN FORM

public partial class MainPage : ContentPage

private void BtnHello_Clicked(object sender, EventArgs e)

4. Tekan tombol F5 untuk menjalankan aplikasi pada emulator.

TASK #2.2 KALKULATOR SEDERHANA

public partial class KalkulatorPage : ContentPage

private void Btn_Clicked(object sender, EventArgs e)

4. Jalankan program diatas pada emulator dengan menekan tombol Ctrl+F5.

• Pada Android: simpan file gambar pada Resources/drawable folder.

TASK #2.3 MENGGUNAKAN IMAGE VIEW

<Image Source="monkey1.png" Aspect="AspectFit" HorizontalOptions="Center"

<Image Source="monkey1.png" Aspect="AspectFit"

4. Kemudian tambahkan code behind sebagai berikut:

async private void TapGestureRecognizer_Tapped(object sender, EventArgs e)

5. Jalankan aplikasinya, maka akan ditampilkan hasil sebagai berikut:

Task #2.4 Menggunakan Flex Layout

<Label Text="FlexLayout in Action"

<Image Source="monkey1.png" />

<Button Text="Do-Nothing Button" />

<Label Text="Another Label" />

Task #2.5 Menggunakan Flex Layout untuk Wrapping Items

1. Buat xaml page dengan nama FlexWrapping.xaml

public partial class FlexWrapping : ContentPage

async void LoadBitmapCollection()

// Convert to a Stream object

// Create an Image object for each bitmap

4. Tekan tombol F5 untuk menampilkan hasilnya:

BAB 3 – MENAMPILKAN DATA PADA LISTVIEW

BINDING DATA YANG BERTIPE LIST OF STRING

PRACTICE #3.1 MENAMPILKAN DATA BERTIPE LIST OF STRING

<ListView x:Name="listView" />

//untuk mengambil nilai item ketika diklik pada baris

6. Tekan F5 untuk menjalankan program pada emulator.

PRACTICE #3.2 MENAMPILKAN DATA DARI OBJEK DATA MODEL

public class ListItem

<?xml version="1.0" encoding="utf-8" ?>

public partial class BindingToDataModel : ContentPage

public class ListViewDataModelViewModel : BindableObject