Tooltip on button click while button is disabled

Question

Have a navigation command which needs to display a tooltip on click, while disabled, so that the user knows why it's disabled. The problem I'm having is I have no idea how to pass the TouchDown event from my xaml file to my viewmodel. Is there some way to bind this rather than creating an event in the command.xaml.cs?

Command is structured as follows. I have a single CommandButton.xaml and CommandButton.xaml.cs while everything to set up the button is handled by the VM (text, image, command executed etc) code as an example below.

<Button Focusable="True" Name="Btn1" Command="{Binding CommandToExecute}" Tag="{Binding Text}" Foreground="{x:Null}" Style="{DynamicResource ButtonStyle}" ToolTipService.ShowOnDisabled="true" TouchDown="Btn1_OnTouchDown" >
    <Button.ToolTip>
        <StackPanel>
            <TextBlock>Test</TextBlock>
            <TextBlock>Load stencil, or not your choice.</TextBlock>
        </StackPanel>
    </Button.ToolTip>
    <shellModule:AutoGreyableImage  Source="{Binding Image}" />
</Button>

As for the code behind, I have that split with the majority of the handler stuff in a base command class as follows.

public abstract class BaseCommand : BindableBase
{
    protected IModuleManager ModuleManager { get; set; }

    protected IRegionManager RegionManager { get; set; }

    protected BaseCommand(IRegionManager regionManager, IModuleManager moduleManager, string pageName = null)
    {
        RegionManager = regionManager;
        ModuleManager = moduleManager;
        Text = GetButtonText(pageName + "_BtnTxt");
        Image = (ImageSource)Application.Current.FindResource(pageName + "_BtnImg");
    }

    private string _text;

    private ImageSource _image;

    public ICommand CommandToExecute => new DelegateCommand<object>(Command, Evaluate);

    protected abstract void Command(object obj);

    protected virtual bool Evaluate(object obj)
    {
        return false;
    }

    public string Text
    {
        get { return _text; }
        set { SetProperty(ref _text, value); }
    }

    public ImageSource Image
    {
        get { return _image; }
        set { SetProperty(ref _image, value); }
    }

    protected string GetButtonText(string key)
    {
        string uiString;
        var locExtension = new LocTextExtension
        {
            Key = "Resources",
            ResourceIdentifierKey = key
        };
        locExtension.ResolveLocalizedValue(out uiString);
        return uiString;
    }
}

and then the command specific stuff in the viewmodel.

public class Page1CommandViewModel : BaseCommand, IPage1CommandViewModel
{
    public Page1CommandViewModel(IRegionManager regionManager, IModuleManager moduleManager) : base( regionManager, moduleManager, PageNames.Page1 )
    {
    }

    protected override void Command(object obj)
    {
        Task.Run(() =>
        {
            ModuleManager.LoadModule(ModuleNames.Page1Module);
            RegionManager.RequestNavigate(RegionNames.ContentRegion, new Uri(PageNames.Page1, UriKind.Relative));
        });
    }
}

If anyone could point me in the right direction it'd be greatly appreciated.

Answer 1

Maybe instead of disabling the button, re-point the button to a different method, which would then display your error/tooltip message. (You could then pass in the string stating the reason for the inactivity in your method paramaters/variables.)

I would also advise you change the class/visual properties of the button so that it looks disabled.

Answer 2

After much googling, I've come up with a solution myself, thanks in part to comments others had made leading me in the right direction. Wrapped up my button in a contentControl, and instead have applied the tooltip to this.

<ContentControl MouseDown="ContentControl_MouseDown">
    <ContentControl.ToolTip>
        <ToolTip Placement="Mouse" Content="Testing" />
    </ContentControl.ToolTip>
    <Button Focusable="True" x:Name="Btn1" Command="{Binding CommandToExecute}" Tag="{Binding Text}" Foreground="{x:Null}" Style="{DynamicResource ButtonStyle}" ToolTipService.ShowOnDisabled="true">
        <shellModule:AutoGreyableImage  Source="{Binding Image}" />
    </Button>
</ContentControl>

And on the button.xaml.cs put in events to handle timings of the button click etc.

    Timer Timer { get; set; }
    ToolTip toolTip { get; set; }

    public CommandButton()
    {
        InitializeComponent();
        Timer = new Timer {Interval = 3000};
        Timer.Elapsed += OnTimerElapsed;
    }

    private void CloseToolTip()
    {
        if (toolTip != null)
        {
            toolTip.IsOpen = false;
        }
    }

    private void OnTimerElapsed(object sender, ElapsedEventArgs e)
    {
        Timer.Stop();
        Application.Current.Dispatcher.BeginInvoke((Action)CloseToolTip, DispatcherPriority.Send);
    }

    private void ContentControl_MouseDown(object sender, MouseButtonEventArgs e)
    {
        toolTip = ((ToolTip)((Control)sender).ToolTip);
        toolTip.IsOpen = true;
        Timer.Start();
    }

timers taken from the following location.

https://social.msdn.microsoft.com/Forums/vstudio/en-US/9e3eb4ab-ed0f-40ad-ad47-a1fff8e0fe8d/tooltips-in-wpf-touch-applications?forum=wpf

This allows the button to be disabled, and the tooltip to still display on click. All I need to do now is wrap up the tooltip contents in a binding and disable the tooltip on hover (not required) and it's all solved.

Leaving question open for the time being however, as a better solution may present itself.