Der Frontline Layout-Katalog ist eine Sammlung von Modellen, die Layouts definieren. Um Ihren eigenen Katalog für die Entwicklung zu erstellen, können Sie ihn mit definieren:
<Catalog Name="MyCatalog" Version="1"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns=""
xsi:noNamespaceSchemaLocation="ui_catalog.xsd">
</Catalog>
TeilVorlage
PartTemplates sind vordefinierte Module, die Sie einmal definieren und in mehreren Ansichten in Ihren Layouts wiederverwenden können. Dadurch bleibt Ihr Layout konsistent und Änderungen müssen nur einmal vorgenommen werden. Ein Beispiel für eine Teilvorlage ist die Statusleiste.
<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>
LayoutSeite
LayoutSeiten dienen als Vorlage für eine Ansicht. Sie können verschiedene Elemente wie Text, Panels oder PartTemplates enthalten. Es gibt auch ContentPlaceHolders, die einen Raum definieren, der von den LayoutModellen gefüllt werden kann, die diese LayoutPage verwenden.
<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>
LayoutModell
LayoutModels sind die Implementierung von LayoutPages. Sie können das Konzept mit abstrakten Klassen und Klassen, die ihre Attribute von einer anderen Klasse erben, vergleichen. Die LayoutPage ist in diesem Vergleich die abstrakte Klasse und das LayoutModel ist die Implementierung.
LayoutModels müssen die Platzhalter mit Inhalt füllen.
<Content PlaceHolder="PlaceholderName">
[Your code here]
</Content>
Stile
Stile bieten eine Möglichkeit, Stilattribute wie Rahmen, Hintergrundfarbe oder Textfarbe vorzudefinieren. Sie können Stile einfach anwenden, indem Sie style="yourStyleName" als Attribut zu einem Element hinzufügen.
Die Verwendung von Stilen ermöglicht Ihnen ein einheitliches Erscheinungsbild innerhalb Ihrer Anwendung und die schnelle Anpassung von Attributen für mehrere Elemente.
Ein Stil kann wie folgt definiert werden:
<Style Name="InfoContentStyle" MaxLines="1" Gravity="Center" Padding="0,5,0,5" Border="2,gray.darker,gray.dark"
