紫金橋クロスプラットフォームリアルタイムデータベース【スタイルシート】によるグラフィック要素のスタイル動的切り替え

紫金橋クロスプラットフォームソフトウェアはスタイルシート機能を提供しており、画面上のグラフィック要素の基本外観属性を定義し、動的にそのスタイルを切り替えることができます。

一、主要関数

bool SetStyleSheet(string Text)
説明:スタイルシートを設定します。形式は「セレクタ{プロパティ1:値; プロパティ2:値...}」です。例:「Line{color:RGB(255,0,0);background-color:RGB(255,255,255)}」。
セレクタには、図形タイプセレクタ、クラスセレクタ、名前セレクタの3種類があります。
1. 図形タイプには、各種図形のタイプ名が含まれます:Line,Rect,RoundRect,Ellipse,Text,Poly,PolyLine、
Bes,Button,Edit,Combobox,ListBox,Checkbox, RadioBox,TimeStart,TimeSpanなど。bodyはウィンドウを表します。
2. クラスセレクタは、図形のクラス名で選択します。クラス名の前に「.」を付けます。例えば .cls1
3. 名前セレクタは、図形の名前で選択します。名前の前に「#」を付けます。例えば #obj1
タイプとクラス名は単独で使用することも、組み合わせて使用することもできます。例えばText.class1は、クラス名がclass1のテキストを意味します。
オブジェクト名は一意であるため、他の2つの選択方法と組み合わせることはできません。
セレクタは複数のセレクタグループで構成でき、セレクタ間は「,」で区切ります。プロパティ値は中括号{}で囲み、{}内部には複数のキー値ペアを含めることができます。各キー値ペアはプロパティ名とプロパティ値で構成され、間は「:」で区切ります。キー値ペア間は「;」で区切ります。
プロパティには:color;background-color;font-family;font-size;border-color;border-widthなどがあります。
色値には3つの表現方式があります
1)RGB(R,G,B)またはRGBA(R,G,B,A)。R,G,B,Aはそれぞれ赤、緑、青の成分と透明度を表します。色の値は0-255です。透明度Aの値も0-255で、例えばRGB(255,0,0)は赤を表し、RGBA(255,0,0,125)は半透明の赤を表します。
2)#rrggbb形式、r,g,bはそれぞれ16進数で表現された赤、緑、青の成分を表します。例えば#FF0000は赤を表します。
3. 色名、定義済みの色名は以下の通りです:
Black,White,DarkGray,Gray,LightGray,Red,Green,Blue,Cyan,Magenta,Yellow,DarkRed,DarkGreen,DarkBlue,DarkCyan,DarkMagenta,DarkYellow。

二、使用例

string themeStyle;
themeStyle="body{background:rgb(90,90,90)};";//ウィンドウの背景色
themeStyle=themeStyle+"text{color:rgb(240,240,240)};";//テキスト色
themeStyle=themeStyle+"Line,PolyLine{stroke:rgb(240,240,240)};";//線、折れ線の色
themeStyle=themeStyle+"Ellipse,Rect,RoundRect,Bes,Poly{stroke:rgb(240,240,240);fill:rgb(240,240,240)};";//楕円、矩形、丸角矩形、曲線、多角形の境界線と塗りつぶしの色
themeStyle=themeStyle+".nav_btn{fill:rgb(255,255,255)}";//ナビゲーションボタンの背景色
themeStyle=themeStyle+".nav_txt{fill:rgb(90,90,90)}";//ナビゲーションボタンの文字色
themeStyle=themeStyle+".motor_circle{fill:rgb(255,255,255)}";//motor_circleクラスの図形、モーターサークル
themeStyle=themeStyle+".motor_text{fill:rgb(90,90,90)}";//motor_textクラスの図形、モーターサークル内のテキスト
themeStyle=themeStyle+".indicator1{fill:rgb(67,67,67)}";
themeStyle=themeStyle+".panel_bg{fill:rgb(240,240,240)}";
themeStyle=themeStyle+".panel_border{fill:rgb(83,83,83)}";
themeStyle=themeStyle+".panel_title1{fill:rgb(240,240,240)}";
themeStyle=themeStyle+".panel_title2{fill:rgb(83,83,83)}";
industrialControlSystem.ApplyStyleSheet(themeStyle);

適用例:

動画:

紫金橋クロスプラットフォームリアルタイムデータベース【スタイルシート】機能デモ

参考記事:紫金橋SCADAフォーラム

タグ: クロスプラットフォーム リアルタイムデータベース スタイルシート グラフィック要素 UIデザイン

5月23日 10:19 投稿