Skip to content

horusstudio.maui.materialdesigncontrols.materialfloatingbutton.md

Latest commit

 

History

History
226 lines (133 loc) · 6.91 KB

horusstudio.maui.materialdesigncontrols.materialfloatingbutton.md

File metadata and controls

226 lines (133 loc) · 6.91 KB

MaterialFloatingButton

Floating action buttons (FABs) help people take primary actions and follow Material Design Guidelines. See more.

Namespace: HorusStudio.Maui.MaterialDesignControls

Inherits from: MaterialFloatingButton → ContentView


XAML sample

xmlns:material="clr-namespace:HorusStudio.Maui.MaterialDesignControls;assembly=HorusStudio.Maui.MaterialDesignControls"

<material:MaterialFloatingButton
      Icon="IconButton"
      Command="{Binding FloatingButtonActionCommand}"
      x:Name="MaterialFloatingButton"/>

C# sample

var MaterialFloatingButton = new MaterialFloatingButton()
{
    Icon = "IconButton",
    Command = ActionCommand
};

See more example

Properties

AutomationId

Gets or sets a value that allows the automation framework to find and interact with this element.

Property type: String

Remarks: This value may only be set once on an element.

Note: On Android, the value assigned to this AutomationId property will be mapped to the native Android property ContentDescription (content-desc), unlike most other controls where it maps to the Id (resource-id) property.


BackgroundColor

Gets or sets background color floating button This is a bindable property.

Property type: Color

Default value: Theme: Light = MaterialLightTheme.PrimaryContainer - Dark = MaterialDarkTheme.PrimaryContainer


Command

Gets or sets command when press floating button This is a bindable property.

Property type: ICommand

Default value: null

Remarks: This property is used to associate a command with an instance of FAB. This property is most often set in the MVVM pattern to bind callbacks back into the ViewModel.

  • VisualElement.IsEnabled is controlled by the Command.CanExecute(object) if set.

CommandParameter

Gets or sets the parameter to pass to the Command property. This is a bindable property.

Property type: Object

Default value: null


CornerRadius

Gets or sets corners in floating button This is a bindable property.

Property type: Double

Default value: 16


HeightRequest

Gets or sets the desired height override of this element. This is a bindable property.

Property type: Double

Default value: -1

Remarks:

  • which means the value is unset; the effective minimum height will be zero.

  • HeightRequest does not immediately change the Bounds of an element; setting the HeightRequest will change the resulting height of the element during the next layout pass.

Icon

Gets or sets icon in floating button This is a bindable property.

Property type: ImageSource

Default value: null


IconColor

Gets or sets icon color in floating button This is a bindable property.

Property type: Color

Default value: Theme: Light = MaterialLightTheme.OnPrimaryContainer - Dark = MaterialDarkTheme.OnPrimaryContainer


IconSize

Gets or sets desired icon size for the element. This is a bindable property.

Property type: Double

Default value: 24


Margin

Gets or sets the desired margin override of this element. This is a bindable property.

Property type: Thickness


Padding

Gets or sets the desired padding override of this element. This is a bindable property.

Property type: Thickness


Position

Gets or sets Position button This is a bindable property.

Property type: MaterialFloatingButtonPosition

Name Value Description
TopLeft 0 Top left
TopRight 1 Top right
BottomLeft 2 Bottom left
BottomRight 3 Bottom right

Default value: MaterialFloatingButtonPosition.BottomRight


Type

Gets or sets Type button This is a bindable property.

Property type: MaterialFloatingButtonType

Name Value Description
FAB 0 Use a FAB to represent the screen’s primary action
Small 1 A small FAB is used for a secondary, supporting action, or in place of a default FAB in compact window sizes
Large 2 A large FAB is useful when the layout calls for a clear and prominent primary action, and where a larger footprint would help the user engage

Default value: MaterialFloatingButtonType.FAB


WidthRequest

Gets or sets the desired width override of this element. This is a bindable property.

Property type: Double

Default value: -1

Remarks:

  • which means the value is unset; the effective minimum width will be zero.

  • WidthRequest does not immediately change the Bounds of an element; setting the WidthRequest will change the resulting width of the element during the next layout pass.

Known issues and pending features

  • [Android] Only one Floating Button visible per Page
  • [macOS] Does not appear due to a rendering issue with its icon