Deze handleiding is een uitbreiding op de handleiding Mobiele apps programmeren met Xamarin – Layout – StackLayout, ScrollView, Frame en BoxView maar om dit onder de aandacht van (ex-)cursisten te brengen plaats ik deze handleiding ook nog eens op zich.
Xamarin.Forms 3 – FlexLayout
Xamarin.Forms 3 heeft de FlexLayout toegevoegd als aanvulling op de StackLayout. Noem het een flexibele StackLayout.
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).
De FlexLayout in zijn basisvorm ziet er als volgt uit:
<?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:App5" x:Class="App5.MainPage">
<FlexLayout >
<Label Text="PCVO Groeipunt" FontSize="Large"></Label>
<Label Text="Geert Linthoudt"></Label>
<Button Text="OK"></Button>
</FlexLayout>
</ContentPage>
In plaats van StackLayout gebruikt u FlexLayout.
En dit resulteert in onderstaande lay-out.
Oké, dit ziet er niet meteen zo spectaculair uit maar het wordt als iets beter door toevoeging van een paar eigenschappen AlignItems="Start" zal de elementen niet langer meer stretchen maar bovenaan plaatsen en JustifyContent="SpaceEvenly" zal alle elementen gelijk verdelen.
<?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:App5" x:Class="App5.MainPage">
<FlexLayout AlignItems="Start" JustifyContent="SpaceEvenly">
<Label Text="PCVO Groeipunt" FontSize="Large"></Label>
<Label Text="Geert Linthoudt"></Label>
<Button Text="OK"></Button>
</FlexLayout>
</ContentPage>
Dit ziet er al beter uit.
Stel dat u meerdere knoppen wilt toevoegen.
<?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:App5" x:Class="App5.MainPage">
<FlexLayout AlignItems="Start" JustifyContent="SpaceBetween" >
<Label Text="PCVO Groeipunt" FontSize="Large"></Label>
<Label Text="Geert Linthoudt"></Label>
<Button Text="Cursist 1"></Button>
<Button Text="Cursist 2"></Button>
<Button Text="Cursist 3"></Button>
<Button Text="Cursist 4"></Button>
<Button Text="Cursist 5"></Button>
<Button Text="OK"></Button>
</FlexLayout>
</ContentPage>
Dan krijgt u misschien niet meteen wat u verhoopte.
Maar een belangrijke eigenschap die u kunt toevoegen is Wrap="Wrap".
<?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:App5" x:Class="App5.MainPage">
<FlexLayout AlignItems="Start" JustifyContent="SpaceBetween" Wrap="Wrap">
<Label Text="PCVO Groeipunt" FontSize="Large"></Label>
<Label Text="Geert Linthoudt"></Label>
<Button Text="Cursist 1"></Button>
<Button Text="Cursist 2"></Button>
<Button Text="Cursist 3"></Button>
<Button Text="Cursist 4"></Button>
<Button Text="Cursist 5"></Button>
<Button Text="OK"></Button>
</FlexLayout>
</ContentPage>
Er wordt nu automatisch overgegaan naar een volgende lijn.
Stel dat dit geen knoppen waren maar afbeeldingen, dan zou dit kunnen werken maar die knoppen, zouden die niet beter allemaal onder mekaar staan?
Dit met de eigenschappen Direction="Column" AlignItems="Center".
<?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:App5" x:Class="App5.MainPage">
<FlexLayout Direction="Column" AlignItems="Center">
<Label Text="PCVO Groeipunt" FontSize="Large"></Label>
<Label Text="Geert Linthoudt"></Label>
<Button Text="Cursist 1"></Button>
<Button Text="Cursist 2"></Button>
<Button Text="Cursist 3"></Button>
<Button Text="Cursist 4"></Button>
<Button Text="Cursist 5"></Button>
<Button Text="OK"></Button>
</FlexLayout>
</ContentPage>
Jamaar, ik wil de OK-knop helemaal onderaan!
Ook dit kan, voeg een element en geef het de Attached property (een eigenschap geleend van een ander element) FlexLayout.Grow="1"
<?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:App5" x:Class="App5.MainPage">
<FlexLayout Direction="Column" AlignItems="Center">
<Label Text="PCVO Groeipunt" FontSize="Large"></Label>
<Label Text="Geert Linthoudt"></Label>
<Button Text="Cursist 1"></Button>
<Button Text="Cursist 2"></Button>
<Button Text="Cursist 3"></Button>
<Button Text="Cursist 4"></Button>
<Button Text="Cursist 5"></Button>
<Label FlexLayout.Grow="1"></Label>
<Button Text="OK"></Button>
</FlexLayout>
</ContentPage>
Mede omdat de door mij gebruikte Android emulator niet het gewenste effect gaf toon ik hier de code samen met de preview (een techniek die ik misschien vaker ga gebruiken).
Dat de FlexLayout nog flexibeler is toont onderstaande video van de Xamarin University.
