[.NET MAUI][Border] パディングを設定する

.NET MAUI

.NET MAUI TIPS

2022.08.26

本記事の概要
パディングを設定する
1. XAML の例
2. C#の例
.NET MAUI Tips

本記事の概要

この記事では Border とその内側のコントロール間のパディングを設定する方法について説明します。

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

パディングを設定する例

パディングを設定する

XAML の例

XAML で Border のパディングを設定するには Padding プロパティを使用します。

Padding の設定方法は２種類あり、１つは左右上下すべての間隔を同じにする方法、もう１つは左右上下すべての間隔を指定する方法です。

<!-- 左右上下すべての間隔を 5 にする方法 -->
<Border Padding="5" />
<!-- 左右上下すべての間隔を指定する(左10 右20 上30 下40) -->
<Border Padding="10,30,20,40" />

以下は、XAML で Border のパディングを設定する例です。

ここでは、左右上下すべての間隔を指定しています。値は左→上→右→下の時計回りで設定すると覚えておきましょう。

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">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Border Stroke="Blue"
                    StrokeThickness="3"
                    Padding="10,30,20,40">
                <Label Text=".NET MAUI" />
            </Border>

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

C#の例

以下は先ほどのXAML の例をコードビハインドで行う例です。

C# の例

public MainPage()
{
    InitializeComponent();
    myBorder.Stroke = Colors.Blue;
    myBorder.StrokeThickness = 3;
    myBorder.Padding = new Thickness(10, 30, 20, 40); 
}

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">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Border x:Name="myBorder">
                <Label Text=".NET MAUI" />
            </Border>

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

パディングを設定する例