Xamarin How to change the color of the Menu and Selected Item?

Question

Xamarin How to change the color of the Menu and Selected Item?

Navigation

#1 by (1 votes)

1

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

Menu

MenuSelection

ItriedtochangedirectlyintheHomeview,butifIaddbackgroundcolorandthecolorIwant,itendsupchangingthecolorofthepage,butthemenuisstillblue.

Code:MainPage.xaml

<?xmlversion="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;
        }    
    }
}

View Home Code

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

xamarin xamarin-forms

asked by anonymous 21.01.2018 / 15:40

1 answer

Pin thead when scrolling the table Presentation of data in the view with CodeIgniter

score 1 · Accepted Answer

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

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

(Source: link )

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 that I include ( #FF0000 , #00FF00 and #0000FF ) to the hexadecimal coding of the colors you want.

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