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

かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

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