Adding Some Layout

レイアウトの追加

現時点で、温度変換アプリには、ウィンドウの中央にボタンが1つ配置されています。
各Avaloniaウィンドウでは、コンテンツ領域に配置できるコントロールは1つだけのため、これ以上要素を追加することはできません。（レイアウト領域についての詳しい説明は次のページ「Controls reference page」で扱います。）
ウィンドウ内に複数のUI要素を配置するには、レイアウトコントロールを使用する必要があります。
レイアウトコントロールについての詳しい情報は、Layout controlsを参照してください。

StackPanelの挿入

StackPanel レイアウトコントロールを使用すると、ボタンの上にテキストを配置できます。

MainWindow.axaml ファイル内で、Buttonを<StackPanel>...</StackPanel>で囲んでください。

<StackPanel>
	<Button>Calculate</Button>
</StackPanel>

ボタンの上にTextBlockを追加してください。
（デフォルトの MainWindow.axaml にあった TextBlock タグを思い出すかもしれません。これはウィンドウ内にテキストを表示するものです。）
TextBlock の属性を次のように設定してください。

Margin=“5”
FontSize=“24”
HorizontalAlignment=“Center”
Text=“Temperature Converter”

<StackPanel>
    <TextBlock Margin="5"
               FontSize="24" 
               HorizontalAlignment="Center"
               Text="Temperature Converter">
    </TextBlock>

    <Button HorizontalAlignment="Center">Calculate</Button>
</StackPanel>

アプリを実行するか、プレビューアーで確認してください。
「Temperature Converter」という文字が、「Calculate」ボタンの上に表示されているはずです。
TextBlock を <Border>...</Border> タグで囲み、Border の属性を次のように設定してください。

Margin=“5”
CornerRadius=“10”
Background=“LightBlue”

<StackPanel>
    <Border Margin="5" CornerRadius="10" Background="LightBlue">
        <TextBlock Margin="5"
                   FontSize="24" 
                   HorizontalAlignment="Center"
                   Text="Temperature Converter">
        </TextBlock>
    </Border>

    <Button HorizontalAlignment="Center">Calculate</Button>
</StackPanel>

アプリを実行するか、プレビューアーで確認してください。
「Temperature Converter」という文字が、角の丸い青い枠（ボックス）の中に表示されているはずです。

StackPanelはデフォルトだと、要素を縦方向（垂直）に並べます。
Orientation 属性を Horizontal に設定すると、横方向（水平方向）に並べることができます。

Gridの挿入

次は、Grid レイアウトコントロールを追加します。Gridは、行と列で構成されたセルを作成し、そのセルの中に様々なコントロールを配置できるレイアウトです。

アプリが実行中であれば停止
MainWindow.axaml ファイル内で、Buttonを</Border>と<Button>の間に、<Grid>...</Grid>タグを挿入してください。

<StackPanel>
    <Border Margin="5" CornerRadius="10" Background="LightBlue">
        <TextBlock Margin="5"
            HorizontalAlignment="Center"
            FontSize="24"
            Text="Temperature Converter">
        </TextBlock>
    </Border>
    <Grid ShowGridLines="True" Margin="5" 
          ColumnDefinitions="120, 100"
          RowDefinitions="Auto, Auto">
    </Grid>
    <Button HorizontalAlignment="Center">Calculate</Button>
</StackPanel>

ここでは、Girdにいくつかの属性を設定しています。

2列2行
グリッド線の表示
セルの高さは内容に合わせて自動的に調整
空のセルの高さは自動設定では0になるため、現在はGirdが水平な一本線として表示される

Gridにコントロールを配置

Grid.Row と Grid.Column 属性で対象のセルを指定し、Grid の左側のセルに TextBlock コントロールを配置、「Celsius」と「Fahrenheit」を表示します。

Gridの行や列の番号は0から始まります。最初のセルは0番として扱われます。

        <Grid ShowGridLines="True" Margin="5" 
              ColumnDefinitions="120, 100"
              RowDefinitions="Auto, Auto">
            <TextBlock Grid.Row="0" Grid.Column="0" Margin="10">Celsius</TextBlock>
            <TextBlock Grid.Row="1" Grid.Column="0" Margin="10">Fahrenheit</TextBlock>
        </Grid>

次に、Grid.Row と Grid.Column 属性で対象のセルを指定し、Grid の右側のセルに TextBox コントロールを配置します。
TextBox は、キーボードから文字を入力できる入力欄を作成するためのコントロールです。

        <Grid ShowGridLines="True" Margin="5" 
              ColumnDefinitions="120, 100"
              RowDefinitions="Auto, Auto">
            <TextBlock Grid.Row="0" Grid.Column="0" Margin="10">Celsius</TextBlock>
            <TextBox Grid.Row="0" Grid.Column="1" Margin="0 5" Text="0"/>
            <TextBlock Grid.Row="1" Grid.Column="0" Margin="10">Fahrenheit</TextBlock>
            <TextBox Grid.Row="1" Grid.Column="1" Margin="0 5" Text="0"/>
        </Grid>

アプリを実行するか、プレビューアーで確認してください。
グリッド線で区切られたセル内に、追加したテキストと入力ボックスがウィンドウ上に表示されているはずです。次のページでは、アプリのウィンドウサイズを調整する方法を学びます。

最終更新日 July 11, 2026

Adding a Control Customizing the Avalonia Window