Vous consultez une page technique concernant le logiciel de gestion Mercator. Celle-ci contient des informations spécifiques destinées aux professionnels de Mercator. Souhaitez-vous être redirigés vers des informations plus générales ?


   Ne plus poser cette question

Utiliser les nouvelles fonctionnalités de Xamarin Forms 3.0 dans MercatorPenguin

0000002889     -      14/12/2018

La version 2.2.2 de MercatorPenguin a été développée sur base de Xamarin Forms 3.0. En conséquence, les nouvelles fonctionnalités de Xamarin Forms 3.0 peuvent être utilisées pour le paramétrage XAML des bundles. Sans vouloir être exhaustif, nous montrons ici quelques exemples.

Attention : dès qu'un bundle utilise du code XAML uniquement supporté par Xamarin Forms 3.0, il est nécessaire que tous les MercatorPenguins susceptibles d'utiliser ce nouveau paramétrage soient bien dans la version 2.2.2 ou ultérieure.

 

Exemple 1 : utilisation du FlexLayout

Le FlexLayout permet un agencement plus dynamique des éléments qu'il contient, en fonction des dimensions qu'il peut prendre.

<FlexLayout Wrap="Wrap" Direction="Row" Margin="10, 10, 10, 10">
<m:SearchEntry Placeholder="Nom" FlexLayout.Basis="250" FlexLayout.AlignSelf="Center" BackgroundColor="White" TextColor="Black" SqlParam="@c_nom" Margin="0, 0, 10, 0" />
<m:SearchEntry Placeholder="Code postal" FlexLayout.AlignSelf="Center" BackgroundColor="White" TextColor="Black" SqlParam="@c_codep" Margin="0, 0, 10, 0"  />
<m:SearchButton Text="Chercher Client" FlexLayout.AlignSelf="Center" Margin="0, 10, 0, 0" />
</FlexLayout>

Aperçu sur une tablette :

Aperçu sur un smartphone :

 

Exemple 2 : Editor avec taille dynamique en fonction de son contenu

 

<m:EditEditor Source="NOTE" HorizontalOptions="FillAndExpand" AutoSize="TextChanges" />

 

Exemple 3 : utilisation de CSS dans le code XAML

Il est à présent possible de déterminer des attributs d'éléments constitutifs d'un écran défini en XAML via des directives CSS, qui peuvent être placées comme indiqué ci-dessous.

Ce code XAML sans CSS

<StackLayout Margin="10, 10, 10, 10">
<StackLayout Orientation="Horizontal">
<m:SearchEntry Placeholder="Nom"  BackgroundColor="White" TextColor="Black" SqlParam="@c_nom" HorizontalOptions="FillAndExpand" />
<m:SearchEntry Placeholder="Code postal" WidthRequest="120" BackgroundColor="White" TextColor="Black" SqlParam="@c_codep" HorizontalOptions="End"  />
</StackLayout>
<m:SearchButton Text="Chercher Client" HorizontalOptions="Center" />
</StackLayout>

est équivalent à ce code avec CSS

<ContentPage.Resources>
<StyleSheet>
    <![CDATA[
    .MyStyle {
        background-color: white;
        color: black;
    }
    ]]>
</StyleSheet>
</ContentPage.Resources>

<StackLayout Margin="10, 10, 10, 10">
<StackLayout Orientation="Horizontal">
<m:SearchEntry Placeholder="Nom" StyleClass="MyStyle" SqlParam="@c_nom" HorizontalOptions="FillAndExpand" />
<m:SearchEntry Placeholder="Code postal" WidthRequest="120" StyleClass="MyStyle" SqlParam="@c_codep" HorizontalOptions="End"  />
</StackLayout>
<m:SearchButton Text="Chercher Client" HorizontalOptions="Center" />
</StackLayout>

 Attention : ce mécanisme n'est disponible que dans le code "XAML Recherche" des bundles et dans celui des écrans modifiables en écriture.

 

Exemple 4 : utilisation du VisualStateManager

Le VisualStateManager permet de faire varier certaines caractéristiques visuelles en fonction d'états des éléments constituant l'écran. Dans l'exemple ci-dessous, on montre comment changer la couleur de fond d'un SearchEntry lorsque celui-ci a reçu le focus.

<StackLayout Margin="10,10,10,10">
<StackLayout Orientation="Horizontal">
<m:SearchEntry Placeholder="Clé rech. articles"  BackgroundColor="White" TextColor="Black" SqlParam="@key" HorizontalOptions="FillAndExpand">
<VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Focused">
                <VisualState.Setters>
                    <Setter Property="BackgroundColor" Value="Lime" />
                </VisualState.Setters>
            </VisualState>
<VisualState x:Name="Normal">
                <VisualState.Setters>
                    <Setter Property="BackgroundColor" Value="White" />
                </VisualState.Setters>
            </VisualState>
</VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</m:SearchEntry>
<m:SearchScanButton SqlParamKey="@key" />
</StackLayout>
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label Text="Avec articles en sommeil" Margin="0,0,10,0" FontSize="12" VerticalOptions="Center" />
<m:SearchSwitch SqlParam="@sommeil" BackgroundColor="%ThemeColor%" Margin="0,0,20,0" VerticalOptions="Center"  />
<m:SearchButton Text="OK" WidthRequest="100" VerticalOptions="Center"  />
</StackLayout>
</StackLayout>

     

 


 

Informations complémentaires