Browse by Tags

All Tags » スタイル
  • UltraChart 折れ線グラフの色を指定する

    UltraChart ではグラフに自動的に色を切り替えて配色するようになっていますが、状況に応じて配色を変更したい状況があります。ここでは UltraChart の折れ線グラフ(合成チャート)の色を指定する方法をご紹介します。 実装方法 各折れ線グラフ(NumericSeries)の PaintElement コレクション(PEs)に、色情報を加えます。 C# //シリーズの生成 NumericSeries lineSeries1 = this.GetSeriesABound(''Series A''); // ラインの色指定 lineSeries1.PEs.Add(new PaintElement(Color.FromArgb(116, 70, ...
    Posted to Yuki Mita (Weblog) by ymita on February 14, 2017
  • XamDataGrid 行のスタイルを変更する

    XamDataGrid では、デフォルトで選択行やアクティブ行、ホバー行など各種状態に対して青色を基調とした配色が行われています。これら行のスタイルを状況に応じて変更したいという状況はよくあります。今回は行のスタイルを状態毎に個別に変更する方法をご紹介します。   実装方法 XamDataGrid の行のスタイルは DataRecordPresenter クラスで設定することができます。XamDataGrid の各要素の構成は「xamDataGrid について」を参照下さい。 DataRecordPresenter に対するスタイルを作成します。Setter の Value には ComboBox で選択している色をバインドしています。実装の詳細は サンプル ...
    Posted to Yuki Mita (Weblog) by ymita on February 1, 2017
  • XamDataGrid セルのスタイルを状態に応じて変更

    XamDataGrid のセルのスタイルを、行の状態に応じて変更してみます。 XamDataGrid の提供する CellBinding 機能を利用することで簡潔に実装することができます。 Title 列の CellBindings コレクションに、セルの背景色(CellValuePresenter.Foreground)と ViewModel の ForegroundColor プロパティをバインドします。 <igDP:XamDataGrid DataSource=''{Binding Tasks}'' Grid.Row=''1''> <igDP:XamDataGrid.FieldLayouts> ...
    Posted to Yuki Mita (Weblog) by ymita on December 5, 2016
  • AppStylist スタイル ライブラリのロード

    Infragistics Windows Forms と Infragistics ASP.NET では素早く統一感のある外観を設定することのできる AppStylist というツールを提供しています。AppStylist に関しては こちら と こちら を御覧ください。 今回は AppStylist で設定した外観を、Windows Forms アプリケーションに読み込む方法をご紹介します。 AppStylist では設定内容を、拡張子が isl の XML ファイルに保存します。スタイリングを行うフォームが読み込まれる前に、この isl ファイルを読み込みます。 C# public Form1() { InitializeComponent(); ...
    Posted to Yuki Mita (Weblog) by ymita on November 18, 2016
  • igGrid 列のスタイリング

    igGrid の列をスタイリングしてみましょう。 セルは columnCssClass オプション、ヘッダは headerCssClass オプションを利用してそれぞれスタイリングを行うことができます。 igGrid では通常セルやヘッダのテキストを左寄せで表示するようになっています。今回は columnCssClass と headerCssClass を利用してテキストのアラインメントを指定します。 ヘッダ・・・すべての列で中央寄せ セル・・・数値列は右寄せ、テキスト列は左寄せ   スタイル: <style> /*ヘッダのスタイル*/ .headerStyle { text-align: ...
    Posted to Yuki Mita (Weblog) by ymita on August 3, 2016
  • igDataChart - 条件によるスタイリングの変更

    棒グラフに表示されているデータのうち、特定の条件にあるデータポイントの色を変えてみます。 ここでは売上データのうち、売上が一定値を下回るデータポイントに赤色を配色することで、 初見でも注目すべきデータが強調されます。 手順 1.assigningCategoryStyle イベント発生の有効化 assigningCategoryStyle イベント内でスタイリングのロジックを実装しますが、デフォルトでは assigningCategoryStyle イベントは発生しないようになっています。isCustomCategoryStyleAllowed オプションに true を設定してこのイベントが発生するようにします。 series: [ { ...
    Posted to Yuki Mita (Weblog) by ymita on July 11, 2016
  • Ignite UI igDataChart のデータバインドとデータフォーマット

    Ignite UI で提供しているチャートコントロール、igDataChart を取り上げます。今回はデータのバインド方法や軸の設定など基本的なプロパティの利用方法と、よくお問い合わせのある X 軸のフォーマット、更にツールチップのカスタマイズ方法をご紹介します。 1.データバインド 1-1.データの準備 まずはバインドするデータを用意します。jQuery でよく利用される JSON 形式データに monthlyAccess と accessDate という2つのメンバを用意します。 var data = [ { ''monthlyAccess'':900, ''accessDate'': new Date(2014, 05, 01) }, { ...
    Posted to Yuki Mita (Weblog) by ymita on May 19, 2014
Powered by Community Server (Commercial Edition), by Telligent Systems