読者です 読者をやめる 読者になる 読者になる

clock-up-blog

go-mi-tech

Xamarin.Forms で枠線付きのラベルを作る

Xamarin XAML

いろいろ試してみた結果。
f:id:kobake:20160827172615p:plain:w600

サンプル

今回紹介するコードは 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 属性を持てる。つまり枠線が描ける。でも太さ指定はできないっぽい。

f:id:kobake:20160827173253p:plain

ちなみに試してはないが、この OutlineColor により描かれる枠線の見た目はプラットフォーム毎に違うらしい。

f:id:kobake:20160827174615p:plain:w400
(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 の背景色は黒、とすると外側赤枠、内側黒塗りのオブジェクトっぽいものを実現できる。

f:id:kobake:20160827173259p:plain

方法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 は押下しても何のエフェクトも出ないぞい。(余計ラベルっぽく見える)

f:id:kobake:20160827173310p:plain


一番右端の Hello4 っていうパーツは比較用に貼った普通の Button です。特に意味はないです。
f:id:kobake:20160827175157p:plain

おわりに

Xamarin.Forms はまだまだ過渡期。
要望の多そうな Label への枠線指定くらい Xamarin 側の標準属性で対応してくれる日がきっと来ると信じている。

だからこんな小手先な対応は将来きっと不要になる(と信じたい)。

でもでも Xamarin の中の人の対応を待ちきれない人はこうやってトリッキーな対応を探っていくしかないのだ。…のだ。。。

});