Callout closes when using hosted scrollbar

[Philipp]

Hello,

I'm using the Callout control and host a ListBox as content. Basically works as expected. It is possible to select an item in the list and scroll the list with mouse wheel.

Problem is using the scrollbar of the hosted ListBox. When it is used in any way (click, press and move mouse to scroll) the Callout closes. The expected behavior would be that I can scroll the list using the scrollbar and select an item. Callout should stay open till closed by code or focus lost (e.g. click somewhere outside Callout control).

Attached is a small example that shows that behavior.

 

I tried already to disable autoclose and control (dis)appearance manually. With that approach I have the problem that I don't know how I get informed when there was a click outside Callout control (to close it manually), hence it stays open.

 

Thanks and Regards

Philipp

[Stenly]

Hello Philipp,

What comes to my mind in this scenario would be to utilize the PopupClosing event and set the e.Cancel property to true of the arguments of the added event handler. To check if a click is performed inside or outside of the RadCallout, you could utilize the Mouse.DirectlyOver element and check if the returned element has a parent of the type RadCallout. For this, the ParentOfType extension method could be used. If it has such a parent, set the e.Cancel property to true.

The following code snippets show this suggestion's implementation, using the code from the project that you have provided:

private void RadButton_Click(object sender, RoutedEventArgs e)
{
    RadCallout callout = TryFindResource("Callout") as RadCallout;
    callout.Height = 80;

    CalloutPopupSettings settings = new CalloutPopupSettings()
    {
        Placement = System.Windows.Controls.Primitives.PlacementMode.Top,
    };

    CalloutPopupService.AddPopupClosingHandler(sender as FrameworkElement, OnPopupClosing);

    CalloutPopupService.Show(callout, sender as FrameworkElement, settings);
}

private void OnPopupClosing(object sender, CancelRoutedEventArgs e)
{
    FrameworkElement frameworkElement = Mouse.DirectlyOver as FrameworkElement;

    if (frameworkElement != null)
    {
        RadCallout parentCallout = frameworkElement.ParentOfType<RadCallout>();

        if (parentCallout != null)
        {
            e.Cancel = true;
        }
    }
}

Could you give this suggestion a try?

Regards,
Stenly
Progress Telerik

[Philipp]

Hi Stenly,

thanks for your Help. I adapted your solution to my real use case and it is functionaly working. Thanks

I noticed only one small visual point. Maybe you also have a solution for that.

When I use the scrollbar and then click somewhere outside the callout disapears, but without close animation. Any idea if it's possible to trigger also in this case the animation?

[Stenly]

Hello Phillip,

To prevent this from occurring, you could set the CloseAnimationType property of the CalloutPopupSettings to the desired type.

CalloutPopupSettings settings = new CalloutPopupSettings()
{
    Placement = System.Windows.Controls.Primitives.PlacementMode.Top,
    CloseAnimationType = CalloutAnimation.Move
};

The possible options are exposed by the CalloutAnimation enumeration and are as follows:

• None
• Fade
• Move
• FadeAndMove
• Reveal
• FadeAndReveal
• Scale
• FadeAndScale

The following gif shows the result when a type is set to the aforementioned property:

Could you try adding this suggestion on your side?

 

 

[Philipp]

Hi Stenly,

general definition of animation is clear.

"Normal" usage is working fine
- Click button to close (like in image above)
- Just click outside (like second step in image above)
- also in combination with selecting an element

What causes the described behavior is the usage of scrollbar (that also causes the original issue)

1: Click on Button to show callout
2: Scroll the list (no selection of an element, just use the scrollbar)
3: Click outside controls
3b: Alternative click on Button again (instead of outside controls), this causes then to open the callout again instead of closing it

Thanks for your support

Philipp

 

[Stenly]

Hello Philipp,

I have further examined the suggestion from my initial reply, in order to cover this scenario as well. However, I was not able to find a suitable solution, which will prevent the RadCallout from closing when clicking the ScrollBar thumb, as well as display the closing animation.

As a result of this, I have logged a new bug report in our feedback portal, which can be found at the following link:

Callout: Callout closes when a scrollbar inside its content is clicked (telerik.com)

As a token of gratitude for bringing this to our attention, I have updated your Telerik points.

I hope the provided information will be of help to you.

[Philipp]

Hello Stenly,

thanks for feedback.

At the moment your solution is fine for me. Main focus is on functionality. When the animation point will be fixed with an later update of framework it would be even better ;)

Thanks again for your support

Regards