Xamarin.Forms で NavigationBar の色を変更する


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

> 本記事は [Xamarin.Forms で NavigationBar の色を変更する - Xamarin 日本語情報](http://ytabuchi.hatenablog.com/entry/2015/06/24/135407) の転載記事です。

[@kurosawa0626](https://twitter.com/kurosawa0626) さんが書いていますが、
[Xamarin.FormsのNavigationBarの色を変える | ぅゎょぅι゛ょっょぃ](https://kurosawa0626.wordpress.com/2015/06/13/xamarin-forms%e3%81%aenavigationbar%e3%81%ae%e8%89%b2%e3%82%92%e5%a4%89%e3%81%88%e3%82%8b/)

もう少し詳しくご紹介します。

> 2015/6/26 追記：  
Xamarin.iOS ネイティブでの設定方法は [こちら](http://ytabuchi.hatenablog.com/entry/2015/06/24/135407)  
Xamarin.Android ネイティブでの設定方法は [こちら](http://ytabuchi.hatenablog.com/entry/2015/04/30/002909) と [こちら](http://ytabuchi.hatenablog.com/entry/2015/04/28/212118)  
をご参照ください。

# NavigationBar の色を変更するには

Application クラスで例えば以下のように設定します。

```csharp
var nav = new NavigationPage(new CSListViewPage());
nav.BarBackgroundColor = Color.FromHex("3498DB");
nav.BarTextColor = Color.White;
MainPage = nav;
```

これだと iOS のステータスバーの文字色が黒いままです。

# iOS のステータスバーの文字色を変更するには

info.plist に設定を追加します。

Mac の Xamarin Studio の場合は UI で設定できます。

info.plist を開きソースタブに移動して、新しい値を追加し `View controller-based status bar appearance` の bool 値を No にします。

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

アプリケーションタブで Status Bar Styles を変更します。
<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150624/20150624132131.png" width="450" />


Windows の Visual Studio は GUI で編集できる info.plist の情報が限られているので、テキストエディタでファイルを開き、

```
<key>UIStatusBarStyle</key>
<string>UIStatusBarStyleLightContent</string>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
```

を `<dict></dict>` の最後に追加します。

こんな感じになります。

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

# Android のステータスバー (名前分からん) を編集するには

Material Design の色設定をします。nav.BarBackgroundColor を指定すると、Android プロジェクトで values/values-v21 の colors.xml/styles.xml を指定していても上書きされますので、values-v21 の styles.xml の `android:colorPrimary` と Application クラスの `nav.BarBackgroundColor` を同じ色にして `android:colorPrimaryDark` を適切な色に指定すれば OK です。

普通に Lollipop 以上を Material Design にする方法と AppCompat を使用して古いバージョンも Material Design にする方法は以下にエントリーを上げていますので、ご参照ください。

- [Android 5.0 以上のみを Material Design にするには (Xamarin.Android) - Xamarin 日本語情報](http://ytabuchi.hatenablog.com/entry/2015/04/30/002909)
- [Material Design v7 AppCompat を使用するには (Xamarin.Android) - Xamarin 日本語情報](http://ytabuchi.hatenablog.com/entry/2015/04/28/212118)

こんな感じになります。

5.x
<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150624/20150624134700.png" width="150" />

4.x
<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150624/20150624134704.png" width="150" />

# Windows Phone は

NavigationBar がありません。。


# Xamarin 気になった方は

是非 [ダウンロード(直接)](http://xamarin.com/download) / [ダウンロード(弊社経由)](https://www.xlsoft.com/jp/products/download/index.html?option=Xamarin&r=ythb) して触ってみてください。
[学習用リソース](http://ytabuchi.hatenablog.com/entry/2014/08/26/191759) や [JXUG リンクページ](http://jxug.org/links.html) に参考資料を纏めてますので併せてどうぞ。

<a href="http://blog.hatena.ne.jp/ytabuchi/ytabuchi.hatenablog.com/subscribe">Xamarin の情報が欲しい方はこのブログも購読いただいたりすると嬉しいです。</a>

以上です。