Change cell background based on value from a different column

Question

I have this datagrid:

I want to be able to put coloring on each cell depending on the worker column. So for example if the cell has a value of 1 and the Worker is Chef -> Color = Blue else transparent.

If the cell Worker is Waiter I need to be able to change the cells between 10 and 20 colors if they hold any values or transparent if not data is stored.

I tried with a Converter but the problem occurs that it gets the current data of the cell I don`t know how to fetch the worker field value (which is a combobox).

So basically depending of the Worker Column and if the cell is populated I must apply coloring but I really got stuck at this point.

Edit: DataGrid XAML:

The Style for the Grouping:

My Model:

  public partial class Scheduledetail
    {
        public Scheduledetail()
        {
            this.Schedule_Ref = 0;
            this.Group_Ref = 0;
            this.Col1 = "";
            this.Col2 = "";
            this.Col3 = "";
            this.Col4 = "";
            this.Col5 = "";
            this.Col6 = "";
            this.Col7 = "";
            this.Col8 = "";
            this.Col9 = "";
            this.Col10 = "";
            this.Col11 = "";
            this.Col12 = "";
            this.Col13 = "";
            this.Col14 = "";
            this.Col15 = "";
            this.Col16 = "";
            this.Col17 = "";
            this.Col18 = "";
            this.Col19 = "";
            this.Col20 = "";
            this.Col21 = "";
            this.Col22 = "";
            this.Col23 = "";
            this.Col24 = "";
        }

        public int ScheduleDetails_Ref { get; set; }
        public int Schedule_Ref { get; set; }
        public int Group_Ref { get; set; }
        public Nullable Day { get; set; }
        public string Col1 { get; set; }
        public string Col2 { get; set; }
        public string Col3 { get; set; }
        public string Col4 { get; set; }
        public string Col5 { get; set; }
        public string Col6 { get; set; }
        public string Col7 { get; set; }
        public string Col8 { get; set; }
        public string Col9 { get; set; }
        public string Col10 { get; set; }
        public string Col11 { get; set; }
        public string Col12 { get; set; }
        public string Col13 { get; set; }
        public string Col14 { get; set; }
        public string Col15 { get; set; }
        public string Col16 { get; set; }
        public string Col17 { get; set; }
        public string Col18 { get; set; }
        public string Col19 { get; set; }
        public string Col20 { get; set; }
        public string Col21 { get; set; }
        public string Col22 { get; set; }
        public string Col23 { get; set; }
        public string Col24 { get; set; }

        public virtual Group Group { get; set; }
        public virtual Schedule Schedule { get; set; }
    }

At run-time I display the columns of the grid which are needed based on previous user input on the form:

    if(snd.WorkAliasCollection.View.CurrentItem == null)
        {
            return;
        }
        var entity = snd.WorkAliasCollection.View.CurrentItem as Schedule;
        DateTime? fromDate = entity.FromDate;
        DateTime? toDate = entity.ToDate;
        int startTime = fromDate.Value.Hour;

        int diff = (toDate.Value.Hour - fromDate.Value.Hour);

        dgSchedules.SetBinding(ItemsControl.ItemsSourceProperty, new Binding { Source = snd.ScheduleDetailsViewSource });
        ScheduleDetailsTI.Visibility = Visibility.Visible;

        if (dgSchedules != null)
        {
            for (int i = 0; i <= diff; i++)
            {
                dgSchedules.Columns[i+1].Visibility = System.Windows.Visibility.Visible;
                dgSchedules.Columns[i + 1].Header = startTime++;
            }
        }

NPC · Accepted Answer

Working simple example for you:

MainWindow-Code:

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = this;

            FillList();
        }

        private void FillList()
        {
            WorkingItems.Add(new WorkingItem {DateTime = DateTime.Today, Worker = "Chef"});
            WorkingItems.Add(new WorkingItem {DateTime = DateTime.Today, Worker = "Waiter"});
            WorkingItems.Add(new WorkingItem {DateTime = DateTime.Today.AddDays(1), Worker = "Chef"});
            WorkingItems.Add(new WorkingItem {DateTime = DateTime.Today.AddDays(2), Worker = "Other"});
            WorkingItems.Add(new WorkingItem {DateTime = DateTime.Today.AddDays(3), Worker = "Nobody"});
        }

        public ObservableCollection WorkingItems { get; set; } = new ObservableCollection();
    }

MainWindow-XAML:

...

The "magic" converter:

    public class WorkerToColorConverter : IValueConverter
    {
        public Brush ChefColor { get; set; }
        public Brush WaiterColor { get; set; }
        public Brush DefaultColor { get; set; }

        public WorkerToColorConverter()
        {
            //Default Colors
            ChefColor = Brushes.Aqua;
            WaiterColor = Brushes.Yellow;
            DefaultColor = Brushes.Transparent;
        }

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var workerName = value as string;
            switch (workerName)
            {
                case "Chef":
                    return ChefColor;
                case "Waiter":
                    return WaiterColor;
                default:
                    return DefaultColor;
            }
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

My Workitem for testing:

    public class WorkingItem
    {
        public string Worker { get; set; }
        public DateTime DateTime { get; set; }
    }

The Converter can also take other colors directly:

@Edit -example for IMultiConverter:

    public class WorkerToColorMultiConverter : IMultiValueConverter
    {
        public Brush ChefColor { get; set; }
        public Brush WaiterColor { get; set; }
        public Brush DefaultColor { get; set; }

        public WorkerToColorMultiConverter()
        {
            //Default Colors
            ChefColor = Brushes.Aqua;
            WaiterColor = Brushes.Yellow;
            DefaultColor = Brushes.Transparent;
        }

        public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
        {
            if (values != null && values.Count() == 2)
            {
                var cellValue = values[0] as string;
                var workerValue = values[1] as string;
                if (!string.IsNullOrEmpty(cellValue))
                {
                    switch (workerValue)
                    {
                        case "Chef":
                            return ChefColor;
                        case "Waiter":
                            return WaiterColor;
                        default:
                            return DefaultColor;
                    }
                }
            }
            return DefaultColor;
        }

        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

Using in XAML:

....

looks like:

Change cell background based on value from a different column

Answers (1)

Related Questions