Mobiele apps programmeren met Xamarin – Praktische voorbeelden – Opmaak Switchen

print
Switch de opmaak van een tekst aan en uit.

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

        }
    }
}

Geef een reactie

  • Abonneer je op deze website d.m.v. e-mail

    Voer je e-mailadres in om je in te schrijven op deze website en e-mailmeldingen te ontvangen van nieuwe berichten.