Skip to content

horusstudio.maui.materialdesigncontrols.materialtopappbar.md

Latest commit

 

History

History
394 lines (228 loc) · 12.1 KB

horusstudio.maui.materialdesigncontrols.materialtopappbar.md

File metadata and controls

394 lines (228 loc) · 12.1 KB

MaterialTopAppBar

Top App bars display navigation, actions, and text at the top of a screen, and follow Material Design Guidelines. See more.

Namespace: HorusStudio.Maui.MaterialDesignControls

Inherits from: MaterialTopAppBar → Grid


XAML sample

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

< material:MaterialTopAppBar
        Headline="Large type"
        Description="Description text"
        LeadingIconCommand="{Binding LeadingIconTapCommand}"
        LeadingIcon="ic_back_b.png"
        ScrollViewName="scrollView"
        Type="Large" />

C# sample

var topAppBar = new MaterialTopAppBar
{
    Headline = "Large type",
    Description = "Description text",
    LeadingIconCommand = LeadingIconTap,
    LeadingIcon = "ic_back_b.png",
    ScrollViewName = "scrollView",
    Type = MaterialTopAppBarType.Large,
};

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.

When set on this control, the AutomationId is also used as a base identifier for its internal elements:

  • The headline label uses the identifier "{AutomationId}_Headline".
  • The description label uses the identifier "{AutomationId}_Description".
  • The leading icon button uses the identifier "{AutomationId}_LeadingIcon".
  • The leading icon button's busy indicator uses the identifier "{AutomationId}_LeadingIconBusyIndicator".
  • Trailing icon buttons use the identifier "{AutomationId}TrailingIcon{index}".
  • Trailing icon buttons' busy indicators uses the identifier "{AutomationId}TrailingIconBusyIndicator{index}".

This convention allows automated tests and accessibility tools to consistently locate all subelements of the control.


BusyIndicatorColor

Gets or sets the color for the busy indicators. This is a bindable property.

Property type: Color

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


BusyIndicatorSize

Gets or sets the size for the busy indicators. This is a bindable property.

Property type: Double

Default value: 24.0


Description

Gets or sets the description text displayed on the top app bar. This is a bindable property.

Property type: String

Default value: null


DescriptionColor

Gets or sets the color for the description text of the top app bar. This is a bindable property.

Property type: Color

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


DescriptionFontAttributes

Gets or sets a value that indicates whether the font of this top app bar description text is bold, italic, or neither. This is a bindable property.

Property type: FontAttributes

Default value: FontAttributes.None


DescriptionFontFamily

Gets or sets the font family for the description text of this top app bar. This is a bindable property.

Property type: String

Default value: MaterialFontFamily.Default


DescriptionFontSize

Gets or sets the size of the font for the description text of this top app bar. This is a bindable property.

Property type: Double

Default value: MaterialFontSize.BodyMedium / Tablet = 17 / Phone = 14


DescriptionMarginAdjustment

Allows you to adjust the margins of the description text. This is a bindable property.

Property type: Thickness

Default value: new Thickness(10, 8, 10, 16)

Remarks: This property does not take into account Left and Right values of Thickness, it only applies the Top and Bottom values.


Headline

Gets or sets the headline text displayed on the top app bar. This is a bindable property.

Property type: String

Default value: null


HeadlineColor

Gets or sets the color for the headline text of the top app bar. This is a bindable property.

Property type: Color

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


HeadlineFontAttributes

Gets or sets a value that indicates whether the font of this top app bar headline text is bold, italic, or neither. This is a bindable property.

Property type: FontAttributes

Default value: FontAttributes.None


HeadlineFontFamily

Gets or sets the font family for the headline text of this top app bar. This is a bindable property.

Property type: String

Default value: MaterialFontFamily.Default


HeadlineFontSize

Gets or sets the size of the font for the headline text of this top app bar. This is a bindable property.

Property type: Double

Default value: MaterialFontSize.LabelLarge / Tablet: 14 - Phone: 11


HeadlineMarginAdjustment

Allows you to adjust the margins of the headline text. This is a bindable property.

Property type: Thickness

Default value: default(Thickness)

Remarks: This property does not take into account the Left and Right of the set Thickness, it only applies the Top and Bottom values.


IconButtonTouchAnimation

Gets or sets a custom animation to be executed when leading and trailing icon button are clicked. This is a bindable property.

Property type: ITouchAnimation

Default value: null


IconButtonTouchAnimationType

Gets or sets an animation to be executed when leading and trailing icon button are clicked. This is a bindable property.

Property type: TouchAnimationTypes

Name Value Description
None 0 None: no animation runs.
Fade 1 Fade: Represents an animation that simulates a "fade" effect by changing the opacity over the target element.
Scale 2 Scale: Represents an animation that simulates a "sink" or "sunken" effect by scaling the target element.
Bounce 3 Bounce: Represents an animation that simulates a "sink" or "sunken" effect with a "bounce" effect when the user releases the target element.

Default value: TouchAnimationTypes.Fade


IconPadding

Gets or sets the padding of leading and trailing icons for the top app bar. This is a bindable property.

Property type: Thickness

Default value: 12


IconSize

Gets or sets the size of leading and trailing icons for the top app bar. This is a bindable property.

Property type: Double

Default value: 48.0


IconTintColor

Gets or sets the tint color of leading and trailing icons for the top app bar. This is a bindable property.

Property type: Color

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


IsCollapsed

Indicates if app bar is collapsed or not. This is a bindable property.

Property type: Boolean


LeadingIcon

Allows you to display an icon button on the left side of the top app bar. This is a bindable property.

Property type: ImageSource

Default value: null


LeadingIconCommand

Gets or sets the command to invoke when the leading icon button is clicked. This is a bindable property.

Property type: ICommand

Default value: null

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


LeadingIconIsBusy

Gets or sets if the leading icon button is on busy state (executing Command). This is a bindable property.

Property type: Boolean

Default value: false


ScrollViewAnimationLength

Gets or sets the duration of the collapse or expand animation bound to the ScrollView element. This is a bindable property.

Property type: Int32

Default value: 250


ScrollViewName

Gets or sets the name of the ScrollView element to which the top app bar will be linked to run collapse or expand animations depending on the user's scroll. This is a bindable property.

Property type: String

Default value: null


TrailingIcons

Allows you to display a list of icon buttons on the right side of the top app bar. This is a bindable property.

Property type: IList

Default value: null

Remarks: This property supports a maximum of 3 icon buttons.


Type

Gets or sets the top app bar type. This is a bindable property.

Property type: MaterialTopAppBarType

Name Value Description
CenterAligned 0 Center and aligned headline
Small 1 Small headline below the leading icon
Medium 2 Medium headline below the leading icon
Large 3 Large headline below the leading icon

Default value: MaterialTopAppBarType.CenterAligned

Remarks:

  • CenterAligned: Center and aligned headline.

  • Small: Small headline below the leading icon.

  • Medium: Medium headline below the leading icon.

  • Large: Large headline below the leading icon.


Known issues and pending features

  • [iOS] The scroll animation has lag by the headline size change