FlexGrid for WinForms
ライブ更新の表示
チュートリアル > ライブ更新の表示

今日の急速に変化する世界では、例えば、株式市場の変動だけでなく、スポーツのスコアカードから病院のダッシュボード、駐車場まで、さまざまな場面でライブ更新の使用が想定できます。 この解説では、データ ソースで頻繁に変化するライブ更新を表示する手順を説明します。

データ ソースからのライブ データ更新を表示するポータルを作成するには、データ ソースが BindingList<T> である必要があり、データ項目を表すクラスには、データ値の変更を通知する INotifyPropertyChanged が実装されている必要があります。次に、グリッドをデータソースにバインドします。 バインドされたグリッドが値の変更の通知を受け取ると、値を自動的に更新できます。 オプションの最後のステップとして、いくつかのカスタマイズを設定して、セルと矢印を異なる色で描画して、セル値の増減を示すことができます。リアルタイムデータを表示するグリッドを作成するための詳細な手順を見てみましょう。

アプリケーションを設定する

  1. 新しい Windows フォーム アプリを作成します。
  2. ツールボックスから FlexGrid コントロールをフォームにドラッグ アンド ドロップします。
    Observe: 空のグリッドがフォームに追加されます。

FlexGrid コントロールをデータ ソースにバインドする

リアルタイム データを表示するために、INotifyPropertyChanged インターフェイスを介してデータ値の変更を通知するデータ項目を含む BindingList の形式でダミー データ ソースを実装します。

  1. INotifyPropertyChanged インターフェイスを実装し、データ項目を表すクラスを作成します。 ここでは、FinancialData という名前のクラスを作成します。
    arrowFinancialData クラスのサンプル コードをクリックします。
  2. 上記で作成したクラスのオブジェクトを含む BindingList を作成します。 この例では、リアルタイム データをシミュレートするために値を変更するためにタイマーを使用していることに注意してください。
    arrowFinancialDataList クラスのサンプル コードをクリックします。
  3. C1FlexGrid クラスの DataSource プロパティを使用して、FlexGrid をこのデータ ソースにバインドします。
    //FinancialDataを取得します
dataList = Financial.FinancialData.GetFinancialData();
dataList.BatchSize = 250;
            
c1FlexGrid1.DataSource = dataList;

    'FinancialDataを取得します
dataList = FinancialData.GetFinancialData()
dataList.BatchSize = 250
c1FlexGrid1.DataSource = dataList

これで、グリッドがバインドされ、データ値の変更に関する通知を受け取るようになったため、リアルタイム データを自動的に更新できるようになりました。

セルの外観をカスタマイズする

ライブ データ更新の使いやすさをさらに向上させるために、変更セルの外観をカスタマイズしたり、スパークライン列を使用して変更値の履歴を表示したりすることができます。 このステップでは、要件に応じて実行できるカスタマイズの例を示しています。

  1. ここでは、「緑」や「赤」などのカスタム スタイルを作成して、グリッド列のセルの増減に適用します。 このスタイルは、前景色を緑と赤に設定して、それぞれ上昇と下降の変化を示します。
    //いくつかのセルをオーナー描画して、価格の上下をグラフィカルに表示します
c1FlexGrid1.DrawMode = C1.Win.C1FlexGrid.DrawModeEnum.OwnerDraw;
c1FlexGrid1.OwnerDrawCell += C1FlexGrid1_OwnerDrawCell;

// スタイルを追加 します(赤、緑、評価)
var style = c1FlexGrid1.Styles.Add("Red");
style.ImageAlign = ImageAlignEnum.LeftCenter;
style.ForeColor = Color.Red;

style = c1FlexGrid1.Styles.Add("Green");
style.ImageAlign = ImageAlignEnum.LeftCenter;
style.ForeColor = Color.Green;

    'いくつかのセルをオーナー描画して、価格の上下をグラフィカルに表示します
c1FlexGrid1.DrawMode = DrawModeEnum.OwnerDraw
AddHandler c1FlexGrid1.OwnerDrawCell, AddressOf C1FlexGrid1_OwnerDrawCell

' スタイルを追加 します(赤、緑、評価)
Dim style = c1FlexGrid1.Styles.Add("Red")
style.ImageAlign = ImageAlignEnum.LeftCenter
style.ForeColor = Color.Red
style = c1FlexGrid1.Styles.Add("Green")
style.ImageAlign = ImageAlignEnum.LeftCenter
style.ForeColor = Color.Green
  2. DrawMode プロパティを OwnerDraw に設定し、OwnerDrawCell イベントを使用してカスタム スタイルを適用し、グリッド セルに上向きまたは下向きの矢印イメージを表示します。
        private void C1FlexGrid1_OwnerDrawCell(object sender, C1.Win.C1FlexGrid.OwnerDrawCellEventArgs e)
{
    //セルが有効で、オーナー描画する必要があるかどうかを確認します。
    if (IsCustomCol(e.Col) && (e.Row >= c1FlexGrid1.Rows.Fixed && e.Col >= c1FlexGrid1.Cols.Fixed)) {
        var data = c1FlexGrid1.Rows[e.Row].DataSource as FinancialData;
        if (data is null) return;
        var list = data.GetHistory(c1FlexGrid1.Cols[e.Col].Name);
        double oldValue = 0;
        if (list != null && list.Count > 1)
        {
            oldValue = (double)list[list.Count - 2];
        }
        var val = Convert.ToDouble(c1FlexGrid1.GetData(e.Row, e.Col));
        // パーセンテージで変化を計算します。
        var change = oldValue == 0 || double.IsNaN(oldValue) ? 0 : ( val - oldValue) / oldValue;
        if (change == 0) {
            e.Image = null;
        }
        else if (change < 0)
        {
            e.Style = c1FlexGrid1.Styles["Red"];
            e.Image = Properties.Resources.DownRed;
        }
        else
        {
            e.Style = c1FlexGrid1.Styles["Green"];
            e.Image = Properties.Resources.UpGreen;
        }
    }
}

    Private Sub C1FlexGrid1_OwnerDrawCell(ByVal sender As Object, ByVal e As OwnerDrawCellEventArgs)
    'セルが有効で、オーナー描画する必要があるかどうかを確認します。
    If IsCustomCol(e.Col) AndAlso e.Row >= c1FlexGrid1.Rows.Fixed AndAlso e.Col >= c1FlexGrid1.Cols.Fixed Then
        Dim data = TryCast(c1FlexGrid1.Rows(e.Row).DataSource, FinancialData)
        If data Is Nothing Then Return
        Dim list = data.GetHistory(c1FlexGrid1.Cols(e.Col).Name)
        Dim oldValue As Double = 0

        If list IsNot Nothing AndAlso list.Count > 1 Then
            oldValue = list(list.Count - 2)
        End If

        Dim val = Convert.ToDouble(c1FlexGrid1.GetData(e.Row, e.Col))
        ' パーセンテージで変化を計算します。
        Dim change = If(oldValue = 0 OrElse Double.IsNaN(oldValue), 0, (val - oldValue) / oldValue)

        If change = 0 Then
            e.Image = Nothing
        ElseIf change < 0 Then
            e.Style = c1FlexGrid1.Styles("Red")
            e.Image = Resources.DownRed
        Else
            e.Style = c1FlexGrid1.Styles("Green")
            e.Image = Resources.UpGreen
        End If
    End If
End Sub
  3. スパークライン列を作成して、「Bid」列の「BidHistory」、「Ask」列の「AskHistory」などの列のセル値の変更履歴を表示します。 
    //列の書式と幅をカスタマイズします。
c1FlexGrid1.Cols["Bid"].Format = "N2";
c1FlexGrid1.Cols["Bid"].Width = 100;

//スパークライン列を追加して履歴を表示します。
var bidSparkCol = c1FlexGrid1.Cols.Insert(c1FlexGrid1.Cols["Bid"].Index + 1);
//FinancialData の対応する履歴プロパティと同じ名前。
bidSparkCol.Name = bidSparkCol.Caption = "BidHistory";
bidSparkCol.ShowSparkline = true;
bidSparkCol.Width = 70;
bidSparkCol.Sparkline.SparklineType = SparklineType.Line;
bidSparkCol.Sparkline.Styles.SeriesColor = Color.Gray;

    '列の書式と幅をカスタマイズします。
c1FlexGrid1.Cols("Bid").Format = "N2"
c1FlexGrid1.Cols("Bid").Width = 100

'スパークライン列を追加して履歴を表示します。
Dim bidSparkCol = c1FlexGrid1.Cols.Insert(c1FlexGrid1.Cols("Bid").Index + 1)
'FinancialData の対応する履歴プロパティと同じ名前。
bidSparkCol.Name = "BidHistory"
bidSparkCol.Caption = "BidHistory"
bidSparkCol.ShowSparkline = True
bidSparkCol.Width = 70
bidSparkCol.Sparkline.SparklineType = SparklineType.Line
bidSparkCol.Sparkline.Styles.SeriesColor = Color.Gray

 

 

Copyright © MESCIUS inc. All rights reserved.