Rock Mobile Docs
App Factory
  • Welcome 👋
  • 📱Getting Started
    • Building Your First App
      • Creating An App
      • App Configuration
      • Adding Content
      • Deploying Your App
    • Lexicon
  • 🧱Essentials
    • Animations
    • Blocks
      • CMS
        • Content
        • Content Channel Item View
        • Content Collection View
        • Daily Challenge Entry
        • Hero
        • Lava Item List
        • Login
          • Using Auth0
          • Using Entra
        • Profile Details
        • Register
        • Structured Content View
        • Workflow Entry
      • Check-in
        • Check-in
      • Communication
        • Communication Entry
        • Communication List Subscribe
        • Communication View
        • SMS Conversation List
        • SMS Conversation
      • Connection
        • Add Connection Request
        • Connection Type List
        • Connection Opportunity List
        • Connection Request List
        • Connection Request Detail
      • Core
        • Attribute Values
        • Notes
        • Search
        • Smart Search
        • Quick Note
        • My Notes
      • CRM
        • Group Members
        • Person Profile
      • Events
        • Live Experience Occurrences
        • Live Experience
        • Calendar Event Item Occurrence View
        • Calendar Event List
        • Calendar View
        • Event Item Occurrence List By Audience Lava
      • Finance
        • Giving
        • Scheduled Transaction List
        • Transaction Detail
        • Transaction List
      • Groups
        • Group Attendance Entry
        • Group Edit
        • Group Finder
        • Group Member Edit
        • Group Member List
        • Group Member View
        • Group Registration
        • Group View
        • Schedule Preference
        • Schedule Sign Up
        • Schedule Toolbox
        • Schedule Unavailability
      • Prayer
        • Answer To Prayer
        • My Prayer Requests
        • Prayer Card View
        • Prayer Request Details
        • Prayer Session
        • Prayer Session Setup
      • Reminders
        • Reminder Edit
        • Reminder List
        • Reminder Dashboard
      • Security
        • Onboard Person
    • Codex
      • Application Strategy
      • XAML Styling
      • Resources
      • Documentation
    • Commands
      • Communication Commands
      • Navigation Commands
      • Media Commands
      • Utility Commands
    • Controls
      • Behaviors
        • Event To Command Behavior
        • Touch Behavior
      • Content Controls
        • Activity Indicator
        • Application Info
        • Avatar
        • Bible Audio
        • Bible Browser
        • Bible Reader
        • Campus Context Picker
          • Camera Code Reader
        • Cards
          • Block Card
          • Contained Card
          • Inline Card
          • Elements of a Card
          • Masks
          • Styling Cards With CSS
        • Context Menu
        • Countdown
        • Cover Sheet
        • Divider
        • Expander
        • Field Container
        • Flip View
        • Following Icon
        • Geo Boundary View
        • HTML
        • Icon
        • Icon Button
        • Image
        • Interaction
        • Items Collection
        • Login Status
        • Login Status Photo
        • Lottie View
        • Markdown
        • Media Player
          • Legacy
        • Notification Box
        • Paragraph Text
        • QR Code
        • Ratio View
        • Redirect
        • Responsive Column
        • Responsive Layout
        • Scroll View
        • Segment Picker
        • Styled Border
        • Styled View
        • Tag
        • Toggle Button
        • Web View
      • Developer Controls
        • Execute Command
        • Bible Book And Chapter Picker
        • Command Reference
        • Field Stack
        • Media Cast Button
        • Media Progress Bar
        • Parameter
        • Scan Code
        • Validator
        • Volume Control
        • Zone
      • Effects
        • Blur Effect
        • Safe Area Padding Effect
      • Form Fields
        • Attribute Value Editor
        • Address
        • Campus Picker
        • Check Box
        • Check Box List
        • Currency Box
        • Date Picker
        • Email Box
        • Literal
        • Marital Status Picker
        • Multi Picker
        • Number Box
        • Phone Number Box
        • Picker
        • Text Box
        • Text Editor
      • XAML Extensions
        • Boolean Value Converter
        • From Json
        • Inverse Boolean Converter
        • Nullable Guid Converter
        • On Device Platform
        • On Device Type
        • Palette Color
        • Seconds To Time String Converter
    • Field Types
    • Lava
      • Context in Lava
    • Performance
    • Tips and Tricks
      • Custom Site Attributes
      • Migrating to .NET MAUI (V6)
      • Page Anchors
    • Troubleshooting
    • Advanced Topics
      • Dynamic Content
      • Deep Linking
  • 🎨Styling
    • Introduction
    • Style Guide
      • Walkthrough
      • Colors
      • Typography
      • Utilities
      • Shell Components
      • Migrating
    • Legacy
      • Colors
      • Borders
        • Border Color
        • Border Radius
        • Border Width
      • Text
        • Background Color
        • Text Size
        • Alignment
        • Color
        • Line Height
        • Weights & Styles
      • iOS Shadows
      • Styling Components
        • Tags
        • Bible
        • Button
        • Form Fields
        • Modals
      • Custom CSS
  • 👨‍💻Developers
    • Fundamentals
    • Core & Shell Dependencies
    • Custom Blocks
    • OS Version Requirements
  • 🏭App Factory
    • Overview
    • Android Keystore
    • App Store Product Page
    • Developer Accounts
    • Image Resources
    • In-App Giving
    • Publishing Requirements
    • Push Notifications
    • Rock Logins
    • Shell Update Requirements
Powered by GitBook

Resources

  • Release Notes
  • Community Chat
  • Ask Chip

Documentation

  • Rock Manuals
  • Lava

⚙️ Powered by Rock RMS

On this page
  • Getting Started
  • Menu
  • MenuAction
  • MenuGroup
  • System Icons
  • Examples
  • Default
  • Show Menu on Click
  • Click Command
Export as PDF
  1. Essentials
  2. Controls
  3. Content Controls

Context Menu

Display a native context menu that can be attached to nearly any control.

Last updated 6 days ago

A popular pattern in mobile development is attaching a native menu to a control that opens with a tap or long press. With Rock Mobile, this is not only easy to implement but also highly customizable!

Due to limitations on Android, these are more fleshed out on iOS. We didn't want to take the native iOS features away, so some properties may not translate to Android.

Getting Started

To get started, we've introduced three controls:

- The top-level menu, can be nested for submenus.

- An action that can be taken from the menu (think of this as a Menu item).

- A group of Actions or Menus. These cannot be nested.

Menu

Name
Type
Description

Title

string

A string title to be displayed at the top of the menu.

iOS ✅ Android ❌

MenuAction

Name
Type
Description

Title

string

The title of the action.

Command

ICommand

The command to execute when the action is selected.

CommandParameter

object

The parameter to pass along to the command.

Icon

ImageSource

An image icon to display with the menu action.

SystemIcon

string

The system icon to display with the menu icon. See the System Icons section for more info.

iOS ✅ Android ❌

IsEnabled

bool

Enables or disabled the menu action.

IsVisible

bool

Whether or not the action should currently display.

IsDestructive

bool

Whether or not this is a destructive menu item.

MenuGroup

Name
Type
Description

Title

string

The title of the group.

System Icons

Examples

Default

Opens a Context Menu when the Border is held down.

<Border HeightRequest="100" 
    BackgroundColor="White"
    Padding="16">
    
    <Label Text="Example Group Item" 
        StyleClass="title2, text-interface-stronger" 
        VerticalOptions="Center" />
           
    <Rock:ContextMenu.Menu>
        <DataTemplate>
            <Rock:Menu>
                <Rock:MenuGroup Title="Group Actions">
                    <Rock:MenuAction Title="Take attendance" 
                        Command="{Binding PushPage}"   
                        CommandParameter="d7a2700b-8c24-4ff2-908e-6f9ddcced79f" />
                    <Rock:MenuAction Title="View details" 
                        Command="{Binding ShowToast}"
                        CommandParameter="Group details" />
                    <Rock:MenuAction Title="Delete" 
                        IsDestructive="true"
                        SystemIcon="{OnPlatform iOS=xmark}" />
                </Rock:MenuGroup>
            </Rock:Menu>
        </DataTemplate>
    </Rock:ContextMenu.Menu>
</Border>

Show Menu on Click

In certain cases, you may want the Context Menu to open instantly without a long-press. For this to work properly, the Menu must be attached to a Button.

<Button Rock:ContextMenu.ShowMenuOnClick="True">
    <Rock:ContextMenu.Menu>
        <DataTemplate>
            <Rock:Menu>
                <Rock:MenuGroup Title="Group Actions">
                    <Rock:MenuAction Title="View details" 
                        Command="{Binding ShowToast}"
                        CommandParameter="Group details" />
                </Rock:MenuGroup>
            </Rock:Menu>
        </DataTemplate>
    </Rock:ContextMenu.Menu>
</Button>

Click Command

The Context Menu can sometimes interfere with a TapGestureRecognizer or other command triggers. To avoid this, you can use the ClickCommand and ClickCommandParameter attached properties. This lets you define both the long-press context menu and tap functionality simultaneously!

<ContentView 
    Rock:ContextMenu.ClickCommand="{Binding ShowToast}"
    Rock:ContextMenu.ClickCommandParameter="Hello">
    <Rock:ContextMenu.Menu>
        <DataTemplate>
            <!-- ... -->
        </DataTemplate>
    </Rock:ContextMenu.Menu>
</ContentView>

These are only really supported on iOS. These are in the form of , and you should be careful to ensure this only gets set on the iOS platform. You can see examples of this below.

🧱
SF Symbols
Menu
MenuAction
MenuGroup