ListPicker expanded don't scroll correctly

4 posts, 1 answers
  1. Ralf
    Ralf avatar
    23 posts
    Member since:
    Oct 2012

    Posted 03 Oct 2012 Link to this post

    Hello,

    I'm using the ListPicker for a project and have see the following visual bug: The page has a ScrollViewer (vertical only) with a grid and some rows (heihgt=auto). In the last row I placed a ListPicker.
    If you open the ListPicker it shows the items in the expanded state but doesn't scroll so every item get's shown. If you scroll downwards to see all items. If you know open the ListPicker again it scrolls correctly.
    Can this UI annoyence get fixed?

    Thanks,
    Ralf
  2. Answer
    Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 05 Oct 2012 Link to this post

    Hello Ralf,

    The scenario you're describing can easily be achieved by programatically scrolling the ScrollViewer to its bottom. I assume you have a similar scenario:

    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <ScrollViewer x:Name="MainScrollViewer" VerticalScrollBarVisibility="Auto">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <TextBlock Text="Line #1" Grid.Row="0" />
                <TextBlock Text="Line #2" Grid.Row="1" />
                <TextBlock Text="Line #3" Grid.Row="2" />
                <TextBlock Text="Line #4" Grid.Row="3" />
                <TextBlock Text="Line #5" Grid.Row="4" />
                <TextBlock Text="Line #6" Grid.Row="5" />
                <TextBlock Text="Line #7" Grid.Row="6" />
                <TextBlock Text="Line #8" Grid.Row="7" />
                <telerikInput:RadListPicker x:Name="listPicker1" Grid.Row="8" InlineModeThreshold="10"
                        StateChanged="ListPicker1_StateChanged" />
            </Grid>
        </ScrollViewer>
    </Grid>

    You need to subscribe for the StateChanged event and implement the following logic there:

    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
            this.listPicker1.ItemsSource = Enumerable.Range(0, 10);
        }
     
        private void ListPicker1_StateChanged(object sender, Telerik.Windows.Controls.ListPickerStateChangedEventArgs e)
        {
            if (this.listPicker1.State == Telerik.Windows.Controls.ListPickerState.Expanded)
            {
                this.MainScrollViewer.EnsureVisible(this.listPicker1);
            }
        }
    }

    The EnsureVisible method is not part of the native ScrollViewer. It is just a handy extension method, described here: http://www.danielmoth.com/Blog/ScrollViewerEnsureVisible-For-Windows-Phone.aspx

    public static class ScrollViewerExtensions
    {
        public static void EnsureVisible(this ScrollViewer scrollViewer, UIElement uiElement)
        {
            scrollViewer.UpdateLayout();
     
            double maxScrollPos = scrollViewer.ExtentHeight - scrollViewer.ViewportHeight;
            double scrollPos = scrollViewer.VerticalOffset - scrollViewer.TransformToVisual(uiElement).Transform(new Point(0, 0)).Y;
     
            if (scrollPos > maxScrollPos)
            {
                scrollPos = maxScrollPos;
            }
            else if (scrollPos < 0)
            {
                scrollPos = 0;
            }
     
            scrollViewer.ScrollToVerticalOffset(scrollPos);
        }
    }

    Give it a try and let me know how it works. I'd be glad to further assist you. Kind regards,
    Kiril Stanoev
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
  4. Ralf
    Ralf avatar
    23 posts
    Member since:
    Oct 2012

    Posted 06 Oct 2012 Link to this post

    Thanks for the reply and the workaround solves the scrolling problem but this doesn't work really smooth. Then the workaround runs you'll see for a quick moment that the UI springs to show the complete expanded listpicker.

    Maybe you'll find a way to ensure the correct scrolling because on the second run everything works fine - without or with the workaround.



    But the workaround keeps in my solution and is very helpful.



    Thanks for your great support!
  5. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 09 Oct 2012 Link to this post

    Hi Ralf,

    In that case, try calling EnsureVisible in the SizeChanged event handler of RadListPicker:

    <telerikInput:RadListPicker x:Name="listPicker1" Grid.Row="8" InlineModeThreshold="10" SizeChanged="ListPicker1_SizeChanged"/>
     
    private void ListPicker1_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        this.MainScrollViewer.EnsureVisible(this.listPicker1);
    }

    Give it a try and let me know how it goes.
    All the best,
    Kiril Stanoev
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top