[英]How to change the TabbedPage bar background color using a theme in Xamarin.Forms?
I am new to Xamarin.Forms and met an issue.我是 Xamarin.Forms 的新手,遇到了一个问题。 Here is a similar demo for my question.这是我的问题的类似演示。
I followed some resources to set the theme and style in the App.xaml , source code as follow:我按照一些资源在App.xaml中设置了主题和样式,源代码如下:
For theme.xaml :对于主题.xaml :
<?xml version="1.0" encoding="utf-8" ?>
<ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="QuickDemo.Theme">
<!--Orange-->
<Color x:Key="NavigationBarColor">#fb8c00</Color>
<!--Gray-->
<Color x:Key="PageBackgroundColor">#f5f5f5</Color>
<Color x:Key="PrimaryColor">#fb8c00</Color>
<Color x:Key="SecondaryColor">White</Color>
<Color x:Key="PrimaryTextColor">Black</Color>
<Color x:Key="SecondaryTextColor">Black</Color>
<!--Dark Gray-->
<Color x:Key="TertiaryTextColor">#383838</Color>
<Color x:Key="TransparentColor">Transparent</Color>
</ResourceDictionary>
For 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"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="QuickDemo.App">
<Application.Resources>
<ResourceDictionary Source="Theme.xaml">
<!--Page Style-->
<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor"
Value="{DynamicResource NavigationBarColor}"/>
<Setter Property="BarTextColor"
Value="{DynamicResource SecondaryColor}"/>
<Setter Property="BackgroundColor"
Value="{DynamicResource PageBackgroundColor}"/>
</Style>
<Style TargetType="ContentPage">
<Setter Property="BackgroundColor"
Value="{DynamicResource PageBackgroundColor}"/>
</Style>
<Style TargetType="TabbedPage">
<Setter Property="BarBackgroundColor"
Value="{DynamicResource NavigationBarColor}"/>
<Setter Property="BarTextColor"
Value="{DynamicResource SecondaryColor}"/>
<Setter Property="BackgroundColor"
Value="{DynamicResource PageBackgroundColor}"/>
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>
For MasterDetailPage.xaml :对于MasterDetailPage.xaml :
<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="QuickDemo.MasterDetailPageDemo"
xmlns:pages="clr-namespace:QuickDemo">
<MasterDetailPage.Master>
<pages:MasterDetailPageMaster x:Name="MasterPage" />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<pages:MasterDetailPageDetail />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
And I changed the detail page to a tabbedpage, MasterDetailPageDetail.xaml :我将详细信息页面更改为标签页MasterDetailPageDetail.xaml :
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:local="clr-namespace:QuickDemo"
x:Class="QuickDemo.MasterDetailPageDetail"
Title="Detail">
<TabbedPage.Children>
<NavigationPage Title="Tab One">
<x:Arguments>
<local:FirstPage />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Tab Two">
</NavigationPage>
</TabbedPage.Children>
</TabbedPage>
When I run the emulator, I got this result:当我运行模拟器时,我得到了这个结果:
It seems the theme for navigation page is working, but why it doesn't work for the tabbed page then?似乎导航页面的主题正在工作,但为什么它不适用于标签页呢? I found it work if I set the color on page level:如果我在页面级别设置颜色,我发现它有效:
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:local="clr-namespace:QuickDemo"
x:Class="QuickDemo.MasterDetailPageDetail"
Title="Detail"
BarBackgroundColor="{StaticResource PrimaryColor}">
I really appreciate any help or hints.我非常感谢任何帮助或提示。 I would like all the tabbed pages in my app can take advantage of the theme.我希望我的应用程序中的所有选项卡式页面都可以利用该主题。 Thanks in advance.提前致谢。
You should add ApplyToDerivedTypes = "True"
in the style as your MasterDetailPageDetail
is Derived from TabbedPage
.您应该在样式中添加ApplyToDerivedTypes = "True"
,因为您的MasterDetailPageDetail
是从TabbedPage
派生的。
For example:例如:
<Style TargetType="TabbedPage"
ApplyToDerivedTypes="True">
<Setter Property="BarBackgroundColor"
Value="Green"/>
<Setter Property="BarTextColor"
Value="Pink"/>
</Style>
Refer: style.applytoderivedtypes参考: style.applytoderivedtypes
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.