FlyoutBehavior

The flyout behavior controls how and when the flyout of the auto hide area is opened and closed. RadDocking comes with two implementations of the IFlyoutBehavior - ClickFlyoutBehavior and HoverFlyoutBehavior.

HoverFlyoutBehavior

This is the default behavior. It opens the flyout on hover (mouse over) or activation of a pane inside the auto hide area. The flyout closes when the mouse leaves it.

RadDocking with HoverFlyoutBehavior.

ClickFlyoutBehavior

It opens the flyout on click or activation of a pane inside the auto hide area. The flyout closes on second click on the pane or when the pane gets deactived.

RadDocking with ClickFlyoutBehavior.

Setting Flyout Behavior

To set or get the current flyout behavior use the FlyoutBehavior property of RadDocking.

Example 1: Setting flyout behavior

<telerik:RadDocking.FlyoutBehavior> 
    <telerik:ClickFlyoutBehavior/> 
</telerik:RadDocking.FlyoutBehavior> 

Custom Flyout Behavior

To create a custom flyout behavior, implement the IFlyoutBehavior interface. The interface requires the following methods to be implemented:

  • OnClosingTimerTimeout: Called when the time of the close timer is up. Commonly the close animation is started here. The close timer is started by calling the StartCloseTimer method of the IFlyoutHost.

  • OnMouseEnter: Called when the mouse enters a RadPane.

  • OnMouseLeave: Called when the mouse leaves a RadPane.

  • OnOpeningTimerTimeout: Called when the time of the open timer is up. Commonly the open animation is started here. The open timer is started by calling the StartOpenTimer method of the IFlyoutHost.

  • OnPaneActivated: Called when a RadPane is being activated.

  • OnPaneDeactivated: Called when a RadPane is being deactivated.

  • OnPaneMouseLeftButtonDown: This method is called when a pane receives the MouseLeftButtonDown event (i.e. when the user clicks it).

The following example shows how to implement a custom behavior that opens the flyout on click and animates the opening and closing.

Example 2: Custom flyout behavior

public class AnimatedFlyoutBehavior : IFlyoutBehavior 
{ 
    void IFlyoutBehavior.OnPaneActivated(IFlyoutHost host, RadPane targetPane) 
    { 
        host.SetSelectedPane(targetPane); 
        if (host.CurrentState == FlyoutState.Closed) 
        { 
            host.StartOpenAnimation(); 
        } 
    } 
 
    void IFlyoutBehavior.OnPaneDeactivated(IFlyoutHost host, RadPane targetPane) 
    { 
        var selectedPane = host.SelectedPane; 
        if (selectedPane != null && !selectedPane.IsActive && host.CurrentState == FlyoutState.Opened) 
        { 
            host.StartCloseAnimation(); 
        } 
    } 
 
    void IFlyoutBehavior.OnPaneMouseLeftButtonDown(IFlyoutHost host, RadPane targetPane) 
    { 
        if (host.CurrentState != FlyoutState.Opened) 
        { 
            host.StartOpenAnimation(); 
        } 
        else 
        { 
            host.StartCloseAnimation(); 
        } 
    } 
 
    void IFlyoutBehavior.OnMouseEnter(IFlyoutHost host, RadPane targetPane) 
    { 
    } 
 
    void IFlyoutBehavior.OnMouseLeave(IFlyoutHost host) 
    { 
    } 
 
    void IFlyoutBehavior.OnOpeningTimerTimeout(IFlyoutHost host) 
    { 
    } 
 
    void IFlyoutBehavior.OnClosingTimerTimeout(IFlyoutHost host) 
    { 
    } 
} 

Example 3: Setting the custom flyout behavior

<telerik:RadDocking.FlyoutBehavior> 
    <local:AnimatedFlyoutBehavior/> 
</telerik:RadDocking.FlyoutBehavior> 

A runnable project with this example can be found in the ClickFlyoutBehaviorWithAnimation SDK example.

In this article
Not finding the help you need? Improve this article