もうずく開発が終了してしまう Xamarin ですが使い物にならなくなるのはも少し先です。後継の .NET MAUI への移行もも少しまった方が安定し正しいHowToも蓄積するでしょう。他WEB記事では見つからなかったプログラミング方法を覚え書きしておきたいと思います。
アプリの要件によっては、ImageButton 上に文字を表示しいシチュエーションがあります。素の Button は ImageSourceプロパティ で画像を指定し、Textプロパティ で文字も指定できますが、画像の周囲に文字は配置されます。
<Button Text="テスト" ImageSource="{local:ImageResource project.Images.oil.png}"
VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" />
画像の上に文字は描画するには、Grid に ImageButton → Label の順で 同じ行列位置に配置します。
<Grid HorizontalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<ImageButton Grid.Row="0" Grid.Column="0"
Source="{local:ImageResource project.公園の船.png}" />
<Label Grid.Row="0" Grid.Column="0" Text="テスト" FontSize="24"
VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" />
</Grid>
でもこれだけだと文字が見にくいです。ポイントの大きい Label を白で Label の下に配置してあげるとGoodです。
<Grid HorizontalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<ImageButton Grid.Row="0" Grid.Column="0"
Source="{local:ImageResource project.公園の船.png}" />
<Label Grid.Row="0" Grid.Column="0"
Text="テスト" FontSize="26" TextColor="White" FontAttributes="Bold"
VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" />
<Labe Grid.Row="0" Grid.Column="0" Text="テスト" FontSize="24"
VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" />
</Grid>
Android でも iOS でも 同様です。実際の実装では、.cs 側で動的に生成しています。せっかく用意したのですがボツになりました。.NET MAUI でもHowtoとして生きるとよいのですが、、、