Mobiele apps programmeren met Xamarin – Layout – Xamarin Forms 3 – CSS

Deze handleiding maakt deel uit van het programmeertraject:

• Cross-platform programmeren van mobiele apps met Xamarin

Deze handleiding is een uitbreiding op de handleiding Mobiele apps programmeren met Xamarin – XAML optimalisatie volgens het DRY-principe – Stijlen maar om dit onder de aandacht van (ex-)cursisten te brengen plaats ik deze handleiding ook nog eens op zich.

---

Xamarin.Forms 3 – CSS

Vanaf Xamarin.Forms 3 kunt u de “oude vertrouwde” CSS gebruiken om uw lay-out te stijlen.

Om te controleren of u in Xamarin.Forms 3 of hoger werkt:

• Klik met de rechtermuisknop ingedrukt op de Solution van uw project.
• Klik op Manage Nuget Packages for Solution….

• Onder Installed zoekt u naar Xamarin.Forms.

Rechts ziet u de huidig geïnstalleerde versie (in dit voorbeeld versie 3.0.0.482510), eventueel kunt u upgraden door een nieuwe versie te installeren via Install (enkel upgraden indien echt nodig).

Hoe gaat u te werk.

• Voeg eerst een nieuwe Stylesheet toe aan uw project? Maak hiertoe het best eerst een nieuwe map aan binnen uw project.
• Klik vervolgens met de rechtermuisknop ingedrukt op deze map en kies voor Add – New Item….

• Zoek en klik op Style Sheet (en geef het een passende naam).

• Zet, indien nodig de Build Action van deze Style Sheet op Embedded Resource.

Binnen de Style Sheet volg je de regels van CSS. Misschien met deze speciale verwijzing naar de Contentpage (het ^ genereerde bij mij een foutmelding maar deed wel zijn werk). Verder ziet u een klasse en een Id.

^ContentPage {
    background-color: lightgreen;
    padding: 20;
}

.LabelKlasse {
    color: red;
}

#MijnLabel {
    font-size: large;
}

Op de pagina’s waar u deze CSS wilt gebruiken moet u deze eerst opnemen binnen de ContentPage.Resources.

<?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="App5.TestCSS">
    
    <ContentPage.Resources>
        <StyleSheet Source="Stijlen/MijnStijlen.css" />
    </ContentPage.Resources>

</ContentPage>

U gebruikt de eigenschappen StyleId="MijnLabel" en StyleClass="LabelKlasse" om respectievelijk naar stijlklassen en stijl-Ids te verwijzen.

<?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="App5.TestCSS">
    
    <ContentPage.Resources>
        <StyleSheet Source="Stijlen/MijnStijlen.css" />
    </ContentPage.Resources>

    <StackLayout>
         <Label Text="PCVO Groeipunt" HorizontalOptions="CenterAndExpand" StyleId="MijnLabel"/>
        <Label Text="Label 1" StyleClass="LabelKlasse"></Label>
        <Label Text="Label 2" StyleClass="LabelKlasse"></Label>
        <Label Text="Label 3" StyleClass="LabelKlasse"></Label>
    </StackLayout>

</ContentPage>

Onderstaande video toont hoe u CSS kunt integreren.