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;
}

Stroll

Did you find a solution to this problem ? – Toluate

This is not fixed in the February 2010 release WPF Toolkit. I have that release and it functions exactly as he described. The control will not enable at runtime when disabled in XAML. – Akkerman

Nope, all I can say is that it happens on my desktop, but not my laptop, I noticed this the other day so it's not on all machines. – Stroll

I can confirm that I'm able to reproduce this problem as well. I haven't tested the DatePicker released in .NET 4.0 though, I'm assuming that one won't have this issue although it might. – Haggard

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);
}

Cordie

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...

Efficient

Is doesn't work in this situation: When DatePicker IsEnabled property is bound to a CheckBox.IsChecked for example, then if you put the CheckBox XAML code before DatePicker, DatePicker will stay gray for ever. If you put DatePicker before CheckBox then you dont have any problem and your solution works. It drives me crazy to find out when it occured. – Perla

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

Hammack

Answer 4

Did anyone ever get an answer to this? I am having the same issue with the Feb 2009 release.

Try this.
1/ Use a tab control and put a datepicker on the first tab and one on the second. 2/ Add a button and in the on click event set the IsEnabled property of both datepicker controls to the inverse value (so if it was Enabled, make it disabled and vice versa).

On the first tab, the datepicker will be fine. On the second, it will appear disabled but you can still open the calendar and change the date.

Kasandrakasevich

How about posting a user control that abstracts it for us? – Stroll

Answer 5

this issue has been solved in the new WPFToolkit

Leptospirosis

we are using jun 2009 release. – Leptospirosis

Well this is in the latests toolkit which dates Feb 2010 – Stroll

From my tests also in Feb 2010 release the problem remains :( wpf.codeplex.com/discussions/209288 – Counterclockwise