对于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);
}
}
我通过使用template创建一个新应用来实现此功能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>
结果:
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句