El catálogo de diseños de primera línea es una colección de modelos que definen diseños. Para crear su propio catálogo para el desarrollo, puede definirlo como se muestra aquí:
<Nombre del catálogo="MiCatálogo" Versión="1"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns=""
xsi:noNamespaceSchemaLocation="ui_catalog.xsd">
</Catálogo>
Plantillas de piezas
Las plantillas de pieza son módulos predefinidos que se pueden crear una vez y luego reutilizar en varias vistas de los diseños. Esto permite que su diseño se mantenga coherente y que los cambios solo deban implementarse una vez. Un ejemplo de una plantilla de pieza es la barra de estado:
<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>
Páginas de diseño
Las páginas de diseño funcionan como una plantilla para una vista. Pueden incluir diferentes elementos, como texto, paneles o plantillas de piezas. También contiene marcadores de posición de contenido que definen un espacio que puede ser llenado por los modelos de diseño que utilizan la página de diseño en particular:
<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>
Modelos de diseño
Los modelos de diseño son la implementación de páginas de diseño. Puede comparar este concepto con las clases abstractas y las clases que heredan sus atributos de otra clase. La página de diseño es la clase abstracta en esta comparación y el modelo de diseño es la implementación:
Los modelos de diseño deben rellenar los marcadores de posición con contenido:
<Content PlaceHolder="PlaceholderName">
[Tu código aquí]
</Content>
Estilos
Los estilos proporcionan una forma de predefinir atributos de estilo como el borde, el color de fondo o el color del texto. Puede aplicar estilos simplemente añadiéndolos style="yourStyleName" como atributo a un elemento.
El uso de estilos le permite tener un aspecto uniforme dentro de la aplicación y le permite ajustar rápidamente los atributos de varios elementos.
Un estilo se puede definir de la siguiente manera:
<Nombre del estilo="InfoContentStyle" MaxLines="1" Gravity="Center" Padding="0,5,0,5" border="2,gray.darker,gray.dark"