Commands

RadSideDrawer exposes a Commands collection property that allows you to register SideDrawerCommand objects with each control's instance.

SideDrawerCommands Properties

• Id: A property of type CommandId that gets or sets the command which you want to override. This property is an enumeration and expose the following values:

  • GenerateAnimations : This command will be executed each time the control needs to update its animations. This allows you to get and modify them. The passed parameter is a type of AnimationContext and it contains the following properties:
    • MainContentStoryBoard: This is the storyboard that holds the animations for the MainContent when it opens.
    • MainContentStoryBoardReverse: This is the storyboard that holds the animations for the MainContent when it closes.
    • DrawerStoryBoard: This is the storyboard that holds the animations for the Drawer when it opens.
    • DrawerStoryBoardReverse: This is the storyboard that holds the animations for the Drawer when it closes.

  DrawerStateChanged : This command will be executed when the drawer change its state. KeyDown: This command will be executed when the Space or Enter key is pressed.

  For the KeyDown command to be executed, the drawer opening button needs to be focused first.

Example 1 demonstrates how we can create custom command to change the opacity of the main content when the drawer is open.

Example 1: Create Custom Command

public class CustomCommand : SideDrawerCommand 
{ 
    public CustomCommand() 
    { 
        this.Id = CommandId.GenerateAnimations; 
    } 
    public override bool CanExecute(object parameter) 
    { 
        return true; 
    } 
 
    public override void Execute(object parameter) 
    { 
        var context = parameter as AnimationContext; 
        foreach (var item in context.MainContentStoryBoard.Children) 
        { 
            if(Storyboard.GetTargetProperty(item).Equals("Opacity")) 
            { 
                (item as DoubleAnimation).To = 0; 
            } 
        } 
        this.Owner.CommandService.ExecuteDefaultCommand(CommandId.GenerateAnimations, context); 
    } 
} 

Next step is to add the custom command to the Commands collection of the control.

Example 2: Adding Custom Command

<telerik:RadSideDrawer> 
    <telerik:RadSideDrawer.Commands> 
        <local:CustomCommand /> 
    </telerik:RadSideDrawer.Commands> 
</telerik:RadSideDrawer> 

When you run the application, you can observe how the main content disappears when the drawer is opened.