サイズとスタイル

Wijmoコントロールでは、CSSを使用してそのスタイル、外観、およびサイズを指定します。

このため、Wijmoコントロールには"width"、"height"、"background"などのプロパティはありません。スタイルとレイアウトはCSSを使用して処理されます。WinFormsやXAMLなどの.NETコントロールの操作に慣れている場合、最初は少し違和感を覚えることがあります。ただし、一度慣れてしまえば、CSSが極めて強力で使いやすい機能であることがわかります。1つのコントロールタイプのすべてのインスタンスにも、特定のコントロールにも、再利用可能な数行のCSSで簡単にスタイルを設定できます。

コントロールのサイズ変更

コントロールのサイズと位置は、通常のHTML／CSSルールに従って、ホスト要素によって決定されます。たとえば、次のCSSルールは、"grid"クラスを持つ要素の高さを最大300ピクセルにし、グリッドの内容に合わせて自動的に計算することを指定します。

.grid {
    height: auto;
    max-height: 300px;
}

コントロールのスタイル設定

コントロールのスタイルの設定方法は、サイズの設定方法と同じです。フォント、色、マージン、パディングなど、コントロールの各部の視覚属性の多くを、CSSを使用して上書きできます。

.grid {
    height: auto;
    max-height: 350px;
}
.grid .wj-header.wj-cell {
    background-color: #000;
    color: #fff;
    font-weight: bold;
    border-right: solid 1px #404040;
    border-bottom: solid 1px #404040;
}
.grid .wj-cell {
    border: none;
    background-color: #fff;
}
.grid .wj-alt:not(.wj-state-selected):not(.wj-state-multi-selected) {
    background-color: #fff;
}
.grid .wj-state-selected {
    background: #000;
    color: #fff;
}
.grid .wj-state-multi-selected {
    background: #222222;
    color: #fff;
}

上記のスニペットは、CSSを使用してFlexGridコントロールの外観を変更する方法を示しています。このスニペットをFlexGridサンプルの1つに追加してみてください。グリッドが白黒で表示されるようになります。

ほかにも、CSSを使用してグリッドを簡単に変更することができます。グリッドのセルのスタイルを変更するには、CSSクラス_"wj-cell"_を使用します。次の例では、セルから境界線が削除され、背景が白に設定されます。

.grid .wj-cell {
    border: none;
    background-color: #fff;
}

コードを使用したスタイル設定

WijmoではCSSを使用してコントロールのレイアウトやサイズを決定しますが、コードを使用してコントロールのサイズやスタイルを制御したい場合もあります。

たとえば、FlexGridは、コントロールのレンダリングに使用されるフォントに基づいて行の高さを計算します。ただし、CSSの設定を上書きして、独自に行の高さを指定することもできます。それには、次のプロパティを設定します。

// スクロール可能な領域の行の高さを設定します
flex.rows.defaultSize = 34;
// 列ヘッダー領域の行の高さを設定します
flex.columnHeaders.rows.defaultSize = 40;