いろいろ試してみた結果。
サンプル
今回紹介するコードは Visual Studio プロジェクト形式で以下にあげてあります。
Label 要素について
Xamarin.Forms の Label 要素には枠線を指定できる属性が無い。だから何かしら工夫をしてそれっぽい見せ方をする必要がある。
方法1:Label を Frame で包む方法
<!-- Thin red border --> <Frame WidthRequest="110" HeightRequest="80" HorizontalOptions="Center" VerticalOptions="Center" Padding="0" OutlineColor="#f00" > <Label Text="Hello1" TextColor="#ff0" FontSize="20" HorizontalOptions="Center" VerticalOptions="Center" /> </Frame>
Frame 要素は OutlineColor 属性を持てる。つまり枠線が描ける。でも太さ指定はできないっぽい。
ちなみに試してはないが、この OutlineColor により描かれる枠線の見た目はプラットフォーム毎に違うらしい。
(Frame Class - Xamarin より引用)
方法2:Label を二重の Frame で包む方法
<!-- Thick red border, and black background --> <Frame WidthRequest="106" HeightRequest="76" HorizontalOptions="Center" VerticalOptions="Center" Padding="2" BackgroundColor="#f00" > <Frame Padding="0" BackgroundColor="#000" VerticalOptions="Fill" HorizontalOptions="Fill"> <Label Text="Hello2" TextColor="#ff0" FontSize="20" HorizontalOptions="Center" VerticalOptions="Center" /> </Frame> </Frame>
2つの Frame で Label を包み、外側の Frame の背景色は赤、内側の Frame の背景色は黒、とすると外側赤枠、内側黒塗りのオブジェクトっぽいものを実現できる。
方法3:いっそ Label を使わずに Button を使う方法
<!-- Thick red border --> <Button Text="Hello3" TextColor="#ff0" FontSize="20" WidthRequest="110" HeightRequest="80" HorizontalOptions="Center" VerticalOptions="Center" BackgroundColor="Transparent" BorderColor="#f00" BorderWidth="2" />
ぶっちゃけこれが一番楽で良い。
Button要素では BorderColor も BorderWidth も指定できるのだ。。。。Label にもこれ使わせておくれよ。。。。。
BackgroundColor を "Transparent" にしているので、この Button は押下しても何のエフェクトも出ないぞい。(余計ラベルっぽく見える)
一番右端の Hello4 っていうパーツは比較用に貼った普通の Button です。特に意味はないです。
おわりに
Xamarin.Forms はまだまだ過渡期。
要望の多そうな Label への枠線指定くらい Xamarin 側の標準属性で対応してくれる日がきっと来ると信じている。
だからこんな小手先な対応は将来きっと不要になる(と信じたい)。
でもでも Xamarin の中の人の対応を待ちきれない人はこうやってトリッキーな対応を探っていくしかないのだ。…のだ。。。