Xamarin.Forms - 通过工具栏显示背景图像

Question

我希望我的应用中的每个页面顶部都有一个透明的工具栏,以及一个覆盖整个页面的背景图像.

在App.xaml.cs中,我写了以下内容:

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

这将正确使工具栏透明,但不显示背景图像.我可以添加背景颜色而不是背景图像.

MDMaster是MasterDetailPage的主要组件.在MDMaster页面上,我设置了Detail页面,如下所示:

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

这甚至都没有显示背景图像.

在ProfilePage上,我可以写:

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

这将显示背景图像,但它不会覆盖工具栏后面的区域,即使它是透明的.最终看起来像这样:

Answer 1

首先,@Yuri小号建议,你不需要来包装你MasterDetailPage用NavigationPage.只需设置MasterDetailPage为MainPage正常.

然后,当您将背景图像设置为根时MasterDetailPage,背景图像未显示的原因是因为顶部NavigationPage不透明并且它隐藏了背景图像.

因此,要解决这个问题,你需要设置BackgroundColor的NavigationPage to transparent太:

public App()
{
    InitializeComponent();

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

然后它将显示如下:

如果您不希望状态栏显示如上,则可以在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);
    }
}

它会显示如下: