Le catalogue de mises en page Frontline est une collection de modèles qui définissent les mises en page. Pour créer votre propre catalogue pour le développement, vous pouvez le définir avec :
<Catalog Name="MyCatalog" Version="1"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns=""
xsi:noNamespaceSchemaLocation="ui_catalog.xsd">
</Catalog>
PartTemplate
Les PartTemplates sont des modules prédéfinis que vous pouvez définir une fois et réutiliser dans plusieurs vues de vos mises en page. Cela permet à votre mise en page de rester cohérente et les modifications ne doivent être effectuées qu'une seule fois. La barre d'état est un exemple de modèle de pièce.
<PartTemplate Name="STATUS_BAR" Margin="1,1,1,1" BackgroundColor="#00000000">
<StackLayout>
<StackItem Name="L2_BACKGROUND_HEADER" Orientation="Horizontal">
<Panel Name="UBIMAX_SPACE" Weight="0.9"/>
<Image Name="UBIMAX_ICON" Weight="0.1" Margin="0,0,0,0" Content="ANDRRES_ubimax_logo"/>
</StackItem>
<StackItem Name="L3_TEXT_OVERLAY" Orientation="Horizontal" Padding="3,0,3,5" BackgroundColor="#00ffffff">
<BatteryStatus Weight="0.05" Padding="1,1,1,1"/>
<WiFiStatus Weight="0.05" Padding="1,1,1,1"/>
<MqttStatus Weight="0.05" Padding="1,1,1,1"/>
<MicrophoneSpeechFeedback Weight="0.05" Padding="1,1,1,1" Margin="2,0,2,0" PositiveNotifications="true"
NegativeNotifications="true"/>
<TorchStatus Weight="0.05" Padding="1,1,1,1"/>
<Text Weight="0.5" Name="StatusBarInfo" Gravity="Center" TextColor="gray" Font="Roboto-Light"
Padding="2,0,2,0"
BackgroundColor="#00ffffff"/>
<Panel Weight="0.25" BackgroundColor="#00ffffff"/>
</StackItem>
</StackLayout>
</PartTemplate>
Page de mise en page
Les LayoutPages fonctionnent comme un modèle pour une vue. Elles peuvent inclure différents éléments tels que du texte, des panneaux ou des PartTemplates. Elles possèdent également des ContentPlaceHolders qui définissent un espace qui peut être rempli par les LayoutModels qui utilisent cette LayoutPage.
<LayoutPage Name="DefaultMaster" Padding="0,20,0,20">
<Part Template="STATUS_BAR" Weight="0.1"/>
<Panel Weight="0.8" Margin="10,0,10,0">
<ContentPlaceHolder Name="Content"/>
</Panel>
<Panel Weight="0.1">
<ContentPlaceHolder Name="Footer"/>
</Panel>
</LayoutPage>
LayoutModel
Les LayoutModels sont l'implémentation des LayoutPages. Vous pouvez comparer ce concept aux classes abstraites et aux classes qui héritent de leurs attributs d'une autre classe. La LayoutPage est la classe abstraite dans cette comparaison et le LayoutModel est l'implémentation.
Les LayoutModels doivent remplir les espaces réservés avec du contenu.
<Content PlaceHolder="PlaceholderName">
[Your code here]
</Content>
Styles
Les styles permettent de prédéfinir des attributs de style tels que la bordure, la couleur d'arrière-plan ou la couleur du texte. Vous pouvez appliquer des styles en ajoutant simplement style="votreNomStyle" comme attribut à un élément.
L'utilisation des styles vous permet d'avoir un aspect uniforme dans votre application et vous permet d'ajuster rapidement les attributs de plusieurs éléments.
Un style peut être défini comme suit :
<Style Name="InfoContentStyle" MaxLines="1" Gravity="Center" Padding="0,5,0,5" Border="2,gray.darker,gray.dark"
