How to control the scroll-position of a scrollviewer in windows phone - windows-phone-7

I am using a scrollviewer to show contents, and added a "DoubleTap" event to the scrollviewer. In the doubleTap event I want to make the scrollviewer automatically scroll up to the top of the scrollviewer, but I can't find any property to control the scrollviewer. any thoughts?
Thanks in advance.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,0,0">
<ScrollViewer x:Name="scrollViewer2" Height="auto">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener DoubleTap="GestureListener_DoubleTap"/>
</toolkit:GestureService.GestureListener>
<StackPanel x:Name="stackPanel2" Height="auto">
<!--contents-->
</StackPanel>
</ScrollViewer>
</Grid>

You don't have properties, but you have two methods for this: ScrollToVerticalOffset (to scroll vertically) and ScrollToHorizontalOffset (to scroll horizontally).
So in your case, this code should do the trick:
this.scrollViewer2.ScrollToVerticalOffset(0);

Also note that it is going to be obsolete or maybe unavailable after 8.1.
Use
this.scrollViewer2.ChangeView(0, 0, 1);
instead.

You can use this code:
this.scrollViewer2.ChangeView(null, 0, null);

Related

long list selector not scrolling properly

My LongListSelector is not scrolling properly. When I scroll the list, it automatically reaching back to the top with its rubber band effect.
xaml is
<Grid x:Name="ContentPanel" Height="2000">
<toolkit:LongListSelector x:Name="ItemList" DataContext="Item" IsFlatList="True" StretchingBottom="LoadMoreData">
<toolkit:LongListSelector.ItemTemplate>
<DataTemplate>
<Grid Tag="{Binding ItemID}" Loaded="Grid_Loaded" MaxWidth="361" MaxHeight="100">
// some xaml code
</DataTemplate>
</toolkit:LongListSelector.ItemTemplate>
</toolkit:LongListSelector>
</Grid>
can anyone help me ?
thanku
It's not scrolling correctly because you set the Height of the parent Grid to 2000. This causes the LongListSelector to take as much space as it may need as long as it's less than 2000 and only then starts scrolling. Considering you only have 800 (or a bit more) of height, you don't see the scrolling properly.

LongListSelector performance is very bad when enclosed in ScrollViewer

I have a UserControl that needs to contain a bunch of controls on top and a LongListSelector below them. Total height of the whole UserControl may (and almost always will) exceed the screen height and in that case a whole UserControl must be scrollable.
My current setup is as follows:
<staff:UserContentControl
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:MyApp.Controls"
xmlns:staff="clr-namespace:MyApp.Helpers"
x:Class="MyApp.Controls.RemoteHomePage"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}">
<ScrollViewer>
<ScrollViewer.Content>
<StackPanel>
<TextBlock Txt="Text1" Sign="#" />
<TextBlock Txt="Text2" Sign="#" />
<controls:Divider />
<TextBlock Txt="Text3" Sign="~" />
<TextBlock Txt="Text4" Sign="~" />
<controls:TextDivider Text="Divider text" />
<phone:LongListSelector ItemsSource="{Binding Items}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}" />
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</StackPanel>
</ScrollViewer.Content>
</ScrollViewer>
</staff:UserContentControl>
This solution satisfies my needs but also there's a big problem: currently LongListSelector takes really a lot of time to load when amount of items it contains is reasonably large. It takes 8 seconds to process 300 items and during that time the whole UI is blocked. If I remove everything but LongListSelector, like so:
<staff:UserContentControl
...>
<phone:LongListSelector ItemsSource="{Binding Items}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}" />
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</staff:UserContentControl>
then LongListSelector loads almost immediately even with significantly larger amount of items. But obviously I need those other controls above it so the question is what can I do solve this issue?
(Also related question: I was worried that LongListSelector inside ScrollViewer could cause double scrolling or something like that but eventually everything turned out just fine in this regard. I'm not sure if LongListSelector somehow knows that it is inside other scrollable control or if something else happens that I'm not aware of. Some explainantion why it works fine, although very slow, would be much appreciated.)
Don't use scroll viewer since it will make the longlistselector think it has an infinitely tall screen available and render all its items.
Instead to solve your usecase use the Header and Footer properties to add data above or below your list items.
You can't force ScrollViewer to virtualize LongListSelector items.
So you need to mimic it behaviour by LongListSelector only.
Make the first item contains all you required elements form StackPanel (1'st itemtemplate). And other elements will be basic LongListSelector elements (2'nd itemtemplate).
Here is explanation how to set different templates to the items: Styling a selected ListViewItem in Windows 8 CP

WP7 - ListPicker in StackPanel in ScrollViewer

Just started with developing for WP7 and came across the following. I have a pivot application with a few pivotitems. On the first pivotitem (see code below) I want to be able to adjust a lot of settings. For this question all items to be set are called 'TextBox' and the choice in the ListPicker is either A,B or C.
Now if I do NOT use the ScrollViewer and I tap any of the listpickers I get to see all three options BUT I can not scroll through all listpickers.
If I DO use the ScrollViewer, I CAN see all listpickers but only the top one (that's visible) will expand and give me the options A,B and C, they others stay collapsed.
How can I get every listpicker to expand and show me the avaiable options AND be able to scroll to every listpicker on the page?
PS In code below copy the stackpanel between start and end about 15 times.
Thanks in advance for any help!
<controls:PivotItem Header="blabla">
<ScrollViewer>
<StackPanel Margin="0,0,36,0" VerticalAlignment="Top" d:LayoutOverrides="Width">
// start
<StackPanel Orientation="Horizontal">
<TextBlock TextWrapping="Wrap" Text="TextBox" Width="80" TextAlignment="Right" Margin="10,22,20,0" HorizontalAlignment="Right" VerticalAlignment="Top" />
<toolkit:ListPicker Margin="0" Width="275">
<toolkit:ListPickerItem Content="A"/>
<toolkit:ListPickerItem Content="B"/>
<toolkit:ListPickerItem Content="C"/>
</toolkit:ListPicker>
</StackPanel>
// end - copy/paste code code between start and end about 15 times right here
</StackPanel>
</ScrollViewer>
</controls:PivotItem>
This is, apparently, a common issue with Listpicker and ScrollViewer. You can find a workaround here
Should anybody stumble upon this, this has been fixed since the november 2011 release of the wP7 silverlight toolkit.

Windows Phone 7 dev: How to autoscroll textblock's text Horizontally

I have this textblock <TextBlock Text="{Binding Name}" TextWrapping="NoWrap" Margin="12,-3,12,0" FontSize="27"/> , and I want to tell me a way in order to text, scrolled automatically when it is longer than screen.
Wrap it in a ScrollViewer
<ScrollViewer>
<TextBlock Text="{Binding Name}" TextWrapping="NoWrap" Margin="12,-3,12,0" FontSize="27"/>
</ScrollViewer>
For those who still interest and wants to do one for yourself, please take a look at my article on How to create marquee TextBlock on Windows Phone
It uses Storyboard to perform animation so that all are handled by GPU
I agree that it isn't a good practice, but look at my answer if you really need it.

WP7 - Problem with DataTemplate on emulator but not On Blend

This is the code:
<ItemsControl x:Name="ContactsControl" ItemsSource="{Binding Contacts}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding ElementName=ContactsControl, Path=DataContext.PageName}" />
</Grid>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
On the TextBlock I want to get date from the ItemsControl data context, so I use ElementName and in the 'Path' I use Path=DataContext.PageName.
So, On Blend I can see the data on the TextBlock as it should be, but when I run the emulator I cant see the data...
Why is it?
I'm working with VS2010 and Blend 4.
Thanks.
You are binding an items control to a list of Contacts. Traditionally you will then bind the textblock to a property of the class contained in the list. Why are you binding to another control and then bringing datacontext into the equation? Doesn't seem like something you normally do with a list.

Resources