.NET MAUIで様々なコントローラに下線を引く方法を紹介していきます。
紹介環境
当記事は以下の環境で作成しています。
開発環境
- Visual Studio 2022
- .Net 8
下線を引く方法について
下線を引くには BoxView を利用していきます。利用してみた例と見た目は以下のようになります。
<VerticalStackLayout>
<Label
Text="BoxViewで下線が引けます" />
<BoxView
Color="Red"
HeightRequest="10" />
</VerticalStackLayout>
各コントロールについて
VerticalStackLayout は、各コントロールの幅を広げて縦並びにすることができます。上から順番に並ぶため BoxView は下線を引きたいコントロールの後に配置します。
BoxView は、下線に利用しています。線の色はColorで、太さはHeightRequestで指定します。
ちなみに
下線が引きたいコントロールの下に BoxView を配置すればいいため、Grid でも以下のようにすることで下線が引けます。
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Label
Grid.Row="0"
Text="BoxViewで下線が引けます" />
<BoxView
Grid.Row="1"
Color="Red"
HeightRequest="10"/>
</Grid>応用方法について
この方法は BoxView の配置場所やレイアウトを変更することで様々な形にできます。以下の例では、当サイトの見出しを表現してみました。
<HorizontalStackLayout
Spacing="5">
<BoxView
Color="Red"
WidthRequest="5" />
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<BoxView
Grid.RowSpan="2"
Grid.Column="0"
Color="Gray"
WidthRequest="3" />
<Label
Grid.Row="0"
Grid.Column="1"
Padding="7,0"
Text="ここに対称のコントロールを配置します" />
<BoxView
Grid.Row="1"
Grid.ColumnSpan="2"
Color="Gray"
HeightRequest="3" />
</Grid>
</HorizontalStackLayout>
おわりに
下線の引き方を紹介してみました。最初はBorderやStyleなどで考えており簡単にできると思っていました。いざ試してみると、なかなか上手くいかないので悩みました。分かれば簡単なのですが、意外とこの方法が思いつかなかったので紹介してみました。この記事が役に立てば幸いです。