This is a migrated thread and some comments may be shown as answers.

ListPicker size

9 Answers 122 Views
ListPicker
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 1
Veteran
Joe asked on 22 Oct 2020, 04:56 PM

I have a small list, so would like to decrease the height of the ListPicker popup.  Is there a way to control this height?

Thanks

9 Answers, 1 is accepted

Sort by
0
Accepted
Yana
Telerik team
answered on 23 Oct 2020, 04:45 AM

Hi Joe,

You can control the popup size through the PopupViewStyle property of the PickerPopupSelectorSettings class that need to be assigned to the SelectorSettings of RadListPicker. 

First, you need to create a Style that targets PickerPopupContentView control:

<Style TargetType="telerikInput:PickerPopupContentView" x:Key="popupViewStyle">
	<Setter Property="BackgroundColor" Value="White"/>
	<Setter Property="WidthRequest" Value="270"/>
	<Setter Property="HeightRequest" Value="200" />
</Style>

And assign it to the ListPicker:

<telerikInput:RadListPicker ItemsSource="{Binding Items}" 
							DisplayMemberPath="Name">	
	<telerikInput:RadListPicker.SelectorSettings>
		<telerikInput:PickerPopupSelectorSettings PopupViewStyle="{StaticResource popupViewStyle}" />												
	</telerikInput:RadListPicker.SelectorSettings>
</telerikInput:RadListPicker>

For detailed information on the customizations options of RadListPicker check its Styling topic.

Regards,
Yana
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Joe
Top achievements
Rank 1
Veteran
answered on 26 Oct 2020, 09:02 PM
Thanks.  Exactly what I was looking for.
0
Francis
Top achievements
Rank 1
answered on 07 Dec 2020, 09:50 PM

Hi,

I still get a empty first row with small collections ( 3 items in this case). How do I remove that band?  

 

 

0
Yana
Telerik team
answered on 08 Dec 2020, 08:42 AM

Hello Francis,

You can decrease the overall height of the popup through the PopupViewStyle property of the PickerPopupSelectorSettings as shown in my previous post - the popup has a static height and does not take into account how many items will be shown.  If you'd like to avoid empty spaces, you'd need to adjust the HeightRequest property accordingly.

If this does not help, please send me more details on the concrete setup you have (with code snippets), so I can provide more precise reply.

Regards,
Yana
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Francis
Top achievements
Rank 1
answered on 09 Dec 2020, 04:31 PM
Hi Yana,

The HeightRequest does not affect the empty space much. See attached results for HeightRequest = 370 and HeightRequest = 310. I'd have to set it to 170 to not have any blank space, but then there is only enough space to show one item. I also tried playing with VerticalOptions but that had no effect.

            <Style TargetType="telerikInput:PickerPopupContentView" x:Key="PopupViewStyle">
                <Setter Property="BackgroundColor" Value="White"/>
                <Setter Property="VerticalOptions"  Value="StartAndExpand" />
                <Setter Property="WidthRequest" Value="270"/>
                <Setter Property="HeightRequest" Value="370" />
                <Setter Property="CornerRadius" Value="8"/> 
            </Style>
0
Francis
Top achievements
Rank 1
answered on 09 Dec 2020, 04:33 PM
forgot to atatch screenshots
0
Yana
Telerik team
answered on 10 Dec 2020, 03:10 PM

Hi Francis,

Thank you for sending the screenshots and the snippet, now I see what you mean with empty space.

In general, the spinner always shows the selected item in the middle and in case the first item is the selected item (default), the empty space appears.

To resolve it you can set the spinner as looping ( just set IsLooping property of the ListPicker to true) - in this case the last items will be displayed in the empty space.

Please give this a try and let me know how it goes.

    Regards,
    Yana
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

    0
    Francis
    Top achievements
    Rank 1
    answered on 10 Dec 2020, 03:29 PM

    It looks confusing. It looks like your devs only tested with large collections. A 3 item collection looks bad in the control.

     

     

    0
    Yana
    Telerik team
    answered on 11 Dec 2020, 08:03 AM

    Hello Francis,

    I see what you mean, still, our design is inspired by the spinner functionality of the iOS Picker control - the popup shows a scrollable list of distinct values users can choose from and the selected item is vertically centered. This leads to the empty space when the selected item is the first one and the list is not set as looping, the same can be observed with Xamarin.Forms Picker on iOS:

    In general, according to the iOS interface guidelines, such approach is suitable for medium-to-long lists of items.  For shorter lists you can use our RadComboBox control which shows the items inside a dropdown. 

    The other option is to utilize RadTemplatedPicker control and and add a list of items (for example RadListView) inside its SelectorTemplate.

    I hope I managed to address the concerns regarding RadListPicker.  I remain at your disposal if any additional questions pop up.

    Regards,
    Yana
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

    Tags
    ListPicker
    Asked by
    Joe
    Top achievements
    Rank 1
    Veteran
    Answers by
    Yana
    Telerik team
    Joe
    Top achievements
    Rank 1
    Veteran
    Francis
    Top achievements
    Rank 1
    Share this question
    or