We are happy to introduce the new picker controls in our Syncfusion .NET MAUI suite from the 2023 Volume 3 release!
The Syncfusion .NET MAUI picker controls are fully customizable components that offer a simple yet attractive UI, enhancing your application with a smooth and touch-friendly user experience. These controls provide a unified UI across all platforms, simplifying the selection process.
Let’s explore the features of the following new picker controls rolled out in the 2023 Volume 3 release and the steps to get started with them:
The new .NET MAUI Picker (SfPicker) is a versatile control that empowers users to select a single item from a list of options. It offers a seamless and highly customizable solution to enhance the user experience.
The key features of the .NET MAUI Picker control are as follows:
Follow these steps to integrate the .NET MAUI Picker control into your app:
using Syncfusion.Maui.Core.Hosting; public static class MauiProgram { public static MauiApp CreateMauiApp() { var builder = MauiApp.CreateBuilder(); builder.ConfigureSyncfusionCore(); } }
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker" x:Class="PickerMAUISample.MainPage"> <Frame HasShadow="False" CornerRadius="5" HorizontalOptions="Center" VerticalOptions="Center" Margin="0" Padding="0" WidthRequest="250" BorderColor="LightGray" HeightRequest="330"> <picker:SfPicker> <picker:SfPicker.HeaderView> <picker:PickerHeaderView Height="50" Text="Select a color" Background="#6750A4" > <picker:PickerHeaderView.TextStyle> <picker:PickerTextStyle FontSize="15" TextColor="White"/> </picker:PickerHeaderView.TextStyle> </picker:PickerHeaderView> </picker:SfPicker.HeaderView> <picker:SfPicker.Columns> <picker:PickerColumn SelectedIndex="4"> <picker:PickerColumn.ItemsSource> <x:Array Type="{x:Type x:String}" > <x:String>Pink</x:String> <x:String>Green</x:String> <x:String>Blue</x:String> <x:String>Yellow</x:String> <x:String>Orange</x:String> <x:String>Purple</x:String> <x:String>SkyBlue</x:String> <x:String>PaleGreen</x:String> <x:String>Gray</x:String> <x:String>LiteGreen</x:String> <x:String>Brown</x:String> </x:Array> </picker:PickerColumn.ItemsSource> </picker:PickerColumn> </picker:SfPicker.Columns> </picker:SfPicker> </Frame> </ContentPage>
Note: For more details, refer to the .NET MAUI Picker control documentation.
The new .NET MAUI Date Picker (SfDatePicker) control allows you to select a date from a list of dates, providing a seamless and highly customizable solution to enhance the user experience.
The key features of the .NET MAUI Date Picker control are as follows:
Follow these steps to integrate the .NET MAUI Date Picker control into your app:
MainPage.xaml
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker" x:Class="PickerMAUISample.MainPage"> <Frame HasShadow="False" CornerRadius="5" HorizontalOptions="Center" VerticalOptions="Center" Margin="0" Padding="0" WidthRequest="300" BorderColor="LightGray" HeightRequest="370"> <picker:SfDatePicker HeightRequest="370"> <picker:SfDatePicker.HeaderView> <picker:PickerHeaderView Height="50" Background="#6750A4" Text="Select a Date"> <picker:PickerHeaderView.TextStyle> <picker:PickerTextStyle TextColor="White" FontSize="15" /> </picker:PickerHeaderView.TextStyle> </picker:PickerHeaderView> </picker:SfDatePicker.HeaderView> </picker:SfDatePicker> </Frame> </ContentPage>
Note: For more details, refer to the .NET MAUI Date Picker control documentation.
The .NET MAUI Time Picker (SfTimePicker) control enables users to select a time from a list of times, offering a seamless and highly customizable solution to enhance the user experience.
The key features of the .NET MAUI Time Picker control are as follows:
Follow these steps to integrate the .NET MAUI Time Picker control in your app:
Refer to the following code to initialize the .NET MAUI Time Picker control and add items to it.
MainPage.xaml
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker" x:Class="PickerMAUISample.MainPage"> <Frame HasShadow="False" CornerRadius="5" HorizontalOptions="Center" VerticalOptions="Center" Margin="0" Padding="0" WidthRequest="300" BorderColor="LightGray" HeightRequest="370"> <picker:SfTimePicker HeightRequest="370"> <picker:SfTimePicker.HeaderView> <picker:PickerHeaderView Height="50" Background="#6750A4" Text="Select a Time"> <picker:PickerHeaderView.TextStyle> <picker:PickerTextStyle TextColor="White" FontSize="15" /> </picker:PickerHeaderView.TextStyle> </picker:PickerHeaderView> </picker:SfTimePicker.HeaderView> </picker:SfTimePicker> </Frame> </ContentPage>
Note: For more details, refer to the .NET MAUI Time Picker control documentation.
The .NET MAUI Date Time Picker (SfDateTimePicker) control enables you to select a date-time value from a list of dates and times, offering a seamless and highly customizable solution to enhance the user experience.
The key features of the .NET MAUI Date Time Picker control are as follows:
Follow these steps to integrate the .NET MAUI Date Time Picker control in your app:
Refer to the following code to initialize the .NET MAUI Date Time Picker control and add items to it.
MainPage.xaml
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker" x:Class="PickerMAUISample.MainPage"> <Frame HasShadow="False" CornerRadius="5" HorizontalOptions="Center" VerticalOptions="Center" Margin="0" Padding="0" WidthRequest="300" BorderColor="LightGray" HeightRequest="370"> <picker:SfDateTimePicker HeightRequest="370" /> </Frame> </ContentPage>
Note: For more details, refer to the .NET MAUI Date Time Picker control documentation.
Thanks for reading! In this blog, we’ve explored the features of the new .NET MAUI picker controls introduced in the 2023 Volume 3 release. Try these controls out and share your feedback in the comments section below.
If you are not a Syncfusion customer, try our 30-day free trial to see how our components can enhance your projects.
If you have any questions, you can contact us through our support forum, support portal, or feedback portal. We are always happy to assist you!