Picker Title displays above the control on Windows

Description

When running on Windows, the Picker displays the Title property above the control. According to the documentation, and the behaviour on Android, I expect it to be treated as a placeholder when no item is selected.

Documentation snippet:

Windows:

Android:

Steps to Reproduce

1. Create new MAUI app.
2. Add a Picker to MainPage.xaml as below (direct copy from Microsoft’s sample code)

<Picker x:Name="picker"
        Title="Select a monkey">
  <Picker.ItemsSource>
    <x:Array Type="{x:Type x:String}">
      <x:String>Baboon</x:String>
      <x:String>Capuchin Monkey</x:String>
      <x:String>Blue Monkey</x:String>
      <x:String>Squirrel Monkey</x:String>
      <x:String>Golden Lion Tamarin</x:String>
      <x:String>Howler Monkey</x:String>
      <x:String>Japanese Macaque</x:String>
    </x:Array>
  </Picker.ItemsSource>
</Picker>

1. Run on Windows Machine

Version with bug

Release Candidate 2 (current)

Last version that worked well

Unknown/Other

Affected platforms

Windows

Affected platform versions

Windows 10 (21H2 | 19044.1645)

Did you find any workaround?

No

Relevant log output

N/A

[mkomel]

Setting pick.Title = null; after line 15 in @MitchBomcanhao 's code snippet seems to do the trick (to remove the header from the native view).

For completeness, I’m pasting the snippet here again:

#if WINDOWS10_0_19041_0_OR_GREATER
    Microsoft.Maui.Handlers.PickerHandler.Mapper.AppendToMapping(nameof(IPicker.Title), (handler, view) =>
    {
        if (handler.PlatformView is not null && view is Picker pick && !String.IsNullOrWhiteSpace(pick.Title))
        {
            handler.PlatformView.HeaderTemplate = new Microsoft.UI.Xaml.DataTemplate();			
            handler.PlatformView.PlaceholderText = pick.Title;
            pick.Title = null;
         }
    });
#endif

[WoMart]

@mkomel Thanks for the snippet, it works great. I think it’s worth noting that the TitleColor property will not be applied to the PlaceholderText, but it can be with the adjustment below.

using WindowsUI = Windows.UI;
using XamlUI = Microsoft.UI.Xaml.Media;

(...)

#if WINDOWS10_0_19041_0_OR_GREATER
  PickerHandler.Mapper.AppendToMapping(nameof(IPicker.Title), (handler, view) => {
      if (handler.PlatformView is not null && view is Picker pick && !string.IsNullOrWhiteSpace(pick.Title)) {
          handler.PlatformView.HeaderTemplate = new Microsoft.UI.Xaml.DataTemplate();
          handler.PlatformView.PlaceholderText = pick.Title;
          pick.Title = null;
  
          pick.TitleColor.ToRgba(out byte r, out byte g, out byte b, out byte a);
          handler.PlatformView.PlaceholderForeground = new XamlUI.SolidColorBrush(WindowsUI.Color.FromArgb(a, r, g, b));
      }
  });
#endif