Prevent diagonal scroll in nested flipview - scroll

The code looks like this:
<FlipView>
<FlipViewItem>
<Grid Height="400" Background="Blue"/>
</FlipViewItem>
<FlipViewItem>
<Grid>
<FlipView x:Name="DigestFlipView" Style="{StaticResource DigestViewStyle}"/>
</Grid>
</FlipViewItem>
</FlipView>
And then in my DigestViewStype I have made it vertical as follows:
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<ItemsStackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</Setter.Value>
What I want is, when swipe is vertical, only inner FlipView should kick in. Also, when swipe is horizontal, only outer FlipView should kick in.
I get the desired behavior if I replace inner FlipView with a ListView. ListView scrolls for vertical swipes and FlipView for horizontal ones. I have tried playing with templates with no luck. Is there a way to achieve what I need with FlipViews?

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

Weird behaivior of ProgressBar in WP7

So, I'm tryging to use a progress bar in my WP7 Panorama aplication.
There is one page, that is downloadidng data from the web, so I want to indicate that my App is doing something with ProgressBar
<controls:PanoramaItem Header="news">
<Popup Name="myWeatherPopup" IsOpen="False" Width="404" Height="Auto" Margin="0,136,4,293">
<StackPanel>
<ProgressBar Height="Auto" IsIndeterminate="True" Width="400" />
<TextBlock Text="Loading" HorizontalAlignment="Center" Foreground="Gray" />
</StackPanel>
</Popup>
</controls:PanoramaItem>
It basically works as it should. However, there is one tiny (and anoying bug).
The first... run (?) of the dots appears on every panorama item, just under header. After that, it returns on its normal position under news item.
The same thing happens on emulator and Lumia 800.
Image
Have you tried without the Popup, by just setting the Visibility property on the StackPanel?

How to make a scrollviewer gain focus when selected

I have a project where I have multiple scrollviews in one:
I can scroll up and down through a single item, and also through multiple items horizontally.
Normally, the webview is not hittestvisible.
Moving horizontally works fine, but when I scroll down, I give focus and hittestvisibility to the single item, but it won't scroll down. Only when I scroll down the second time, it will scroll, I think because when the ManipulationStartedevent was fired, it was caught by the scrollview, which had focus at the time, and only later the webview takes the focus, therefore, it has no started position. Is there a workaround for this problem?
<ScrollViewer x:Name="Scroller"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Disabled"
ManipulationMode="Control"
Grid.Row="1" Grid.RowSpan="2" >
<StackPanel Name="WebScrollView" Orientation="Horizontal" >
<UserControl Name="LeftContentControl" MinWidth="480" />
<UserControl Name="MiddleContentControl" MinWidth="480" />
<UserControl Name="RightContentControl" MinWidth="480" />
</StackPanel>
</ScrollViewer>
So, Left, Middle and Right are the three controls which will hold the webviews as their content. When scrolled to the left( for example ), the left content is placed over the middle content, and the middle content is set into view again, so it seems like an endless list of webviews, but really are three.
I use a mediator to achieve the animation of the webviews.
Thanks in advance.
GeekPeek

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.

Resources