Mobiele apps programmeren met Xamarin – Praktische voorbeelden

Inhoud

• Wat vooraf ging
• Zoeken naar tekst
• Een Timer gebruiken
• Opmaak switchen
• Bereken het verschil tussen 2 datums
• Design guides

---

Wat vooraf ging

Deze post vormt een afsluiting van de module Mobiele apps programmeren met Xamarin – Eenvoudige functionaliteiten en vat de gezien leerstof samen in een aantal praktische voorbeelden.

---

Zoeken naar tekst

Om dit uit te testen maakt u een nieuw project aan.

• Start een nieuw Xamarin-project (ik heb het de naam Zoeken gegeven).

XAML

Om tekst te zoeken kunt u gebruik maken van de Editor en de SearchBar.

• Pas de XAML van de pagina Mainpage.xaml als volgt aan:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:Zoeken" x:Class="Zoeken.MainPage">

    <StackLayout>
        <SearchBar x:Name="ZoekTekst" Placeholder="Zoeken naar..." SearchButtonPressed="ZoekTekst_SearchButtonPressed" ></SearchBar>
        <Editor x:Name="Tekst" Text="Mijn naam is Geert." VerticalOptions="FillAndExpand"></Editor>
    </StackLayout>
</ContentPage>

Code-behind

Er is reeds een event voorzien SearchButtonPressed="ZoekTekst_SearchButtonPressed" die uitgevoerd wordt als de gebruiker op de zoekknop drukt. De event werkt asynchroon zodat het aanroepen van de DisplayAlert andere lopende acties niet tegenhoudt.

• Pas de code behind in MainPage.xaml.cs als volgt aan.

using System;
using Xamarin.Forms;

namespace Zoeken
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private async void ZoekTekst_SearchButtonPressed(object sender, EventArgs e)
        {
            if(Tekst.Text.IndexOf(ZoekTekst.Text.Trim()) > 0)
            {
                await DisplayAlert("Zoeken", "De tekst is gevonden op positie " + Tekst.Text.IndexOf(ZoekTekst.Text) + "!", "OK");
            }
            else
            {
                await DisplayAlert("Zoeken", "De tekst is niet gevonden!", "OK");
            }
        }
    }
}

De conditie if(Tekst.Text.IndexOf(ZoekTekst.Text.Trim()) > 0) vraagt wellicht wat meer duiding.

• Met ZoekTekst.Text.Trim() wordt de tekst uit het zoekvak opgehaald en spaties aan het begin of het einde worden weggelaten door het gebruik van Trim().
• Er wordt gecontroleerd of de te zoeken tekst voorkomt in de tekst Tekst.Text.IndexOf(ZoekTekst.Text.Trim()) door gebruik te maken van IndexOf().
• Als de tekst voorkomt geeft IndexOf() de positie weer waar de tekst, het eerst, gevonden is (beginnen te tellen bij 0). Is de tekst niet gevonden dan geeft IndexOf() de waarde -1 terug.

---

Een Timer gebruiken

Het programma moet constant de huidige datum en tijd weergeven. U moet dus de tijd zien “vooruitgaan”.

• Start een nieuw Xamarin-project (ik heb het de naam Timer gegeven).

XAML

De XAML bevat twee labels om de datum en tijd weer te geven. De datum wordt wat groter weergegeven.

• Pas de XAML van de pagina Mainpage.xaml als volgt aan:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:Zoeken" x:Class="Zoeken.MainPage">

    <StackLayout>
        <Label x:Name="timeLabel" FontSize="Large" HorizontalOptions="Center" VerticalOptions="EndAndExpand" />

        <Label x:Name="dateLabel" HorizontalOptions="Center" VerticalOptions="StartAndExpand" />
    </StackLayout>
</ContentPage>

Code-behind

Gebruik de methode StartTimer van de Device klasse. De methode StartTimer heeft de volgende syntax:

public static Void StartTimer (TimeSpan interval, Func callback)

De eerste parameter is van het type TimeSpan, voor de tweede parameter moet een callback functie aangemaakt worden die een boolean teruggeeft. Onderstaande code roept iedere seconde TimeSpan.FromSeconds(1) een functie aan met de naam OnTimerTick.

Device.StartTimer(TimeSpan.FromSeconds(1), OnTimerTick);

De functie OnTimerTick zal eerst België als cultuur instellen. Vergeet niet hiertoe de namespace Globalization toe te voegen using System.Globalization;.

CultureInfo nlBEFormaat = new CultureInfo("nl-BE");

De huidige datum en tijd wordt opgevraagd en aan een variabele dt toegekend.

DateTime dt = DateTime.Now;

De datum en tijd worden aan hun respectievelijke labels en in de juiste cultuurinstellingen toegekend. Ken ook de juiste formaat toe.

timeLabel.Text = dt.ToString("T", nlBEFormaat);
dateLabel.Text = dt.ToString("D", nlBEFormaat);

Uiteindelijk moet de functie een boolean teruggeven.

return true;

• Pas de code behind in MainPage.xaml.cs als volgt aan.

using System;
using System.Globalization;
using Xamarin.Forms;

namespace Timer
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            Device.StartTimer(TimeSpan.FromSeconds(1), OnTimerTick);
        }

        bool OnTimerTick()
        {
            CultureInfo nlBEFormaat = new CultureInfo("nl-BE");
            DateTime dt = DateTime.Now;
            timeLabel.Text = dt.ToString("T", nlBEFormaat);
            dateLabel.Text = dt.ToString("D", nlBEFormaat);
            return true;
        }

    }
}

---

Opmaak switchen

• Start een nieuw Xamarin-project (ik heb het de naam OpmaakSwitchen gegeven).

XAML

De opbouw gebeurt via een aantal StackLayouts, zowel horizontaal als verticaal. Tevens worden switchen gebruikt die elk een Toggled-event hebben. Onderstaande XAML is vrij complex door het gebruik van meerdere StackLayouts en hun positionering maar zou toch geen geheimen meer mogen bevatten.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:OpmaakSwitchen" x:Class="OpmaakSwitchen.MainPage">

    <StackLayout >
        <StackLayout HorizontalOptions="Center" VerticalOptions="CenterAndExpand">
            <StackLayout Orientation="Horizontal" HorizontalOptions="End">
                <Label Text="Cursief: " VerticalOptions="Center" />
                <Switch Toggled="OnItalicSwitchToggled" VerticalOptions="Center" />
            </StackLayout>

            <StackLayout Orientation="Horizontal" HorizontalOptions="End">
                <Label Text="Vet: " VerticalOptions="Center" />
                <Switch Toggled="OnBoldSwitchToggled" VerticalOptions="Center" />
            </StackLayout>
        </StackLayout>

        <Label x:Name="LabelOpmaak" Text= "Geert Linthoudt" FontSize="Large" HorizontalTextAlignment="Center" VerticalOptions="StartAndExpand" />

    </StackLayout>

</ContentPage>

Code-behind

Om na te gaan of een Switch al dan niet aan is kan gebruik gemaakt worden van de eigenschap Value van de ToggleEventArgs.

if (e.Value)

Om de tekst vet of cursief te zetten dient de eigenschap FontAttributes ingesteld te worden.

Om vet/bold toe te voegen gebruikt u een or:

LabelOpmaak.FontAttributes |= FontAttributes.Bold;

Om vet/bold te verwijderen gebruikt u een and en een ontkenning:

LabelOpmaak.FontAttributes &= ~FontAttributes.Bold;

Gelijkaardig voor cursief/italic.

De volledige code-behind wordt dan:

using Xamarin.Forms;

namespace OpmaakSwitchen
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void OnItalicSwitchToggled(object sender, ToggledEventArgs e)
        {
            if (e.Value)
            {
                LabelOpmaak.FontAttributes |= FontAttributes.Italic;
            }
            else
            {
                LabelOpmaak.FontAttributes &= ~FontAttributes.Italic;
            }

        }

        private void OnBoldSwitchToggled(object sender, ToggledEventArgs e)
        {
            if (e.Value)
            {
                LabelOpmaak.FontAttributes |= FontAttributes.Bold;
            }
            else
            {
                LabelOpmaak.FontAttributes &= ~FontAttributes.Bold;
            }

        }
    }
}

---

Bereken het verschil tussen twee datums

• Start een nieuw Xamarin-project (ik heb het de naam VerschilTussenDatums gegeven).

XAML

De opbouw gebeurt via een aantal StackLayouts, zowel horizontaal als verticaal. De opmaak zou geen probleem mogen vormen maar toch even het gebruik van de DatePicker uitlichten. Merk het gebruik van de DateSelected-event op en de eigenschap Format="dd/MM/yyyy"

 <DatePicker x:Name="fromDatePicker" DateSelected="OnDateSelected" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Format="dd/MM/yyyy"/>

De volledige XAML is:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:VerschilTussenDatums" x:Class="VerschilTussenDatums.MainPage">
    <StackLayout Margin="10">
        <Label Text="Verschil tussen 2 datums" FontSize="Large" HorizontalOptions="Center" />

        <StackLayout Orientation="Horizontal" VerticalOptions="CenterAndExpand">
            <Label Text="Van:" VerticalOptions="Center"/>
            <DatePicker x:Name="fromDatePicker" DateSelected="OnDateSelected" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Format="dd/MM/yyyy"/>
        </StackLayout>

        <StackLayout Orientation="Horizontal" VerticalOptions="CenterAndExpand">
            <Label Text="Tot:" VerticalOptions="Center" />
            <DatePicker x:Name="toDatePicker" DateSelected="OnDateSelected" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Format="dd/MM/yyyy"/>
        </StackLayout>

        <Label x:Name="resultLabel" FontSize="Medium" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
    </StackLayout>

</ContentPage>

Code-behind

De code-behind vindt u opnieuw in MainPage.xaml.cs.

Het aantal dagen tussen 2 datums wordt berekend met onderstaande code:

int dagen = (toDatePicker.Date - fromDatePicker.Date).Days;

Vervolgens wordt dit aantal toegekend aan het voorziene label.

resultLabel.Text = String.Format("{0} dag{1} tussen de twee datums.", dagen, dagen == 1 ? "" : "en");

Merk de ?:-operator op die werkt als een “inline” if-statement:

conditie ? waar-expressie : onwaar-expressie;

Of zoals in dit voorbeeld toegepast om een meervoudsvorm aan te maken indien er meerdere dagen zijn:

dagen == 1 ? "" : "en"

De volledige code is:

using System;
using Xamarin.Forms;

namespace VerschilTussenDatums
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void OnDateSelected(object sender, DateChangedEventArgs e)
        {
            int dagen = (toDatePicker.Date - fromDatePicker.Date).Days;
            resultLabel.Text = String.Format("{0} dag{1} tussen de twee datums.", dagen, dagen == 1 ? "" : "en");
        }
    }
}

---

Design guides

Onderstaande design guides sluiten aan bij wat besproken is in deze post. Ik raad aan deze zeker eens te bekijken.

Android

• Introductie in Material design
• Typografie
• Knoppen
• Invulvakken (tekstvakken)
• Keuzelijsten
• Selecties

iOS

• Algemene iOS design guides
• Typografie
• Knoppen
• Invulvakken (tekstvakken)
• Keuzelijsten
• Selecties (switches)

UWP

• Introductie in UWP app design
• Typografie
• Knoppen
• Invulvakken (tekstvakken)
• Datum en tijd
• Selecties (toggles)

---

Behandelde Basiscompetenties uit de module ICT Programmeren – Specifieke ontwikkelomgeving: eenvoudige functionaliteiten

• IC BC017 – kan ICT veilig en duurzaam gebruiken
• IC BC234 – kan de basisprincipes van programmeren in een specifieke ontwikkelomgeving toepassen
• IC BC236 – kan eenvoudige wijzigingen aan een programma aanbrengen
• IC BC241 – kan een programma in een specifieke ontwikkelomgeving maken
• IC BC250 – kan bij het programmeren in functie van een specifieke ontwikkelomgeving, een juiste logica volgen