On this page

Header Label Component

With this element you can set a header on any element. This then looks like this:

Key features

Auto-hides when no header text is supplied, keeping layouts compact.
Uses shared styles so typography and color remain consistent across screens.
Designed to sit above entries, check boxes, or custom controls to provide accessible context.

Here is the corresponding code for it:

<?xml version="1.0" encoding="utf-8"?>

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            x:Class="App.Elements.HeaderLabel">
    <StackLayout Margin="3,5,10,-10">
        <Label x:Name="LabelHeader" Style="{StaticResource LabelHeader}" />
    </StackLayout>
</ContentView>

namespace App.Elements;

public partial class HeaderLabel : ContentView
{

    #region Fields

    public static readonly BindableProperty HeaderProperty = BindableProperty.Create(nameof(Header), typeof(string), typeof(HeaderLabel), string.Empty);

    #endregion

    #region Properties

    // Automatically hidden when there is no text
    public string Header
    {
        get
        {
            var value = (string)GetValue(HeaderProperty);
            LabelHeader.IsVisible = !string.IsNullOrEmpty(value);
            return value;
        }
        set
        {
            SetValue(HeaderProperty, value);
            LabelHeader.IsVisible = !string.IsNullOrEmpty(value);
        }
    }

    #endregion

    public HeaderLabel() { InitializeComponent(); }

    #region Methods

    // Update Image
    protected override void OnPropertyChanged(string propertyName = null)
    {
        base.OnPropertyChanged(propertyName);

        if (propertyName == HeaderProperty.PropertyName)
        {
            LabelHeader.Text = Header;
        }
    }

    #endregion

}

Style

<Style x:Key="LabelHeader" TargetType="Label">
  <Setter
    Property="TextColor"
    Value="{AppThemeBinding Light={StaticResource Gray400}, Dark={StaticResource Gray400}}"
  />
  <Setter Property="BackgroundColor" Value="Transparent" />
  <Setter Property="FontFamily" Value="OpenSansRegular" />
  <Setter Property="FontSize" Value="12" />
  <Setter Property="VisualStateManager.VisualStateGroups">
    <VisualStateGroupList>
      <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="Normal" />
        <VisualState x:Name="Disabled">
          <VisualState.Setters>
            <Setter Property="Opacity" Value="0.5" />
          </VisualState.Setters>
        </VisualState>
      </VisualStateGroup>
    </VisualStateGroupList>
  </Setter>
</Style>

<Color x:Key="Gray400">#919191</Color>

How to use

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:elements="using:App.Elements">

    <StackLayout>

        <elements:HeaderLabel Header="Change Password" />
        <Entry IsPassword="True"
               Placeholder="New Password"
               Text="{Binding Password, Mode=TwoWay}" />

    </StackLayout>
</ContentPage>

Implementation notes

Bind Header to localized resources or validation state messages to provide dynamic feedback.
Extend the control with additional bindable properties (for example Margin or TextColor) if your design system requires further customization.
Combine the header with AutomationProperties.Name on the associated input field to improve accessibility.