以前に、こんな記事を書きました。
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をセットしてるところです。
実行して動作確認
実行すると以下のように鳥のアイコンがきちんと表示されます。めでたしめでたし。