Mobiele apps programmeren met Xamarin – Praktische voorbeelden – Opmaak Switchen

Deze tip maakt deel uit van het programmeertraject:

• Cross-platform programmeren van mobiele apps met Xamarin

---

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;
            }

        }
    }
}