Xamarin.Forms で Style を利用する

こんにちは。エクセルソフトの田淵です。

本記事は Xamarin.Forms で Style を利用する - Xamarin 日本語情報 の転載記事です。

Xamarin.Forms 1.3 以降ではスタイルを使用できるようになりました。

ページ毎のスタイル

Xaml:

<ContentPage.Resources>
  <ResourceDictionary>
    <Style x:Key="okButtonStyle" TargetType="Button">
      <Setter Property="TextColor" Value="White" />
      <Setter Property="BackgroundColor" Value="#49d849" />
      <Setter Property="BorderRadius" Value="5"/>
      <Setter Property="WidthRequest">
        <OnPlatform x:TypeArguments="x:Double" 
                    iOS="100"
                    Android="100"
                    WinPhone="150" />
      </Setter>
    </Style>
    <Style x:Key="cancelButtonStyle" TargetType="Button">
      <Setter Property="TextColor" Value="White" />
      <Setter Property="BackgroundColor" Value="#d64848" />
      <Setter Property="BorderRadius" Value="5"/>
      <Setter Property="WidthRequest">
        <OnPlatform x:TypeArguments="x:Double" 
                    iOS="100"
                    Android="100"
                    WinPhone="150" />
      </Setter>
    </Style>
  </ResourceDictionary>
</ContentPage.Resources>

<Button Text="OK" Style="{StaticResource okButtonStyle}" />
<Button Text="Cancel" Style="{StaticResource cancelButtonStyle}" />

Xaml の場合は ResourceDictionary に設定して各コントロールで Style="{StaticResource xxx}" で参照できます。

C#:

var okButtonStyle = new Style(typeof(Button))
{
    Setters = {
        new Setter { Property = Button.TextColorProperty, Value = Color.White }, 
        new Setter { Property = Button.BackgroundColorProperty, Value = Color.FromHex("49d849") },
        new Setter { Property = Button.BorderRadiusProperty, Value = 5 },
        new Setter { Property = Button.WidthRequestProperty, Value = Device.OnPlatform(100, 100, 150) }
    }
};
var cancelButtonStyle = new Style(typeof(Button))
{
    Setters = {
        new Setter { Property = Button.TextColorProperty, Value = Color.White },
        new Setter { Property = Button.BackgroundColorProperty, Value = Color.FromHex("d64848") },
        new Setter { Property = Button.BorderRadiusProperty, Value = 5 },
        new Setter { Property = Button.WidthRequestProperty, Value = Device.OnPlatform(100, 100, 150) }
    }
};

var okButton = new Button
{
    Text = "OK",
    Style = okButtonStyle,
};
var cancelButton = new Button
{
    Text = "Cancel",
    Style = cancelButtonStyle,
};

C# の場合は普通に Style = xxx で参照できます。

が、これではページ毎にスタイルを設定しなければいけないため手間が掛かりますし、一度に更新出来ないので漏れる可能性が出てきますね。

Application のスタイル

Application.Current.Resources = new ResourceDictionary(); を使用することで、アプリ全体のグローバルなスタイルを指定、使用することができます。

App クラス

Application.Current.Resources = new ResourceDictionary();

var globalButtonStyle = new Style(typeof(Button))
{
    Setters = {
        new Setter { Property = Button.BorderRadiusProperty, Value = 5 },
        new Setter { Property = Button.WidthRequestProperty, Value = Device.OnPlatform(100, 100, 150) }
    }
};
Application.Current.Resources.Add(globalButtonStyle); // 全ての Button のスタイルを置き換え

var globalCancelButtonStyle = new Style(typeof(Button))
{
    Setters = {
        new Setter { Property = Button.TextColorProperty, Value = Color.White },
        new Setter { Property = Button.BackgroundColorProperty, Value = Color.FromHex("d64848") },
        // 以下2つは上の g_buttonStyle でも設定しているので継承したいんですがまだやり方が分かってません。すみません。
        new Setter { Property = Button.BorderRadiusProperty, Value = 5 },
        new Setter { Property = Button.WidthRequestProperty, Value = Device.OnPlatform(100, 100, 150) }
    }
};
Application.Current.Resources.Add("GlobalCancelButtonStyle", globalCancelButtonStyle); // 個別に GlobalCancelButtonStyle で参照可能

Application クラスなので通常は C# で記述することになるかと思います。Xamarin のサンプルでもコードビハインドで記述しているようなので Xaml は割愛します。

で、グローバルで設定したスタイルは以下のように参照できます。

Xaml

<Button Text="gCancel" Style="{StaticResource GlobalCancelButtonStyle}" />
<Button Text="gButton" />

C#

var gcButton = new Button
{
    Text = "gCancel",
    Style = Application.Current.Resources["GlobalCancelButtonStyle"] as Style,
};
var gButton = new Button
{
    Text = "gButton",
};

Application.Current.Resources.Add() に style style だけを指定すると置き換え、string key, object value を指定すると参照できるスタイルになります。

(C# ではグローバルスタイルの参照が少し面倒なので気を付けてください。)

特に Application でグローバルスタイルを設定するのはアプリの見た目を簡単に統一できるので便利ですね。是非使ってみてください。

画面写真

ページスタイルと、グローバルのスタイルを設定するとこんな感じになります。

<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150624/20150624122145.png

参考資料

Working with Styles - Xamarin

WorkingWithStyles のサンプル を見ていただくのが一番だと思います！

ちなみに

1.2 までは各コントロールに個別に設定しなければいけなかったため、凄く面倒でしたｗ

<Button Text="OK"
        TextColor="White"
        BackgroundColor="#49d849" 
        BorderRadius="5">
  <Button.WidthRequest>
    <OnPlatform x:TypeArguments="x:Double" 
                iOS="70"
                Android="70"
                WinPhone="100" />
  </Button.WidthRequest>
</Button>
<Button Text="Cancel"
        TextColor="White"
        BackgroundColor="#d64848" 
        BorderRadius="5">
  <Button.WidthRequest>
    <OnPlatform x:TypeArguments="x:Double" 
                iOS="70"
                Android="70"
                WinPhone="100" />
  </Button.WidthRequest>
</Button>

Xamarin 気になった方は

是非 ダウンロード(直接) / ダウンロード(弊社経由) して触ってみてください。
学習用リソース や JXUG リンクページ に参考資料を纏めてますので併せてどうぞ。

Xamarin の情報が欲しい方はこのブログも購読いただいたりすると嬉しいです。

以上です。