Skip to content

Latest commit

 

History

History
131 lines (106 loc) · 4.33 KB

Styles.md

File metadata and controls

131 lines (106 loc) · 4.33 KB

Defining Styles

At the start of your app, for instance, in the App.cs file, you can override any styles to apply them to all the Material controls. You can also use some of these styles as your global styles.

We strongly recommend overriding the color palette since, by default, it utilizes a palette employed in Material Design samples. Therefore, you should replace the colors with your custom color palette.

Exercise caution when overriding the font size definitions, as a significant number of controls rely on them, and making substantial changes could result in visual issues.

private void SetMaterialStyles()
{
    MainThread.BeginInvokeOnMainThread(() =>
    {
        var currentTheme = Application.Current.RequestedTheme;

        MaterialColor.Primary = currentTheme == OSAppTheme.Dark ? Color.FromHex("#8976BC") : Color.FromHex("#6750A4");
        MaterialColor.OnPrimary = currentTheme == OSAppTheme.Dark ? Color.FromHex("#1A1A1A") : Color.FromHex("#FFFFFF");
        ...
        MaterialColor.DisableContainer = currentTheme == OSAppTheme.Dark ? Color.FromHex("#B1ABBA") : Color.FromHex("#E5E3E8");
    });

    MaterialAnimation.Parameter = 0.7;
    MaterialAnimation.Type = AnimationTypes.Fade;
    MaterialAnimation.AnimateOnError = true;

    MaterialFontFamily.Default = "RegularFont";
    MaterialFontFamily.Regular = "MediumFont";
    MaterialFontFamily.Medium = "BoldFont";

    MaterialFontSize.DisplayLarge = 70;
    MaterialFontSize.DisplayMedium = 50;
    ...
    MaterialFontSize.BodySmall = 15;
}

MaterialAnimation

MaterialAnimation exposes the properties used for the control's animations.

Type

Defines the animation type that the control will use for animation (allowed values: None, Fade, and Scale).

Allowed values

  • Fade (Default)
  • Scale
  • None

Parameter

Defines the animation parameter that the control will use for animation (e.g., opacity percentage or scale value up to which the animation is executed). The default value is 0.7.

AnimateOnError

Determines whether the input control animates when supporting text is set for the control (indicating an error). Currently, the only supported animation is a control shake. The default value is True.

MaterialFontFamily

MaterialFontFamily exposes various font families utilized by the controls.

By default, these font families are empty, resulting in the controls using the default OS font family.

Properties

  • Default
  • Regular
  • Medium

MaterialColor

MaterialColor provides access to a color palette containing all the colors used by the controls, as defined by Material Design guidelines.

This color palette can also be applied as a global style throughout the entire app.

By default, the color palette aligns with the one used in Material Design samples, so you may need to customize the colors to match your own color palette.

Properties

  • Primary
  • OnPrimary
  • PrimaryContainer
  • OnPrimaryContainer
  • Secondary
  • OnSecondary
  • SecondaryContainer
  • OnSecondaryContainer
  • Error
  • OnError
  • ErrorContainer
  • OnErrorContainer
  • SurfaceDim
  • Surface
  • SurfaceBright
  • SurfaceContainerLowest
  • SurfaceContainerLow
  • SurfaceContainer
  • SurfaceContainerHigh
  • SurfaceContainerHighest
  • OnSurface
  • OnSurfaceVariant
  • Outline
  • OutlineVariant
  • InverseSurface
  • InverseOnSurface
  • InversePrimary
  • Scrim
  • Shadow
  • Text
  • Disable
  • DisableContainer

MaterialFontSize

MaterialFontSize presents the definitions for font sizes, encompassing all the font sizes prescribed by Material Design guidelines.

This font size definition can also serve as a global style throughout the entire app.

MaterialFontSize includes default adjustments for tablet devices (which can be overridden as needed) by slightly increasing the default font sizes when the app runs on a tablet to maintain better text-to-screen size proportions.

Default font size definitions

Properties Tablet Phone
DisplayLarge 80 57
DisplayMedium 62 45
DisplaySmall 50 36
HeadlineLarge 44 32
HeadlineMedium 38 28
HeadlineSmall 32 24
TitleLarge 26 22
TitleMedium 19 16
TitleSmall 17 14
LabelLarge 17 14
LabelMedium 15 12
LabelSmall 14 11
BodyLarge 19 16
BodyMedium 17 14
BodySmall 15 12