我需要大量帮助来解决Xamarin.Forms中MasterDetail
页面的问题。
我想做的非常简单,就是自定义NavigationBar
的背景以使用渐变。我的设置是带有Prism的Xamarin.Forms应用,在该应用中,我首先登录用户,然后导航至MasterDetail
页面,如下所示:
await NavigationService.NavigateAsync("MyMasterDetailPage/NavigationPage/MyDetailPage")
我遇到的问题是,无论我做什么,我都无法更改NavigationBar
的颜色。
我已经尝试了CustomRenderers
的几种不同变体(当前针对[[Android),以及只是在PCL项目的TitleView
页面中添加了自定义Detail
。我还尝试过更改styles.xml文件,更改ToolBar.axml以使用我制作的可绘制对象,但是到目前为止我还是没有运气。
下面是发生的情况的屏幕截图:
Toolbar.axml:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
android:background="@drawable/gradient_background_drawable"
/>
styles.xml:
<?xml version="1.0" encoding="utf-8" ?> <resources> <style name="MainTheme" parent="MainTheme.Base"> </style> <!-- Base theme applied no matter what API --> <style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar"> <!--If you are using revision 22.1 please use just windowNoTitle. Without android:--> <item name="windowNoTitle">true</item> <!--We will be using the toolbar so no need to show ActionBar--> <item name="windowActionBar">false</item> <!-- Set theme colors from http://www.google.com/design/spec/style/color.html#color-color-palette --> <!-- colorPrimary is used for the default action bar background --> <item name="colorPrimary">#89D362</item> <!-- colorPrimaryDark is used for the status bar --> <item name="colorPrimaryDark">#89D362</item> <!-- colorAccent is used as the default value for colorControlActivated which is used to tint widgets --> <item name="colorAccent">#FF4081</item> <!-- You can also set colorControlNormal, colorControlActivated colorControlHighlight and colorSwitchThumbNormal. --> <!--<item name="windowActionModeOverlay">true</item>--> <item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item> <item name="drawerArrowStyle">@style/DrawerArrowStyle</item> </style> <style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog"> <item name="colorAccent">#FF4081</item> </style> <style name="DrawerArrowStyle" parent="@style/Widget.AppCompat.DrawerArrowToggle"> <item name="spinBars">true</item> <item name="color">#89D362</item> </style> </resources>
gradient_background_drawable:
<?xml version="1.0" encoding="utf-8" ?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <gradient android:type="linear" android:angle="270" android:startColor="#000E0E" android:endColor="#3D3939"> </gradient> </shape>
MasterDetailPageRenderer:
protected override void OnLayout(bool changed, int l, int t, int r, int b) { base.OnLayout(changed, l, t, r, b); var toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar); if (toolbar != null) { for (int i = 0; i < toolbar.ChildCount; i++) { var child = toolbar.GetChildAt(i); child.Background = Context.GetDrawable(Resource.Drawable.gradient_background_drawable); } toolbar.Background = Context.GetDrawable(Resource.Drawable.gradient_background_drawable); } }
NavigationPageRenderer:
protected override void OnElementChanged(ElementChangedEventArgs<NavigationPage> e) { base.OnElementChanged(e); if (e.OldElement != null || Element == null) { return; } var actionBar = ((FormsAppCompatActivity)Context).SupportActionBar; actionBar.SetBackgroundDrawable(Context.GetDrawable(Resource.Drawable.gradient_background_drawable)); } protected override void OnLayout(bool changed, int l, int t, int r, int b) { base.OnLayout(changed, l, t, r, b); var toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar); if (toolbar != null) { //for (int i = 0; i < toolbar.ChildCount; i++) //{ // var child = toolbar.GetChildAt(i); // child.Background = Context.GetDrawable(Resource.Drawable.gradient_background_drawable); //} toolbar.Background = Context.GetDrawable(Resource.Drawable.gradient_background_drawable); } } public override void OnViewAdded(Android.Views.View child) { base.OnViewAdded(child); if (child.GetType() == typeof(Android.Support.V7.Widget.Toolbar)) { _toolbar = (Android.Support.V7.Widget.Toolbar)child; _toolbar.Background = Context.GetDrawable(Resource.Drawable.gradient_background_drawable); } }
Master-Detail Page
创建一个新应用来实现此功能。正如您提到的,方法是设置background
的Toolbar.axml
。 <android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
android:background="@drawable/gradient_background_drawable"
/>
为了使效果更明显,我更改了渐变颜色。您可以更改回自己的渐变色。文件
gradient_background_drawable.xml
<?xml version="1.0" encoding="utf-8" ?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <gradient android:type="linear" android:angle="270" android:startColor="#008B00" android:endColor="#9AFF9A"> </gradient> </shape>
此外,请记住删除文件Background
中与工具栏有关的与App.xaml
相关的属性。文件
App.xaml
<?xml version="1.0" encoding="utf-8" ?> <Application xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="FormApp202011.App"> <Application.Resources> <ResourceDictionary> <!--Global Styles --> <Color x:Key="NavigationPrimary">#2196F3</Color> <Style TargetType="NavigationPage"> <Setter Property="BarTextColor" Value="Red" /> </Style> </ResourceDictionary> </Application.Resources> </Application>
结果: