Articles in this section
Category / Section

How to integrate .NET MAUI Picker with Android Native Embedding Application?

4 mins read

In this article, you will learn how to create a .NET MAUI Picker native embedded Android application by following the step by step process explained below.

Step 1:
Create a .NET Android application and install the Syncfusion.Maui.Picker NuGet package using nuget.org.

Step 2:
In the project file of the native application, add the tag <UseMaui>true</UseMaui> to enable the .NET MAUI support as demonstrated below.

[XML]:

<PropertyGroup>
   <Nullable>enable</Nullable>
   <ImplicitUsings>enable</ImplicitUsings>
   <UseMaui>true</UseMaui>
</PropertyGroup>

Step 3:
Initialize .NET MAUI in the native app project by creating a MauiAppBuilder object and using the UseMauiEmbedding function. Then, use the Build() method on the MauiAppBuilder object to build a MauiApp object. Finally, create a MauiContext object from the MauiApp object to convert .NET MAUI controls to native types.

[C#]:

MauiContext? _mauiContext;
protected override void OnCreate(Bundle? savedInstanceState)
{
   base.OnCreate(savedInstanceState);
   MauiAppBuilder builder = MauiApp.CreateBuilder();
   builder.UseMauiEmbedding<Microsoft.Maui.Controls.Application>();
   builder.ConfigureSyncfusionCore();
   MauiApp mauiApp = builder.Build();
   _mauiContext = new MauiContext(mauiApp.Services, this);
}

Step 4:
Create a model class to manage the collection of data and provide customizable data source for the picker.

[C#]:

public class PickerModel
{
   private ObservableCollection<object> dataSource = new ObservableCollection<object>()
   {
       "Pink", "Green", "Blue", "Yellow", "Orange", "Purple", "Sky Blue", "Pale Green"
   };

   public ObservableCollection<object> DataSource
   {
       get
       {
           return dataSource;
       }
       set
       {
           dataSource = value;
       }
   }

   public PickerModel()
   {

   }
}

Step 5:
Create a view model class that initializes an instance of PickerModel.

[C#]:

public class PickerViewModel
{
   public PickerModel PickerModel { get; set; }
   public PickerViewModel()
   {
       this.PickerModel = new PickerModel();
   }
}

Step 6:
Configure the SfPicker by customizing the header with PickerHeaderView and bind the data source to the column with the PickerColumn. To enable the HeaderView, set the Height to the PickerHeaderView. Follow the below code sample for better understanding.

[C#]:

protected override void OnCreate(Bundle? savedInstanceState)
{
   PickerModel info = new PickerModel();
   SfPicker picker = new SfPicker()
   {
       HeaderView = new PickerHeaderView()
       {
           Text = "Select a color",
           Height = 60,
           Background = Colors.Orange,
       },

       Columns = new ObservableCollection<PickerColumn>()
       {
           new PickerColumn()
           {
               HeaderText = "Colors",
               ItemsSource = info.DataSource,
               SelectedIndex = 4,
           }
       },
   };  
}

Step 7:
Convert the picker control to a platform-specific view for the MAUI framework and set this view as the content view for the current Android activity.

[C#]:

protected override void OnCreate(Bundle? savedInstanceState)
{
   Android.Views.View view = picker.ToPlatform(_mauiContext);

   // Set our view from the "main" layout resource
   SetContentView(view);
}

Download the complete sample on GitHub

Output:

Picker.png

Conclusion:
I hope you enjoyed learning how to integrate Android Native embedding for the .NET MAUI Picker.

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

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

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

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied