Frontline レイアウトカタログは、レイアウトを定義するモデルの集合体です。開発用に独自のカタログを作成するには、次のように定義します。
<Catalog Name="MyCatalog" Version="1"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns=""
xsi:noNamespaceSchemaLocation="ui_catalog.xsd">
</Catalog>
PartTemplate
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は、ビューのテンプレートとして機能します。テキスト、パネル、PartTemplates などのさまざまな要素を含めることができます。また、この LayoutPage を使用する LayoutModels が埋めることができるスペースを定義する ContentPlaceHolders もあります。
<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>
レイアウトモデル
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"