Lists - Different colors for a specific ListItems

CodyLienCodyLien USMember
edited October 26 in Xamarin.Forms

Hello everybody! I'm new to the forums so I hope I'm posting in the right place and I just wanted to ask for some input on a problem I've been facing.. I am trying to create an application that will show a list but for every different list item there will be a different background color depending on what color is indicated. I run the program and it all displays as the default colors (white background and red font) I'm coding the program in C# and I've looked online and can't seem to find any solutions to the problem without being done in a different format. Here's my code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace App4
{
public partial class MainPage : ContentPage
{
public class ListItem
{
public string Title { get; set; }
public Color ForeColor { get; set; }
public Color BackgroundColor { get; set; }
}
public MainPage()
{
var listView = new ListView();
listView.ItemsSource = new ListItem[]
{
new ListItem {Title ="Red", ForeColor = Color.White, BackgroundColor = Color.Red},
new ListItem {Title ="Orange", ForeColor = Color.White, BackgroundColor = Color.Orange},
new ListItem {Title ="Yellow", ForeColor = Color.White, BackgroundColor = Color.Yellow},
new ListItem {Title ="Green", ForeColor = Color.White, BackgroundColor = Color.Green},
new ListItem {Title ="Blue", ForeColor = Color.White, BackgroundColor = Color.Blue},
new ListItem {Title ="Indigo", ForeColor = Color.White, BackgroundColor =Color.Indigo},
new ListItem {Title ="Violet", ForeColor = Color.White, BackgroundColor = Color.Violet}
};
listView.ItemTemplate = new DataTemplate(typeof(TextCell));
listView.ItemTemplate.SetBinding(TextCell.TextProperty, "Title");
this.Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);
Content = listView;
listView.ItemTapped += async (sender, e) =>
{
ListItem item = (ListItem)e.Item;
await DisplayAlert("Tapped", item.Title.ToString() + " was selected.", "OK");
((ListView)sender).SelectedItem = null;
};
}
}
}

Does anybody have any pointers or help to point me into the right direction? Thank you so much and have a great day!

Posts

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭
    edited October 26

    It seems you are not binding ForeColor and BackgroundColor properties. You have binded only "Title" property.
    TextCell has only TextColor property so you can bind ForeColor to TextCell's TextColor. Otherwise you should have a different DataTemplate

  • seanydaseanyda GBMember ✭✭✭✭✭
    edited October 26

    You need to use an third-party Nuget package to update the background colours on TextCell, SwitchCell etc..

    This is the package - Ansuria.XFGloss

    You will need to install it to your PCL and your platform specific projects and then initialise it in AppDelegate, MainActivity like this XFGloss.iOS.Library.Init();

    Create a bool in your public class:
    bool newRow = false;

    In the TextCell DataTemplate have this code below:
    if (newRow) CellGloss.SetBackgroundColor(tc, Color.White);
    else CellGloss.SetBackgroundColor(tc, Color.FromHex("EEEEEE"));
    newRow = newRow ? false : true;

    That should do the trick :)

  • CodyLienCodyLien USMember

    Thank you both so much for the help and speedy replies, @AlessandroCaliaro and @seanyda!

    I have added XFGloss.Droid.Library.Init(); after the LoadApplication line and added your suggestions however there is one last problem I seem to have before running the program is that it says the CellGloss and tc fields don't exist in the current context. Here's my latest code:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using Xamarin.Forms;

    namespace App4
    {

    public partial class MainPage : ContentPage
    {
        public class ListItem
        {
            public string Title { get; set; }
            public Color ForeColor { get; set; }
            public Color BackgroundColor { get; set; }
    
        }
        public MainPage()
        {
            bool newRow = false;
            var listView = new ListView();
            listView.ItemsSource = new ListItem[]
            {
                new ListItem {Title ="Red", ForeColor = Color.White, BackgroundColor = Color.Red},
                new ListItem {Title ="Orange", ForeColor = Color.White, BackgroundColor = Color.Orange},
                new ListItem {Title ="Yellow", ForeColor = Color.White, BackgroundColor = Color.Yellow},
                new ListItem {Title ="Green", ForeColor = Color.White, BackgroundColor = Color.Green},
                new ListItem {Title ="Blue", ForeColor = Color.White, BackgroundColor = Color.Blue},
                new ListItem {Title ="Indigo", ForeColor = Color.White, BackgroundColor =Color.Indigo},
                new ListItem {Title ="Violet", ForeColor = Color.White, BackgroundColor = Color.Violet}
            };
            listView.ItemTemplate = new DataTemplate(typeof(TextCell));
            listView.ItemTemplate.SetBinding(TextCell.TextProperty, "Title");
            if (newRow) CellGloss.SetBackgroundColor(tc, Color.White);
            else CellGloss.SetBackgroundColor(tc, Color.FromHex("EEEEEE"));
            newRow = newRow ? false : true;
            this.Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);
            Content = listView;
            listView.ItemTapped += async (sender, e) =>
            {
                ListItem item = (ListItem)e.Item;
                await DisplayAlert("Tapped", item.Title.ToString() + " was selected.", "OK");
                ((ListView)sender).SelectedItem = null;
            };
        }
    }
    

    }

    By the way, seandya awesome profile picture! Rick and Morty is awesome!

  • seanydaseanyda GBMember ✭✭✭✭✭

    @CodyLien said:
    Thank you both so much for the help and speedy replies, @AlessandroCaliaro and @seanyda!

    I have added XFGloss.Droid.Library.Init(); after the LoadApplication line and added your suggestions however there is one last problem I seem to have before running the program is that it says the CellGloss and tc fields don't exist in the current context. Here's my latest code:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using Xamarin.Forms;

    namespace App4
    {

    public partial class MainPage : ContentPage
    {
        public class ListItem
        {
            public string Title { get; set; }
            public Color ForeColor { get; set; }
            public Color BackgroundColor { get; set; }
    
        }
        public MainPage()
        {
            bool newRow = false;
            var listView = new ListView();
            listView.ItemsSource = new ListItem[]
            {
                new ListItem {Title ="Red", ForeColor = Color.White, BackgroundColor = Color.Red},
                new ListItem {Title ="Orange", ForeColor = Color.White, BackgroundColor = Color.Orange},
                new ListItem {Title ="Yellow", ForeColor = Color.White, BackgroundColor = Color.Yellow},
                new ListItem {Title ="Green", ForeColor = Color.White, BackgroundColor = Color.Green},
                new ListItem {Title ="Blue", ForeColor = Color.White, BackgroundColor = Color.Blue},
                new ListItem {Title ="Indigo", ForeColor = Color.White, BackgroundColor =Color.Indigo},
                new ListItem {Title ="Violet", ForeColor = Color.White, BackgroundColor = Color.Violet}
            };
            listView.ItemTemplate = new DataTemplate(typeof(TextCell));
            listView.ItemTemplate.SetBinding(TextCell.TextProperty, "Title");
            if (newRow) CellGloss.SetBackgroundColor(tc, Color.White);
            else CellGloss.SetBackgroundColor(tc, Color.FromHex("EEEEEE"));
            newRow = newRow ? false : true;
            this.Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);
            Content = listView;
            listView.ItemTapped += async (sender, e) =>
            {
                ListItem item = (ListItem)e.Item;
                await DisplayAlert("Tapped", item.Title.ToString() + " was selected.", "OK");
                ((ListView)sender).SelectedItem = null;
            };
        }
    }
    

    }

    By the way, seandya awesome profile picture! Rick and Morty is awesome!

    No problem. Copy in this method

    public DataTemplate GetTextCellTemplate()
            {
                return new DataTemplate(() =>
                {
                    TextCell tc = new TextCell();
            if (newRow) CellGloss.SetBackgroundColor(tc, Color.White);
                else CellGloss.SetBackgroundColor(tc, Color.FromHex("EEEEEE"));
                newRow = newRow ? false : true;
                    tc.SetBinding(TextCell.TextProperty, new Binding("Title"));
                    return tc;
                });
            }
    

    and set your ItemTemplate on your ListView to GetTextCellTemplate like this:

     listView.ItemTemplate = GetTextCellTemplate();
    

    and then remove the below line, because we are now doing the binding in the DataTemplate method instead of the constructor.
    listView.ItemTemplate.SetBinding(TextCell.TextProperty, "Title");

  • CodyLienCodyLien USMember

    Thank you so much for all of the help, I really appreciate it. There is only one last problem with my code which the program is telling me that there is no field called 'CellGloss' in the current context. I'm not sure what's causing this problem, am I missing something or coded something incorrectly? Perhaps the classes need to be added to the 'using' list above, I'm not too sure though. Thank you so much.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using Xamarin.Forms;

    namespace App4
    {

    public partial class MainPage : ContentPage
    {
        bool newRow = false;
        public class ListItem
        {
            public string Title { get; set; }
            public Color ForeColor { get; set; }
            public Color BackgroundColor { get; set; }
    
        }
        public MainPage()
        {
            var listView = new ListView();
            listView.ItemsSource = new ListItem[]
            {
                new ListItem {Title ="Red", ForeColor = Color.White, BackgroundColor = Color.Red},
                new ListItem {Title ="Orange", ForeColor = Color.White, BackgroundColor = Color.Orange},
                new ListItem {Title ="Yellow", ForeColor = Color.White, BackgroundColor = Color.Yellow},
                new ListItem {Title ="Green", ForeColor = Color.White, BackgroundColor = Color.Green},
                new ListItem {Title ="Blue", ForeColor = Color.White, BackgroundColor = Color.Blue},
                new ListItem {Title ="Indigo", ForeColor = Color.White, BackgroundColor =Color.Indigo},
                new ListItem {Title ="Violet", ForeColor = Color.White, BackgroundColor = Color.Violet}
            };
            listView.ItemTemplate = new DataTemplate(typeof(TextCell));
            listView.ItemTemplate = GetTextCellTemplate();
            this.Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);
            Content = listView;
            listView.ItemTapped += async (sender, e) =>
            {
                ListItem item = (ListItem)e.Item;
                await DisplayAlert("Tapped", item.Title.ToString() + " was selected.", "OK");
                ((ListView)sender).SelectedItem = null;
            };
        }
        public DataTemplate GetTextCellTemplate()
        {
            return new DataTemplate(() =>
            {
                TextCell tc = new TextCell();
                if (newRow) CellGloss.SetBackgroundColor(tc, Color.White);
                else CellGloss.SetBackgroundColor(tc, Color.FromHex("EEEEEE"));
                newRow = newRow ? false : true;
                tc.SetBinding(TextCell.TextProperty, new Binding("Title"));
                return tc;
            });
        }
    }
    

    }

  • seanydaseanyda GBMember ✭✭✭✭✭

    @CodyLien said:
    Thank you so much for all of the help, I really appreciate it. There is only one last problem with my code which the program is telling me that there is no field called 'CellGloss' in the current context. I'm not sure what's causing this problem, am I missing something or coded something incorrectly? Perhaps the classes need to be added to the 'using' list above, I'm not too sure though. Thank you so much.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using Xamarin.Forms;

    namespace App4
    {

    public partial class MainPage : ContentPage
    {
        bool newRow = false;
        public class ListItem
        {
            public string Title { get; set; }
            public Color ForeColor { get; set; }
            public Color BackgroundColor { get; set; }
    
        }
        public MainPage()
        {
            var listView = new ListView();
            listView.ItemsSource = new ListItem[]
            {
                new ListItem {Title ="Red", ForeColor = Color.White, BackgroundColor = Color.Red},
                new ListItem {Title ="Orange", ForeColor = Color.White, BackgroundColor = Color.Orange},
                new ListItem {Title ="Yellow", ForeColor = Color.White, BackgroundColor = Color.Yellow},
                new ListItem {Title ="Green", ForeColor = Color.White, BackgroundColor = Color.Green},
                new ListItem {Title ="Blue", ForeColor = Color.White, BackgroundColor = Color.Blue},
                new ListItem {Title ="Indigo", ForeColor = Color.White, BackgroundColor =Color.Indigo},
                new ListItem {Title ="Violet", ForeColor = Color.White, BackgroundColor = Color.Violet}
            };
            listView.ItemTemplate = new DataTemplate(typeof(TextCell));
            listView.ItemTemplate = GetTextCellTemplate();
            this.Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);
            Content = listView;
            listView.ItemTapped += async (sender, e) =>
            {
                ListItem item = (ListItem)e.Item;
                await DisplayAlert("Tapped", item.Title.ToString() + " was selected.", "OK");
                ((ListView)sender).SelectedItem = null;
            };
        }
        public DataTemplate GetTextCellTemplate()
        {
            return new DataTemplate(() =>
            {
                TextCell tc = new TextCell();
                if (newRow) CellGloss.SetBackgroundColor(tc, Color.White);
                else CellGloss.SetBackgroundColor(tc, Color.FromHex("EEEEEE"));
                newRow = newRow ? false : true;
                tc.SetBinding(TextCell.TextProperty, new Binding("Title"));
                return tc;
            });
        }
    }
    

    }

    You'll need to add this using below:
    using XFGloss;

Sign In or Register to comment.