.NET MAUI Android — страница с вкладками — цвет индикатора

Как изменить цвет индикатора 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>

Я не добавлял их раньше, потому что все находится в состоянии по умолчанию.

Можете ли вы добавить код, показывающий, как вы пытались установить эти свойства и откуда вы это сделали? Цвета, определенные в вашем файле ресурсов, также будут полезны.

tonyedwardspz 08.08.2024 12:45

Добавлен. Заранее спасибо за ваш ответ.

danny 08.08.2024 13:17
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
2
2
64
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Выбранный цвет — «фиолетовый 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?

danny 08.08.2024 14:30

Можете ли вы добавить код установки вверху страницы с контентом?

tonyedwardspz 08.08.2024 15:26

Обновлено. Изначально я не включил это в пост, потому что изменений нет. Это просто новый пустой шаблон. Единственное, что я недавно изменил, это colorPrimary в Platforms/Android/.... Это сработало, но также изменился цвет других важных компонентов. Я не знаю, как еще это объяснить лучше. МАУИ иногда действительно ужасен...:D

danny 08.08.2024 15:47
Ответ принят как подходящий

Как изменить цвет индикатора 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, чтобы установить цвет индикатора. Я установил черный цвет.

Большое спасибо! Оно работает!!

danny 12.08.2024 10:07

Приятного кодирования :)

Jianwei Sun - MSFT 12.08.2024 10:12

Другие вопросы по теме