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; } } }