Mobiele apps programmeren met Xamarin – Navigatie – TabbedPage en CarouselPage

print

Inhoud


Wat vooraf ging


TabbedPage

Navigating between pages using tabs

Een Xamarin.Forms TabbedPage bevat een aantal tabbladen die elk een specifieke pagina laden.

Visual Studio komt met een template om tabbladen aan te maken.

  • Klik rechts op uw project (TestTabbladen Protable) en kies voor AddNew Item….
  • Vervolgens kunt u kiezen voor Forms Tabbed Page XAML en geeft u een geschikte naam.

Visual Studio heeft nu 2 pagina’s toegevoegd.

  • Laat het programma lopen om te bekijken wat u krijgt.
  • U ziet bovenaan 3 tabbladen.

U vindt de code in de toegevoegde pagina (zonder tab1 achteraan). De XAML ziet er als volgt uit:

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="TestTabbladen.TestTabblad" xmlns:pages="clr-namespace:TestTabbladen;assembly=TestTabbladen" Title="TabbedPage">
  <!--Pages can be added as references or inline-->
  <pages:TestTabbladTab1/>
  <ContentPage Title="Tab 2">
    <StackLayout>
      <Label Text="Green" HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand" Margin="5" />
      <BoxView Color="Green" VerticalOptions="FillAndExpand" />
    </StackLayout>
  </ContentPage>
  <ContentPage Title="Tab 3">
    <StackLayout>
      <Label Text="Blue" HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand" Margin="5" />
      <BoxView Color="Blue" VerticalOptions="FillAndExpand" />
    </StackLayout>
  </ContentPage>
</TabbedPage>

Merk op dat het een pagina is van het type TabbedPage.

Tabbladen kunnen worden toegevoegd door een andere, reeds bestaande, pagina aan te roepen.

<pages:TestTabbladTab1/>

Of door het toevoegen van ContentPages die op hun beurt de inhoud bevatten voor de specifieke tabbalden.

C#

U kunt ook de tabbladen via C#-code aanmaken. Wie al mijn posts (of de lessen) volgt weet dat we dit reeds tegengekomen zijn. Ik herneem hier de uitleg.

using Xamarin.Forms;

namespace Control_Flow
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            var tabs = new TabbedPage();
            tabs.Children.Add(new BTWBerekenen { Title = "BTW Berekenen" });
            tabs.Children.Add(new Pos_Neg_Nul { Title = "Positief of negatief" });
            tabs.Children.Add(new Geslaagd { Title = "Geslaagd" });
            tabs.Children.Add(new KleurenSelecteren { Title = "Kleuren" });
            MainPage = tabs;

        }

        protected override void OnStart()
        {
            // Handle when your app starts
        }

        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }

        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    }
}

U maakt een variabele aan die een nieuwe TabbedPage() initialiseert.

var tabs = new TabbedPage();

Vervolgens moet u tabbladen (“children”) toevoegen aan deze pagina. U voegt een nieuwe instantie van een aangemaakte pagina toe en stelt de propertie Title in, die de tekst krijgt die u wenst weer te geven bovenaan het tabblad. Dit herhaalt u voor iedere pagina die u wenst toe te voegen aan het tabblad.

tabs.Children.Add(new BTWBerekenen { Title = "BTW Berekenen" });

Uiteindelijk kent u deze TabbedPage toe aan de MainPage zodat deze wordt opgestart als hoofdpagina.

MainPage = tabs;


CarouselPage

Navigating between pages using a swipe gesture

De Xamarin.Forms CarouselPage laat de gebruiker “swipen” tussen verschillende pagina’s.

Visual Studio komt met een template om tabbladen aan te maken.

  • Klik rechts op uw project (TestTabbladen Protable) en kies voor AddNew Item….
  • Vervolgens kunt u kiezen voor Forms Carousel Page XAML en geeft u een geschikte naam.

Er wordt een nieuwe pagina toegevoegd van het type CarouselPage. De verschillende pagina’s binnen de carousel zijn dan opnieuw van het type ContentPages.

<?xml version="1.0" encoding="utf-8" ?>
<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="TestCarousel.TestCarouselpage" Title="CarouselPage">
  <ContentPage>
    <StackLayout>
      <Label Text="This is a CarouselPage, you can swipe left and right to browse through additional pages." Margin="5" />
      <Label Text="Red" HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand" Margin="5" />
      <BoxView Color="Red" VerticalOptions="FillAndExpand" />
    </StackLayout>
  </ContentPage>
  <ContentPage>
    <StackLayout>
      <Label Text="Green" HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand" Margin="5" />
      <BoxView Color="Green" VerticalOptions="FillAndExpand" />
    </StackLayout>
  </ContentPage>
  <ContentPage>
    <StackLayout>
      <Label Text="Blue" HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand" Margin="5" />
      <BoxView Color="Blue" VerticalOptions="FillAndExpand" />
    </StackLayout>
  </ContentPage>
</CarouselPage>

C#

Onderstaande code toont een voorbeeld van het implementeren van een CarouselPage in C#.

public class MainPageCS : CarouselPage
{
    public MainPageCS ()
    {
        var redContentPage = new ContentPage {
            Content = new StackLayout {
                Children = {
                    new Label {
                        Text = "Red",
                        FontSize = Device.GetNamedSize (NamedSize.Medium, typeof(Label)),
                        HorizontalOptions = LayoutOptions.Center
                    },
                    new BoxView {
                        Color = Color.Red,
                        WidthRequest = 200,
                        HeightRequest = 200,
                        HorizontalOptions = LayoutOptions.Center,
                        VerticalOptions = LayoutOptions.CenterAndExpand
                    }
                }
            }
        };
        var greenContentPage = new ContentPage {
            Content = new StackLayout {
                ...
            }
        };
        var blueContentPage = new ContentPage {
            Content = new StackLayout {
                ...
            }
        };

        Children.Add (redContentPage);
        Children.Add (greenContentPage);
        Children.Add (blueContentPage);
    }
}

CarouselView

Misschien wilt u niet dat de volledige pagina een carrousel is, maar slechts een beperkt gedeelte van de pagina. dan hebt u geen CarouselPage maar een CarouselView nodig. Deze CarouselView komt niet standaard met Xamarin maar kan toegevoegd worden via een plug-in.

Op het ogenblik van dit schrijven is deze plug-in nog steeds in een “prelease”-stadium (en dit al zo’n 2 jaar), het is dus niet duidelijk of deze ooit officieel zal gereleaset worden maar hij is alvast bruikbaar.

  • Voeg een nieuwe lege pagina toe door rechts te klikken op het project (portable) en te kiezen voor AddNew item…. Selecteer Forms Blank Content Page Xaml en geef het een passende naam (bv. TestCarouselView.xaml).

We moeten nu eerst de juiste plug-in toevoegen.

  • Klik hiervoor rechts op de Solution en kies voor Manage NuGet Packages for Solution….
  • Klik op Solution en kies voor Manage NuGet Packages for Solution….
  • Zoek naar Xamarin.Forms.CarouselView (en vergeet niet include prerelease aan te duiden).
  • Selecteer het volledig project en klik op Install.
  • Xamarin Forms zelf moet minimaal versie 2.3 zijn, eventueel moet u deze ook updaten.

Pas nu de XAML aan van de net toegevoegde pagina.

Voeg eerst de namespace toe aan de pagina.

xmlns:cv="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView"

U weet cv is een zelfgekozen naam die u gebruikt om naar deze namespace te refereren.

Om de CarouselView inhoud te geven moet een DataTemplate aan iedere ItemTemplate worden toegevoegd.

<cv:CarouselView x:Name="MyCarouselView">
    <cv:CarouselView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Image Grid.RowSpan="2" Aspect="AspectFill" Source="{Binding ImageUrl}"/>
                <StackLayout Grid.Row="1" BackgroundColor="#80000000" Padding="12">
                    <Label TextColor="White" Text="{Binding Name}" FontSize="16" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
                </StackLayout>
            </Grid>
        </DataTemplate>
    </cv:CarouselView.ItemTemplate>
</cv:CarouselView>

Merk het gebruik op van een Grid binnen de DataTemplate en de Bindings die als bron worden gebruikt Image Grid.RowSpan="2" Aspect="AspectFill" Source="{Binding ImageUrl}" en Label TextColor="White" Text="{Binding Name}".

De volledig XAML is nu:

<?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:cv="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView" x:Class="TestCarousel.TestCarouselView">
    <StackLayout>
        <Label Text="Test CarouselView" FontSize="Large"></Label>
        <cv:CarouselView x:Name="MyCarouselView">
            <cv:CarouselView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Image Grid.RowSpan="2" Aspect="AspectFill" Source="{Binding ImageUrl}"/>
                        <StackLayout Grid.Row="1" BackgroundColor="#80000000" Padding="12">
                            <Label TextColor="White" Text="{Binding Name}" FontSize="16" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
                        </StackLayout>
                    </Grid>
                </DataTemplate>
            </cv:CarouselView.ItemTemplate>
        </cv:CarouselView>
        <Label Text="Nog wat tekst onderaan om te demonstreren dat de bovenstaande carousel effectief slechts een deel van de pagina inneemt!"></Label>
    </StackLayout>
</ContentPage>

Om nu de Bindings Name en ImageUrl te implementeren voegen we een klasse toe.

  • Klik rechts op het project (portable) en kies voor AddNew item…. Selecteer CodeClass en geef het een passende naam (bv. Cursist.cs).
  • Maak onderstaande klasse aan. Deze klasse bevat de nodige Name en ImageUrl en een gepaste constructor.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace TestCarousel
{
    public class Cursist
    {
        public string Name { get; set; }
        public string ImageUrl { get; set; }

        public Cursist()
        {
            Name = "";
            ImageUrl = "";

        }

        public Cursist(string Naam, string Afbeelding)
        {
            Name = Naam;
            ImageUrl = Afbeelding;
        }
    }
}

We vullen nu deze klasse op met gegevens en zorgen voor de verbinding met de CarouselView.

Dit gebeurt via de Code-behind van de pagina.

using System.Collections.Generic;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace TestCarousel
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class TestCarouselView : ContentPage
    {

        List<Cursist> Cursisten = new List<Cursist>();
        public TestCarouselView()
        {
            InitializeComponent();

            Cursisten.Add(new Cursist("Geert", "https://ictopleidingen.azurewebsites.net/wp-content/uploads/2016/09/Programmeren2-e1496007995661.jpg"));
            Cursisten.Add(new Cursist("Lode", "https://ictopleidingen.azurewebsites.net/wp-content/uploads/2016/09/multimedia-android-e1496008690622.jpg"));
            Cursisten.Add(new Cursist("Emmelie", "https://ictopleidingen.azurewebsites.net/wp-content/uploads/2016/09/computer-EHBO-e1496008568921.jpg"));
            Cursisten.Add(new Cursist("Elise", "https://ictopleidingen.azurewebsites.net/wp-content/uploads/2016/09/windows-veiligheid-e1496008611387.jpg"));

            MyCarouselView.ItemsSource = Cursisten;
        }
    }
}

UWP

Onder UWP krijgt u een foutmelding. Er moet nog een kleine correctie worden toegevoegd aan de App.xaml van het UWP-project.

Voeg de namespace toe naar de CarouselView.

xmlns:uwp="using:Xamarin.Forms.Platform"

Corrigeer, zoals hieronder, de ItemTemplate van de CarouselView.

<Application.Resources>
    <DataTemplate x:Key="ItemTemplate">
        <uwp:ItemControl HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
    </DataTemplate>
</Application.Resources>

De volledige XAML is:

<Application x:Class="TestCarousel.UWP.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:uwp="using:Xamarin.Forms.Platform" RequestedTheme="Light">

    <Application.Resources>
        <DataTemplate x:Key="ItemTemplate">
            <uwp:ItemControl HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
        </DataTemplate>
    </Application.Resources>

</Application>


Behandelde Basiscompetenties uit de module ICT Programmeren – Integratie externe functionaliteiten

  • IC BC017 – kan ICT veilig en duurzaam gebruiken
  • IC BC256 – kan diverse elementen tot een nieuw betekenisvol geheel samenstellen
  • IC BC288 – kan ICT-problemen oplossen

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.