MartinZPetrov
MartinZPetrov

Reputation: 316

Change cell background based on value from a different column

I have this datagrid:

enter image description here

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:

<DataGrid x:Name="dgSchedules"
                    AutoGenerateColumns="False" Background="White"
                    ItemsSource="{Binding ScheduleDetailsViewSource, Mode=TwoWay}"
                    HeadersVisibility="All"
                    CanUserResizeColumns="False"
                    SelectedItem="{Binding DgSelectedScheduleDetail, Mode=TwoWay}"
                    CanUserAddRows="False"
                    AllowDrop="False"
                    CanUserDeleteRows="False" >
                    <DataGrid.Columns>
                        <DataGridTextColumn  IsReadOnly="True"
                            Binding="{Binding Day, StringFormat={}{0:dddd dd.MM.yyyy}}"

                            Width="150"
                            Header="Day" >
                        </DataGridTextColumn>



                        <DataGridTextColumn  Visibility="Collapsed"
                            Binding="{Binding Col1, Mode=TwoWay}"
                            Width="50"
                            Header="Day" >
                            <DataGridTextColumn.ElementStyle>
                                <Style TargetType="{x:Type TextBlock}">
                                    <Setter Property="Background"
                                         Value="{Binding Col1, Mode=TwoWay}" />
                                </Style>
                            </DataGridTextColumn.ElementStyle>
                        </DataGridTextColumn>

                        <DataGridTextColumn Visibility="Collapsed"
                            Binding="{Binding Col2, Mode=TwoWay}"
                            Width="50"
                            Header="Day" />
                        <DataGridTextColumn Visibility="Collapsed"
                            Binding="{Binding Col3, Mode=TwoWay}"
                            Width="50"
                            Header="Day" />
                        <DataGridTextColumn Visibility="Collapsed"
                            Binding="{Binding Col4, Mode=TwoWay}"
                            Width="50"
                            Header="Day" />
                        <DataGridTextColumn Visibility="Collapsed"
                            Binding="{Binding Col5, Mode=TwoWay}"
                            Width="50"
                            Header="Day" />
                        <DataGridTextColumn Visibility="Collapsed"
                            Binding="{Binding Col6, Mode=TwoWay}"
                            Width="50"
                            Header="Day" />
                        <DataGridTextColumn Visibility="Collapsed"
                            Binding="{Binding Col7, Mode=TwoWay}"
                            Width="50"
                            Header="Day" />
                        <DataGridTextColumn Visibility="Collapsed"
                            Binding="{Binding Col8, Mode=TwoWay}"
                            Width="50"
                            Header="Day" />
                        <DataGridTextColumn Visibility="Collapsed"
                            Binding="{Binding Col9, Mode=TwoWay}"
                            Width="50"
                            Header="Day" />
                        <DataGridTextColumn Visibility="Collapsed"
                            Binding="{Binding Col10, Mode=TwoWay}"
                            Width="50"
                            Header="Day" />
                        <DataGridTextColumn Visibility="Collapsed"
                            Binding="{Binding Col11, Mode=TwoWay}"
                            Width="50"
                            Header="Day" />
                        <DataGridTextColumn IsReadOnly="True"  Visibility="Collapsed"
                            Binding="{Binding Col12, Mode=TwoWay}"
                            Width="50"
                            Header="Day" />

                        <DataGridTextColumn Visibility="Collapsed" 
                            Binding="{Binding Col13, Mode=TwoWay}"
                            Width="50"
                            Header="Day" />

                        <DataGridTextColumn Visibility="Collapsed"
                            Binding="{Binding Col14, Mode=TwoWay}"
                            Width="50"
                            Header="Day" />

                        <DataGridTextColumn Visibility="Collapsed"
                            Binding="{Binding Col15, Mode=TwoWay}"
                            Width="50"
                            Header="Day" />

                        <DataGridTextColumn Visibility="Collapsed"
                            Binding="{Binding Col16, Mode=TwoWay}"
                            Width="50"
                            Header="Day" />

                        <DataGridTextColumn Visibility="Collapsed"
                            Binding="{Binding Col17, Mode=TwoWay}"
                            Width="50"
                            Header="Day" />

                        <DataGridTextColumn Visibility="Collapsed"
                            Binding="{Binding Col18, Mode=TwoWay}"
                            Width="50"
                            Header="Day" />

                        <DataGridTextColumn Visibility="Collapsed"
                            Binding="{Binding Col19, Mode=TwoWay}"
                            Width="50"
                            Header="Day" />

                        <DataGridTextColumn Visibility="Collapsed"
                            Binding="{Binding Col20, Mode=TwoWay}"
                            Width="50"
                            Header="Day" />

                        <DataGridTextColumn Visibility="Collapsed"
                            Binding="{Binding Col21, Mode=TwoWay}"
                            Width="50"
                            Header="Day" />

                        <DataGridTextColumn Visibility="Collapsed"
                            Binding="{Binding Col22, Mode=TwoWay}"
                            Width="50"
                            Header="Day" />

                        <DataGridTextColumn Visibility="Collapsed"
                            Binding="{Binding Col23, Mode=TwoWay}"
                            Width="50"
                            Header="Day" />

                        <DataGridTextColumn Visibility="Collapsed"
                            Binding="{Binding Col24, Mode=TwoWay}"
                            Width="50"
                            Header="Day" />

                        <DataGridComboBoxColumn
                            Width="100"
                            DisplayMemberPath="Description"
                            SelectedValuePath="Group_Ref"
                            SelectedValueBinding="{Binding Group_Ref}"
                            Header="Worker" >
                            <DataGridComboBoxColumn.ElementStyle>
                                <Style TargetType="{x:Type ComboBox}">
                                    <Setter Property="ItemsSource" Value="{Binding Path=DataContext.ScheduleGroups, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" />
                                </Style>
                            </DataGridComboBoxColumn.ElementStyle>

                            <DataGridComboBoxColumn.EditingElementStyle>
                                <Style TargetType="{x:Type ComboBox}">
                                    <Setter Property="ItemsSource" Value="{Binding Path=DataContext.ScheduleGroups, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" />
                                </Style>
                            </DataGridComboBoxColumn.EditingElementStyle>
                        </DataGridComboBoxColumn>
                    </DataGrid.Columns>
                    <DataGrid.ContextMenu>
                        <ContextMenu>
                            <MenuItem Header="Delete" Click="Context_Delete"/>
                            <MenuItem Header="Insert" Click="Context_Insert"/>
                        </ContextMenu>
                    </DataGrid.ContextMenu>
                    <DataGrid.GroupStyle>
                        <GroupStyle ContainerStyle="{StaticResource GroupHeaderStyle}">
                            <GroupStyle.Panel>
                                <ItemsPanelTemplate>
                                    <DataGridRowsPresenter/>
                                </ItemsPanelTemplate>
                            </GroupStyle.Panel>
                        </GroupStyle>
                    </DataGrid.GroupStyle>
                </DataGrid>

The Style for the Grouping:

 <Style x:Key="GroupHeaderStyle" TargetType ="{x:Type GroupItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type GroupItem}">
                    <StackPanel>
                        <TextBlock Text="{Binding Day}"/>
                            <ItemsPresenter/>
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

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<System.DateTime> 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++;
            }
        }

Upvotes: 3

Views: 2406

Answers (1)

NPC
NPC

Reputation: 121

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<WorkingItem> WorkingItems { get; set; } = new ObservableCollection<WorkingItem>();
    }

MainWindow-XAML:

...

    <Window.Resources>
        <converter:WorkerToColorConverter x:Key="WorkerToColorConverter"/>
    </Window.Resources>
    <Grid>
        <DataGrid ItemsSource="{Binding WorkingItems}" AutoGenerateColumns="False">
            <DataGrid.Columns>
                <DataGridTextColumn Header="Day" Binding="{Binding DateTime}"/>
                <DataGridTextColumn Header="Worker" Binding="{Binding Worker}">
                    <DataGridTextColumn.ElementStyle>
                        <Style TargetType="{x:Type TextBlock}">
                            <Setter Property="Background" Value="{Binding Worker, Converter={StaticResource WorkerToColorConverter}}"/>
                        </Style>
                    </DataGridTextColumn.ElementStyle>
                </DataGridTextColumn>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>

...

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:

<converter:WorkerToColorConverter x:Key="WorkerToColorConverter" ChefColor="Beige"/>

@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:

<Window.Resources>
    <converter:WorkerToColorMultiConverter x:Key="WorkerToColorMultiConverter" />
</Window.Resources>

....

<DataGridTextColumn Header="1" Binding="{Binding Col1}">
    <DataGridTextColumn.ElementStyle>
        <Style TargetType="{x:Type TextBlock}">
            <Setter Property="Background">
                <Setter.Value>
                    <MultiBinding Converter="{StaticResource WorkerToColorMultiConverter}">
                        <Binding Path="Col1" />
                        <Binding Path="Worker" />
                    </MultiBinding>
                </Setter.Value>
            </Setter>
        </Style>
    </DataGridTextColumn.ElementStyle>
</DataGridTextColumn>
<DataGridTextColumn Header="2" Binding="{Binding Col2}">
    <DataGridTextColumn.ElementStyle>
        <Style TargetType="{x:Type TextBlock}">
            <Setter Property="Background">
                <Setter.Value>
                    <MultiBinding Converter="{StaticResource WorkerToColorMultiConverter}">
                        <Binding Path="Col2" />
                        <Binding Path="Worker" />
                    </MultiBinding>
                </Setter.Value>
            </Setter>
        </Style>
    </DataGridTextColumn.ElementStyle>
</DataGridTextColumn>

looks like: Colored just the cells with values

Upvotes: 4

Related Questions