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

ページ毎のスタイル

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

<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}" で参照できます。

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 g_buttonStyle = 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(g_buttonStyle); // 全ての Button のスタイルを置き換え

var g_cancelButtonStyle = 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("gcButtonStyle", g_cancelButtonStyle); // 個別に参照可能

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

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

Xaml

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

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

Application.Current.Resources.Add() に style style だけを指定すると置き換え、string key, object value を指定すると参照できるスタイルになります。
(C# ではグローバルスタイルの参照が少し面倒なので気を付けてください。)

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

画面写真

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

f:id:ytabuchi:20150624122146p:plain:w150 f:id:ytabuchi:20150624122143p:plain:w150 f:id:ytabuchi:20150624122145p:plain:w150

参考資料

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>