HierarchicalNavigation makes pages behave strangely

Bug Reports
1

Somehow, when I use HierarchicalNavigation it messes up the font and positions on the pages.
It’s a bit hard to describe so I’ll attach my current project so you can try it out.

Steps for recreating the behaviour:

  1. Load the app
  2. Click “TMP Menu”
  3. Here you can already tell that the text saying “Menu” is in the wrong font
  4. Click the cogwheel (Settings)
  5. Here, all the text is in the wrong font
  6. Click the cogwheel again (Back)
  7. Click the three lines (Back)
  8. Click the “TMP Menu”
  9. Click the cogwheel
  10. Now all the switches are gone, the info button in the bottom right corner is on the way out of the screen and the menu option texts are no longer in the same place either.

Project Files

Edit:
When I export the app the screen looks completely black, while the preview in Fuse Tools looks just fine.
Uploaded export: http://zignebeta.andersware.com

2

Is this being looked into or do you need any more info?

3

Are you exporting to WebGL? How does the app work when exported to other targets?

4

It fails when attempting to export to WebGL.
I was going to test out exporting for android, but when attempting to download Ant through the internal SDK-downloader I’m getting the error 404 Not found.

Edit: I was able to work around the 404 error by:

  1. Downloading the Ant files (http://ant.apache.org/bindownload.cgi)
  2. Extracting the contents of the “apache-ant-1.9.5-bin” folder (meaning the bin folder, etc.), to: “C:\ProgramData\Uno\SDKs\Ant”
  3. Deleting the .progress file already existing in the folder

Exporting to DotNetExe does work, but everything looks blurry. (Might be because of Windows 4k scaling, as I’m currently on a 4k display, I will test on a different screen tomorow).
Exporting to Android and running run.bat with an AVD open gives me the following error:

# Trying to uninstall existing version of APK
Failure [DELETE_FAILED_INTERNAL_ERROR]

# Installing new version of APK
118 KB/s (3647377 bytes in 29.984s)
pkg: /data/local/tmp/Zigne-debug.apk
Failure [INSTALL_FAILED_NO_MATCHING_ABIS]

# Starting APK on device
Starting: Intent { act=android.intent.action.MAIN cat=[d] flg=0x10200000 cmp=com.Zigne/.Zigne }
Error type 3
Error: Activity class {com.Zigne/com.Zigne.Zigne} does not exist.


Press Enter or Esc to close console...

file
q8cL6vKIl559-legacy-files-XLRrW6QToQP07YzL-evo_RoKXjgDI4r-A2C5EcyM2.PNG1310×753

5

This is the simplest example I can come up with to reproduce the switch and button problem mentioned in the OP:
To replicate behaviour: Go all the way forwards using NavigateTo, go all the way back using GoBack and go all the way forward again.

<App Theme="Basic" ClearColor="#eeeeeeff">
    <Panel>
        <HierarchicalNavigation ux:Name="_nav" Active="ScreenA" />
        <Style>
            <Page ux:Cascade="false">
                <EnteringAnimation>
                    <Move X="-1" RelativeTo="Size" />
                </EnteringAnimation>
                <ExitingAnimation>
                    <Move X="1" RelativeTo="Size" />
                </ExitingAnimation>
            </Page>
        </Style>
        <Page ux:Name="ScreenA">
            <DockPanel>
                <StatusBarBackground DockPanel.Dock="Top" />
                <StackPanel>
                    <Text FontSize="30">Screen A</Text>
                    <Button Text="Use NavigateTo">
                        <Clicked>
                            <NavigateTo Context="_nav" Target="ScreenB" />
                        </Clicked>
                    </Button>
                    <Switch Alignment="Left" />
                </StackPanel>
            </DockPanel>
        </Page>

        <Page ux:Name="ScreenB">
            <DockPanel>
                <StatusBarBackground DockPanel.Dock="Top" />
                <StackPanel>
                    <Text FontSize="30">Screen B</Text>
                    <Button Text="Use NavigateTo">
                        <Clicked>
                            <NavigateTo Context="_nav" Target="ScreenC" />
                        </Clicked>
                    </Button>
                    <Button Text="Use GoBack">
                        <Clicked>
                            <GoBack />
                        </Clicked>
                    </Button>
                    <Switch Alignment="Left" />
                </StackPanel>
            </DockPanel>
        </Page>

        <Page ux:Name="ScreenC">
            <DockPanel>
                <StatusBarBackground DockPanel.Dock="Top" />
                <StackPanel>
                    <Text FontSize="30">Screen C</Text>
                    <Button Text="Use GoBack">
                        <Clicked>
                            <GoBack />
                        </Clicked>
                    </Button>
                    <Switch Alignment="Left" />
                </StackPanel>
            </DockPanel>
        </Page>
    </Panel>
</App>
6

Any more info I can submit to make this easier to look into?

7

I’m looking into this problem now. I can confirm an unusual behavour of the buttons and bad rendering when you do as described.

8

I’ve identified and corrected to source of the problem. It will be made available in an upcoming release. There is unfortunately no workaround in the meantime, unless you can use LinearNavigation instead.