In iOS not able to reduce or remove column padding,SelectedItemTextColor for custom view of column not working

[Dhruv]

I am using SfPicker - version 17.2.0.51.
I am having some issues with the iOS.
1)  In iOS column has more padding at left and right side, Is there a way to reduce or remove it ?

2)  SelectedItemTextColor for custom view of column is not working

if(e.Column == 1)

{

       var stacklayout = new StackLayout();

       stacklayout.HorizontalOptions = LayoutOptions.CenterAndExpand;

       stacklayout.VerticalOptions = LayoutOptions.CenterAndExpand;

       var label = new Label();

       label.Text = (e.Item as Entities.Sura).SurahText;

       label.LineBreakMode = LineBreakMode.CharacterWrap;

       label.HorizontalTextAlignment = TextAlignment.Center;

       label.HorizontalOptions = LayoutOptions.CenterAndExpand;

       label.VerticalOptions = LayoutOptions.CenterAndExpand;

       stacklayout.Children.Add(label);

       e.View = stacklayout;

}

3) SelectedItemFontFamily and UnSelectedItemFontFamily are also not working in iOS and get error : Value can not be null.
This is how I am using fontfamily :  OnPlatform x:TypeArguments="x:String" Android="fonts/Nexa/Bold.otf" iOS="NexaBold"

[Hemalatha Marikumar]

Hi Dhruv, 

  

Greetings from Syncfusion. 

   

Query 1: In iOS column has more padding at left and right side, Is there a way to reduce or remove it ? 

  

You can adjust each column width by using OnColumnLoaded event in SfPicker as per in below code snippet 

 

CodeSnippet [C#]: 

  

            

this.OnColumnLoaded += CustomDatePicker_OnColumnLoaded; 

 

… 

 

private void CustomDatePicker_OnColumnLoaded(object sender, ColumnLoadedEventArgs e) 

        { 

            if (e.Column == 0) 

            { 

                e.ColumnWidth = 75; 

            } 

            else if(e.Column == 1) 

            { 

                e.ColumnWidth = 150; 

            } 

            else 

            { 

                e.ColumnWidth = 75; 

            } 

        } 

  

We have modified a provided sample with ColumnWidth find it from link below. 

  

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/DatePicker_ColumnWidth830539216 

  

KB: https://www.syncfusion.com/kb/10522/how-to-reduce-the-space-between-the-columns-in-xamarin-forms-sfdatepicker 

  

Query 2: SelectedItemTextColor for custom view of column is not working 

  

We would like to let you know that SelectedItemTextColor, SelectedItemFontFamily & UnSelectedItemFontFamily is works only for default SfPicker items. For the custom view applied picker, we have to manually customize those view as per your requirement. Here, you have passed a new view for each column text in your sample, so you have to manually set the customization for that View (Label). 

  

Query 3:  SelectedItemFontFamily and UnSelectedItemFontFamily are also not working in iOS and get error: Value can not be null. 

  

Currently we are validating the reported crash issue and we will let you know the complete details on December 6^th, 2019. 

  

Please let us know, if you have any other concerns. 

 

Regards, 

Hemalatha M. 

[Dhruv]

 I have already set the column width using OnColumnLoaded event

Here you can see middle column, it's not taking full space and has padding at left and right side.
for 1st and 3rd column I can get the SelectedItemTextColor working, but for middle column it does not work(I have tried it with default column also but it still does not work).
Also 1st and 3rd columns are default though SelectedItemFontFamily and UnSelectedItemFontFamily are not woking for them

[Hemalatha Marikumar]

Hi Dhruv, 

 

Thanks for your update 

 

Queries: 1) Middle column not taking full space and has padding at left and right side. 

                 2) SelectedItemTextColor on middle column does not work. 

                 3) 1st and 3rd columns are default though SelectedItemFontFamily and UnSelectedItemFontFamily are not woking. 

 

We have validated the reported issues and based on provided screenshot, it is only possible to set the individual color of each column only with passing the new custom view using OnPickerItemLoaded event.  

 

If you are passing new custom view to each column, SelectedItemTextColor, SelectedItemFontFamily & UnSelectedItemFontFamily for the Picker items wound be applied as we stated earlier. It will surely apply for the default view on picker items.

 

We were not aware of your exact code, so we request if possible, to provide a sample based on your application. This will be helpful for us to investigate further and provide you a better solution at the earliest. 

 

Query: SelectedItemFontFamily and UnSelectedItemFontFamily are also not working in iOS and get error: Value cannot be null. 

  

We were unable to reproduce the reported issue. Please refer the tested sample from below link 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DatePicker_OtfFont1394689530  

 

Please let us know if you have any other concern. 

 

Regards, 

Hemalatha M. 

[Dhruv]

I have attached SfPickerDemo where SelectedItemFontFamily = "NexaBold" and UnSelectedItemFontFamily = "NexaBold" is not working. Can you please check it and let me know what I am doing wrong.

In this demo project you can see : Label above SfPicker control where FontFamily = "NexaBold" is working

Attachment: SfPickerDemo_669d3172.zip

One more question : Is there a way to make ColumnWidth(int) to double in ColumnLoadedEventArgs class ?

Also SelectedItemTextColor is not working when we use object and DisplayMemberPath value is object's property 

[Hemalatha Marikumar]

Hi Dhruv, 

 

Thanks for your update. 

  

We have checked and modified your sample with NexaBold Custom Font, please get it from the link below.  

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfPickerDemo-1147054849 

  

Screenshot: 

 

 

Code Snippet [XAML]: 

  

<ContentPage.Resources> 

        <ResourceDictionary> 

            <OnPlatform  x:TypeArguments="x:String" x:Key="customFonts" iOS="Nexa Bold"/> 

            </ResourceDictionary> 

        </ContentPage.Resources> 

    <StackLayout Padding="50"> 

        <!-- Place new controls here --> 

        <Label Text="SfPicker Demo" x:Name="label" FontFamily="{StaticResource customFonts}" /> 

        <syncfusion:SfPicker x:Name="SfPicker1" 

                             SelectedItemFontFamily="{StaticResource customFonts}" 

                             UnSelectedItemFontFamily="{StaticResource customFonts}" /> 

    </StackLayout> 

  

 Note: Please ensure whether the font files are included in the Info.plist file (fonts that are provided by application, UIAppFonts, or key) in iOS platform.  

 

Query 1: Is there a way to make ColumnWidth(int) to double in ColumnLoadedEventArgs class. 

  

We would like to let you know that, currently we don’t have an option to change ColumnWidth as double. 

  

Query 2: Also SelectedItemTextColor is not working when we use object and DisplayMemberPath value is object's property 

  

We are prepared a sample with setting both DisplayMemberPath and SelectedItemTextColor which is working fine, please find the sample from the link below. 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Picker_DisplayMemberPath1266864380 

  

Screenshot: 

  

 

  

We request you to try our sample, if you face the same issue in your application and can you please revert us by modifying the sample based on yours. This will be help us to investigate further and provide you with a better solution at the earliest. 

  

Please let us know, if you have any other concerns. 

 

Regards, 

Hemalatha M. 

[Dhruv]

Thank you so much. In iOS after adding font file into info.plist it works.

Here I have modified project provided by you where SelectedItemTextColor is not working for column = 1 and column = 2. Can you please help ?

Attachment: PickerList_b5ecdc02.zip

[Dhruv]

Any help ?

[Ruba Shanmugam]

Hi Dhruv,

Thanks for the update.

We have validated your query and we were able to reproduce the reported issue in iOS platform with provided sample. We have fixed the reported issue find the assembly from below link.  

Assembly Version: v17.3.0.34

Disclaimer: Please note that we have created this patch for the version 17.3.0.34 specifically to resolve the issue reported in this incident.

Assembly: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CustomAssembly389605114  

Note: Please refer the below link to apply the custom assembly

https://www.syncfusion.com/kb/8279/how-to-apply-the-custom-assemblies-when-configured-the-project-with-syncfusion-nuget  

Currently we have patch support only to the main and service pack release version, not for weekly nuget release. soonly provided a assembly with 17.3.0.34 version.

This fix will be included in our upcoming Weekly release which is scheduled on Dec 24th 2019.

Could you please check this fix with your application and let us know, whether the issue is resolved or not.

Regards,
Ruba Shanmugam
 

[Dhruv]

Thank you so much. Custom assembly works as expected.
I have one more question : Is there a way to wrap text if texts are too long ? (Without custom view)
In ios column text doesn't take full space and there is some space left on both sides as shown in below image, How can I remove that space ?

[Dhruv]

Can you please provide example where custom view is used and set different color for the selected item ?

[Hemalatha Marikumar]

Hi Dhruv, 

  

Thanks for the update. 

  

Query 1: Is there a way to wrap text if texts are too long ? (Without custom view) 

  

Currently we do not have support to achieve your requirement “Wrap mode support for picker control” but we have already logged a feature request on this, and it can be tracked through our feedback portal below.  

   

Link: https://www.syncfusion.com/feedback/8500/wrap-mode-support-for-picker-control  

   

Please cast your vote to make it count. We will prioritize the features every release based on the demands and we do not have an immediate plan to implement this feature since we committed with already planned work. So, this feature will be available for any of our upcoming releases. 

  

If you have any further specification / suggestions for a feature request, you can add it as a comment in the portal. 

  

Query 2: In ios column text doesn't take full space and there is some space left on both sides as shown in below image, How can I remove that space ? 

  

We have implemented the SfPicker using native UIPickerView, which is the default UIPickerView behavior in the native iOS. So we would like to let you know that we don’t have any option to remove that column space. 

  

Query 3: Can you please provide example where custom view is used and set different color for the selected item? 

  

We have prepared a workaround sample for your requirement to “Set the different color for selected item when using custom view”. Here we set the Label TextColor based on the Selected & UnSelected Items Text color using SelectionChanged event. Please have the sample from below link. 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PickerItemTemplate_Customization1737460929 

  

Please let us know whether the above solution full fill your requirement.  

 

Regards, 

Hemalatha M. 

[Dhruv]

Thanks.
One more question is : How can I apply Item template if there is more than one column ? (Different template with all column and SelectedItemTextColor)

[Hemalatha Marikumar]

Hi Dhruv, 

  

Thanks for the update. 

  

Currently we do not have support to achieve your requirement “Apply Item template if there is more than one column”. We need to analyze more on your requirement, and we will update you the status on December 31st, 2019. 

 

Regards, 

Hemalatha M. 

[Dhruv]

In android's custom view, if we wrap label in any control it doesn't showing up in picker, I have tried adding label inside stacklayout. Can you please check ?

[Hemalatha Marikumar]

Hi Dhruv, 

  

We have validated your query, and we have prepared a sample as per provided information with CustomView as a Label which is inside the StackLayout it properly rendering on Android. 

  

Code Snippet [XAML] 

<picker:SfPicker  x:Name="picker" 

                          ItemsSource="{Binding Colors}" 

                          HeaderText="Select a Color" 

                          SelectedIndex="1" 

                          UnSelectedItemTextColor="Gray" 

                          SelectedItemTextColor="Red" 

                          SelectionChanged="Picker_SelectionChanged" > 

                <picker:SfPicker.ItemTemplate> 

                    <DataTemplate> 

                        <StackLayout> 

                            <Label Text="{Binding Name}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" TextColor="{Binding ColorValue}"/> 

                        </StackLayout> 

                    </DataTemplate> 

                </picker:SfPicker.ItemTemplate> 

            </picker:SfPicker> 

  

Output: 

 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PickerTemplate-573627158 

  

So can you please check try our sample. If you still facing the same issue, please revert the sample along with replication procedure of your scenario. Addressing any of these things will more helpful to analyze further and provide an appropriate solution. 

  

Can you please let us know your actual scenario with SfPicker using CustomView. It would be helpful for us to investigate further and provide you a better solution at the earliest. 

 

Regards, 

Hemalatha M. 

  

 

[Dhruv]

For android creating customview in c# and wrapping label inside any control doesn't work, can you please check creating customview in c# and try to add label inside stacklayout and add stacklayout inside contentview for android?

[Dhruv]

Issue for android :
In attached project, there is three column picker,  for column I have set the customview in c#. if I wrap label inside stacklayout, label doesn't appear. Also selected color is not working. Can you please check ?
Also fontfamily for customview in c# is not working in android for multiple column picker.

Attachment: PickerList_df138ba1.zip

[Dhruv]

Have you checked ? Any help !

[Hemalatha Marikumar]

Hi Dhruv, 

 

Sorry for the delay. 

 

We have worked on finding a possible solution to meet your requirements, but with the current control implementation, we haven't been able to do that. We don't currently have the support to meet your requirements. 

 

Regards, 

Hemalatha M.