知識ベース

サポート概要に戻る

フロントライン レイアウト カタログは、レイアウトを定義するモデルのコレクションです。開発用に独自のカタログを作成するには、次のように定義します。

<カタログ名="MyCatalog" Version="1"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns=""
         xsi:noNamespaceSchemaLocation="ui_catalog.xsd">
</Catalog>

パーツ テンプレート

パーツ テンプレートは、一度作成すれば、レイアウト内の複数のビューで再利用できる定義済みのモジュールです。これにより、レイアウトの一貫性が保たれ、変更は一度だけ実装する必要があります。パーツ テンプレートの 1 つの例は、ステータス バーです。

<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" Pad = "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 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>

レイアウト モデル

レイアウト モデルは、レイアウト ページの実装です。この概念は、抽象クラスや、別のクラスから属性を継承するクラスと比較できます。この比較では、レイアウト ページは抽象クラスであり、レイアウト モデルは実装です。

レイアウト モデルでは、プレースホルダーにコンテンツを入力する必要があります。

<Content PlaceHolder="PlaceholderName">
    [ここにコード]
</Content>

スタイル

スタイルは、罫線、背景色、テキストの色などのスタイル属性を事前に定義する方法を提供します。スタイルは、要素に属性として追加 style="yourStyleName" するだけで適用できます。

スタイルを使用すると、アプリケーション内で統一された外観になり、複数の要素の属性をすばやく調整できます。

スタイルは次のように定義できます。

<スタイル名="InfoContentStyle" MaxLines="1" Gravity="Center" Padding="0,5,0,5" border="2,gray.darker,gray.dark"