Bind CanExecute of ICommand to Foreground Color of FontIcon

Question

Problem

I have an Button whose command is ToggleMode, Inside this button is a FontIcon and a TextBlock.

In Styles.xaml I set the foreground color of a Button to white when the Button is enabled and to a light gray if the button is disabled. This leads to the Textblocks foreground color correctly changing when the Button is disabled because the ToggleMode.CanExecute() returns false. However the FontIcons normal color is a light blue, which I set using the Foreground property. When the Button is disabled the color should be changed to a pale blue improving the impression of the button being disabled.

Code example

Boolean converter

Button

What I tried

I tried using the generic BooleanConverter given here: How do I invert BooleanToVisibilityConverter? Setting a SolidColorBrush with the light blue color as True Value and the pale blue as the False Value and Binding the Foreground property of my FontIcon to the command but this does not work.

After that I tried to subscribe to the CanExecuteChanged Event of the Command, saving the new value in a private field and binding to that but this does not work as well because at the time of initializing my view this command is still null.

My next guess would be to subscribe to the property changed event of the command when this is fired the command should'nt be null anymore and I should be able to subscribe to the Event but this seems like a lot boiler code especially if I have various commands I need to do this to.

How can I achieve this easier?

Edit1 How I tried to bind the command to theFontIcon

What worked for me

Following the anser by @AndrewKeepCoding I found out that just binding to the IsEnabled property of the button instead of binding to the command itself:

Andrew KeepCoding · Accepted Answer

Let me show you another way to achieve this using a ValueConverter.

BooleanToBrushConverter.cs

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Data;
using Microsoft.UI.Xaml.Media;
using System;

namespace FontIconExample;

public class BooleanToBrushConverter : DependencyObject, IValueConverter
{
    public static readonly DependencyProperty TrueBrushProperty =
        DependencyProperty.Register(
            nameof(TrueBrush),
            typeof(Brush),
            typeof(BooleanToBrushConverter),
            new PropertyMetadata(default));

    public static readonly DependencyProperty FalseBrushProperty =
        DependencyProperty.Register(
            nameof(FalseBrush),
            typeof(Brush),
            typeof(BooleanToBrushConverter),
            new PropertyMetadata(default));

    public Brush TrueBrush
    {
        get => (Brush)GetValue(TrueBrushProperty);
        set => SetValue(TrueBrushProperty, value);
    }

    public Brush FalseBrush
    {
        get => (Brush)GetValue(FalseBrushProperty);
        set => SetValue(FalseBrushProperty, value);
    }

    public object Convert(object value, Type targetType, object parameter, string language)
    {
        return (bool)value is true
            ? TrueBrush
            : FalseBrush;
    }

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

MainPageViewModel.cs

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

namespace FontIconExample;

public partial class ViewModel : ObservableObject
{
    [RelayCommand(CanExecute = nameof(CanToggleMode))]
    private void ToggleMode()
    {
        CanToggleMode = false;
    }

    [ObservableProperty]
    [NotifyCanExecuteChangedFor(nameof(ToggleModeCommand))]
    private bool canToggleMode = true;
}

MainPage.xaml