Credit Card Checkout - CarouselView de Xamarin.Forms 4.3 en action

👉 https://github.com/egbakou/CreditCardCheckout le lien vers le projet complet sur Github.

Dans cet article récent Xamarin UI Challenge - Credit Card Checkout, je vous présentais comment implémenter un design en Xamarin.Forms et la capture du résultat final de notre travail se présentait comme suit:

Nous allons dans cet article voir comment mettre à jour cette implémentation en utilisant CarouselView de Xamrain.Forms 4.3 pour le défilement des cartes de crédit.

Introduction à CarouselView

CarouselView est disponible en Xamarin.Formes 4.3. Cependant, il est actuellement en phase de test et ne peut être utilisé qu’en ajoutant la ligne de code suivante à la classe AppDelegate sur iOS ou à la classe MainActivity sur Android, avant d’appeler Forms.Init:

Forms.SetFlags ("CarouselView_Experimental"); 

Commençons par examiner la propriété fondamentale du contrôle CarouselView qui lui permet d’obtenir sa source de données: ItemsSource.

<CarouselView ItemsSource="{Binding Items}" />

Le contenu de chaque élément peut être définie à l’aide de la propriété ItemTemplate :

<CarouselView ItemsSource="{Binding Items}">
     <CarouselView.ItemTemplate>
          <DataTemplate>
               <StackLayout>
                    ...
               </StackLayout>
          </DataTemplate>
     </CarouselView.ItemTemplate>
</CarouselView>

D’autre part, nous avons la propriété PeekAreaInsets, qui définie l’espacement entre les éléments adjacents de la source de données.

<CarouselView ItemsSource="{Binding Items}"
     PeekAreaInsets="0,0,0,0">
</CarouselView>

C’est une option idéale qui nous permet d’afficher partiellement un élément pour indiquer à l’utilisateur qu’il existe davantage de contenu de manière simple.

C’est cette propriété PeekAreaInsets qui a le plus attiré mon attention pour la mise à jour de ce projet de UI Challenge. En effet sur la capture précédente montrant le travail fait auparavant, on voit clairement que l’utilisateur ne saura pas qu’il existe d’autre cartes de crédit: L’expérience utilisateur n’est donc pas au rendez-vous. Pour pallier à cela, nous utiliserons CarouselView avec sa propriété PeekAreaInsets pour définir les espacements comme le montre la première capture.

Les codes des vues à mettre à jour

• CardTemplate.xaml

Ici, la vue reste inchangée sauf la propriété Padding qui sera ajoutée au tout premier StackLayout.

<?xml version="1.0" encoding="UTF-8" ?>
<ContentView
    x:Class="ShopTimeline.Views.Templates.CardTemplate"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:flex="clr-namespace:Flex.Controls;assembly=Flex"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:pancake="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
    mc:Ignorable="d">
    <StackLayout Padding="5">
        ---
    </StackLayout>
</ContentView>

• CreditCardView.xaml

cards:CardsView sera remplacé par CarouselView.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="ShopTimeline.Views.CreditCardView"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:flex="clr-namespace:Flex.Controls;assembly=Flex"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:template="clr-namespace:ShopTimeline.Views.Templates"
    BackgroundColor="#2C3359"
    mc:Ignorable="d">
    <ContentPage.Content>
                ...

                <!--  CARDS SECTION  -->
                <StackLayout
                    Grid.Row="3"
                    Margin="0,20,0,20"
                    HeightRequest="240"
                    HorizontalOptions="FillAndExpand">
                    <CarouselView
                        HorizontalScrollBarVisibility="Never"
                        ItemsSource="{Binding Cards}"
                        PeekAreaInsets="20,0,40,0">
                        <CarouselView.ItemTemplate>
                            <DataTemplate>
                                <template:CardTemplate />
                            </DataTemplate>
                        </CarouselView.ItemTemplate>
                    </CarouselView>
                    <Label
                        Margin="30,0,0,0"
                        FontSize="16"
                        HorizontalOptions="StartAndExpand"
                        Style="{StaticResource LabeStyle}"
                        Text="Double click the card to edit details" />
                </StackLayout>

                ...
    </ContentPage.Content>
</ContentPage>

• ShopView.xaml

Le code complet:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="ShopTimeline.Views.ShopView"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:cards="clr-namespace:PanCardView;assembly=PanCardView"
    xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:flex="clr-namespace:Flex.Controls;assembly=Flex"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:pancake="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
    xmlns:template="clr-namespace:ShopTimeline.Views.Templates"
    BackgroundColor="#2C3359"
    mc:Ignorable="d">
    <ContentPage.Content>

        <!--  ALL CONTENT IN SCROLLVIEW  -->
        <ScrollView
            HorizontalScrollBarVisibility="Never"
            VerticalOptions="FillAndExpand"
            VerticalScrollBarVisibility="Never">

            <!--  GRID OF 2 ROWS  -->
            <Grid
                Padding="15,5,15,10"
                ColumnSpacing="0"
                HorizontalOptions="FillAndExpand"
                VerticalOptions="FillAndExpand">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <!--  HEADER  -->
                <Grid Grid.Row="0" HeightRequest="50">
                    <Label
                        FontSize="24"
                        HorizontalOptions="CenterAndExpand"
                        Style="{StaticResource LabeStyle}"
                        Text="SHOP"
                        VerticalOptions="Center" />
                    <controls:CircleImage
                        Aspect="AspectFill"
                        BorderColor="#DCA688"
                        HeightRequest="40"
                        HorizontalOptions="End"
                        Source="me.jpg"
                        VerticalOptions="Center"
                        WidthRequest="40" />
                </Grid>



                <!--  TIMELINE  -->
                <StackLayout Grid.Row="1">
                    <StackLayout Orientation="Horizontal">
                        <!--  GREEN CIRCLE WITH LABEL  -->
                        <BoxView
                            Margin="10,0"
                            CornerRadius="240"
                            HeightRequest="25"
                            HorizontalOptions="Start"
                            VerticalOptions="Start"
                            WidthRequest="25"
                            Color="Green" />
                        <Label
                            Margin="10,0"
                            FontSize="25"
                            Style="{StaticResource LabeStyle}"
                            Text="ORDER SUMMARY" />
                    </StackLayout>
                    <!--  VERTICAL WHITE LINE  -->
                    <BoxView
                        Margin="20,-10"
                        HeightRequest="30"
                        HorizontalOptions="Start"
                        WidthRequest="3"
                        Color="White" />
                    <!--  TOTAL AMOUNT IN PANCAKEVIEW  -->
                    <pancake:PancakeView
                        BackgroundColor="#52597F"
                        CornerRadius="15"
                        Elevation="4"
                        HasShadow="False"
                        HeightRequest="110"
                        HorizontalOptions="FillAndExpand">
                        <StackLayout Margin="20,20">
                            <Label
                                FontSize="20"
                                Style="{StaticResource LabeStyle}"
                                Text="TIARA RING" />
                            <BoxView
                                Margin="0,0"
                                HeightRequest="1"
                                HorizontalOptions="FillAndExpand"
                                VerticalOptions="Center"
                                Color="White" />
                            <StackLayout Margin="0,5" Orientation="Horizontal">
                                <Label
                                    FontSize="20"
                                    HorizontalOptions="Start"
                                    Style="{StaticResource LabeStyle}"
                                    Text="Total" />
                                <Label
                                    FontSize="30"
                                    HorizontalOptions="EndAndExpand"
                                    Style="{StaticResource LabeStyle}"
                                    Text="Rs.8000" />
                            </StackLayout>
                        </StackLayout>
                    </pancake:PancakeView>
                    <!--  VERTICAL WHITE LINE  -->
                    <BoxView
                        Margin="20,-6"
                        HeightRequest="30"
                        HorizontalOptions="Start"
                        WidthRequest="3"
                        Color="White" />



                    <!--  RED CIRCLE WITH LABEL AND FLEXBUTTON  -->
                    <StackLayout Orientation="Horizontal" VerticalOptions="Center">
                        <BoxView
                            Margin="10,0"
                            CornerRadius="240"
                            HeightRequest="25"
                            HorizontalOptions="Start"
                            VerticalOptions="Start"
                            WidthRequest="25"
                            Color="#F55C5C" />
                        <Label
                            Margin="10,0,0,0"
                            FontSize="25"
                            Style="{StaticResource LabeStyle}"
                            Text="PAYMENT" />
                        <flex:FlexButton
                            Padding="0"
                            BackgroundColor="#2C3359"
                            BorderColor="White"
                            CornerRadius="38"
                            FontFamily="{StaticResource RopaSans}"
                            FontSize="30"
                            ForegroundColor="#ffffff"
                            HeightRequest="30"
                            HighlightBackgroundColor="#8EA4D2"
                            HighlightBorderColor="White"
                            HighlightForegroundColor="#49516F"
                            HorizontalOptions="EndAndExpand"
                            Text="+"
                            WidthRequest="30" />
                    </StackLayout>
                    <!--  VERTICAL WHITE LINE  -->
                    <BoxView
                        Margin="20,-10"
                        HeightRequest="35"
                        HorizontalOptions="Start"
                        WidthRequest="3"
                        Color="White" />

                    <!--  CARDS VIEWS  -->
                    <StackLayout
                        Margin="0,0,0,0"
                        HeightRequest="240"
                        HorizontalOptions="FillAndExpand">
                        <CarouselView
                            Margin="0,0,0,0"
                            HorizontalScrollBarVisibility="Never"
                            ItemsSource="{Binding Cards}"
                            PeekAreaInsets="10,0,40,0">
                            <CarouselView.ItemTemplate>
                                <DataTemplate>
                                    <template:CardTemplate />
                                </DataTemplate>
                            </CarouselView.ItemTemplate>
                        </CarouselView>
                        <Label
                            Margin="30,0,0,0"
                            FontSize="16"
                            HorizontalOptions="StartAndExpand"
                            Style="{StaticResource LabeStyle}"
                            Text="Double click the card to edit details" />
                    </StackLayout>
                    <!--  VERTICAL WHITE LINE  -->
                    <BoxView
                        Margin="20,-56,0,-10"
                        HeightRequest="55"
                        HorizontalOptions="Start"
                        WidthRequest="3"
                        Color="White" />


                    <!--  PAYEMENT FLEXBUTTON  -->
                    <flex:FlexButton
                        Margin="0,0"
                        BackgroundColor="#52597F"
                        BorderColor="#49516F"
                        BorderThickness="0,0,0,0"
                        ClickedCommand="{Binding ButtonClickedCommand}"
                        CornerRadius="20"
                        FontFamily="{StaticResource RopaSans}"
                        FontSize="25"
                        ForegroundColor="White"
                        HasShadow="false"
                        HeightRequest="55"
                        HighlightBackgroundColor="#8EA4D2"
                        HighlightBorderColor="#6279B8"
                        HighlightForegroundColor="#49516F"
                        HorizontalOptions="FillAndExpand"
                        Icon="right_arrow.png"
                        IconOrientation="Right"
                        Text="PAY NOW" />
                </StackLayout>
            </Grid>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

Le résultat

Ressources

👉 https://github.com/egbakou/CreditCardCheckout le lien vers le projet complet sur Github.

N’hésitez pas à me contacter via le formulaire de contact ou par mail.