ListPicker size

10 posts, 1 answers
  1. Joe
    Joe avatar
    8 posts
    Member since:
    May 2019

    Posted 22 Oct 2020 Link to this post

    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

  2. Answer
    Yana
    Admin
    Yana avatar
    5015 posts

    Posted 22 Oct 2020 Link to this post

    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/.

  3. Joe
    Joe avatar
    8 posts
    Member since:
    May 2019

    Posted 26 Oct 2020 in reply to Yana Link to this post

    Thanks.  Exactly what I was looking for.
  4. Francis
    Francis avatar
    8 posts
    Member since:
    Apr 2019

    Posted 07 Dec 2020 Link to this post

    Hi,

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

     

     

  5. Yana
    Admin
    Yana avatar
    5015 posts

    Posted 08 Dec 2020 Link to this post

    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/.

  6. Francis
    Francis avatar
    8 posts
    Member since:
    Apr 2019

    Posted 09 Dec 2020 in reply to Yana Link to this post

    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>
  7. Francis
    Francis avatar
    8 posts
    Member since:
    Apr 2019

    Posted 09 Dec 2020 Link to this post

    forgot to atatch screenshots
  8. Yana
    Admin
    Yana avatar
    5015 posts

    Posted 10 Dec 2020 Link to this post

    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/.

    • Francis
      Francis avatar
      8 posts
      Member since:
      Apr 2019

      Posted 10 Dec 2020 in reply to Yana Link to this post

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

       

       

    • Yana
      Admin
      Yana avatar
      5015 posts

      Posted 11 Dec 2020 Link to this post

      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/.

    Back to Top