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

2159 ワード
UniformGrid Xaml WPF WPF テキストリンク

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

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

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

    <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>

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

   <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>