29
21

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-04-18

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

#事象
まず、このようなアプリを作りました。
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

29
21
6

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?