# 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**

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