Articles in this section
Category / Section

How to reduce the space between the columns in Xamarin.Forms SfDatePicker

1 min read

The Xamarin.Forms SfDatePicker has an option to change the column width as required. By default, Xamarin.Forms SfDatePicker column width will be divided equally based on the number of columns added. If the screen size is too large, the space between the columns will be too high. Using the OnColumnLoaded event, you can set the column width.

The following steps explain how to reduce the space between the columns in Xamarin.Forms SfDatePicker.

Step 1: Create an app using Xamarin.Forms SfPicker with all the required assemblies.

Step 2: Create CustomDatePicker class, which should be inherited from Xamarin.Forms SfPicker, and add the properties needed to display date.

Step 3: Create DatePicker ViewModel class and add the properties of CustomDatePicker class into ViewModel collection. Refer to the following code snippet to set the column width.

private void Date_OnColumnLoaded(object sender, Syncfusion.SfPicker.XForms.ColumnLoadedEventArgs e)
{
    if (e.Column == 0)
        e.ColumnWidth = 100;
    if (e.Column == 1)
        e.ColumnWidth = 50;
    if (e.Column == 2)
        e.ColumnWidth = 40;
}

 

Step 4: Initialize the custom Xamarin.Forms SfDatePicker in XAML page in which the ViewModel class is set to BindingContext of custom Xamarin.Forms SfDatePicker.

XAML:

 

<ContentPage.BindingContext>
    <local:DatePickerViewModel />
</ContentPage.BindingContext>
<Grid>
    <Button
            Clicked="Button_Clicked"
            HeightRequest="50"
            HorizontalOptions="Center"
            Text="Show Picker"
            VerticalOptions="Center"
            WidthRequest="200" />
    <local:CustomDatePicker
            x:Name="date"
            ColumnHeaderHeight="40"
            HorizontalOptions="Center"
            PickerHeight="400"
            PickerMode="Dialog"
            PickerWidth="300"
            SelectedItem="{Binding StartDate}"
            VerticalOptions="Center" />
</Grid>

Output

 

SfDatePickerSfDatePicker

 

You can find the sample in the following link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DatePicker-47392662.zip

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