ついにGridを使おうと思う。
どうやら色々見てると、Gridが一番柔軟にものを配置できるっぽい。
要はHTMLのテーブルみたいなことが出来る！！！
使い方は、今までのStackPanelやDockPanelに比べるとちょっとめんどくさい。
GridのRowDefinitionsやColumnDefinisionsプロパティに行と列の定義を追加して表を組んでいく。
とりあえず、２ｘ２の表の枠組みを組むのは、下のコードでOK。
this.Title = "Code Grid Window";
this.Width = 300;
this.Height = 300;
// 2行・2列のグリッドをウィンドウに追加
Grid grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition());
grid.RowDefinitions.Add(new RowDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());
this.AddChild(grid);
// わかりやすさのため線を表示
grid.ShowGridLines = true;
次に、ここにボタンを置いてみようと思う。置き方はDockPanelと同じノリでいける。
Grid.SetColumnやGrid.SetRowとかでGridの何処に置くか決めてからGridに追加していく。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
namespace CodeGrid
{
class GridWindow : Window
{
public GridWindow()
{
InitializeComponent();
}
private void InitializeComponent()
{
this.Title = "Code Grid Window";
this.Width = 300;
this.Height = 300;
// 2行・2列のグリッドをウィンドウに追加
Grid grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition());
grid.RowDefinitions.Add(new RowDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());
this.AddChild(grid);
// わかりやすさのため線を表示
grid.ShowGridLines = true;
// ボタンを配置
for (int row = 0; row < 2; row++)
{
for (int col = 0; col < 2; col++)
{
Button btn = new Button();
btn.Content = string.Format("{0},{1}", col, row);
// 場所を決めてから追加する
Grid.SetColumn(btn, col);
Grid.SetRow(btn, row);
grid.Children.Add(btn);
}
}
}
}
}
ばっちりだ！でも、世の中何事も均等でうまくいくということは決して無い。
誰かがたくさんとったり、少ししかとれなかったりということが無いと競争しようって気がおきないしね。
ということで（どういうことで？）、ボタンにも世の中を分かってもらおうとおもう。
具体的には、0列目の取り分を、ボタンが必要な最小のスペースにしてみようと思う。こういう設定はColumnDefinitionクラスのWidthプロパティで設定できる。
Widthプロパティは、名前からうける印象とは違ってdoubleやint型じゃないのに注意！！
GridLength構造体になってます。何故かって？とりあえず、自動調整って値を持たせるためくらいにしか思ってないけどあってるかな？
コンテンツに応じてサイズを自動調整するには、WidthプロパティにGridLength.Autoを指定することで可能になる。実際にやってみた結果を下に書きます。
赤い部分が該当箇所になります。
this.Title = "Code Grid Window";
this.Width = 300;
this.Height = 300;
// 2行・2列のグリッドをウィンドウに追加
Grid grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition());
grid.RowDefinitions.Add(new RowDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());
this.AddChild(grid);
// 0列目は必要最低限で
grid.ColumnDefinitions[0].Width = GridLength.Auto;
// わかりやすさのため線を表示
grid.ShowGridLines = true;
// ボタンを配置
for (int row = 0; row < 2; row++)
{
for (int col = 0; col < 2; col++)
{
Button btn = new Button();
btn.Content = string.Format("{0},{1}", col, row);
Grid.SetColumn(btn, col);
Grid.SetRow(btn, row);
grid.Children.Add(btn);
}
}
次はGridで、もうちょい複雑な感じのものを作ってみようかな。