1

Como alterar as cores Azuis do "item selecionado" e do menu no Xamarin? Veja as imagens:

Menu

Menu

Seleção no Menu

Item de Seleção

Tentei Alterar diretamente na view Home (A Pagina que aparece como principal), mas se eu adicionar backgroundcolor e a cor que desejo ele acaba mudando a cor da pagina mas o menu continua na cor azul.

Código: MainPage.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:local="clr-namespace:AppNewsPlay"
             x:Class="AppNewsPlay.MainPage">


    <MasterDetailPage.Master>
        <ContentPage Title="Menu"
                     BackgroundColor="#609b3c">

            <StackLayout Orientation="Vertical">

                <StackLayout.Children>
                    <Label Text="{Binding Header}" />
                    <Image Source="{Binding Image}" />
                    <Label Text="{Binding Footer}" />
                </StackLayout.Children>


                <ListView x:Name="navigationDrawerList"
                      RowHeight="55"
                      SeparatorVisibility="Default"
                          SeparatorColor="Black"
                      BackgroundColor="#e8e8e8"
                      ItemSelected="OnMenuItemSelected">

                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>

                                <!-- Design Menu itens-->
                                <StackLayout VerticalOptions="FillAndExpand"
                                             Orientation="Horizontal"
                                             Padding="20,10,0,10"
                                             Spacing="20">

                                    <Image Source="{Binding Icon}"
                                                           WidthRequest="40"
                                                           HeightRequest="40"
                                                           VerticalOptions="Start" />

                                    <Label Text="{Binding Title}"
                                           Font="Verdana"
                                           FontSize="Small"
                                           VerticalOptions="Center"
                                           TextColor="Black"/>
                                </StackLayout>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </StackLayout>                         
       </ContentPage>
    </MasterDetailPage.Master>



    <MasterDetailPage.Detail >
        <NavigationPage>




            </NavigationPage>



    </MasterDetailPage.Detail>


</MasterDetailPage>

MainPage.Cs

namespace AppNewsPlay
{
    public partial class MainPage : MasterDetailPage
    {
        public List<MasterPageItem> menuList { get; set; }

        public MainPage()
        {
            InitializeComponent();

            menuList = new List<MasterPageItem>();


            // setando os icones 
            var page1 = new MasterPageItem() { Title = "Home", Icon = "ic_home_black_24dp.png", TargetType = typeof(Home) };
            var page2 = new MasterPageItem() { Title = "Xbox", Icon = "ic_dashboard_black_24dp.png", TargetType = typeof(Xbox) };
            var page3 = new MasterPageItem() { Title = "Playstation", Icon = "ic_games_black_24dp.png", TargetType = typeof(Playstation) };
            var page4 = new MasterPageItem() { Title = "Jogos", Icon = "ic_videogame_asset_black_24dp.png", TargetType = typeof(Jogos) };
            var page5 = new MasterPageItem() { Title = "Artigos", Icon = "ic_description_black_24dp.png", TargetType = typeof(Artigos) };


            //Adicionando Itens ao menu
            menuList.Add(page1);            
            menuList.Add(page2);
            menuList.Add(page3);
            menuList.Add(page4);
            menuList.Add(page5);

            //Adicionando os itens ao ListView na MainPage.xaml
            navigationDrawerList.ItemsSource = menuList;

            // Criando a Instancia da Pagina Inicial Navegação na Pagina Home
            Detail = new NavigationPage((Page)Activator.CreateInstance(typeof(Home)));


            this.BindingContext = new
            {

                Header = "",
                Image = "LogoMobile40dpi.png",
                // Rodape 
                Footer = ""


            };

        }
        private void OnMenuItemSelected(object sender, SelectedItemChangedEventArgs e)
        {

                var item = (MasterPageItem)e.SelectedItem;
                Type page = item.TargetType;        
                Detail = new NavigationPage((Page)Activator.CreateInstance(page));
                IsPresented = false;
        }    
    }
}

Codigo da View Home

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AppNewsPlay.Views.Home"
             Title="Menu"

             >             
    <ContentPage.Content>
        <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
            <Label Text="Home"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

1 Resposta 1

1

Estas cores são definidas em cada plataforma. No caso do android, Você precisa alterar um arquivo styles.xml que fica na pasta values dentro de Resources.

Cada ponto desses que você destaca refere-se a uma referência de estilo que é gerenciada pelo android como você pode ver na seguinte imagem:

Android styles

(Fonte: https://developer.android.com/training/material/theme.html)

Na prática, no arquivo de estilos você deve ter algo parecido com isso:

<?xml version="1.0" encoding="utf-8" ?>
<resources>
    <style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
        ...
        <item name="colorPrimary">#FF0000</item>
        <item name="colorPrimaryDark">#00FF</item>
        <item name="colorAccent">#0000FF</item>
        ...
    </style>
    ...
</resources>

Basta mudar os valores que eu inclui (#FF0000, #00FF00 e #0000FF) para o codixo hexadecimal das cores que você quer.

Ah! A cor do item da lista selecionado é a colorAccent.

2
  • obrigado tu é o cara! me ajudou de novo! abraços
    – Diego Lela
    7/02/2018 às 1:05
  • 1
    Sem problemas! Estou aqui pra ajudar no que souber 7/02/2018 às 1:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .