Panel - ThemeBackground Property

Themed background for Material Design themed applications

Member of Panel (PRIM_PANL)

Data Type - Enumeration

Details

ThemeBackground プロパティを使って、アプリケーションの背景を白から暗いグレーに変更します。
 
これは組み込みの機能なので、スタイリングのその他のファセットは背景色に合うように自動的に変更されます。例えば、省略値のテキストの色は暗い色から明るい色に変更され、アクション ボタンなどのコントロールの影付きが取り除かれます。
 
省略値では、パネルなどの子複合コントロールの ThemeBackground に Parent が設定されており、ページに加えられた変更がアプリケーション全体に反映されるようになっています。

次の値が利用できます。

列挙値説明
Dark暗い背景に明るいテキスト
Light明るい背景に暗いテキスト
Parent親コントロールの ThemeBackground を使用

次の例では、2 つのボタンを使ってアラートを表示します。
 
ボタンは両方とも画面下に付けられており、互いに重なることがないように上方向にフローしています。
Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME) Height(585) Width(697) LayoutManager(#Layout)
 
   Define_Com Class(#PRIM_TBLO) Name(#LayoutList)
   Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutListRow1) DisplayPosition(1) Parent(#LayoutList)
   Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutListColumn1) DisplayPosition(1) Parent(#LayoutList)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem1) Alignment(CenterLeft) Column(#LayoutListRow1) Manage(#ListIcon) MarginLeft(8) Parent(#LayoutList) Row(#LayoutListColumn1) Sizing(None)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem2) Alignment(CenterLeft) Column(#LayoutListRow1) Manage(#ListPrimaryText) MarginLeft(68) MarginRight(16) Parent(#LayoutList) Row(#LayoutListColumn1) Sizing(ContentHeightFitToWidth)
 
   Define_Com Class(#PRIM_TBLO) Name(#Layout)
   Define_Com Class(#PRIM_TBLO.Column) Name(#Column1) DisplayPosition(1) Parent(#Layout)
   Define_Com Class(#PRIM_TBLO.Row) Name(#Row1) DisplayPosition(1) Parent(#Layout) Height(0.21)
   Define_Com Class(#PRIM_TBLO.Row) Name(#Row2) DisplayPosition(2) Parent(#Layout) Height(1.79)
   Define_Com Class(#PRIM_TBLO.Item) Name(#Layout2Item1) Alignment(CenterLeft) Column(#Column1) Manage(#ToggleBackGround) Parent(#Layout) Row(#Row1) Sizing(None) MarginLeft(8)
   Define_Com Class(#PRIM_TBLO.Item) Name(#Layout2Item2) Column(#Column1) Manage(#List) Parent(#Layout) Row(#Row2)
 
   Define_Com Class(#PRIM_MD.RaisedButton) Name(#ToggleBackGround) DisplayPosition(2) Left(8) Parent(#COM_OWNER) TabPosition(1) ThemeDrawStyle('MediumTitle') Top(13) Caption('DARK')
   Define_Com Class(#PRIM_MD.List) Name(#List) DisplayPosition(1) LayoutManager(#LayoutList) Left(0) Parent(#COM_OWNER) RowHeight(48) TabPosition(2) TabStop(False) ThemeDrawStyle('Card') Top(62) Height(523) Width(697)
   Define_Com Class(#PRIM_MD.ListLabel) Name(#ListIcon) DisplayPosition(3) Height(32) Icon('image') IconAlignment(Center) IconImageSizing(Cropped) Left(8) Parent(#List) TabPosition(3) TabStop(False) ThemeDrawStyle('ForegroundMediumPrimary') Top(8) Width(32)
   Define_Com Class(#PRIM_MD.ListLabel) Name(#ListPrimaryText) Caption('Single line item') DisplayPosition(4) Height(19) Left(68) Parent(#List) TabPosition(4) TabStop(False) ThemeDrawStyle('Heading3') Top(15) Width(611)
 
   Evtroutine Handling(#Com_owner.CreateInstance)
 
      Inz_List Named(#List) Num_Entrys(10)
 
   Endroutine
 
   Evtroutine Handling(#ToggleBackGround.Click)
 
      If (#Com_owner.ThemeBackground = Dark)
 
         #Com_owner.ThemeBackground := Light
         #ToggleBackGround.Caption := Dark
 
      Else
 
         #Com_owner.ThemeBackground := Dark
         #ToggleBackGround.Caption := Light
 
      Endif
 
   Endroutine
 
End_Com

See also

All Component Classes

Technical Reference

EPC142030 February 2019