LoginSignup
1
0

More than 3 years have passed since last update.

WPF UniformGridで要素を縦に並べる方法、任意の行数や列数で並べる方法

Last updated at Posted at 2020-04-10

元々出来た事なのか、出来なかった事なのか
今更わからないのだが、検索するとなかなか出てこない。
実は、標準で如何様にでも出来るので、公開しようかと。

UniformGridは中の子要素を等間隔で並べてくれる便利なコンテナ。
Scrollviewerと組み合わせると、スクロール可能なサムネイルパネルを簡単に実装できる。
ただし、子要素を自動的に並べるため、子要素の大きさやUniformGridの大きさによっては
意図するレイアウトにならないケースも。
そこで誰しもが「縦に一列で並べる指定がしたい。縦に三つ並べて横並びに増やしたい」なんて事を発想するだろう。
そこで指定すべきプロパティがある。
それはRowsColumnsだ。

「縦一列で並べたい場合」

    <UniformGrid Columns="1">
        <Button Height="100" Width="100" Content="Button"/>
        <Button Height="100" Width="100" Content="Button"/>
        <Button Height="100" Width="100" Content="Button"/>
        <Button Height="100" Width="100" Content="Button"/>
    </UniformGrid>

image.png

「縦に三つ並べて横並びに増やしたい場合」

   <UniformGrid Rows="3">
        <Button Height="100" Width="100" Content="Button"/>
        <Button Height="100" Width="100" Content="Button"/>
        <Button Height="100" Width="100" Content="Button"/>
        <Button Height="100" Width="100" Content="Button"/>
        <Button Height="100" Width="100" Content="Button"/>
        <Button Height="100" Width="100" Content="Button"/>
        <Button Height="100" Width="100" Content="Button"/>
        <Button Height="100" Width="100" Content="Button"/>
        <Button Height="100" Width="100" Content="Button"/>
        <Button Height="100" Width="100" Content="Button"/>
        <Button Height="100" Width="100" Content="Button"/>
        <Button Height="100" Width="100" Content="Button"/>
    </UniformGrid>

image.png

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0