今までやったのは、ウィンドウにボタンが１つだけっていう寂しいものだった。
ということで、ボタンをいくつか置いてみようと思う。
何も考えずにWindow#AddChildを呼ぶと例外が飛んでしまう。
public class CodeLayoutWindow : Window
{
private static readonly int BUTTON_COUNT = 4;
public CodeLayoutWindow()
{
InitializeComponent();
}
private void InitializeComponent()
{
for (int i = 0; i < BUTTON_COUNT; i++)
{
Button btn = new Button();
btn.Content = string.Format("button: {0}", i + 1);
this.AddChild(btn); // この行で例外が出る
}
}
}
ContentControlのコンテンツは単一要素である必要があるらしい。
それならAddなんていう名前のメソッドにしてほしくない！っていう気もするけど仕方ないのだろう。
きっとイッパイ追加できるものもあるはず！！
それは置いといて、とりあえずイッパイ追加したい場合はStackPanel, DockPanel, Grid, Canvasみたいなものを使うと出来る。
とりあえず、一番とっつきやすいStackPanelからやってみようと思う。
使い方は簡単。StackPanelを作ってChildrenプロパティにAddしてやるだけだ。
ボタンを4個くらい追加してみようと思う。
public class CodeLayoutWindow : Window
{
private static readonly int BUTTON_COUNT = 4;
// ここにいっぱい追加する
private StackPanel panel;
public CodeLayoutWindow()
{
InitializeComponent();
}
private void InitializeComponent()
{
this.Title = "レイアウト(StackPanel)";
this.Width = 300;
this.Height = 250;
// ウィンドウにパネルを追加
panel = new StackPanel();
this.AddChild(panel);
for (int i = 0; i < BUTTON_COUNT; i++)
{
Button btn = new Button();
btn.Content = string.Format("button: {0}", i + 1);
panel.Children.Add(btn);
}
}
}
赤い太字の部分がポイントになるかな。
Windowに直接乗せるのはStackPanelで、StackPanelにボタンを置いていく。
実行すると、下みたいな画面が表示される。
ボタンのマージンを設定すれば、程よく間隔もあいたりする。
ループの中に下みたいなコードを追加する。
btn.Margin = new Thickness(10, 5, 10, 5);
実行すると、程よい隙間があいた感じになる。
このStackPanelは、横方向に並べたりも出来るみたい。
Orientationプロパティで制御を行える。
this.Title = "レイアウト(StackPanel)";
// サイズを中身によって変える
this.SizeToContent = SizeToContent.WidthAndHeight;
// ウィンドウにパネルを追加
panel = new StackPanel();
panel.Orientation = Orientation.Horizontal; // 横方向に並べる
this.AddChild(panel);
for (int i = 0; i < BUTTON_COUNT; i++)
{
Button btn = new Button();
btn.Content = string.Format("button: {0}", i + 1);
btn.Margin = new Thickness(10, 5, 10, 5);
panel.Children.Add(btn);
}
青文字の部分は、たまたま見つけたプロパティでサイズを中身に応じてよきに計らってくれるものみたい。
実行すると下のようになる。
今度は、これをXAMLで書いて見ようと思う。
コードでの書き方がわかれば、XAMLはそれを転記するような感じなんで割りと簡単に出来た。
<Window x:Class="CodeLayout.LayoutWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="LayoutWindow" SizeToContent="WidthAndHeight">
<StackPanel>
<Button Content="button: 1" Margin="10 5" />
<Button Content="button: 2" Margin="10 5" />
<Button Content="button: 3" Margin="10 5" />
<Button Content="button: 4" Margin="10 5" />
</StackPanel>
</Window>
マージンを2個だけ指定すれば、左右と上下に割り当ててくれるのがちょびっと楽チンかも。
でも、ボタンを４個定義するのはめんどかった。
実行すると、下みたいな画面が出てくる。
当然StackPanelに「Orientation="Horizontal"」を付けると横並びにもなる。
今日は、眠いのでここまで。