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

Xamarin 日本語情報

Xamarin(ザマリン) の代理店だったエクセルソフト田淵のブログです。主に Xamarin に関するエントリーをアップしていきます。(なるべく正しい有益な情報を掲載していきたいと考えていますが、このブログのエントリーは所属組織の公式見解ではありませんのでご注意ください)

Xamarin.Forms で Style を利用する

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

ページ毎のスタイル

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

XML:

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

C#

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 までは各コントロールに個別に設定しなければいけなかったため、凄く面倒でしたw

<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 の情報が欲しい方はこのブログも購読いただいたりすると嬉しいです。

以上です。