FloatingActionMenu

Description

The FloatingActionMenu is an expandable action menu. MenuButton's can be added to the menu. Each MenuButton in the menu have a command and a (optional) title.

Getting started

The FloatingActionMenu needs to live inside of a ModalityLayout. The ModalityLayout will provide an overlay that is enabled until the menu is closed. It will also add the possibility of tapping the overlay to close the menu. The ModalityLayout should be placed at the root of your page for the best user experience.

<Contentpage 
   ...
   xmlns:dxui="http://dips.xamarin.ui.com"
   ... >
<dxui:ModalityLayout>
            <dxui:ModalityLayout.Behaviors>
                <dxui:FloatingActionMenuBehaviour>
                    <dxui:MenuButton Title="Title 1"
                                     Command="{Binding DoSomething}"/>
                    <dxui:MenuButton Title="Title 2"
                                     Command="{Binding DoSomething}"/>
                    <dxui:MenuButton Title="Title 3"
                                     Command="{Binding DoSomething}"/>
                </dxui:FloatingActionMenuBehaviour>
            </dxui:ModalityLayout.Behaviors>
    <!-- page content goes here -->
<dxui:ModalityLayout>

👉 Samples can be found here

Opening and closing

The menu opens and closes on tapping the expand button.

It will also close if the overlay is tapped.

Programatically the menu can be closed or opened by binding to IsOpen.

    <dxui:FloatingActionMenuBehaviour IsOpen="{Binding Show}">
                    <dxui:MenuButton Title="Title"
                                     Command="{Binding }"/>
    </dxui:FloatingActionMenuBehaviour>

Positioning

Valid values between 0-1. Will position the menu relative to the width and height of the ModalityLayout using proportional values. Values of 1 will put the menu at the bottom right corner of the ModalityLayout. The only supported direction of animation is up and there are no checks to stop the animation moving the buttons off the screen.

    <dxui:FloatingActionMenuBehaviour XPosition=".9"
                                      YPosition=".9">

Customization

Expand button

Customization of the expand button is done with properties on the FloatingActionMenuBehaviour:

    <dxui:FloatingActionMenuBehaviour Size="60"
                                      ExpandButtonBackgroundColor="CadetBlue"
                                      ExpandButtonText="Open"
                                      ExpandButtonFontSize="12"
                                      ExpandButtonTextColor="Azure">

The size of the menu buttons will be the same as the expand button. Set with the Size property.

Menu buttons

Customization of a MenuButton:

       <dxui:MenuButton BackgroundColor="CornflowerBlue"
                        Text="Icon"
                        TextColor="GreenYellow"
                        FontSize="14"
                        Title="A title"
                        TitleTextColor="Black"
                        TitleFontSize="16"
                        FontFamily=""/>

Button content

Font icons can be added to both type of buttons by setting either the ExpandButtonFontFamily and ExpandButtonText properties for the expand button

            <dxui:FloatingActionMenuBehaviour ExpandButtonText="<someglyph>"
                                              ExpandButtonFontFamily="<fontfile>">

and/or the FontFamily and Text properties for the menu button.

                <dxui:MenuButton FontFamily="<fontfile>"
                                 Text="<someglyph>"/>

There are also support for images by using the Source property.

            <dxui:FloatingActionMenuBehaviour Source="<path or url>">

                <dxui:MenuButton Source="<path or url>"/>

This property is bound to the native Source property of a Xamarin.Forms ImageButton and therefore supports url's, paths, etc.

When Source is set the other text and font properties on the buttons will have no effect(FontSize, Text, etc). Set the Source property to string.Empty to disable it(default behaviour).

Aspect of image defaults to AspectFit.

Disable/Enable a menubutton

Use the IsEnabled property to change the behaviour of the menu button. When disabled the button will be greyed out and the command will not fire. The menu will automatically close when tapping a disabled button.

    <dxui:MenuButton IsEnabled="{Binding IsEnabled}">

A disabled button:

Menubutton visibility

If IsVisible is changed on a menu button the remaining buttons will adjust their position if needed. Re-positioning can be animated, see Preview Features

Menubutton Badge

Set these properties to enable a badge on the menubutton:

                <dxui:MenuButton 
                                 IsBadgeVisible="{Binding ShowBadge}"
                                 BadgeColor="{Binding BadgeColor}"
                                 BadgeCount="{Binding BadgeCounter}"/>

Currently only proper support for one badge in a menu as the badge will be placed on top of the expand button when the menu is closed.

If you want a small animation when BadgeCount changes, see Preview Features.

Bindingcontext

The control inherits the bindingcontext of the ModalityLayout.

Properties FloatingActionMenuBehaviour

Property	Explanation	Remarks	default value
IsOpen	Describes the current state of the menu.	Use this to open or close the menu programatically	False
IsVisible	Determines the visibility of the floating action menu.		True
Children	List of menu button children.
XPosition	The X-position of the control. Is proportional to the Layout it's added to. Values between 0-1.	A value of 1 will align the right edge of the menu to the layout's right side.
YPosition	The Y-position of the control. Is proportional to the Layout it's added to. Values between 0-1.	A value of 1 will align the bottom edge of the menu to the layout's bottom edge.
ExpandButtonTextColor	The text color of the text in the expand button.		White
ExpandButtonBackgroundColor	The background color of the expand button.		MediumPurple
ExpandButtonText	The text in the expand button.
ExpandButtonFontFamily	FontFamily of the text in the expand button.
Size	The size of the buttons.	The MenuButtons inside of this menu will inherit this size.	60
ExpandButtonFontSize	FontSize of the text in the expand button.		12
OnBeforeOpen	Event that is raised before opening animation starts.
OnBeforeOpenCommand	Command that is executed before opening animation starts.
OnBeforeOpenCommandParameter	The parameter passed to OnBeforeOpenCommand.		null
OnAfterOpen	Event that is raised after opening animation completes.
OnAfterOpenCommand	Command that is executed after opening animation completes.
OnAfterOpenCommandParameter	The parameter passed to OnAfterOpenCommand.		null
OnBeforeClose	Event that is raised before closing animation starts.
OnBeforeCloseCommand	Command that is executed before closing animation starts.
OnBeforeCloseCommandParameter	The parameter passed to OnBeforeCloseCommand.		null
OnAfterClose	Event that is raised after closing animation completes.
OnAfterCloseCommand	Command that is executed after closing animation completes.
OnAfterCloseCommandParameter	The parameter passed to OnAfterClose Command.		null
Source	The source of the image in the expand button.	Can be a URL or a file path, anything a Xamarin.Forms ImageButton can use. Other properties regarding fonts and texts will be ignored if this is not its default value.	string.Empty

Properties MenuButton

Property	Explanation	Remarks	default value
FontSize	The font size of the text in the button.		12
TitleFontSize	The font size of the title.		12
IsEnabled	Disables the button command.		true
IsVisible	Toggles visibility of the button. Re-arranges the other buttons in the menu if necessary.		true
FontFamily	The font family of the text in the button.
Text	The text in the button.
TextColor	The color of the text in the button.		Black
TitleTextColor	The color of the text in the title.
BackgroundColor	The background color of the button.		White
CommandParameter	The parameter sent with the Command
Command	The command that is executed when the button is tapped.
Title	The text of the title next to the button.
TitleFontFamily	Font family of the title.
CloseOnOverlayTapped	Determines if the modality component should close when the overlay is tapped.		true
Source	The source of the image in the expand button.	Can be a URL or a file path, anything a Xamarin.Forms ImageButton can use. Other properties regarding fonts and texts will be ignored if this is not its default value.	string.Empty
IsBadgeVisible	Toggles a badge on the button.		false
BadgeColor	Badge color.		White
BadgeCount	Contents of badge	Badge size does not scale with contents so support is limited for now.	0

Preview Features

Available preview features

Feature	Description	Property	String Identifier
MenuButtonAnimations	Adds two animations to the MenuButton badge: When the IsBadgeVisible property changes to true and when the BadgeCount property changes. Also adds an animation when a MenuButton's IsVisible property is toggled.	MenuButtonAnimations	"MenuButtonAnimations"

Example:

// Do this:
  Library.PreviewFeatures.MenuButtonAnimations = true;

// OR this:
  Library.PreviewFeatures.EnableFeature("MenuButtonAnimations");

Allowing multiple modals

By default, the ModalityLayout will close any open modals before showing a new modal, thus limiting simultaneously open modals to one. This behavior can be disabled by setting the property ShouldCloseOpenedModals to False.

Property	Explanation	Remarks	default value
ModalityLayout.ShouldCloseOpenedModals	Determines whether the layout should close any opened modals before opening a new one.		true