Search code examples
c#uwpdatagriddatagridcomboboxcolumn

How to change color of foreground


help me please. I have DataGrid with ComboBoxColumn and I have to change foreground text.

For example: - If ComboBoxColumn have value "IT" foreground must be "Red" - If ComboBoxColumn have value "R&D" foreground must be "Yellow" - If ComboBoxColumn have value "Finance" foreground must be "Black"

<Page
    x:Class="DataGridComboBoxColumnColor.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:MSControls="using:Microsoft.Toolkit.Uwp.UI.Controls"
    xmlns:local="using:DataGridComboBoxColumnColor"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.3*"></ColumnDefinition>
            <ColumnDefinition Width="0.7*"></ColumnDefinition>
            <ColumnDefinition Width="0.3*"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <MSControls:DataGrid  Grid.Column="1"
                  ItemsSource="{x:Bind Persons}"
                  AutoGenerateColumns="False" 
                  ScrollViewer.HorizontalScrollMode="Enabled"
                  RowHeight="60">

            <MSControls:DataGrid.Columns>
                <MSControls:DataGridTextColumn Header="First 
                                               Name" Width="*"
                                               Binding="{Binding FirstName}"/>

                <MSControls:DataGridTextColumn Header="Last 
                                               Name" Width="*"
                                               Binding="{Binding LastName}"/>

                <MSControls:DataGridTextColumn Header="Position" 
                                               Width="*" 
                                               Binding="{Binding Position}"/>

                <MSControls:DataGridComboBoxColumn Header="Department"
                                                   Width="*"
                                                   Binding="{Binding DepartmentId}"                                                  
                                                   ItemsSource="{x:Bind Departments}"
                                                   DisplayMemberPath="DepartmentName"/>
            </MSControls:DataGrid.Columns>
        </MSControls:DataGrid>
    </Grid>
</Page>

Code behind

namespace DataGridComboBoxColumnColor
{
    public class Department
    {
        public int DepartmentId {
            get;
            set;
        }
        public string DepartmentName {
            get;
            set;
        }
    }

    public class Person
    {
        public int PersonId {
            get;
            set;
        }
        public int DepartmentId {
            get;
            set;
        }
        public string FirstName {
            get;
            set;
        }
        public string LastName {
            get;
            set;
        }
        public string Position {
            get;
            set;
        }
    }

    public sealed partial class MainPage : Page
    {
        public List<Department> Departments {
            get;
            set;
        }
        public List<Person> Persons {
            get;
            set;
        }
        public MainPage()
        {
            this.InitializeComponent();
            Departments = new List<Department>
            {
                new Department {
                    DepartmentId = 1, DepartmentName = "R&D"
                }
                ,
                new Department {
                    DepartmentId = 2, DepartmentName = "Finance"
                }
                ,
                new Department {
                    DepartmentId = 3, DepartmentName = "IT"
                }
            };
            Persons = new List<Person>
            {
                new Person
                {
                    PersonId = 1, DepartmentId = 3, FirstName = "Ronald", LastName = "Rumple",
                    Position = "Network Administrator"
                }
                ,
                new Person
                {
                    PersonId = 2, DepartmentId = 1, FirstName = "Brett", LastName = "Banner",
                    Position = "Software Developer"
                }
                ,
                new Person
                {
                    PersonId = 3, DepartmentId = 2, FirstName = "Alice", LastName = "Anderson",
                    Position = "Accountant"
                }
            };
        }
    }

}

Solution

  • How to change color of foreground

    For your requirement, the better way is use IValueConverter to retune the matched foreground. Unfortunately, the foreground property of DataGridTextColumn is not DependencyProperty, so we could not use converter directly. We could use DataGridTemplateColumn to make custom cell and add a TextBlock in the CellTemplate then binding the foreground with the source like the following.

    Converter

    public class ColorValueConverter : IValueConverter
     {
         //IT" foreground must be "Red" - If ComboBoxColumn have value "R&D" foreground must be "Yellow"
    
         public object Convert(object value, Type targetType, object parameter, string language)
         {
             var solorbrush = new SolidColorBrush();
             switch (value.ToString())
             {
                 case "IT":
                     solorbrush.Color = Colors.Red;
                     break;
                 case "R&D":
                     solorbrush.Color = Colors.Yellow;
                     break;
                 case "Finance":
                     solorbrush.Color = Colors.Black;
                     break;
    
                 default:
                     solorbrush.Color = Colors.LightBlue;
                     break;
    
             }
             return solorbrush;
         }
    
    
      public object ConvertBack(object value, Type targetType, object parameter, string language)
         {
             throw new NotImplementedException();
         }
     }
    

    Usage

    <Page.Resources>    
        <local:ColorValueConverter x:Key="ColorCoverter"/>
    </Page.Resources>
    
    
    <controls:DataGridTemplateColumn Header="ID">
        <controls:DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Id}" Foreground="{Binding Id, Converter={StaticResource ColorCoverter}}"/>
            </DataTemplate>
        </controls:DataGridTemplateColumn.CellTemplate>
    
    </controls:DataGridTemplateColumn>