[Tips] Xamrin Forms中,NavigationPage上方Toolbar的相關設定
這篇給自個筆記一下;在使用Xamarin Forms來做Navigation時,會修改App,xaml.cs檔案中,將MainPage的類型設定是NavagationPage,而在首頁,就可以利用下面的程式碼,來進入子頁面
這個方式很方便,也能自動的將頁面的尋覽順序給加入頁面堆疊中。而進入了子頁面之後,上方會有一條Toolbar,這邊針對這個toolbar的相關設定簡單說明一下
設定背景顏色
設定toolbar右側的按鈕
子頁面的back button顏色,文字顏色(這個找好久)
這個實在是傷腦筋,由於我是把Toolbar背景設定為白的,iOS沒事,android這邊預設返回的箭頭是白的,因此我的箭頭就消失了 我的箭頭就消失了 我的箭頭就消失了...
解決方式我最後是參考這篇文章,需要編輯Droid專案中,resources\values\styles.xml
先在
之後新增一個Style,大概像是這樣
以上筆記一下,也給大家參考看看了
await Navigation.PushAsync(new PageName(), true);
這個方式很方便,也能自動的將頁面的尋覽順序給加入頁面堆疊中。而進入了子頁面之後,上方會有一條Toolbar,這邊針對這個toolbar的相關設定簡單說明一下
設定背景顏色
設定背景顏色時,需要直接在建立NavagationPage時指定,所有子頁面都會一起套用,大概像是下面這樣
MainPage = new NavigationPage(new CuboApp.MainPage()) { BarBackgroundColor = Color.White, BarTextColor = Color.FromHex("FF48AEB1") };
設定toolbar右側的按鈕
右側按鈕的設定,在子頁面中,呼叫下面的程式碼
ToolbarItems.Add(new ToolbarItem("要顯示的文字", "圖片的名稱", async () => {
//按下去的時候,要做的事情寫在這裡
}));
子頁面的back button顏色,文字顏色(這個找好久)
這個實在是傷腦筋,由於我是把Toolbar背景設定為白的,iOS沒事,android這邊預設返回的箭頭是白的,因此我的箭頭就消失了 我的箭頭就消失了 我的箭頭就消失了...
解決方式我最後是參考這篇文章,需要編輯Droid專案中,resources\values\styles.xml
先在
<style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">這個區塊裡面,下入相關設定
<item name="android:actionMenuTextColor">@color/custom_toolbar</item> <item name="drawerArrowStyle">@style/MyDrawerArrowStyle</item>
之後新增一個Style,大概像是這樣
<style name="MyDrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle"> <item name="color">@color/custom_toolbar</item> <item name="spinBars">true</item> </style>
以上筆記一下,也給大家參考看看了
留言