Search code examples
c#datepickerwinrt-xamldisabled-inputwinrt-component

How can I give WinRT XAML controls a disabled appearance?


I have a flyout which contains DatePicker controls and associated TextBlocks allowing the user to select date range criteria. I also have a "Use All Dates" ToggleSwitch. If that has been set to "On," I want to disable the date range controls, or at least give them the appearane of being disabled.

I tried it this way:

private void tglswtchAllDates_Toggled(object sender, RoutedEventArgs args)
{
    Color enabledColor = Colors.Black;
    Color disabledColor = Colors.Gray;

    txtblckDateFrom.Foreground = enabledColor;
    txtblckDateTo.Foreground = enabledColor;
    txtblckInclusive.Foreground = enabledColor;

    bool allDates = tglswtchAllDates.IsOn;

    datePickerFrom.Enabled = !allDates;
    datePickerTo.Enabled = !allDates;

    if (allDates)
    {
        txtblckDateFrom.Foreground = disabledColor;
        txtblckDateTo.Foreground = disabledColor;
        txtblckInclusive.Foreground = disabledColor;
    }
}

...but I get all kinds of compile errors with this, such as, "Cannot convert type 'Windows.UI.Color' to 'Windows.UI.Xaml.Media.Brush'" " and "Cannot implicitly convert type 'Windows.UI.Color' to 'Windows.UI.Xaml.Media.Brush'" and "'Windows.UI.Xaml.Controls.DatePicker' does not contain a definition for 'Enabled' and no extension method 'Enabled' accepting a first argument of type 'Windows.UI.Xaml.Controls.DatePicker' could be found (are you missing a using directive or an assembly reference?)"

So what is a tried and true -- or at least theoretically reasonable -- way of accomplishing this?

UPDATE

With Filip's help, I:

private void tglswtchAllDates_Toggled(object sender, RoutedEventArgs args)
{
    bool allDates = tglswtchAllDates.IsOn;

    datePickerFrom.IsEnabled = !allDates;
    datePickerTo.IsEnabled = !allDates;

    if (allDates)
    {
        txtblckDateFrom.Opacity = 0.5;
        txtblckDateTo.Opacity = 0.5;
        txtblckInclusive.Opacity = 0.5;
    }
    else
    {
        txtblckDateFrom.Opacity = 1.0;
        txtblckDateTo.Opacity = 1.0;
        txtblckInclusive.Opacity = 1.0;
    }
}

Solution

  • The best way to do it is to simply set IsEnabled property on a control. It will update the visual states appropriately. If you have some good visual sense and want to try to design "better disabled state look" - you can modify the control template and change the visual state for the disabled state to use a different color.