Set Background color of ItemsControl

Question

In my WPF Application, I have Item control which shows Dates and Days of a week. Now,I need to change the background color of the Item which is today's date. Here is the XAML code

  <ItemsControl Grid.Column="1"
                Focusable="False" 
               ItemsSource="{Binding WeekDays}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate >
                    <DataTemplate>
                        <Border BorderBrush="{StaticResource GrayBrush7}"
                                BorderThickness="1,0,0,0"
                                SnapsToDevicePixels="True"
                                UseLayoutRounding="True">                                
                            <StackPanel Margin="2" 
                                      VerticalAlignment="Center">
                                <TextBlock HorizontalAlignment="Center"
                                           VerticalAlignment="Top"                                               
                                           Text="{Binding Day}"
                                           TextAlignment="Center"/>

                                <TextBlock HorizontalAlignment="Center"
                                           VerticalAlignment="Top"                                               
                                           Text="{Binding Date, 
                                                StringFormat='dd/MM/yyyy'}"
                                           TextAlignment="Center"/>
                            </StackPanel>
                        </Border>
                        </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>

Thanks in Advance.

Answer 1

You can use DataTrigger in Border Style if you have IsToday property in model class. Like this

public class WeekDay
{
    public DateTime Date { get; }
    public string Day { get; }
    public bool IsToday { get; }

    public WeekDay(DateTime date)
    {
        this.Date = date;
        this.Day = date.DayOfWeek.ToString();
        this.IsToday = date.Date == DateTime.Today;
    }
}

<ItemsControl.ItemTemplate >
    <DataTemplate>
        <Border BorderBrush="{StaticResource GrayBrush7}"
                BorderThickness="1,0,0,0"
                SnapsToDevicePixels="True"
                UseLayoutRounding="True">
            <Border.Style>
                <Style TargetType="Border">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsToday}" Value="True">
                            <Setter Property="Background" Value="Yellow" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
...

As an alternative, you can use ValueConverter to convert Date to Background.

public class DateToItemBackgroundConverter : IValueConverter
{
    private static readonly Brush TodayBGBrush = new SolidColorBrush(Colors.Yellow);

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value == null || !(value is DateTime))
        {
            return value;
        }

        var isToday = ((DateTime)value).Date == DateTime.Today;

        return isToday ? TodayBGBrush : null;
    }

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

<ItemsControl Grid.Column="1"
              Focusable="False" 
              ItemsSource="{Binding WeekDays}">
    <ItemsControl.Resources>
        <local:DateToItemBackgroundConverter x:Key="bgConverter" />
    </ItemsControl.Resources>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate >
        <DataTemplate>
            <Border BorderBrush="{StaticResource GrayBrush7}"
                    Background="{Binding Date, Converter={StaticResource bgConverter}}"
                    BorderThickness="1,0,0,0"
                    SnapsToDevicePixels="True"
                    UseLayoutRounding="True">
...

Remember if you wanna refresh background when TODAY is updated, you should rebuild model data or notify PropertyChanged again.

Answer 2

You could just add a Border style with a DataTrigger to your ItemTemplate . Compare the Date property of your DateTime property with the static DateTime.Today property:

<ItemsControl.ItemTemplate>
    <DataTemplate>
        <Border BorderBrush="{StaticResource GrayBrush7}"
                BorderThickness="1,0,0,0"
                SnapsToDevicePixels="True"
                UseLayoutRounding="True">
            <Border.Style>
                <Style TargetType="Border" xmlns:system="clr-namespace:System;assembly=mscorlib">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding Date.Date}" Value="{x:Static system:DateTime.Today}">
                            <Setter Property="Background" Value="Yellow" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
            <StackPanel Margin="2" 
                        VerticalAlignment="Center">
                <TextBlock HorizontalAlignment="Center"
                           VerticalAlignment="Top"                                               
                           Text="{Binding Day}"
                           TextAlignment="Center"/>

                <TextBlock HorizontalAlignment="Center"
                           VerticalAlignment="Top"                                               
                           Text="{Binding Date,  StringFormat='dd/MM/yyyy'}"
                           TextAlignment="Center"/>
            </StackPanel>
        </Border>
    </DataTemplate>
</ItemsControl.ItemTemplate>