How to customize the header view in .NET MAUI Picker (SfPicker)?

In this article, we will walk through customizing the header view of the Syncfusion® .NET MAUI Picker. You will learn how to adjust the background, text style, and divider color for a polished, customized look.

Step 1: Enable the Header

Initially, the header is disabled as the default value of the Header Height property is 0. To enable SfPicker’s header, set the Height property to a value greater than 0.
Customize the header background using the Background property and the divider color using the DividerColor property.

<picker:SfPicker x:Name="picker">
  <picker:SfPicker.HeaderView>
      <picker:PickerHeaderView Text="Select a Country" 
                           Background="Orange" 
                           Height="40"
                           DividerColor="CadetBlue">
      </picker:PickerHeaderView>
  </picker:SfPicker.HeaderView>
</picker:SfPicker>

Step 2: Customize the Text Style

Customization of header TextStyle elements such as TextColor, FontSize, FontFamily, and FontAttributes is possible, as demonstrated in the following code.

<picker:SfPicker x:Name="picker">
  <picker:SfPicker.HeaderView>
      <picker:PickerHeaderView Text="Select a Country" 
                           Background="Orange" 
                           Height="40"
                           DividerColor="CadetBlue">
          <picker:PickerHeaderView.TextStyle>
              <picker:PickerTextStyle TextColor="DarkBlue" 
                                  FontSize="20" 
                                  FontAttributes="Italic"/>
          </picker:PickerHeaderView.TextStyle>
      </picker:PickerHeaderView>
  </picker:SfPicker.HeaderView>
</picker:SfPicker>

Output:

Download the complete sample from GitHub.

Conclusion:

I hope you enjoyed learning how to customize the header view in .NET MAUI Picker (SfPicker).

Refer to our .NET MAUI Picker feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Picker documentation to understand how to present and manipulate data.

Check out our .NET MAUI components from the License and Downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Picker and other .NET MAUI components.

Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!