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
|
We have prepared a sample for the same, please download from this link