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

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

サンプル

今回紹介するコードは Visual Studio プロジェクト形式で以下にあげてあります。

GitHub - xamarin-samples/XamarinFormsBorderedLabels: XAML Bordered Like Labels

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"
        />