Overview
The SideDrawer control exposes a Commands
collection that allows you to
register custom commands with each control’s instance. The commands allow the user to easily change and extend the control default behavior.
Each element in the Commands
collection inherits from the SideDrawerCommandBase
class, and can override the CanExecute()
and Execute()
methods. Each command is associated with a certain event, which is represented by the command Id
property. The property needs to be set to one of the values listed below, otherwise the command service of the control will not execute the command.
-
Opening
—Executed when the side drawer is being visualized on the device screen. -
Opened
—Executed when the side drawer is already visualized on the device screen. -
Closing
—Executed when the side drawer is being hidden. -
Closed
—Executed when the side drawer is already closed.
For your convenience we have created a special SideDrawerUserCommand
class that also exposes a Command
dependency property which can be set to an instance of type that implements the ICommand
interface.
Examples
The following examples demonstrates how to use the SideDrawer commands in different scenarios.
Inheriting from the SideDrawerCommandBase class
-
Create a class which inherits from
SideDrawerCommandBase
class and set theId
property to the desired command trigger event. In addition, you can override itsCanExecute()
andExecute()
methods. A sample implementation is shown below:public class CustomDrawerCommand : SideDrawerCommandBase { public CustomDrawerCommand() { this.Id = SideDrawerCommandId.Closed; } public override bool CanExecute(object parameter) { return true; } public override void Execute(object parameter) { // implement your custom logic here } }
-
When you create the command, define the SideDrawer and the command in XAML:
<telerik:RadSideDrawer> <telerik:RadSideDrawer.Commands> <local:CustomDrawerCommand/> </telerik:RadSideDrawer.Commands> <telerik:RadSideDrawer.MainContent> <Label Text="Main content" /> </telerik:RadSideDrawer.MainContent> <telerik:RadSideDrawer.DrawerContent> <Label Text="Drawer content" /> </telerik:RadSideDrawer.DrawerContent> </telerik:RadSideDrawer>
-
Add the following namespaces
xmlns:telerik="clr-namespace:Telerik.Maui.Controls;assembly=Telerik.Maui.Controls" xmlns:local="the namespace where the custom command is defined"
Where the
local
alias points to the namespace where theCustomUserCommand
is defined.
Using the SideDrawerUserCommand class
-
Define a class that implements the
ICommand
interface:1. Use this class with thepublic event EventHandler CanExecuteChanged;
public bool CanExecute(object parameter) { return true; }
public void Execute(object parameter) { // implement some logic here }
SideDrawerUserCommand
in XAML like this:1. Add the following namespaces:<telerik:RadSideDrawer DrawerLength="200"> <telerik:RadSideDrawer.Commands> <telerik:SideDrawerUserCommand Id="Opening"> <telerik:SideDrawerUserCommand.Command> <local:CustomCommand/> </telerik:SideDrawerUserCommand.Command> </telerik:SideDrawerUserCommand> </telerik:RadSideDrawer.Commands> <telerik:RadSideDrawer.MainContent> <Label Text="Main content" /> </telerik:RadSideDrawer.MainContent> <telerik:RadSideDrawer.DrawerContent> <StackLayout> <Button Text="Mail" /> <Button Text="Calendar" /> <Button Text="People" /> <Button Text="Tasks" /> </StackLayout> </telerik:RadSideDrawer.DrawerContent> </telerik:RadSideDrawer>
xmlns:telerik="clr-namespace:Telerik.Maui.Controls;assembly=Telerik.Maui.Controls" xmlns:local="the namespace where the custom command is defined"
Binding to a ViewModel
Use the
SideDrawerUserCommand
to bind itsCommand
property to a view model.-
Define the ViewModel:
public class CommandsViewModel { public CommandsViewModel() { this.Command = new CustomCommand(); } public ICommand Command { get; set; } }
-
Define the CustomCommand:
1. Define the SideDrawer control:public event EventHandler CanExecuteChanged;
public bool CanExecute(object parameter) { return true; }
public void Execute(object parameter) { // implement some logic here }
1. Add the following namespace:<telerik:RadSideDrawer x:Name="drawer" DrawerLength="200"> <telerik:RadSideDrawer.BindingContext> <local:CommandsViewModel/> </telerik:RadSideDrawer.BindingContext> <telerik:RadSideDrawer.Commands> <telerik:SideDrawerUserCommand Command="{Binding Command}" Id="Opening"/> </telerik:RadSideDrawer.Commands> <telerik:RadSideDrawer.MainContent> <Label Text="Main content" /> </telerik:RadSideDrawer.MainContent> <telerik:RadSideDrawer.DrawerContent> <StackLayout> <Button Text="Mail" /> <Button Text="Calendar" /> <Button Text="People" /> <Button Text="Tasks" /> </StackLayout> </telerik:RadSideDrawer.DrawerContent> </telerik:RadSideDrawer>
and thexmlns:telerik="clr-namespace:Telerik.Maui.Controls;assembly=Telerik.Maui.Controls"
local
alias points to the namespace where theCustomCommand
andViewModel
are defined.See Also
-