[.NET MAUI][Rectangle] 矩形描画の基本

本記事の概要

Rectangle は矩形を描画するためのコントロールです。

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

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

矩形描画の基本

Rectangle の基本使用方法

XAML で 矩形 を作成するには <Rectangle> を使用します。

矩形の高さは HeightRequest プロパティで、幅は WidthRequest プロパティで指定します。

矩形（Rectangle）を画面上のどこに表示するかは HorizontalOptions（水平方向）プロパティ、

VerticalOptions（垂直方向）プロパティを使用します。

また、塗りつぶしの色は Fill プロパティで指定します。

XAML の例

以下は、XAML で Rectangle を作成する例です。

この例では、塗りつぶしを青、幅と高さを 150、配置位置を中央に に設定しています。

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

            <Rectangle Fill="Blue"
                       WidthRequest="150"
                       HeightRequest="150"
                       HorizontalOptions="Center" 
                       VerticalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

C#の例

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

public MainPage()
{
    InitializeComponent();

    myRectangle.Fill = Colors.Blue;
    myRectangle.WidthRequest = 150.0;
    myRectangle.HeightRequest = 150.0;
    myRectangle.HorizontalOptions = LayoutOptions.Center;
    myRectangle.VerticalOptions = LayoutOptions.Center;
}

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

            <Rectangle x:Name="myRectangle" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

矩形描画の基本

.NET MAUI Tips

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

Please follow and like us: