Edited at

【備忘録】ウィンドウサイズに合わせてコントロールのサイズを変える【WPF】

かなりつまづいたので備忘録です。


事象

まず、このようなアプリを作りました。

image.png

この中央にあるListBoxを、ウィンドウのサイズに合わせてコントロールのサイズを変えたかったのですが・・・

image.png

このようにListBoxが下にくっつかない(サイズが変わらない)や、それより下のコントロールがくっつかない現象が発生しました。

通常、以下のようにすれば自動的にサイズ調整してくれます。

image.png

<ListBox Name="listBox1" Opacity="0.5" FontSize="16" TabIndex="3" Margin="10,10,10,13" Grid.RowSpan="7" Grid.ColumnSpan="3"/>

ですが、なぜかくっついてくれなかったので以下を試してみました。


AnchorやDockを適応してみる

いわゆるWindowsFormsでいうAnchorやDockを適応してみます。

WPFにはAnchorなどのプロパティは存在しません。

そのため、ListBoxに以下を記述します。

<ListBox Name="listBox1" Opacity="0.5" FontSize="16" TabIndex="3" Margin="10,10,10,13" Grid.RowSpan="7" Grid.ColumnSpan="3" Width="Auto" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>

Width HeightAuto

HorizontalAlignment VerticalAlignmentStretch

で指定します。

そうすることで、外側のウィンドウの大きさに合わせてコントロールの大きさが変わるようになります。


が、変化なし

これでも変化はなく、サイズを自動調整してくれませんでした。


結局何がダメだったのか

今回のアプリは、Gridを使ってコントロールの位置を決めていました。

そこで私は、何もためらいもなく以下のようにGrid.RowDefinitionを指定してしまいました。

<Grid Margin="0,0,0,0">

<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
            ︙

このように、固定にしてしまったわけです。

つまり、50ピクセル固定にしてしまったので、それ以上大きくならなかったわけですね。

はい、私の凡ミスです。いや、知らなかっただけなんですけどね、冷静に考えれば確かにそれ以上大きくならないのは当たり前でしょうけど・・・。


結論

RowDefinitionを自動調整したいので、ListBoxで指定している7番目の行をStarにします。

image.png

StarにすることでRowDefinitionが自動的にサイズ調整してくれます。

image.png


まとめ

コントロールのサイズを自動調整させたい場合は、


  • 自動的にサイズ調整してほしい方向にあるCみたいなアイコンをクリックしてくっつける


  • RowDefinitionを固定にせず、Starにする(Grid?に限る)


参考サイト


おまけ?

image.png

背景描いた人はこの人です:coffee:@Chino_Kafuu