How to reduce the space between the columns in Xamarin.Forms SfDatePicker
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
You can find the sample in the following link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DatePicker-47392662.zip