WPF DatePicker IsEnabled property not changing appearance

Question

I think I have found an issue with the DatePicker in the toolkit, perhaps some of you gurus can check it out.

The issue is when setting the IsEnabled property of the DatePicker. If set in XAML, it stays grey even if you set the IsEnabled to true at run time. The same goes for the other way around should it start off being enabled.

The button just changes the IsEnabled property of the date picker, you will see that when it becomes enabled, the style remains grayed out.

<Window x:Class="WpfApplication3.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:tk="http://schemas.microsoft.com/wpf/2008/toolkit"
    Title="Window1" Height="300" Width="300">
    <StackPanel>
        <tk:DatePicker x:Name="txtDate" IsEnabled="False"></tk:DatePicker>
        <Button Height="25" Click="Button_Click"></Button>
    </StackPanel>
</Window>

private void Button_Click(object sender, RoutedEventArgs e)
{
    txtDate.IsEnabled = !txtDate.IsEnabled;
}

Answer 1

I solved this by explicitly setting DatePicker's visual style in IsEnabledChanged handler:

private void datePicker_IsEnabledChanged(object sender, DependencyPropertyChangedEventArgs e)
{
    DatePicker datePicker = sender as DatePicker;
    if (datePicker.IsEnabled)
        VisualStateManager.GoToState(datePicker, "Normal", true);
    else
        VisualStateManager.GoToState(datePicker, "Disabled", true);
}

Answer 2

Do you want the good news, or the bad news ?

The good news is that Microsoft says that this issue has been fixed in the Feb 2010 release of the WPFToolkit. And it has.

The bad news is that, although setting a DatePicker's IsEnabled value to "True" will enable the DatePicker, so you can now click on the Calendar button to pick a date, it will still look disabled.

"Bug" ? Did I say the word "bug" ?

Of course not.

You can get around this issue by applying a <Style> though.

Below is some simple xaml code to demonstrate.

It displays two rows, each containing a CheckBox and a DatePicker. When you click on a CheckBox in a row, it should enable the DatePicker in that row.

This shows the difference between a DatePicker without a Style (in the first row), and a DatePicker with a Style (in the second row).

Both DatePickers do get enabled/disabled correctly, but the one in the first row never looks as though it is. The DatePicker in the second row uses a Style to show the user when it's disabled.

Notice how this code sets the Background of both the DatePicker control and of the DatePickerTextBox part of it.

<Window x:Class="WPFDatePickerTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:wpf="clr-namespace:Microsoft.Windows.Controls;assembly=WPFToolkit" 
    xmlns:primitives="clr-namespace:Microsoft.Windows.Controls.Primitives;assembly=WPFToolkit"
    Title="Window1" Height="317" Width="461">
<Window.Resources>
    <Style TargetType="{x:Type primitives:DatePickerTextBox}">
        <Style.Triggers>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Background" Value="Transparent"/>
            </Trigger>
        </Style.Triggers>
    </Style>
    <Style x:Key="DatePickerStyle1" TargetType="{x:Type wpf:DatePicker}">
        <Style.Triggers>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Background" Value="{x:Static SystemColors.InactiveBorderBrush}"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<Grid>
    <StackPanel>
        <WrapPanel>
            <CheckBox Height="16" Name="cbDateOfJoining" Width="120">Date of joining</CheckBox>
            <wpf:DatePicker Height="25" 
                            Name="datePicker1" 
                            Width="140" 
                            IsEnabled="{Binding IsChecked, ElementName=cbDateOfJoining}" />
        </WrapPanel>
        <WrapPanel>
            <CheckBox Height="16" Name="cbDateOfLeaving" Width="120">Date of leaving</CheckBox>
            <wpf:DatePicker Height="25" 
                            Name="datePicker2" 
                            Width="140" 
                            IsEnabled="{Binding IsChecked, ElementName=cbDateOfLeaving}"
                            Style="{DynamicResource DatePickerStyle1}" />
        </WrapPanel>
    </StackPanel>
</Grid>
</Window>

Hope the helps !

And I hope that it's properly fixed in the next WPFtoolkit release. Users have been complaining about this issue since 2009...

Answer 3

Another way to fake the 'grayed out / disabled'-style, is by abusing the IsHitTestVisible property.

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:wpf="clr-namespace:Microsoft.Windows.Controls;assembly=WPFToolkit" 
    x:Class="CalendarTest.Window1" 
    x:Name="Window" 
    Title="MainWindow" 
    Width="640" 
    Height="480">
<StackPanel>
    <CheckBox x:Name="IsCalendarEnabled" Content="Is Calendar Enabled" />
    <wpf:DatePicker IsHitTestVisible="{Binding ElementName=IsCalendarEnabled, Path=IsChecked}">
        <wpf:DatePicker.Style>
            <Style TargetType="{x:Type wpf:DatePicker}">
                <Style.Triggers>
                    <Trigger Property="IsHitTestVisible" Value="False">
                        <Setter Property="Foreground" Value="#FFB9B9B9" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </wpf:DatePicker.Style>
    </wpf:DatePicker>
</StackPanel>
</Window>

Just another temporary workaround until 'IsEnabled'-bug is fixed. issue 7904 / issue 9641