MaterialTopAppBar

TopAppBar displays information and actions at the top of a screen.
View Material Design documentation

Screenshot

Example

 <material3:MaterialTopAppBar
    HeadlineColor="Black"
    Headline="Type - CenterAligned"
    LeadingIconCommand="{Binding BackCommand}"
    Type="CenterAligned">
    <material3:MaterialTopAppBar.LeadingIcon>
        <ffimageloadingsvg:SvgCachedImage Source="resource://ExampleMaterialDesignControls.Resources.Svg.ic_back_blue.svg" />
    </material3:MaterialTopAppBar.LeadingIcon>
</material3:MaterialTopAppBar>

Documentation

Property Type:

Allowed values

• CenterAligned (Default)
• Small
• Medium
• Large
  

Property HeadLine:

This property is to set the headline text.

Property HeadlineColor:

This property is to set the headline text color.

Property HeadlineFontSize:

This property is to set the headline text font size.

Property HeadlineFontFamily:

This property is to set the headline text font family.

Property HeadlineMarginAdjustment:

This property is to set the headline text margin to adjust it.

Property Description:

This property is to set the description text.

Property DescriptionColor:

This property is to set the description text color.

Property DescriptionFontSize:

This property is to set the description text font size.

Property DescriptionFontFamily:

This property is to set the description text font family.

Property DescriptionMarginAdjustmentProperty:

This property is to set the description text margin to adjust it.

Property LeadingIcon:

This property is to set the leading icon with support for PNG, JPG or JPEG.

Property CustomLeadingIcon:

This property is to set the leading icon with support for view, you can use SVG, font icon, PNG, JPG or JPEG.

Property TrailingIcon:

This property is to set the trailing icon with support for PNG, JPG or JPEG.

Property CustomTrailingIcon:

This property is to set the trailing icon with support for view, you can use SVG, font icon, PNG, JPG or JPEG.

Property IconSize:

This property is to set the sizes to the trailing and leading icons.

Property LeadingIconCommand:

This property is to set the leading icon command.

Property TrailingIconCommand:

This property is to set the trailing icon command.

Property ButtonAnimation:

This property is to set the animation of the leading and trailing icons.

Allowed values

• None
• Fade (Default)
• Scale
• Custom
  

Property ButtonAnimationParameter:

This property is to customize the animation of the leading and trailing icons.

Property ButtonCustomAnimation:

This property is to set a custom animation to the leading and trailing icons.

Property ScrollViewName:

This property is to bind the control to a ScrollView and run an animation when scrolling down.

Property TrailingIconIsBusy:

This property is to show a busy indicator in the trailing icon.

Property LeadingIconIsBusy:

This property is to show a busy indicator in the leading icon.

Property BusyColor:

This property is to set the color of the busy indicators.