ウィンドウの幅や高さに合わせてコントロールのサイズを自動調整したい (autosize=true) - WPF

WPFでウィンドウの幅や高さに合わせてコントロールのサイズを自動変更する設定手順を紹介します。
なお、Windows Formでウィンドウの幅や高さに合わせてコントロールのサイズを自動変更する設定についてはこちらの記事を参照してください。

概要

WPFのフォームに配置したウィンドウコントロールにはAnchorプロパティが無いため、ウィンドウの幅や高さに合わせてコントロールのサイズを変更する場合にはMarginプロパティを利用します。

設定手順

アプリケーションの作成とコントロールの配置

WPFアプリケーションを新規作成します。作成後メインフォームのデザイナを表示します。


左側のツールボックスウィンドウから"TextBox"をクリックし選択しフォームにドロップします。フォームにTextBoxが配置されます。


TextBoxのハンドルをドラッグしてテキストボックスのサイズを変更します。ウィンドウの幅と同じ程度にサイズ変更します。


プロジェクトを実行します。下図のウィンドウが表示されます。


ウィンドウの枠をドラッグしてウィンドウのサイズを変更します。ウィンドウのサイズが変更されてもテキストボックスは起動時に表示されたサイズからは変わりません。


アプリのデバッグ実行を停止します。

サイズを自動変更する設定

フォームデザイナを表示します。


フォームデザイナのテキストボックスの右側の逆Cの字のアイコンの部分をクリックします。

クリックすると、アイコンの形状が連結された状態の画像に変わります。この状態でウィンドウのサイズを変更するとコントロールのサイズも自動で変更される設定になります。


アイコンのクリック前後のXAMLのコードは下記になります。
MainWindow.xaml (アイコンクリック前)
<Window x:Class="SimpleDockWpf.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:SimpleDockWpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <TextBox Height="23" Margin="10,10,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" HorizontalAlignment="Left" Width="497"/>
    </Grid>
</Window>
MainWindow.xaml (アイコンクリック後)
<Window x:Class="SimpleDockWpf.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:SimpleDockWpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <TextBox Height="23" Margin="10,10,10,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top"/>
    </Grid>
</Window>
「Margin="10,10,0,0"」がアイコンをクリックすることで、「Margin="10,10,10,0"」に変わることが確認できます。
「HorizontalAlignment="Left" Width="497"」の記述もなくなります。



以前の設定手順

  1. ウィンドウを新規作成する
  2. ウィンドウ内のコンテナコントロールを適当なものに変更する。(ステータスバーやメニューバーが必要な場合は、デフォルトのgridコントロールを削除し、DockPanelコントロールに置き換える)
  3. コンテナコントロールのwidth,heightプロパティの値を削除する。もしくは"auto"と入力する。
    • コンテナコントロールのwidth,heightをautoにすると、ウィンドウのサイズに合わせて、コンテナのサイズも変化します。
  4. コンテナの内部にコントロールを配置する。
  5. 配置したコントロールのDockPanle.Dockプロパティを設定する。
    • ステータスバーならば、Bottomに設定する等
  6. 配置したコントロールのHorizontalAlignプロパティをStrechに変更する。
以上で、ウィンドウの幅や高さに合わせてコントロールのサイズが変化するようになります。

著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
掲載日: 2010-02-10
iPentec all rights reserverd.