2017-08-12 35 views
0

我希望我的應用程序中的每個頁面都有一個頂部的透明工具欄和覆蓋整個頁面的背景圖像。Xamarin.Forms - 通過工具欄使背景圖像可見

在App.xaml.cs我寫了下面的:

MainPage = new NavigationPage(new MDMaster()) 
{ 
    BarBackgroundColor = Color.Transparent, 
    BackgroundImage = "background_1.png" 
}; 

這將使得正確的工具欄透明,但是背景圖像不顯示。我可以添加背景顏色而不是背景圖片。

MDMaster是MasterDetailPage的主要組件。在MDMaster頁面我設置的詳細信息頁面,如下所示:

Detail = new NavigationPage(new ProfilePage()) 
{ 
    BarBackgroundColor = Color.Transparent, 
    BackgroundImage = "background_1.png" 
}; 

這甚至不顯示背景圖片無論是。

在ProfilePage,我可以這樣寫:

public ProfilePage() 
{ 
    InitializeComponent();   
    this.BackgroundImage = "background_1.png"; 
} 

這將顯示背景圖片,但它不會覆蓋,即使它是透明的工具欄後面的區域。它結束了看起來像這樣:

Background not showing behind toolbar

+0

1.不建議MD頁面添加到導航page.2。 「MDMaster是MasterDetailPage的主要組件」。它應該是MD頁面本身,而不是主要組件。 –

+0

那麼只有詳細頁面應該是導航頁面,而不是主頁面? – Fayze

+0

你是對的 –

回答

2

首先,@Yuri小號建議,你不需要來包裝你MasterDetailPageNavigationPage。只需將MasterDetailPage設置爲MainPage即可。

然後,當您將背景圖像設置爲根MasterDetailPage時,背景圖像未顯示的原因是因爲頂部的NavigationPage不透明並且隱藏了背景圖像。

因此,要解決這個問題,你需要設置NavigationPage to transparentBackgroundColor太:

public App() 
{ 
    InitializeComponent(); 

    MainPage = new MasterDetailPage() 
    { 
     Master=new MainPage(), 
     Detail=new NavigationPage(new Detail()) 
     { 
      BarBackgroundColor=Color.Transparent, 
      BackgroundColor=Color.Transparent 
     }, 
     BackgroundImage="tianyuan.jpg" 
    }; 
} 

然後,它會顯示這樣的:

enter image description here

如果你不想讓你的狀態欄顯示如上,你可以在Droid項目中手動設置:

public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity 
{ 
    protected override void OnCreate(Bundle bundle) 
    { 
     TabLayoutResource = Resource.Layout.Tabbar; 
     ToolbarResource = Resource.Layout.Toolbar; 

     base.OnCreate(bundle); 

     global::Xamarin.Forms.Forms.Init(this, bundle); 
     LoadApplication(new App()); 

     //set the status bar color 
     Window.SetStatusBarColor(Android.Graphics.Color.Black); 
    } 
} 

,它會顯示這樣的:

enter image description here

+0

啊好吧,這表明背景正確。我有一個問題,但我在MasterPage中有幾個Navigation.PushAsync(新的Page())。由於母版頁不再是導航頁面,它們不再工作了。我該怎麼做才能做到這一點?我想每個頁面上的後退按鈕,但MainPage(MasterDetailPage) – Fayze

+0

'MasterPage'是用於導航的頁面。你爲什麼要改變它?我認爲你應該重新考慮你的項目設計。此外,如果您有其他要求,請打開一個新問題,以便每個人都可以通過谷歌找到該問題。 –

+0

我不想改變它,但是如果不是導航頁面,我該如何從MasterPage導航? – Fayze