Le catalogue de mise en page de première ligne est une collection de modèles qui définissent des mises en page. Pour créer votre propre catalogue à des fins de développement, vous pouvez le définir comme indiqué ci-dessous :
<Nom du catalogue="MonCatalogue » Version="1"
xmlns :xsi="http://www.w3.org/2001/XMLSchema-instance » xmlns=""
xsi :noNamespaceSchemaLocation="ui_catalog.xsd">
</Catalog>
Modèles de pièces
Les modèles de pièces sont des modules prédéfinis que vous pouvez créer une seule fois et que vous pouvez ensuite réutiliser dans plusieurs vues de vos mises en page. Cela permet à votre mise en page de rester cohérente et les modifications n’ont besoin d’être mises en œuvre qu’une seule fois. Un exemple de modèle de pièce est la barre d’état :
<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="Centre » TextColor="gris » font="Roboto-Light"
Padding="2,0,2,0 »
BackgroundColor="#00ffffff"/>
<Panel Weight="0.25 » BackgroundColor="#00ffffff"/>
</StackItem>
</StackLayout>
</PartTemplate>
Pages de mise en page
Les pages de mise en page fonctionnent comme un modèle pour une vue. Ils peuvent inclure différents éléments tels que du texte, des panneaux ou des modèles de pièces. Il contient également des espaces réservés de contenu qui définissent un espace qui peut être rempli par les modèles de mise en page qui utilisent la page de mise en page particulière :
<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>
Modèles de mise en page
Les modèles de mise en page sont l’implémentation de pages de mise en page. Vous pouvez comparer ce concept aux classes abstraites et aux classes qui héritent de leurs attributs d’une autre classe. La page de mise en page est la classe abstraite dans cette comparaison et le modèle de mise en page est l’implémentation :
Les modèles de mise en page doivent remplir les espaces réservés avec du contenu :
<Content PlaceHolder="PlaceholderName">
[Votre code ici]
</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 simplement en ajoutant style="yourStyleName" un attribut à un élément.
L’utilisation de styles vous permet d’avoir un aspect uniforme au sein de 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="Centre » Padding="0,5,0,5 » Border="2,gray.darker,gray.dark »