Silverlight DescriptionViewer prevent Tooltip to disappear on click

Question

The Silverlight 4 DescriptionViewer Control displays a Description in a Tooltip:

The syntax is pretty easy: Add Namespace xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input" and the following XAML to your UserControl:

<dataInput:DescriptionViewer Description="Some hints on user input etc." />

Unfortunately, some users click on the displayed Icon (since it even hovers by default) which instantly closes the Tooltip (the actual and only information). Even worse, when you click very quickly after hovering, the Tooltip even won't appear at all, so the user might think the Icon has no function at all.

I'd like to prevent closing the Tooltip on Click (just close on "mouse out"), even better clicking should force the Tooltip to show immediately (skipping the usual timeout before shown).

It seems to be harder then I though, since there is no OnClick event and also MouseLeftButtonDown seems to not fire at all. I also tried to override the DescriptionViewer Control but also no luck finding the appropriate methods to override.

Can you help? Thank you!

Answer 1

this actually has nothing to do with the DescriptionViewer, it is the behavior of the ToolTip. The ToolTip will disappear once you do a mouse click. In this case you might want to write you own ToolTip.

I think normally when you click on the DescriptionViewer icon, there should be a new window open which is like a more detailed help page. So the user wouldn't get confused.

Update:

You can achieve this by defining an attached property. Basically, you attach this property to the Button inside your DescriptionViewer. When the Button's Click event is fired, you find the Tooltip underneath the Button and set its IsOpen to ture. Then you also need to handle the MouseLeave event to hide the Tooltip once your mouse's away.

This is how the attached property is defined.

public static class ButtonAttachedProperties { public static bool GetOpenToolTip(DependencyObject obj) { return (bool)obj.GetValue(OpenToolTipProperty); }

public static void SetOpenToolTip(DependencyObject obj, bool value)
{
    obj.SetValue(OpenToolTipProperty, value);
}

public static readonly DependencyProperty OpenToolTipProperty =
    DependencyProperty.RegisterAttached("OpenToolTip", typeof(bool), typeof(ButtonAttachedProperties), new PropertyMetadata(false, Callback));


private static void Callback(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    var button = d as Button;

    if (button == null || !(bool)e.NewValue) return;

    button.Click += (s, e1) =>
    {
        var tooltip = button.FindName("MyToolTip") as ToolTip;

        if (tooltip != null)
        {
            tooltip.PlacementTarget = button;
            tooltip.IsOpen = true;      
        }
    };

    button.MouseLeave += (s, e2) =>
    {
        var tooltip = button.FindName("MyToolTip") as ToolTip;

        if (tooltip != null)
            tooltip.IsOpen = false;
    };
}

}

Then in the DescriptionViewer's style, you attach the property to the Button. Also you need to name the Tooltip in order to be able to find it using FindName in the attach property class.

                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Height="{TemplateBinding Height}" Padding="{TemplateBinding Padding}" Width="{TemplateBinding Width}">
                            <Button x:Name="DescriptionContent" local:ButtonAttachedProperties.OpenToolTip="True" BorderBrush="#FFFFFFFF" BorderThickness="1" Background="#00000000" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="False" Padding="1" Template="{TemplateBinding GlyphTemplate}" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                <ToolTipService.ToolTip>
                                    <ToolTip x:Name="MyToolTip" Content="{TemplateBinding Description}" PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Style="{TemplateBinding ToolTipStyle}"/>
                                </ToolTipService.ToolTip>
                            </Button>
                        </Border>

Hope this helps. :)