WinUI 3 / XAML の Grid.Width 設定方法まとめ【Auto・固定・スター】

2025-04-11

2025年最新版｜WinUI 3 アプリ開発で Grid のサイズ指定に悩んでいる方向けに、Width/Height プロパティの設定パターンを解説します。

1. Auto（自動サイズ）

中身の要素に合わせてサイズが自動で決まる指定方法です。

<Grid Width="Auto">
    <TextBlock Text="コンテンツに合わせてサイズが決まる" />
</Grid>

サイズが動的に変わる UI 要素に最適です。

数値を指定して、固定サイズの Grid を作る方法です。

<Grid Width="200">

レイアウトをきっちり決めたい時に使います。単位は記述しませんが「px（ピクセル）」として解釈されます。

*（スター）は Grid.ColumnDefinitions や Grid.RowDefinitions によるレイアウト分割に使います。

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>

これは「1:2」の比率で列を分けるという意味になります。

注意：Grid 自体の Width="*" のような使い方はできません（コンパイルエラーになります）。

WinUI 3 や XAML レイアウトにおける Grid の設計は慣れるまでややこしいですが、パターンが分かればとても強力です。

MenuFlyout は WinUI 3 で便利なポップアップメニュー