This question is locked. New answers and comments are not allowed.
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
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
3 Answers, 1 is accepted
0
Accepted
Hello Ralf,
You need to subscribe for the StateChanged event and implement the following logic there:
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
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
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.
0
Ralf
Top achievements
Rank 1
Rank 1
answered on 06 Oct 2012, 08:35 PM
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!
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!
0
Hi Ralf,
Give it a try and let me know how it goes.
All the best,
Kiril Stanoev
the Telerik team
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.