Apa itu Xamarin Community Toolkit

Ketika bekerja dengan beberapa proyek Xamarin Forms, pengembang biasanya akan mencoba untuk menggunakan kembali elemen yang digunakan pada proyek sebelumnya. Elemen yang biasa digunakan kembali seperti value converter, custom view, dan behaviour. Untuk menyederhanakan kebutuhan tersebut Microsoft menawarkan library bernama Xamarin Community Toolkit.

Menggunakan Xamarin Community Toolkit

Anda dapat memperoleh Xamarin Community Toolkit melalui NuGet Package Manager. Berikut adalah cara untuk menambahkan Xamarin Conmmunity Toolkit menggunakan Visual Studio 2022.

Anda dapat mengecek file .csproj untuk memastikan bahwa Xamarin Community Toolkit sudah ditambahkan.

Anda juga dapat melihat dokumentasi dan contoh implementasi dari Xamarin Commonity Toolkit pada tautan berikut ini.

Pada bab ini akan dibahas beberapa contoh elemen dari Xamarin Community Toolkit yang sering digunakan dalam membuat aplikasi.

Bekerja dengan View

Xamarin Community Toolkit menyediakan beberapa view yang dapat melengkapi view bawaan dari Xamarin Forms. Berikut ini adalah beberapa view yang ada pada Xamarin Community Toolkit

Pada contoh dibawah ini dijelaskan beberapa layout baru yang didukung di Xamarin Community Toolkit. Untuk lebih lengkapnya anda dapat melihat dokumentasinya.

Menggunakan DockingLayout

Pada contoh berikut akan ditunjukan cara untuk menggunakan docking layout.

        <xct:DockLayout LastChildFill="False">
            <Button xct:DockLayout.Dock="Top" Text="Top" HeightRequest="50"/>
            <Button xct:DockLayout.Dock="Bottom" Text="Bottom" HeightRequest="50"/>
            <Button xct:DockLayout.Dock="Left" Text="Left" WidthRequest="60"/>
            <Button xct:DockLayout.Dock="Left" Text="Left" WidthRequest="60"/>
            <Button xct:DockLayout.Dock="Right" Text="Right" WidthRequest="80"/>
            <Button xct:DockLayout.Dock="Right" Text="Right" WidthRequest="80"/>
        </xct:DockLayout>

Hasilnya dapat dilihat sebagai berikut:

Menggunakan UniformGrid

UniformGrid dapat digunakan untuk mengatur layout dalam bentuk Grid yang ukuran kolom dan barisnya sama persis.

        <xct:UniformGrid>
            <BoxView Color="Red" />
            <BoxView Color="Yellow" />
            <BoxView Color="Orange" />
            <BoxView Color="Purple" />
            <BoxView Color="Blue" />
            <BoxView Color="Green" />
            <BoxView Color="LightGreen" />
            <BoxView Color="Gray" />
            <BoxView Color="Pink" />
        </xct:UniformGrid>

Hasilnya dapat dilihat sebagai berikut:

Menggunakan Camera View

CameraView kontrol memungkinkan pengguna untuk menampilkan preview  keluaran kamera. Selain itu CameraView juga dapat mengambil foto atau merekam video. CameraView juga menawarkan opsi yang anda harapkan untuk mendukung pengambilan foto dan perekaman video seperti menyalakan atau mematikan flash, menyimpan media yang diambil ke file. Berikut adalah kontrol yang dapat digunakan.

Pada contoh dibawah ini kita dapat mengcapture gambar, dan merekam video melalui kamera.

        <ScrollView>
            <Grid RowDefinitions="300, Auto, *">
                <Grid ColumnDefinitions="*, *" Grid.Row="0">
                    <xct:CameraView
                    Grid.Column="0"
                    x:Name="cameraView"
                    CaptureMode="Photo"
                    FlashMode="Off"
                    HorizontalOptions="FillAndExpand"
                    MediaCaptured="CameraView_MediaCaptured"
                    OnAvailable="CameraView_OnAvailable"
                    VerticalOptions="FillAndExpand" />
                    <Label
                    Grid.Column="0"
                    Text="Camera"
                    HorizontalTextAlignment="Center"
                    HorizontalOptions="FillAndExpand"
                    VerticalOptions="End" />

                    <Image
                    Grid.Column="1"
                    x:Name="previewPicture"
                    Aspect="AspectFit"
                    BackgroundColor="LightGray" />

                    <xct:MediaElement
                    Grid.Column="1"
                    x:Name="previewVideo"
                    Aspect="AspectFit"
                    BackgroundColor="LightGray"
                    IsVisible="false"/>
                    <Label
                    Grid.Column="1"
                    Text="Result"
                    HorizontalTextAlignment="Center"
                    HorizontalOptions="FillAndExpand"
                    VerticalOptions="End" />
                </Grid>

                <StackLayout Grid.Row="1" Orientation="Horizontal">
                    <Label x:Name="zoomLabel" />
                    <Slider
                    x:Name="zoomSlider"
                    Margin="5,0"
                    IsEnabled="False"
                    Maximum="10"
                    Minimum="1"
                    HorizontalOptions="FillAndExpand"
                    ValueChanged="ZoomSlider_ValueChanged"
                    Value="1" />
                </StackLayout>

                <StackLayout Grid.Row="2">
                    <Grid ColumnDefinitions="*, *" RowDefinitions="*,*">
                        <StackLayout
                        Grid.Row="0"
                        Grid.Column="0"
                        Margin="5"
                        Orientation="Horizontal">
                            <Switch
                            Margin="0,0,5,0"
                            IsToggled="False"
                            Toggled="VideoSwitch_Toggled" />
                            <Label Text="Video" />
                        </StackLayout>
                        <StackLayout
                        Grid.Row="1"
                        Grid.Column="0"
                        Margin="5"
                        Orientation="Horizontal">
                            <Switch
                            Margin="0,0,5,0"
                            IsToggled="False"
                            Toggled="FrontCameraSwitch_Toggled" />
                            <Label Text="Front camera" />
                        </StackLayout>
                        <StackLayout
                        Grid.Row="0"
                        Grid.Column="1"
                        Margin="5"
                        Orientation="Horizontal">
                            <Switch
                            Margin="0,0,5,0"
                            IsToggled="False"
                            Toggled="FlashSwitch_Toggled" />
                            <Label Text="Flash" />
                        </StackLayout>
                    </Grid>

                    <Button
                    x:Name="doCameraThings"
                    Clicked="DoCameraThings_Clicked"
                    IsEnabled="False"
                    Text="Snap picture" />

                </StackLayout>
            </Grid>
        </ScrollView>

Tambahkan juga kode c# berikut:

public partial class SampleCameraView : ContentPage
    {
        public SampleCameraView()
        {
            InitializeComponent();
			zoomLabel.Text = string.Format("Zoom: {0}", zoomSlider.Value);

		}

	void ZoomSlider_ValueChanged(object? sender, ValueChangedEventArgs e)
		{
			cameraView.Zoom = (float)zoomSlider.Value;
			zoomLabel.Text = string.Format("Zoom: {0}", Math.Round(zoomSlider.Value));
		}

		void VideoSwitch_Toggled(object? sender, ToggledEventArgs e)
		{
			var captureVideo = e.Value;

			if (captureVideo)
				cameraView.CaptureMode = CameraCaptureMode.Video;
			else
				cameraView.CaptureMode = CameraCaptureMode.Photo;

			previewPicture.IsVisible = !captureVideo;

			doCameraThings.Text = e.Value ? "Start Recording"
				: "Snap Picture";
		}

		
		void FrontCameraSwitch_Toggled(object? sender, ToggledEventArgs e)
			=> cameraView.CameraOptions = e.Value ? CameraOptions.Front : CameraOptions.Back;

		
		void FlashSwitch_Toggled(object? sender, ToggledEventArgs e)
			=> cameraView.FlashMode = e.Value ? CameraFlashMode.On : CameraFlashMode.Off;

		void DoCameraThings_Clicked(object? sender, EventArgs e)
		{
			cameraView.Shutter();
			doCameraThings.Text = cameraView.CaptureMode == CameraCaptureMode.Video
				? "Stop Recording"
				: "Snap Picture";
		}

		void CameraView_OnAvailable(object? sender, bool e)
		{
			if (e)
			{
				zoomSlider.Value = cameraView.Zoom;
				var max = cameraView.MaxZoom;
				if (max > zoomSlider.Minimum && max > zoomSlider.Value)
					zoomSlider.Maximum = max;
				else
					zoomSlider.Maximum = zoomSlider.Minimum + 1; // if max == min throws exception
			}

			doCameraThings.IsEnabled = e;
			zoomSlider.IsEnabled = e;
		}

	void CameraView_MediaCaptured(object? sender, MediaCapturedEventArgs e)
		{
			switch (cameraView.CaptureMode)
			{
				default:
				case CameraCaptureMode.Default:
				case CameraCaptureMode.Photo:
					previewVideo.IsVisible = false;
					previewPicture.IsVisible = true;
					previewPicture.Rotation = e.Rotation;
					previewPicture.Source = e.Image;
					doCameraThings.Text = "Snap Picture";
					break;
				case CameraCaptureMode.Video:
					previewPicture.IsVisible = false;
					previewVideo.IsVisible = true;
					previewVideo.Source = e.Video;
				doCameraThings.Text = "Start Recording";
					break;
			}
		}
	} 

Hasil dari program diatas dapat dilihat pada gambar dibawah ini.

Komponen Reusable Converter

Pada Xamarin.Forms terutama pada platform UI berbasis XAML, terjadi pengikatan data antara properti sumber dan properti target. Jika keduanya bertipe sama, data-binding dapat dilakukan. Jika properti memiliki tipe yang berbeda, misalnya saat perlu mengikat/binding Image.Source properti ke gambar yang diwakili oleh string Base64, mekanisme pengikatan data memerlukan konverter nilai yang sesuai yang mengubah string Base64 menjadi tipe ImageSource. Solusinya adalah menggunakan konverter nilai, yang merupakan objek yang mengimplementasikan IvalueConverter.

Adapun Reusable Converter yang dapat digunakan pada Xamarin Community Toolkit adalah sebagai berikut:

Validasi Data dengan Reusable Behaviour

Pada Xamarin Forms, kita dapat menambahkan behaviour yang bertujuan untuk menambahkan fungsionalitas ke tampilan antarmuka pengguna tanpa harus membuat subclass-nya (turunan dari class).  Beberapa behaviour yang ada pada Xamarin Community Toolkit adalah sebagai berikut:

EventToCommand Behaviour Pada ListView

Contoh berikut menunjukan bagaimana cara penggunaan EventToCommand behaviour yang biasa dilakukan untuk membinding event ItemTapped dari ListView ke command.

Pada contoh di artikel sebelumnya yang membahas tentang MVVM kita sudah melihat bagaimana cara untuk membinding ViewModel kedalam ListView. Namun ada satu hal yang belum kita lakukan yaitu memambahkan event hadler ItemTapped yang dibinding kedalam command yang ada di ViewModel. Untuk tujuan tersebut kita perlu menggunakan EventToCommand behaviour.

Hal yang pertama kita perlu menambahkan resources converter yang akan digunakan untuk mengkonversi  event ke command.

    <ContentPage.Resources>
        <ResourceDictionary>
            <xct:ItemSelectedEventArgsConverter x:Key="ItemSelectedEventArgsConverter" />
        </ResourceDictionary>
    </ContentPage.Resources>

Kemudian pada kontrol ListView kita dapat menambahkan EventToCommand behaviour.

            <ListView.Behaviors>
                <xct:EventToCommandBehavior EventName="ItemSelected"
                    Command="{Binding SelectedCommand}" 
                    EventArgsConverter="{StaticResource ItemSelectedEventArgsConverter}"/>
            </ListView.Behaviors>

Dengan menggunakan kode diatas maka kita dapat mengkonversi event ItemSelected pada ListView menjadi command SelectedCommand yang ada pada ViewModel.

SelectedCommand = new AsyncCommand<object>(SelectedCoffee);
        private async Task SelectedCoffee(object arg)
        {
            var coffee = arg as Coffee;
            if (coffee == null) return;
            await Application.Current.MainPage.DisplayAlert("Selected", coffee.Name, "OK");
        }

Behaviour yang sudah disediakan oleh Xamarin Community Toolkit Ini akan sangat membantu kita dalam proses development menggunakan pattern MVVM.