読者です 読者をやめる 読者になる 読者になる

i++

プログラム系のメモ書きなど

WPF/XAML : Grid のセルに枠(罫線) / 背景色をつける

以下の理由から、コードから Grid の Row と Column でループして Rectanble を配置するのが一番楽という結論に。

  • Grid に用意されている ShowGridLines プロパティはレイアウト上の問題をデバッグするために提供されている機能であるため、スタイルを設定できない
  • Grid はテーブルとして描画されている訳ではなく、あくまで中においた UI要素の配置を決めるコンテナなので、配置するオブジェクトがないとその位置(セル)に描画できない
    • つまり、枠線(罫線)も背景色も設定できない

愚直に各セルに Rectanble を配置し、その Stroke と Fill で枠と背景色を描くのが一番ストレートでわかりやすそうです。

そしてその場合、 XAML でそれぞれ配置するのは手間なので、コードからやります。よく Webページなどで見るストライプ状の、行ごとに交互に色を変えるスタイルのテーブルなども作りやすいです。

Window のコンストラクタで InitializeComponent() されたあとに、以下の様なコードで行います。

// MyGrid が、XAML で作成した Grid の x:Name
int columnCount = MyGrid.ColumnDefinitions.Count;
int rowCount = MyGrid.RowDefinitions.Count;

// 外枠
Rectangle outerBorder = new Rectangle();
outerBorder.Stroke = Brushes.LightGray;
outerBorder.StrokeThickness = 1;
Grid.SetRowSpan(outerBorder, rowCount);
Grid.SetColumnSpan(outerBorder, columnCount);
MyGrid.Children.Insert(0, outerBorder);

// 各セルの枠と背景色を設定
// このサンプルでは行ごとに背景色を変える
for (int r = 0; r < rowCount; r++)
{
    Rectangle rect = new Rectangle();
    Grid.SetRow(rect, r);
    Grid.SetColumn(rect, 0);
    Grid.SetColumnSpan(rect, columnCount);
    if (r % 2 == 0)
    {
        rect.Fill = Brushes.WhiteSmoke;
    }
    else
    {
        rect.Fill = Brushes.White;
    }
    // ここでは行っていないが、枠を付けたい場合は、rect.Stroke を設定する
    // 元の要素の背景に表示されるよう、Add ではなく 0 に Insert
    MyGrid.Children.Insert(0, rect);
}
参考