Как изменить цвет индикатора TabbedPage (линии) в .NET MAUI (Android)?
Я разрабатываю приложение .NET MAUI, и мне нужно изменить цвет индикатора выбранной вкладки (подчеркивание под выбранной вкладкой) в TabbedPage на Android. Я видел примеры того, как это сделать в Xamarin.Forms, но не смог найти простого решения для .NET MAUI.
Я пробовал устанавливать такие свойства, как BackgroundColor, BarBackgroundColor и SelectedTabColor, непосредственно на TabbedPage, но ни одно из них, похоже, не влияет на цвет индикатора.
Мой проект сложный, поэтому я воссоздал простую демонстрацию.
<TabbedPage xmlns = "http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x = "http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local = "clr-namespace:MauiBiometricAppDemo.Views"
x:Class = "MauiBiometricAppDemo.Views.MyTabbedPage"
BackgroundColor = "Yellow"
BarBackgroundColor = "Yellow"
BarTextColor = "Black"
SelectedTabColor = "White"
UnselectedTabColor = "White">
<local:MainPage />
<local:NewPage1 />
</TabbedPage>
Ресурсы находятся в состоянии по умолчанию. Проблема в том, что не существует свойства, которое могло бы задать цвет индикатора».
ОБНОВЛЕНИЕ: добавление других кодов
public partial class MyTabbedPage : TabbedPage
{
public MyTabbedPage()
{
InitializeComponent();
}
}
Главная страница
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
}
<?xml version = "1.0" encoding = "utf-8" ?>
<ContentPage xmlns = "http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x = "http://schemas.microsoft.com/winfx/2009/xaml"
x:Class = "MauiBiometricAppDemo.Views.MainPage"
Title = "MainPage">
<ScrollView>
<VerticalStackLayout
Padding = "30,0"
Spacing = "25">
<Image
Source = "dotnet_bot.png"
HeightRequest = "185"
Aspect = "AspectFit"
SemanticProperties.Description = "dot net bot in a race car number eight" />
<Button
x:Name = "CounterBtn"
Text = "Click me"
SemanticProperties.Hint = "Counts the number of times you click"
Clicked = "OnCounterClicked"
HorizontalOptions = "Fill" />
</VerticalStackLayout>
</ScrollView>
</ContentPage>
Новая страница1
public partial class NewPage1 : ContentPage
{
public NewPage1()
{
InitializeComponent();
}
}
<?xml version = "1.0" encoding = "utf-8" ?>
<ContentPage xmlns = "http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x = "http://schemas.microsoft.com/winfx/2009/xaml"
x:Class = "MauiBiometricAppDemo.Views.NewPage1"
Title = "NewPage1">
<VerticalStackLayout>
<Label
Text = "Welcome to .NET MAUI!"
VerticalOptions = "Center"
HorizontalOptions = "Center" />
</VerticalStackLayout>
</ContentPage>
Я не добавлял их раньше, потому что все находится в состоянии по умолчанию.
Добавлен. Заранее спасибо за ваш ответ.
Выбранный цвет — «фиолетовый dotnet», он входит в стандартную комплектацию нового приложения.
Эти цвета установлены в Resources/Themes/Colors.xaml
:
<Color x:Key = "Primary">#512BD4</Color>
<Color x:Key = "PrimaryDark">#ac99ea</Color>
<Color x:Key = "PrimaryDarkText">#242424</Color>
<Color x:Key = "Secondary">#DFD8F7</Color>
<Color x:Key = "SecondaryDarkText">#9880e5</Color>
<Color x:Key = "Tertiary">#2B0B98</Color>
И Platforms/Android/resources/values/colors.xml
:
<resources>
<color name = "colorPrimary">#512BD4</color>
<color name = "colorPrimaryDark">#2B0B98</color>
<color name = "colorAccent">#2B0B98</color>
</resources>
Обычно выбранный цвет панели вкладок является частью темы приложения, и значения по умолчанию настраиваются как таковые. Поиграйте с этими цветами и посмотрите, какой из них изменит выбранный цвет.
Возможно, стоит взглянуть на настройку темы в Resources/Styles/Styles.xaml
. Есть вариант, ориентированный на страницу с вкладками, которая по умолчанию имеет следующие значения. . . но может быть не связано с тем, что вы пытаетесь сделать прямо сейчас:
<Style TargetType = "TabbedPage">
<Setter Property = "BarBackgroundColor" Value = "{AppThemeBinding Light = {StaticResource White}, Dark = {StaticResource Gray950}}" />
<Setter Property = "BarTextColor" Value = "{AppThemeBinding Light = {StaticResource Magenta}, Dark = {StaticResource White}}" />
<Setter Property = "UnselectedTabColor" Value = "{AppThemeBinding Light = {StaticResource Gray200}, Dark = {StaticResource Gray950}}" />
<Setter Property = "SelectedTabColor" Value = "{AppThemeBinding Light = {StaticResource Gray950}, Dark = {StaticResource Gray200}}" />
</Style>
Я уверен, что вы можете установить цвета панели вкладок другими способами, однако это хороший подход к управлению темами приложения.
Спасибо. Единственный эффект изменения цвета — это colorPrimary в Platforms/Android/.../colors.xml. Однако когда я меняю этот цвет, это также влияет на другие элементы, например кнопки в оповещениях. Есть ли способ создать стиль, специально предназначенный только для TabbedPage?
Можете ли вы добавить код установки вверху страницы с контентом?
Обновлено. Изначально я не включил это в пост, потому что изменений нет. Это просто новый пустой шаблон. Единственное, что я недавно изменил, это colorPrimary в Platforms/Android/.... Это сработало, но также изменился цвет других важных компонентов. Я не знаю, как еще это объяснить лучше. МАУИ иногда действительно ужасен...:D
Как изменить цвет индикатора TabbedPage (линии) в .NET MAUI (Android)?
Вы можете изменить его, установив собственный код платформы. Добавьте следующий код в свой код TabbedPage:
protected override void OnHandlerChanged()
{
base.OnHandlerChanged();
#if ANDROID
FieldInfo tabbedPageManagerFieldInfo = typeof(TabbedPage).GetField("_tabbedPageManager", BindingFlags.NonPublic | BindingFlags.Instance);
object tabbedPageManager = tabbedPageManagerFieldInfo?.GetValue(this);
FieldInfo tabLayoutFieldInfo = tabbedPageManager?.GetType().GetField("_tabLayout", BindingFlags.NonPublic | BindingFlags.Instance);
var tablayout = tabLayoutFieldInfo?.GetValue(tabbedPageManager) as Google.Android.Material.Tabs.TabLayout;
if (tablayout != null)
{
tablayout.SetSelectedTabIndicatorColor(Android.Graphics.Color.ParseColor("#000000"));
}
#endif
}
Используйте Reflection, чтобы получить TabbedPageManager
(потому что это внутренний класс) и TabLayout
. Затем вызовите метод SetSelectedTabIndicatorColor
, чтобы установить цвет индикатора. Я установил черный цвет.
Большое спасибо! Оно работает!!
Приятного кодирования :)
Можете ли вы добавить код, показывающий, как вы пытались установить эти свойства и откуда вы это сделали? Цвета, определенные в вашем файле ресурсов, также будут полезны.