[.NET MAUI] 独自コントールの作成

ContentViewを作成

<Label Text="車種" ... />などのラベルを五角形の背景がついた独自コントールに置き換える。

まずは「プロジェクト > 新しい項目の追加 > .NET MAUI ContentView (XAML) 」で「名前: BHPANEL」を作成する。
BHPANEL.xamlは、Gridを使ってPolygonとLabelを重ねただけ。LabelのTextは、LabelTextという属性の値をバインドする。

BHPANEL.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Name="this"
             x:Class="MyProto.Controls.BHPANEL">

    <Grid BindingContext="{x:Reference this}" WidthRequest="90">
        <Polygon Points="0,0,75,0,85,20,75,40,0,40" Fill="#D5E4F2" StrokeThickness="0" />
        <Label Text="{Binding LabelText}" FontSize="16" TextColor="#000" Margin="4,8"/>
    </Grid>

</ContentView>

次にBHPANEL.xamlのコードビハインドで、LabelTextプロパティを実装する。

BHPANEL.xaml.cs

namespace MyProto.Controls;

public partial class BHPANEL : ContentView
{
    public static readonly BindableProperty LabelTextProperty = BindableProperty.Create(nameof(LabelText), typeof(string), typeof(BHPANEL), string.Empty);

    public string LabelText
    {
        get => (string)GetValue(LabelTextProperty);
        set => SetValue(LabelTextProperty, value);
    }

    public BHPANEL()
    {
        InitializeComponent();
    }
}

Gomita

MainPage.xaml側は、まず<ContentPage>にxmlns:controls属性を追加して…

MainPage.xaml

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:MyProto.Controls"
             x:Class="MyProto.MainPage"
             Shell.NavBarIsVisible="False">

<Label Text="車種" ... />などを<controls:BHPANEL>に置き換える。

MainPage.xaml

                    <controls:BHPANEL LabelText="車種" />

独自コントールBHPANELに置き換えた後の見た目はこんな感じ。

Gomita

五角形のPolygonだと中身の文字列が増えて横幅を広げたい時に困りそうなので、Rectangle（四角形）とPologon（三角形）を横に並べて、その上にLabelを重ねる方式に変更する。

HorizontalStackLayoutで横に並べた四角形と三角形がなぜかピタリとくっつかずに1pxほどの隙間ができてしまうので、三角形の左側に-1のMarginを与えることで解決。CSSのネガティブマージンの知識が役だった。

    <Grid BindingContext="{x:Reference this}">
        <HorizontalStackLayout VerticalOptions="Center">
            <Rectangle Fill="#D5E4F2"
                       WidthRequest="{Binding PanelWidth}" HeightRequest="40" />
            <Polygon Points="0,0,10,20,0,40" Fill="#D5E4F2" StrokeThickness="0"
                     WidthRequest="16" Margin="-1,0,0,0" />
        </HorizontalStackLayout>
        <Label Text="{Binding LabelText}" FontSize="16" TextColor="#000" Margin="4,8"/>
    </Grid>

四角形部分の横幅を可変にするため、PanelWidthという独自プロパティを追加する。
デフォルト値はBindableProperty.Createの4つめの引数で設定する。

BHPANEL.xaml.cs

+    public static readonly BindableProperty PanelWidthProperty = BindableProperty.Create(nameof(PanelWidth), typeof(string), typeof(BHPANEL), "70");
...
+    public string PanelWidth
+    {
+        get => (string)GetValue(PanelWidthProperty);
+        set => SetValue(PanelWidthProperty, value);
+    }