[.NET MAUI][レイアウト] HorizontalStackLayout の基本

本記事の概要

HorizontalStackLayout は、コントロールを垂直方向に整列するためのコンテナコントロールです。

この記事では、HorizontalStackLayout の基本使用方法について説明します。

公式サイト情報はコチラを参照してください。

HorizontalStackLayout の使用例

HorizontalStackLayout を配置する

HorizontalStackLayout を配置するには <HorizontalStackLayout> を使用します。

XAML の例

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppSample.MainPage">

    <HorizontalStackLayout>
        <!-- ここにコントロールを配置 -->
    </HorizontalStackLayout>

</ContentPage>

以下は Label を２つ配置する例です。

XAML の例

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppSample.MainPage">

    <HorizontalStackLayout>
        <Label Text="Hello .NET MAUI" Background="DarkOrange"/>
        <Label Text="C#" BackgroundColor="Yellow"/>
        <Label Text="Visual Studio 2022" BackgroundColor="HotPink" />
    </HorizontalStackLayout>

</ContentPage>

HorizontalStackLayout の使用例

水平方向のスペースを調整する

先ほどの例ではコントロール間のスペースはありません。

コントロール間の水平方向のスペースを調整するには Spacing プロパティを使用します。

以下は水平方向のスペースを 10 に設定する例です。

XAML の例

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppSample.MainPage">

    <HorizontalStackLayout Spacing="10">
        <Label Text="Hello .NET MAUI" Background="DarkOrange"/>
        <Label Text="C#" BackgroundColor="Yellow"/>
        <Label Text="Visual Studio 2022" BackgroundColor="HotPink" />
    </HorizontalStackLayout>

</ContentPage>

水平方向のスペースを調整する例

余白の設定

水平方向のスペース以外に、余白の設定をすることができます。

余白を設定するには Margin プロパティを使用します。

以下は Margin を 10 に設定する例です。

XAML の例

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppSample.MainPage">

    <HorizontalStackLayout Margin="10">
        <Label Text="Hello .NET MAUI" Background="DarkOrange"/>
        <Label Text="C#" BackgroundColor="Yellow"/>
        <Label Text="Visual Studio 2022" BackgroundColor="HotPink" />
    </HorizontalStackLayout>

</ContentPage>

Margin を設定する例

.NET MAUI Tips

本サイトでまとめている .NET MAUI Tips の一覧はこちらから確認できます。

Please follow and like us: