Foreground in TableViewDateColumn

[Furtif78]

Hy,

I've tried these two methods to force the date color to blue, but neither works. Can you help me?

method 1

                <tv:TableViewTemplateColumn Header="Date Start 1" 
                                            MinWidth="120">
                    <tv:TableViewTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <CalendarDatePicker Date="{Binding DateStart}"
                                                Foreground="Blue"/>
                        </DataTemplate>
                    </tv:TableViewTemplateColumn.CellTemplate>
                    <tv:TableViewTemplateColumn.EditingTemplate>
                        <DataTemplate>
                            <CalendarDatePicker Date="{Binding DateStart, Mode=TwoWay}"
                                                Foreground="Blue"/>
                        </DataTemplate>
                    </tv:TableViewTemplateColumn.EditingTemplate>
                </tv:TableViewTemplateColumn>

method 2
                <tv:TableViewDateColumn Header="Date Start 2"
                                        Binding="{Binding DateStart, Mode=TwoWay}"
                                        MinWidth="120">
                    <tv:TableViewDateColumn.EditingElementStyle>
                        <Style TargetType="CalendarDatePicker">
                            <Setter Property="Foreground" Value="Blue"/>
                        </Style>
                    </tv:TableViewDateColumn.EditingElementStyle>

                    <tv:TableViewDateColumn.ElementStyle>
                        <Style TargetType="CalendarDatePicker">
                            <Setter Property="Foreground" Value="Blue"/>
                        </Style>
                    </tv:TableViewDateColumn.ElementStyle>
                </tv:TableViewDateColumn>

[w-ahmad]

For TableViewDateColumn, ElementStyle and EditingElementStyle target different controls.

EditingElementStyle is applied when the cell enters edit mode, so its target type should be CalendarDatePicker.

But ElementStyle is applied when the cell is in display mode. In that case, TableViewDateColumn does not use a CalendarDatePicker; it uses a TextBlock element. So this part will not work:

<tv:TableViewDateColumn Header="Date Start 2"
                        Binding="{Binding DateStart, Mode=TwoWay}"
                        MinWidth="120">

    <tv:TableViewDateColumn.ElementStyle>
        <Style TargetType="TextBlock">
            <Setter Property="Foreground" Value="Blue"/>
        </Style>
    </tv:TableViewDateColumn.ElementStyle>

    <tv:TableViewDateColumn.EditingElementStyle>
        <Style TargetType="CalendarDatePicker">
            <Setter Property="Foreground" Value="Blue"/>
        </Style>
    </tv:TableViewDateColumn.EditingElementStyle>

</tv:TableViewDateColumn>

However, CalendarDatePicker.Foreground may not affect the visible date text because the control template uses its own internal theme resources. For method 1, both templates directly contain a CalendarDatePicker, so the target is correct, but the foreground won't affect. To better understand how the CalendarDatePicker template works, here is the default style to explore.
https://github.com/microsoft/microsoft-ui-xaml/blob/5f9e851133b354e89517d79cb11579ebba81e053/src/controls/dev/CommonStyles/CalendarDatePicker_themeresources.xaml#L85-L103

[Furtif78]

Thanks Ahmad for your help.

For a better user experience, cells in read-only mode use a black font, and those in write mode use a blue font.
I found the solution with the help of an AI, which I'm sharing in case it helps someone.

<?xml version="1.0" encoding="utf-8"?>
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:tvc="using:WinUI.TableView.Controls">

    <SolidColorBrush x:Key="TableViewEditableForegroundBrush" Color="Blue"/>

    <SolidColorBrush x:Key="CalendarDatePickerTextForeground" Color="Blue"/>
    <SolidColorBrush x:Key="CalendarDatePickerTextForegroundPointerOver" Color="Blue"/>
    <SolidColorBrush x:Key="CalendarDatePickerTextForegroundPressed" Color="Blue"/>
    <SolidColorBrush x:Key="CalendarDatePickerTextForegroundSelected" Color="Blue"/>

    <SolidColorBrush x:Key="TimePickerButtonForeground" Color="Blue"/>
    <SolidColorBrush x:Key="TimePickerButtonForegroundDefault" Color="Blue"/>
    <SolidColorBrush x:Key="TimePickerButtonForegroundPointerOver" Color="Blue"/>
    <SolidColorBrush x:Key="TimePickerButtonForegroundPressed" Color="Blue"/>
    <SolidColorBrush x:Key="TimePickerButtonForegroundFocused" Color="Blue"/>

    <Style x:Key="TableViewCenteredTextBlockStyle" TargetType="TextBlock">
        <Setter Property="TextAlignment" Value="Center"/>
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
    </Style>

    <Style x:Key="TableViewRightAlignedTextBlockStyle" TargetType="TextBlock">
        <Setter Property="TextAlignment" Value="Right"/>
    </Style>

    <Style x:Key="TableViewCompactTextBlockStyle" TargetType="TextBlock">
        <Setter Property="FontSize" Value="12"/>
        <Setter Property="Margin" Value="0"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
    </Style>

    <Style x:Key="TableViewEditableTextBlockStyle" TargetType="TextBlock">
        <Setter Property="Foreground" Value="{StaticResource TableViewEditableForegroundBrush}"/>
    </Style>

    <Style x:Key="TableViewEditableTextBoxStyle" TargetType="TextBox">
        <Setter Property="Foreground" Value="{StaticResource TableViewEditableForegroundBrush}"/>
    </Style>

    <Style x:Key="TableViewEditableDatePickerStyle" TargetType="DatePicker">
        <Setter Property="Foreground" Value="{StaticResource TableViewEditableForegroundBrush}"/>
    </Style>

    <Style x:Key="TableViewEditableTimePickerStyle" TargetType="tvc:TableViewTimePicker">
        <Setter Property="Foreground" Value="{StaticResource TableViewEditableForegroundBrush}"/>
    </Style>

    <Style x:Key="TableViewEditableCalendarViewStyle"
           TargetType="CalendarView"
           BasedOn="{StaticResource DefaultCalendarViewStyle}">
        <Setter Property="DayItemFontSize" Value="12"/>
        <Setter Property="MonthYearItemFontSize" Value="12"/>
    </Style>

    <Style x:Key="TableViewEditableCalendarDatePickerStyle" TargetType="CalendarDatePicker">
        <Setter Property="Foreground" Value="{StaticResource TableViewEditableForegroundBrush}"/>
        <Setter Property="CalendarViewStyle" Value="{StaticResource TableViewEditableCalendarViewStyle}"/>
    </Style>

    <Style x:Key="TableViewCompactCheckBoxStyle" TargetType="CheckBox">
        <Setter Property="MinWidth" Value="-1"/>
        <Setter Property="MinHeight" Value="-1"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Margin" Value="0"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="UseSystemFocusVisuals" Value="False"/>
    </Style>

    <Style x:Key="TableViewCompactCellTextBlockStyle" TargetType="TextBlock">
        <Setter Property="FontSize" Value="12"/>
        <Setter Property="FontFamily" Value="Courier New"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
    </Style>

    <Style x:Key="TableViewCompactCellContentPresenterStyle" TargetType="ContentPresenter">
        <Setter Property="Padding" Value="0"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
    </Style>

</ResourceDictionary>

                <tv:TableViewDateColumn Header="Au" Tag="DateEnd"
                                        Binding="{Binding DateEnd, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                        MinWidth="120"
                                        MinDate= "{Binding DateStart, Converter={StaticResource DateTimeToDateTimeOffsetConverter}, Mode=OneWay}"
                                        ElementStyle="{StaticResource TableViewEditableTextBlockStyle}"
                                        EditingElementStyle="{StaticResource TableViewEditableCalendarDatePickerStyle}"/>