かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

Xamarin.FormsのNavigationPageのアイコンの変え方(Android)

以前に、こんな記事を書きました。

Xamarin.FormsのNavigationPageのアイコンの変え方が知りたい - かずきのBlog@hatena

この記事では、アイコンの表示位置がおかしくなるということを言ってたのですが、私が用意したアイコンが大きかったのが原因でしたorz

72x72のサイズのアイコンを用意するとちゃんとなりました。ということで改めて。

アイコンを用意する

Resources/drawableにデフォルトで用意されてるIcon.pngと同じサイズの画像を用意します。ここではbird.pngという画像を72x72ピクセルで用意しました。ビルドアクションは、AndroidResourceにします。

NavigationPageを使うようにする

App.csを書き換えてNavigationPageを使うようにします。

今回用意したアイコンが黒で絵が描いてあるものだったのでバーの色を緑にしてみました。

public App()
{
    // The root page of your application
    MainPage = new NavigationPage(new MainPage())
    {
        BarBackgroundColor = Color.Green,
    };
}
BarTextColorプロパティが効かない気がするのですが、また別の話。

MainPageを用意する

XAMLで(XAMLじゃなくてもいいんですが)MainPageを用意します。MainPageにNavigationPage.TitleIcon添付プロパティ(添付プロパティって呼び名あってるのかな)を設定します。先ほど用意したbird.pngを設定しておきます。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage 
  xmlns="http://xamarin.com/schemas/2014/forms"
  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  xmlns:viewModels="clr-namespace:App10.ViewModels;assembly=App10"
  x:Class="App10.Views.MainPage"
  NavigationPage.TitleIcon="bird.png"
  Title="こんにちは">
  <ContentPage.ToolbarItems>
    <ToolbarItem Text="Hello world" />
  </ContentPage.ToolbarItems>
  <StackLayout>
    <Label Text="okokokokook" />
    <Button Text="Hello" Clicked="Button_Clicked" />
  </StackLayout>
</ContentPage>```

画面の中身は適当で重要なのはTitleIconをセットしてるところです。

実行して動作確認

実行すると以下のように鳥のアイコンがきちんと表示されます。めでたしめでたし。

f:id:okazuki:20150211204602p:plain