Commands

Updated on Mar 26, 2026

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

C#

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

XAML

<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.