Linear Navigation slow ?

How-to Discussions
1

Hi guys i built a little UI using linear navigation to swipe text from up to down, but its a bit slow, do linear navigation is adapted to what i want to build ? i yes , how can i have my linear nav to go faster ?

this is my code.

<Panel ux:Class="SituationPanel">
  <Rectangle ux:Name="OverlaySituation"/>
  <string ux:Property="SituationText"/>
  <EnteringAnimation Scale="0.19">
      <Move Y="1" RelativeTo="Size" />
  </EnteringAnimation>
  <ExitingAnimation Scale="0.03">
      <Move RelativeTo="Size" Easing="QuadraticOut" Y="-1" Duration="1"/>
      <Change  OverlaySituation.Opacity="0.1" Easing="QuadraticInOut"/>
      <Scale Factor="0.04" Duration="1"  Easing="QuadraticInOut"/>
      <Change TextSituation.Opacity="0.3"/>
  </ExitingAnimation>
  <DockPanel Height="40">
    <Text Value="{Property this.SituationText}" ux:Name="TextSituation" Padding="10" FontSize="17" Alignment="Center" TextAlignment="Center"/>
  </DockPanel>
</Panel>


      <Panel ClipToBounds="true">
        <LinearNavigation>
            <NavigationMotion  GotoEasing="CircularOut" />
        </LinearNavigation>
        <SwipeNavigate ForwardDirection="Down" SwipeDirection="Down"   />
        <SituationPanel SituationText="Etudiant"/>
        <SituationPanel SituationText="Femme marier"/>
        <SituationPanel SituationText="Femme au foyer"/>
        <SituationPanel SituationText="Etudiant"/>
        <SituationPanel SituationText="Femme marier"/>
        <SituationPanel SituationText="Femme au foyer"/>
        <SituationPanel SituationText="Etudiant"/>
        <SituationPanel SituationText="Femme marier"/>
        <SituationPanel SituationText="Femme au foyer"/>
      </Panel>

Regards

2

Hi prince,

I gave your code a go and it didn’t feel slow on my machine. Have you tried on only in preview, or also as a final build on a device? - there usually is a big difference.

That said, I see a couple things that might cause performance issues. The foremost is how you animate opacities on both the Rectangle and Text elements in all 9 items.

While that in itself should not be a problem, because of the Scale you’re using, there are 9 of those Rectangles and 9 Texts and they all animate their opacity simultaneously, layered one on top of other. To me that sounds like a lot to calculate.

I would suggest you find another way to achieve the visuals you’re after, without animating the opacity of overlapping elements.

3

Thanx uldis,

Do i have an another way to achieve this visual effect using an another fuse class like page control?
i just want a simple thing who do the job.

Regards

4

PageControl is not the issue. The issue is the overlapping of elements, all of which have to animate at the same time. Instead of changing opacities, you could simply change the color of Text elements.

Take a look at the Weather app example, which seems to be using a similar swiping pattern to what you want to achieve.

5

This could be a GPU fill rate problem (too many pixels with opacity), try setting Alignment="TopLeft" or Alignment="Center" (depending on what you want) to avoid having to blend LARGE empty text boxes.