.NET MAUI SideDrawer Commands

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

1. Create a class which inherits from SideDrawerCommandBase class and set the Id property to the desired command trigger event. In addition, you can override its CanExecute() and Execute() methods. A sample implementation:

• C#

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
}

2. When you create the command, define the RadSideDrawer and the command in XAML:

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

3. Add the following namespaces

• XAML

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 the CustomUserCommand is defined.

Using the SideDrawerUserCommand class

1. Define a class that implements the ICommand interface:

• C#

public class CustomCommand : ICommand
{
    public event EventHandler CanExecuteChanged;

    public bool CanExecute(object parameter)
    {
        return true;
    }

    public void Execute(object parameter)
    {
        // implement some logic here
    }
}

2. Use this class with the SideDrawerUserCommand in XAML like this:

• XAML

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

3. Add the following namespaces:

• XAML

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" 
xmlns:local="the namespace where the custom command is defined"

Binding to a ViewModel

Use the SideDrawerUserCommand to bind its Command property to a view model.

1. Define the ViewModel:

• C#

public class CommandsViewModel : NotifyPropertyChangedBase
{
    private bool isDrawerOpen;

    public CommandsViewModel()
    {
        this.ChangeIsOpenCommand = new Command(this.OnChangeIsOpenExecute);
        this.CustomOpenedCommand = new CustomOpenedCommand();
        this.CustomOpeningCommand = new CustomOpeningCommand();
        this.CustomClosedCommand = new CustomClosedCommand();
        this.CustomClosingCommand = new CustomClosingCommand();
        this.InvokedCommands = new ObservableCollection<string>();
    }

    public bool IsDrawerOpen
    {
        get
        {
            return this.isDrawerOpen;
        }
        set
        {
            this.UpdateValue(ref this.isDrawerOpen, value);
        }
    }

    public ICommand ChangeIsOpenCommand { get; set; }

    public ICommand CustomOpenedCommand { get; set; }

    public ICommand CustomOpeningCommand { get; set; }

    public ICommand CustomClosedCommand { get; set; }

    public ICommand CustomClosingCommand { get; set; }

    public ObservableCollection<string> InvokedCommands { get; set; }

    private void OnChangeIsOpenExecute()
    {
        this.IsDrawerOpen = !this.IsDrawerOpen;
    }
}

2. Define the Custom Command:

• C#

public class CustomCommand : ICommand
{
    public event EventHandler CanExecuteChanged;

    public bool CanExecute(object parameter)
    {
        return true;
    }

    public void Execute(object parameter)
    {
        // implement some logic here
    }
}

3. Define the SideDrawer control:

• XAML

<HorizontalStackLayout>
    <VerticalStackLayout>
        <ImageButton Source="hamburgermenu.png"
                     BorderWidth="0" 
                     BackgroundColor="Transparent"
                     Command="{Binding ChangeIsOpenCommand}"/>
    </VerticalStackLayout>
</HorizontalStackLayout>
<telerik:RadSideDrawer x:Name="drawer"
                       Grid.Row="1"
                       DrawerLength="200"
                       IsOpen="{Binding IsDrawerOpen}">
    <telerik:RadSideDrawer.Commands>
        <telerik:SideDrawerUserCommand Command="{Binding CustomOpenedCommand}" Id="Opened"/>
        <telerik:SideDrawerUserCommand Command="{Binding CustomOpeningCommand}" Id="Opening"/>
        <telerik:SideDrawerUserCommand Command="{Binding CustomClosedCommand}" Id="Closed"/>
        <telerik:SideDrawerUserCommand Command="{Binding CustomClosingCommand}" Id="Closing"/>
    </telerik:RadSideDrawer.Commands>
    <telerik:RadSideDrawer.MainContent>
        <Grid RowDefinitions="Auto, Auto, *">
            <Label Grid.Row="1" 
                   Text="Invoked commands:" />
            <telerik:RadCollectionView Grid.Row="2"
                                       ItemsSource="{Binding InvokedCommands}" />
        </Grid>
    </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>

4. Add the following namespace:

• XAML

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" 

and the local alias points to the namespace where the CustomCommand and ViewModel are defined.