ListPicker size

[Joe]

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

[Yana]

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

[Joe]

Thanks.  Exactly what I was looking for.

[Francis]

Hi,

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

 

 

[Yana]

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

[Francis]

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>

[Francis]

forgot to atatch screenshots

[Yana]

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

[Francis]

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

 

 

[Yana]

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