1. Home
  2. Xamarin
  3. Xamarin.forms
  4. Control Tips
  5. 部品コントロール Tips
  6. Label

03.フォントサイズや太字・斜体の設定をするには？

Update 2018/09/03
< Prev Tips    Next Tips>

Labelコントロールに表示するテキストには、フォントサイズや、太字、斜体といった装飾を行うことができます。

ここでは、それらの方法について説明します。



FontSize プロパティを使用すると、フォントサイズを変更することができます。

数値で指定する他に、以下表のようにNamedSize 構造体の値を指定することもできます。

NamedSize 構造体
値 説明
Micro 極小
Small 小
Medium 中
Large 大

以下にXamlでフォントサイズを指定する例を示します。

2行目は数値でフォントサイズを指定し、3〜6行目は NamedSize 構造体でサイズを指定しています。

MainPage.xaml 
  <StackLayout HorizontalOptions="Center" VerticalOptions="CenterAndExpand">
    <Label x:Name="label1" Text="Size 15" FontSize="15" />
    <Label x:Name="label2" Text="Size Micro" FontSize="Micro" />
    <Label x:Name="label3" Text="Size Small" FontSize="Small" />
    <Label x:Name="label4" Text="Size Medium" FontSize="Medium" />
    <Label x:Name="label5" Text="Size Large" FontSize="Large" />
</StackLayout>

次に、コードビハインドでの実装例を以下に示します。

9行目は数値でのサイズ指定です。

10行目以降は NamedSize 構造体の値を指定していますが、Device.GetNamedSize メソッドを使用して、ターゲットとなるデバイスのサイズになるよう変換をかけて指定しています。

MainPage.xaml.cs 
  namespace labelSample03
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            label1.FontSize = 15;
            label2.FontSize = Device.GetNamedSize(NamedSize.Micro, typeof(Label));
            label3.FontSize = Device.GetNamedSize(NamedSize.Small, typeof(Label));
            label4.FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label));
            label5.FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label));
        }
    }
}

実行例を以下に示します。




太字や斜体の設定をするには、FontAttributes プロパティを使用します。

FontAttributes プロパティには、以下に示す FontAttributes 構造体の値を指定することができます。

FontAttributes 構造体
値 説明
Bold 太字
Italic 斜体

以下にXamlで太字や斜体を指定する例を示します。

2行目は Bold を指定して太字にし、3行目は Italic を指定して斜体にしています。

また4行目のように感まで区切ることで Bold と Italic を同時に指定することができます。


MainPage.xaml 
<StackLayout HorizontalOptions="Center" VerticalOptions="CenterAndExpand">
    <Label x:Name="label1" Text="太字" FontAttributes="Bold" />
    <Label x:Name="label2" Text="斜体" FontAttributes="Italic"/>
    <Label x:Name="label3" Text="太字 ＆ 斜体" FontAttributes="Bold, Italic" />       
</StackLayout>

次に、コードビハインドでの実装例を以下に示します。

太字を指定する場合は、9行目のように FontAttributes.Bold を指定します。

斜体を指定する場合は、10行目のように FontAttributes.Italic を指定します。

また、| 演算子を使用して、Bold と Italicを指定することもできます。

MainPage.xaml.cs 
nnamespace labelSample03
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            label1.FontAttributes = FontAttributes.Bold;
            label2.FontAttributes = FontAttributes.Italic;
            label3.FontAttributes = FontAttributes.Bold | FontAttributes.Italic;
        }
    }
}

実行例を以下に示します。