Different behavior between Desktop preview and iOS device preview which a scroll view in a page control

How-to Discussions
1

I have a page cotrol view and a scollview in each page, code as following:

         <PageControl>
             <Panel Background="#F8DE97" >
                 <DockPanel>
                     <ScrollView Dock="Bottom" AllowedScrollDirections="Horizontal">
                         <StackPanel Orientation="Horizontal" ItemSpacing="2" >
                             <Panel Height="337" Width="188" Background="#fff" ></Panel>
                             <Panel Height="337" Width="188" Background="#fff" ></Panel>
                             <Panel Height="337" Width="188" Background="#fff" ></Panel>
                         </StackPanel>
                     </ScrollView>
                 </DockPanel>
             </Panel>
             <Panel Background="#533AC3" ></Panel>
             <Panel Background="#F485B8" ></Panel>
             <Panel Background="#E45E57" ></Panel>
         </PageControl>

What I am expecting: When I swipe with in the scroll view it should scroll the panels horizonally, and when I swipe with the rest of page view, it should navigate to the next page.

This works as expected on the local preview, but with iOS device preview no matter where I’m interacting with, it just navigate to next page.

Can anyone give me some hint, how can I fix this problem?

Thanks.

2

That’s strange, it works exactly as intended in both local and iOS preview when I test that code. ( tested with Fuse 0.12.3, iPhone 5s, iOS 8.1.3)

Which version of Fuse are you using? And which iOS device and OS version are you testing on?

3

Hi Remi, Thanks for the reply. I’ve using Fuse 0.11.1 and iOS 9.3.2 on iPhone6 Plus I’ll update my Fuse version and try once more.

4

After some more discussion on slack it turns out that the real issue was:

  • The app used NativeWithFallback-theme (which explained why the behaviour was different between local and iOS preview)
  • We appear to have some issues with layer ordering inside NativeViewHost. A separate issue will be made for this.

However, the actual bug was possible to avoid by reordering the UX from:

<App Theme="NativeWithFallback">
    <Panel ux:Name="main">
         <DockPanel>
             <StackPanel Dock="Top" Height="64" Background="#60F09D" >
                 <StatusBarBackground />
                 <Rectangle ux:Name="navBar" >
                     <Text FontSize="17" Alignment="Center">Haze</Text>
                     <Rectangle ux:Name="menuBtn" Background="#888" Height="30" Width="30" Alignment="Left" Margin="10,0" />
                 </Rectangle>
             </StackPanel>
         </DockPanel>
         <PageControl>
             <Panel Background="#F8DE97" >
                 <DockPanel>
                     <ScrollView Dock="Bottom" AllowedScrollDirections="Horizontal">
                         <StackPanel Orientation="Horizontal" ItemSpacing="2" >
                             <Panel Height="337" Width="188" Background="#fff" ></Panel>
                             <Panel Height="337" Width="188" Background="#fff" ></Panel>
                             <Panel Height="337" Width="188" Background="#fff" ></Panel>
                         </StackPanel>
                     </ScrollView>
                 </DockPanel>
             </Panel>
             <Panel Background="#533AC3" ></Panel>
             <Panel Background="#F485B8" ></Panel>
             <Panel Background="#E45E57" ></Panel>
         </PageControl>
    </Panel>
</App>

to

<App Theme="NativeWithFallback">
     <DockPanel ux:Name="main">
         <StackPanel Dock="Top" Height="64" Background="#60F09D" >
             <StatusBarBackground />
             <Rectangle ux:Name="navBar" >
                 <Text FontSize="17" Alignment="Center">Haze</Text>
                 <Rectangle ux:Name="menuBtn" Background="#888" Height="30" Width="30" Alignment="Left" Margin="10,0" />
             </Rectangle>
         </StackPanel>

         <PageControl>
             <Panel Background="#F8DE97" >
                 <DockPanel>
                     <ScrollView Dock="Bottom" AllowedScrollDirections="Horizontal">
                         <StackPanel Orientation="Horizontal" ItemSpacing="2" >
                             <Panel Height="337" Width="188" Background="#fff" ></Panel>
                             <Panel Height="337" Width="188" Background="#fff" ></Panel>
                             <Panel Height="337" Width="188" Background="#fff" ></Panel>
                         </StackPanel>
                     </ScrollView>
                 </DockPanel>
             </Panel>
             <Panel Background="#533AC3" ></Panel>
             <Panel Background="#F485B8" ></Panel>
             <Panel Background="#E45E57" ></Panel>
         </PageControl>
     </DockPanel>
</App>