Xamarin How to change the Menu and Selected Item color?

Asked

Viewed 1,630 times

1

How to change the Blue colors of the "selected item" and menu in Xamarin? See images:

Menu

Menu

Selection in the Menu

Item de Seleção

I tried to Change directly in the Home view (The page that appears as the main one), but if I add backgroundcolor and the color I want it ends up changing the page color but the menu remains blue.

Code: 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;
        }    
    }
}

Code of 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 answer

1


These colors are set on each platform. In the case of android, you need to change a file styles.xml which is in the folder values inside Resources.

Each point of these that you highlight refers to a style reference that is managed by android as you can see in the following image:

Android styles

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

In practice, in the style file you should have something like this:

<?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>

Just change the values I include (#FF0000, #00FF00 and #0000FF) for hexadecimal color code you want.

Ah! The color of the selected list item is colorAccent.

  • thanks you are the guy! helped me again! hugs

  • 1

    No problem! I’m here to help you with what you know

Browser other questions tagged

You are not signed in. Login or sign up in order to post.