This example demonstrates how to implement context menu actions for CollectionView items. To create a context menu, we used the DXPopup Control that contains Buttons. These buttons can invoke different actions.

Included controls and their properties:

• DXPopup: Placement, IsOpen

• DXButton: Content, Command, Icon, IconColor

• To open or close DXPopup, use the DXPopup.IsOpen property:

  <dxco:DXPopup x:Name="actionsPopup" ...>
      <dx:DXStackLayout ...>
          <dx:DXButton .../>
          <dx:DXButton .../>
      </dx:DXStackLayout>
  </dxco:DXPopup>

  File to review: MainPage.xaml

  public class MainViewModel : BindableBase {
      bool isOpenPopup;
      public bool IsOpenPopup {
          get => this.isOpenPopup;
          set {
              isOpenPopup = value;
              RaisePropertyChanged();
          }
      }
  }

  File to review: MainViewModel.cs

  public partial class MainPage : ContentPage {
      void ContactActionsClick(object sender, EventArgs e) {
          // ...
          actionsPopup.IsOpen = !actionsPopup.IsOpen;
      }
      private void PopupItemClick(object sender, EventArgs e) {
          actionsPopup.IsOpen = false;
      }
  }

  File to review: MainPage.xaml.cs

• Use the DXPopup.PlacementTarget property to define the popup alignment in relation to its parent element:

  <dxco:DXPopup x:Name="actionsPopup" ...>
      <!--...-->
  </dxco:DXPopup>

  File to review: MainPage.xaml

  public partial class MainPage : ContentPage {
      void ContactActionsClick(object sender, EventArgs e) {
          actionsPopup.PlacementTarget = (View)sender;
          // ...
      }
  }

  File to review: MainPage.xaml.cs

• Use the DXButton.Command property to define a button click command:

  <dxco:DXPopup x:Name="actionsPopup" ...>
      <dx:DXStackLayout>
          <dx:DXButton Command="{Binding PopupActionCommand}" .../>
          <dx:DXButton Command="{Binding PopupActionCommand}" .../>
      </dx:DXStackLayout>
  </dxco:DXPopup>

  File to review: MainPage.xaml

  public class MainViewModel : BindableBase {
      bool isOpenPopup;
  
      public bool IsOpenPopup {
          get => this.isOpenPopup;
          set {
              isOpenPopup = value;
              RaisePropertyChanged();
          }
      }
  
      public ICommand PopupActionCommand {
          get;
          set;
      }
  
      public MainViewModel() {
          PopupActionCommand = new Command<string>(PopupAction);
          // ...
      }
      public async void PopupAction(string parameter) {
          await Application.Current.MainPage.DisplayAlert("Popup Item Click", parameter, "OK");
      }
  }

  File to review: MainViewModel.cs

• You can use the DXButton.IconColor property to change the color of the button icon:

   <ContentPage.Resources>
      <Style TargetType="dx:DXButton" x:Key="popupButtonStyle">
          <Setter Property="IconColor" Value="{StaticResource Gray500}"/>
          <!-- ... -->
      </Style>
  </ContentPage.Resources>
  
  <dxco:DXPopup ...>
      <dx:DXStackLayout>
          <dx:DXButton Style="{StaticResource popupButtonStyle}" .../>
          <dx:DXButton Style="{StaticResource popupButtonStyle}" .../>
      <dx:DXStackLayout>
  </dxco:DXPopup>

  File to review: MainPage.xaml

  public partial class MainPage : ContentPage {
      void ContactActionsClick(object sender, EventArgs e) {
          // ...
          actionsPopup.IsOpen = !actionsPopup.IsOpen;
      }
      private void PopupItemClick(object sender, EventArgs e) {
          actionsPopup.IsOpen = false;
      }
  }

  File to review: MainPage.xaml.cs

• MainPage.xaml
• MainPage.xaml.cs
• MainViewModel.cs
• App.xaml

• Featured Scenario: Context Menu Actions in Popup
• Featured Scenarios
• DXButton
• DXPopup

• DevExpress Mobile UI for .NET MAUI