FlexView

Q12 31

行ごとに色をかえストライプ表示を行う方法 

A12 31
行ごとに色をかえストライプ表示を行う方法には2パターンあります。

<A.FlexRecordクラスのBgColorとStripedOpacityプロパティの利用>
FlexRecordクラスのBgColorとStripedOpacityプロパティを利用すると、BgColorプロパティへ指定した背景色が偶数行へ反映され、BgColorプロパティで指定した色をStripedOpacityプロパティの比率(値)で透過し、白背景へ重ねたような背景色が奇数行へ反映されます。

このプロパティを利用して以下のように記述すると、奇数行の背景色が白、偶数行の背景色が黄緑で表示されます。

[サンプルコード1] ※記述ポイント抜粋
FlexView FlexView1 {
  X = 6;
  Y = 20;
  Width = 334;
  Height = 223;
  FlexRecord FlexRecord1 {
   /* ストライプ表示設定 */
   StripedOpacity = 100;
   BgColor = $CCFFCC;
   
   FlexHeader FlexHeader1 {
    Width = 30;
    Numbered = $TRUE;
   }
   FlexLabel FlexLabel1;
   FlexLabel FlexLabel2;
   FlexCheckButton FlexCheckButton1;
  }
  /* 行の追加 */
  insertRow(10);

※上記設定は、FlexLabelオブジェクトとFlexCheckButtonオブジェクトにしか有効になりません。

<B.各行のセルのBgColorプロパティを個々に設定する>
FlexViewへ表示されている行を取得して、取得した各行のセルのBgColorプロパティを個々に設定します。
こちらの方法だと、複数行単位のストライプ表示等<A>の方法より自由な設定が可能です。
以下のサンプルでは、2行毎にストライプ設定を行っています。

[サンプルコード2] ※記述ポイント抜粋
FlexView FlexView1 {
    X = 6;
    Y = 20;
    Width = 436;
    Height = 223;
    FlexRecord FlexRecord1 {
      FlexHeader FlexHeader1 {
        Width = 30;
        Numbered = $TRUE;
      }
      FlexLabel FlexLabel1;
      FlexCheckButton FlexCheckButton1;
      FlexTextBox FlexTextBox1;
      FlexListBox FlexListBox1;
    }
    /* 行の追加 */
    insertRow(10);
  }
  
  Function set_Color(row){
    row.FlexHeader1.BgColor = $DGRAY;
    row.FlexLabel1.BgColor = $DGRAY;
    row.FlexCheckButton1.BgColor = $DGRAY;
    row.FlexTextBox1.BgColor = $DGRAY;
    row.FlexListBox1.BgColor = $DGRAY;
  }
  
  /* 
    ★ストライプ設定★ 
  */
  /* 行数格納用 */
  var i = 0;
  /* FlexViewの全行を取得 */
  var row = FlexView1.GetRow();
  
  /* 背景色設定判断用 */
  var t_next = 0;
  
  /* 取得した行分ループ */
  while (!row.end) {   
    /* 背景色設定対象行かを計算 */
    var row_no = i %= 4;
      
    if(row_no == 0){
    /* 対象行の背景色を変更 */
      set_Color(row);
      t_next = 1; 
    }else if(t_next == 1){
      /* 対象行の背景色を変更 */
      set_Color(row);
      t_next = 0; 
    }
    i ++;
    /* 次の行をポイント */
    row.moveNext();
  }

管理番号:Flx_031
  Biz-Collections Bizの宝箱 トップへ
  Biz/Browser・Biz/Designer TIPS集 トップへ