[Tips] Xamrin Forms中,NavigationPage上方Toolbar的相關設定

這篇給自個筆記一下;在使用Xamarin Forms來做Navigation時,會修改App,xaml.cs檔案中,將MainPage的類型設定是NavagationPage,而在首頁,就可以利用下面的程式碼,來進入子頁面

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>

以上筆記一下,也給大家參考看看了

留言

這個網誌中的熱門文章

開啟cshtml檔案時,出現『並未將物件參考設定為物件執行個體』的錯誤訊息

無法設定中斷點 尚未載入符號檔

DataGridView欄位計算總合