FlexGrid for Silverlightにアンバウンドモードでデータの設定とセルの書式設定・マージを試す

FlexGrid Controls Silverlight

SilverlightのDataGridはRowインスタンスの生成はDataGrid自身が行い外部から制御できません。しかし、FlexGridではアンバウンド（データソースに連結されていない）と呼ばれるモードが用意されています。アンバウンドでは、外部で生成したRowインスタンスをFlexGridに設定することができます。
WinFormsに慣れている人はアンバウンドモードのほうが扱いやすいかもしれませんね。
アンバウンドモードを試すついでに、セルの書式設定やマージも行ってみます。

XAMLの定義

<UserControl x:Class="FlexGridSample4.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <c1:C1FlexGrid x:Name="FlexGrid" Grid.Row="1"/>
    </Grid>
</UserControl>

Column・Rowの設定

まずは列を追加しましょう。

// 列を追加
this.FlexGrid.Columns.Add(new Column { Header = "製品名" });
this.FlexGrid.Columns.Add(new Column { Header = "価格" });
this.FlexGrid.Columns.Add(new Column { Header = "発売日" });

これはSilverlightでも普通に行っていますね。実行してみます。

次にRowインスタンスを自前で生成してFlexGridに追加します。

for (int i = 0; i < 5; i++)
{
    // Silverlight版DataGridではバインディングソース経由でしか行を増やせないが、
    // FlexGridではRowインスタンスを直接Addできる。
    this.FlexGrid.Rows.Add(new Row());
}

セルにデータを設定

FlexGridにColumnとRowを設定することができました。今度は、セルにデータをセットしてみましょう。

this.FlexGrid[0, 0] = "REGZA";
this.FlexGrid[0, 1] = 49800;
this.FlexGrid[0, 2] = DateTime.Parse("2010/12/02");

this.FlexGrid[1, 0] = "BRAVIA";
this.FlexGrid[1, 1] = 35500;
this.FlexGrid[1, 2] = DateTime.Parse("2010/12/02");

this.FlexGrid[2, 0] = "VIERA";
this.FlexGrid[2, 1] = 41200;
this.FlexGrid[2, 2] = DateTime.Parse("2010/12/15");

this.FlexGrid[3, 0] = "REAL";
this.FlexGrid[3, 1] = 41200;
this.FlexGrid[3, 2] = DateTime.Parse("2011/02/03");

this.FlexGrid[4, 0] = "Visole";
this.FlexGrid[4, 1] = 43200;
this.FlexGrid[4, 2] = DateTime.Parse("2011/02/03");

// これはArgumentOutOfRangeExceptionが発生する。
//this.FlexGrid[4, 0] = "Wooo";


string・int・DateTimeともに問題なく設定できることがわかります。

データの書式設定

セルにデータを表示することはできたのですが、発売日列に時間などが表示されてしまっています。そこで、Formatプロパティでセルの書式設定を行ってみます。

// 列のセル内の値を書式設定
this.FlexGrid.Columns[1].Format = "#,##"; // 数値をカンマ区切り表示
this.FlexGrid.Columns[2].Format = "yyyy/MM/dd"; // 年月日のみ表示

セルのマージ(結合）

FlexGridでは隣り合うセルが同じ値を持っている場合、それらのセルをマージ（結合）して表示する機能があります。

// セルマージを行うかを設定
this.FlexGrid.AllowMerging = AllowMerging.Cells;

// 列ごとにセルのマージを許可するかを設定
this.FlexGrid.Columns[1].AllowMerging = true;
this.FlexGrid.Columns[2].AllowMerging = true;

ちょっと見ずらいかもしれませんが、セルがマージされています。

全体のソース

public MainPage()
{
    InitializeComponent();

    // 列を追加
    this.FlexGrid.Columns.Add(new Column { Header = "製品名" });
    this.FlexGrid.Columns.Add(new Column { Header = "価格" });
    this.FlexGrid.Columns.Add(new Column { Header = "発売日" });

    for (int i = 0; i < 5; i++)
    {
        // Silverlight版DataGridではバインディングソース経由でしか行を増やせないが、
        // FlexGridではRowインスタンスを直接Addできる。
        this.FlexGrid.Rows.Add(new Row());
    }

    this.FlexGrid[0, 0] = "REGZA";
    this.FlexGrid[0, 1] = 49800;
    this.FlexGrid[0, 2] = DateTime.Parse("2010/12/02");

    this.FlexGrid[1, 0] = "BRAVIA";
    this.FlexGrid[1, 1] = 35500;
    this.FlexGrid[1, 2] = DateTime.Parse("2010/12/02");

    this.FlexGrid[2, 0] = "VIERA";
    this.FlexGrid[2, 1] = 41200;
    this.FlexGrid[2, 2] = DateTime.Parse("2010/12/15");

    this.FlexGrid[3, 0] = "REAL";
    this.FlexGrid[3, 1] = 41200;
    this.FlexGrid[3, 2] = DateTime.Parse("2011/02/03");

    this.FlexGrid[4, 0] = "Visole";
    this.FlexGrid[4, 1] = 43200;
    this.FlexGrid[4, 2] = DateTime.Parse("2011/02/03");

    // これはArgumentOutOfRangeExceptionが発生する。
    //this.FlexGrid[4, 0] = "Wooo";

    // 列のセル内の値を書式設定
    this.FlexGrid.Columns[1].Format = "#,##"; // 数値をカンマ区切り表示
    this.FlexGrid.Columns[2].Format = "yyyy/MM/dd"; // 年月日のみ表示

    // セル結合を行うかを設定
    this.FlexGrid.AllowMerging = AllowMerging.Cells;

    // 列ごとに結合を許可するかを設定
    this.FlexGrid.Columns[1].AllowMerging = true;
    this.FlexGrid.Columns[2].AllowMerging = true;
}

関連記事