FlexGrid for Silverlightのカラムヘッダーを複数行にしてみる。

FlexGrid for Silverlightではカラムやロウのヘッダーを複数行にして表示することができます。

今回はカラムヘッダーの複数行表示を試してみます。

MainPage.xmalにFlexGridを配置

例によってMainPage.xamlにFlexGridを配置しておきます。

<UserControl x:Class="FlexGridSample5.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>
</UserControl>

ColumnHeadersにセルを配置する

FlexGridではカラムヘッダーのセルを配置するColumnHeadersというパネルを持っています。ロウヘッダーの場合は、RowHeadersですね。

このColumnHeadersにRowとColumnを設定することにより複数行のカラムヘッダーを表示できるようになります。

// カラムヘッダーに表示するコントロールを配置するパネルを取得
GridPanel ch = this.FlexGrid.ColumnHeaders;

// カラムヘッダーに行を追加。（デフォルトで1行あるので、計2行になる。
ch.Rows.Add(new Row());

// 6列追加。
for (int i = 0; i < 6; i++)
{
    ch.Columns.Add(new Column());
}

// カラムヘッダーに値を設定
ch[0, 0] = "関東";
ch[1, 0] = "東京";
ch[0, 1] = "関東";
ch[1, 1] = "静岡";
ch[0, 2] = "関東";
ch[1, 2] = "横浜";
ch[0, 3] = "関西";
ch[1, 3] = "大阪";
ch[0, 4] = "関西";
ch[1, 4] = "神戸";
ch[0, 5] = "備考";
ch[1, 5] = "備考";

カラムヘッダーのマージ

これでカラムヘッダーの複数行化が実現できたのですが、カラムヘッダーをマージすることもできます。

// カラムヘッダーの最初の固定行のマージを許可する。
ch.Rows[0].AllowMerging = true;

// カラムヘッダーの最後の固定列のマージを許可する。
ch.Columns[5].AllowMerging = true;

// セルのマージを行うことを許可する。
this.FlexGrid.AllowMerging = AllowMerging.All;

コードのまとめ

public MainPage()
{
    InitializeComponent();

    // カラムヘッダーに表示するコントロールを配置するパネルを取得
    GridPanel ch = this.FlexGrid.ColumnHeaders;

    // カラムヘッダーに行を追加。（デフォルトで1行あるので、計2行になる。
    ch.Rows.Add(new Row());

    // 6列追加。
    for (int i = 0; i < 6; i++)
    {
        ch.Columns.Add(new Column());
    }

    // カラムヘッダーに値を設定
    ch[0, 0] = "関東";
    ch[1, 0] = "東京";
    ch[0, 1] = "関東";
    ch[1, 1] = "静岡";
    ch[0, 2] = "関東";
    ch[1, 2] = "横浜";
    ch[0, 3] = "関西";
    ch[1, 3] = "大阪";
    ch[0, 4] = "関西";
    ch[1, 4] = "神戸";
    ch[0, 5] = "備考";
    ch[1, 5] = "備考";

    // カラムヘッダーの最初の固定行のマージを許可する。
    ch.Rows[0].AllowMerging = true;

    // カラムヘッダーの最後の固定列のマージを許可する。
    ch.Columns[5].AllowMerging = true;

    // セルのマージを行うことを許可する。
    this.FlexGrid.AllowMerging = AllowMerging.All;

    // 取り合えず、行をセットしておく。
    for (int i = 0; i < 10; i++)
    {
        Row row = new Row();
        this.FlexGrid.Rows.Add(row);
        for (int j = 0; j < this.FlexGrid.Columns.Count; j++)
        {
            row[j] = j + i;
        }
    }
}