O Catálogo de Layout Frontline é uma coleção de modelos que definem os layouts. Para criar seu próprio catálogo para desenvolvimento, você pode defini-lo com:
<Catalog Name="MyCatalog" Version="1"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns=""
xsi:noNamespaceSchemaLocation="ui_catalog.xsd">
</Catalog>
PartTemplate
PartTemplates são módulos pré-definidos que você deve definir uma vez e reutilizar em vários pontos de vista em seus layouts. Isto permite que seu layout permaneça consistente e as mudanças só precisam ser feitas uma vez. Um exemplo de um modelo de peça é a barra de status.
<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>
LayoutPage
As LayoutPages funcionam como um modelo para uma visualização. Elas podem incluir diferentes elementos como texto, painéis ou PartTemplates. Também possui ContentPlaceHolders que definem um espaço que pode ser preenchido pelos LayoutModels que utilizam esta 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>
LayoutModelo
Os LayoutModels são a implementação do LayoutPages. Você pode comparar o conceito com classes abstratas e classes que herdam seus atributos de outra classe. O LayoutPage é a classe abstrata nesta comparação e o LayoutModel é a implementação.
Os LayoutModels precisam preencher os espaços reservados com conteúdo.
<Content PlaceHolder="PlaceholderName">
[Your code here]
</Content>
Estilos
Os estilos fornecem uma maneira de predefinir atributos de estilo como borda, cor de fundo ou cor do texto. Você pode aplicar estilos simplesmente adicionando style="yourStyleName " como um atributo a um elemento.
O uso de estilos permite que você tenha uma aparência uniforme dentro de sua aplicação e permite que você ajuste rapidamente os atributos para vários elementos.
Um estilo pode ser definido desta forma:
<Style Name="InfoContentStyle" MaxLines="1" Gravity="Center" Padding="0,5,0,5" Border="2,gray.darker,gray.dark"
