Articles in this section
Category / Section

How to customize SfPicker header view?

1 min read

We can customize the picker header to text or any custom view like image, button, label etc. By changing the view of header, we can make our picker header to look better.

We have prepared a code sniped to illustrate the HeaderView of SfPicker.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Picker"
             x:Class="Picker.PickerPage">
   <Grid>
        <Button
            Clicked="Button_Clicked"
            HeightRequest="50"
            HorizontalOptions="Center"
            Text="Show Picker"
            VerticalOptions="Center"
            WidthRequest="200" />
     <local:SyncfusionPicker
               x:Name="picker"
               ColumnHeaderHeight="40"
               HorizontalOptions="Start"
               PickerHeight="400"
               PickerMode="Dialog"
               PickerWidth="300"
               SelectedItem="{Binding StartDate}"
               VerticalOptions="Center" >
       <local:SyncfusionPicker.HeaderView >
         <Grid>
           <Grid.ColumnDefinitions>
             <ColumnDefinition Width="75"/>
             <ColumnDefinition Width="200"/>
           </Grid.ColumnDefinitions>
           <Grid.RowDefinitions>
             <RowDefinition Height="55" />
           </Grid.RowDefinitions> 
             <Image Aspect="AspectFit" Source="dateTime.png" />
           <Label Text="Date Time Picker" Grid.Column="1"  HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Font="20" FontAttributes="Bold"  TextColor="Red" />   
         </Grid>
       </local:SyncfusionPicker.HeaderView>
    </local:SyncfusionPicker>
   
 </Grid>
</ContentPage>

XAML:

 

C#:

using Syncfusion.SfPicker.XForms;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
 
using Xamarin.Forms;
 
namespace Picker
{
    public partial class PickerPage : ContentPage
    {
        public PickerPage()
        {
            InitializeComponent();
            this.BindingContext = new PickerControl();
        }
        private void Button_Clicked(object sender, EventArgs e)
        {
            picker.IsOpen = !picker.IsOpen;
        }
    }
}

 

Image for Customized Header

Customized SfPicker header

 

We have prepared a sample for the same, please download from this link

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