Tugas 5 PBKK - Membuat Mobile Application Menggunakan Xamarin

 Membuat Mobile Application Menggunakan Xamarin

Sitti Chofifah - 05111840000039 - PBKK B 

Berikut beberapa langkah yang harus di lakukan untuk membuat mobile apps menggunakan Xamarin : 

1. Membuat project di visual studio dan pilih template mobile app xamarin.forms

 

 

2. Selanjutnya konfigurasi project yang sebelumnya kita buat, setelah itu pilih blank template untuk project kita

 

 

3. Akan muncul halaman seperti berikut ini setelah menekan tombol create yang ada di step nomor 2

 

 

4. Click tombol dengan logo play berwarna hijau yang bertuliskan Android Emulator untuk installing android emulator

5. Setelah android emulator berhasil ter-install maka akan muncul tampilan emulator seperti ini

 

 

 

6. Sekarang saatnya kita mengubah UI pada project ini sesuai kehendak kita 

<?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="FirstProjectXamarin.MainPage">
 
    <StackLayout>
        <Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
            <Label Text="Welcome to My First Project using Xamarin!" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
        </Frame>
        <Label Text="Tugas 5 PBKK" FontSize="Large" HorizontalTextAlignment="Center" Padding="30,10,30,10" FontAttributes="Bold"/>
        <Label Text="Nama" FontSize="Body" Padding="30,0,30,0" FontAttributes="Bold"/>
        <Label Text="Sitti Chofifah" FontSize="Body" Padding="30,0,30,0" FontAttributes="None"/>
        <Label Text="NRP" FontSize="Body" Padding="30,0,30,0" FontAttributes="Bold"/>
        <Label Text="05111840000039" FontSize="Body" Padding="30,0,30,0" FontAttributes="None"/>
        <Label Text="Kelas" FontSize="Body" Padding="30,0,30,0" FontAttributes="Bold"/>
        <Label Text="PBKK - B" FontSize="Body" Padding="30,0,30,0" FontAttributes="None"/>
    </StackLayout>
 
</ContentPage>  

7. Untuk menambahkan button , maka tambahkan code ini

<?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="FirstProjectXamarin.MainPage">
 
    <StackLayout>
        <Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
            <Label Text="Welcome to My First Project using Xamarin!" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
        </Frame> 

        ... 

        <Button Text="Click me !" Margin="20,20,20,20" BackgroundColor="CornflowerBlue" FontAttributes="Bold" TextColor="White" Clicked="Button_Clicked"/>
        <Label FontSize="16" Padding="30,24,30,0"/>
    </StackLayout>
 
</ContentPage>  

8. Tampilannya akan seperti ini

9. Agar button CLICK ME! dapat berfungsi maka kita harus menambahkan fungsi dengan code seperti berikut

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
 
namespace FirstProjectXamarin
{
    public partial class MainPage : ContentPage
    {
        int count = 0;
        public MainPage()
        {
            InitializeComponent();
        }
 
        private void Button_Clicked(object sender, EventArgs e)
        {
            count++;
            ((Button)sender).Text = string.Format("Clicked {0} times", count);
        }
    }
}
  

10.Mobile apps kita sudah dapat dijalankan seperti berikut