WPFで枠の中に色々書き込む方法

Question

実現したいこと

WPFで画面作成中です。
以下のように枠内に色々コントロールを配置することは可能なのでしょうか？

考えていること

<Border>や<Grid>を使うのかなと考えておりますが、正しいでしょうか？

ご存知の方よろしくお願いいたします。

Answer 1

WinFormsのようにデザイナ上でマウスで動かしてレイアウトすることもできますが、やってはいけません。
ウィンドウのサイズを変えたりすると、非常に残念なことになってしまいます。

基本的にはGridやtackPanel等のコンテナに、ButtonやTextBox等を入れていくことになります。
コンテナは入れ子にすることができ、例えば「Gridで縦に2つに切った後、左右それぞれGridを入れ横に切る」といったことができます。

個人的には、

• Gridを第一選択肢とする
• Gridは田の字に切らず、横か縦１方向だけにして入れ子にしていく
• DefinitionのAutoとStarをしっかり意識する

と思った通りのレイアウトにしやすいかなと思います。

プロパティウィンドウ（F4）やツールボックス（Ctrl+Alt+X）、ドキュメントのアウトライン（Ctrl+Alt+T）も出しておくとはかどります。

<Window
  x:Class="Questions227352.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="サンプル"
  Width="600"
  Height="400">
  <GroupBox
    Margin="10"
    BorderBrush="#FF4EBDFF"
    BorderThickness="2"
    Header="サンプル">
    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
      </Grid.ColumnDefinitions>

      <StackPanel>
        <TextBox Margin="10" Text="AAAAAAAAAA" />
        <TextBox Margin="10" Text="BBBBBBBBBB" />
        <TextBox Margin="10" Text="CCCCCCCCCC" />
      </StackPanel>

      <TextBox
        Grid.Column="1"
        Margin="10"
        Text="ここにもなにか書いたり。。。" />
    </Grid>
  </GroupBox>
</Window>

枠というのがWindowかGroupBoxかよくわからなかったので、両方サンプルといれました。

Comments

[pomupomu_purin]

TN8001
TN8001さんおはようございます。この度もご回答いただきまして誠にありがとうございます。
まさに私が想像していた通りのものをご提示いただきました。ありがとうございます。

多々アドバイスをいただいており、大変勉強になりました。数点疑問がありましたのでまた質問させてください。
１）「WinFormsのようにデザイナ上でマウスで動かしてレイアウトすることもできますが、やってはいけません。」→最初コントロールを配置するのもツールボックスから持ってくるのではなく、xamlでお書きでしょうか？ツールボックスを出しておくと便利とのコメントもありましたので、コントロールを持ってくるが、それの編集はxamlでとうい認識で合っていますか？

２）「例えば「Gridで縦に2つに切った後、左右それぞれGridを入れ横に切る」といったことができます。」→左右それぞれに異なる数、異なる箇所に行のGridを入れることが可能なのでしょうか？できないと思っていました。。

最後は質問ではないですが、「Gridは田の字に切らず、横か縦１方向だけにして入れ子にしていく」はすごく参考になりました。これまで完全に田の字に切りまくり、rowspan,columnspanを多用していました。
ありがとうございます。

[TN8001]

１）ツールボックスから持ってきてかまいません（私はコード側で「<gr」のように打って入力していますけど）
マウスで移動して
<TextBlock Margin="195,65,85,-65" />
こういった感じにマージンがぐちゃぐちゃになっているのはいけません。

２）右と左を「日目」のように区切れるって例えです。
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
</Grid>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
</Grid>
</Grid>

もちろん電卓のボタンを作るような（行桁が決まっている）ときは、私も田の字に区切ります。
たいがいは行の入れ替えや追加することになるので、入れ子のほうが変更点が少なくて済みます。

[pomupomu_purin]

TN8001様
ご返信ありがとうございます。
１）マージン等の修正やコードの可読性の観点では、「＜gr」のように入力していくほうが良さそうですね。TN8001様のやり方を真似させていただきます。

２）ほおおお。今自分の環境で確認致しました。左右を「日目」のようにできるのですね。感動です…！入れ子の使い方をマスターできていませんでした。

TN8001様には本当に色々教えていただいて感謝の気持ちでいっぱいです(´；ω；｀)
ありがとうございます。