Popup context menu

ContextMenuButton/Control

namespace DIPS.Xamarin.UI.Controls.ContextMenu

To help people to make choices that affect the content or the surrounding views, a context menu can be opened by tapping a button / area within a page. This component lets you place a desired view in your page with an attached context menu. The implementation is inspired from these online sources:

• iOS Pop-up button guideline
• iOS Pull-down button guideline
• Android popup menu guideline.

Samples can be found here < add later

👉 To get started, make sure you have followed the [getting started steps](Https://github.com/DIPSAS/DIPS.Xamarin.UI/wiki/Getting-

Example usage

To start off, you will need to either add a ContextMenuButton or a ContextMenuControl to your page. A ContextMenuButton gives you a Xamarin.Forms Button that will open a context menu when the user clicks on it. A ContextMenuController gives you a way to customise the view of the content of the button by setting the ContextMenuController.TheContent property. To add a context menu you to either of these two controls you will have to set the ItemSource property with ContextMenuItem.

👉 ItemSource is a bindable property which makes this easy to use using the MVVM pattern.

👉 ItemClickedCommand / ItemClicked event can be used to get a callback with the ContextMenuItem that was tapped by the user.

👉 The way you can organise the context menu is limited, but we will add more possibilities later as our requirements changes.

Menu item as an action

Present items in the menu as actions that the user can tap. You can achieve this behaviour by simply adding a ContextMenuItem and setting the ContextMenuItem .Title.

<!-- Single item -->
<contextMenu:ContextMenuControl VerticalOptions="Start"
                                ItemClickedCommand="{Binding ItemClickedCommand}">
    <contextMenu:ContextMenuControl.ItemsSource>
        <contextMenu:ContextMenuItem Title="Item" />
    </contextMenu:ContextMenuControl.ItemsSource>
    <Button Text="Single item"
            BackgroundColor="White" />
</contextMenu:ContextMenuControl>

When the user opens the context menu it will look like this on both platforms:

Menu item in groups

Display menu items inside of a group / submenu to group up items that are similar to each other or to limit the number of items on the root of the context menu.

<!-- Grouped items -->
<contextMenu:ContextMenuControl VerticalOptions="Start"
                                ItemClickedCommand="{Binding ItemClickedCommand}">
    <contextMenu:ContextMenuControl.ItemsSource>
        <contextMenu:ContextMenuGroup Title="Group 1">
            <contextMenu:ContextMenuItem Title="Item 1" />
            <contextMenu:ContextMenuItem Title="Item 2" />
        </contextMenu:ContextMenuGroup>
        <contextMenu:ContextMenuGroup Title="Group 2">
            <contextMenu:ContextMenuItem Title="Item 1" />
            <contextMenu:ContextMenuItem Title="Item 2" />
        </contextMenu:ContextMenuGroup>
    </contextMenu:ContextMenuControl.ItemsSource>
    <Button Text="Grouped items"
            BackgroundColor="White" />
</contextMenu:ContextMenuControl>

When the user opens the context menu it will look like this on both platforms: When a user opens a group it looks like this:

Menu item as an checkable action

Present items as menu items that the user can click to toggle something on / off.

"Single" check-mode

Every item is individual and checking them do not un-check the other items surrounding items.

<!--Checkable items (single)-->
<contextMenu:ContextMenuControl VerticalOptions="Start"
                                ItemClickedCommand="{Binding ItemClickedCommand}">
    <contextMenu:ContextMenuControl.ItemsSource>
        <contextMenu:ContextMenuGroup IsCheckable="True">
            <contextMenu:ContextMenuItem Title="Item 1" />
            <contextMenu:ContextMenuItem Title="Item 2" />
        </contextMenu:ContextMenuGroup>
    </contextMenu:ContextMenuControl.ItemsSource>
    <Button Text="Checkable items (single)"
            BackgroundColor="White" />
</contextMenu:ContextMenuControl>

When the user opens the context menu it will look like this on both platforms:

"All" check-mode

Items that are grouped together and checked will un-check the surrounding items, like a radio button.

<!--Checkable items (all)-->
<contextMenu:ContextMenuControl VerticalOptions="Start"
                                ItemClickedCommand="{Binding ItemClickedCommand}">
    <contextMenu:ContextMenuControl.ItemsSource>
        <contextMenu:ContextMenuItem Title="Item 1"
                                     IsCheckable="True" />
        <contextMenu:ContextMenuItem Title="Test 2"
                                     IsCheckable="True" />
    </contextMenu:ContextMenuControl.ItemsSource>
    <Button Text="Checkable items (all)"
            BackgroundColor="White" />
</contextMenu:ContextMenuControl>

When the user opens the context menu it will look like this on both platforms:

Properties

< Add links to properties classes from code >