Frontline 布局目录是一个定义布局的模型集合。要创建你自己的目录进行开发,你可以用以下方式定义它。
<Catalog Name="MyCatalog" Version="1"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns=""
xsi:noNamespaceSchemaLocation="ui_catalog.xsd">
</Catalog>
零件模板
PartTemplates是预定义的模块,你只需定义一次就可以在你的布局中的多个视图中重复使用。这可以使你的布局保持一致,并且只需要做一次改变。部分模板的一个例子是状态栏。
<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>
布置页面
LayoutPages作为一个视图的模板工作。它们可以包括不同的元素,如文本、面板或PartTemplate。它也有ContentPlaceHolders,它定义了一个空间,可以由使用这个LayoutPage的LayoutModels来填充。
<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
LayoutModels是LayoutPages的实现。你可以把这个概念与抽象类和从另一个类继承其属性的类进行比较。在这种比较中,LayoutPage是抽象类,LayoutModel是实现。
LayoutModels需要用内容来填充占位符。
<Content PlaceHolder="PlaceholderName">
[Your code here]
</Content>
风格
样式提供了一种预先定义样式属性的方法,如边框、背景颜色或文本颜色。你可以通过向元素添加style="yourStyleName"
作为属性来应用样式。
使用样式可以让你在你的应用程序中拥有一个统一的外观,并允许你快速调整几个元素的属性。
一种风格可以这样定义。
<Style Name="InfoContentStyle" MaxLines="1" Gravity="Center" Padding="0,5,0,5" Border="2,gray.darker,gray.dark"