locked
Slow Page loading of large Canvas with hundreds of Elements RRS feed

  • Question

  • Hello

    I'm porting my app from Silverlight to Windows 8 c# store App.

    One of the App Pages contains Canvas Element with ~800 Path Elements.

    In Silverlight the Page Loading duration is in milliseconds in Windows 8 it takes nearly 10 seconds.

    During the Page loading in Windows 8 the UI complete freezes.

    Is it possible to load the page asynchronously so that UI doesn't freeze?

    Thanks

    Peter

    Tuesday, October 15, 2013 3:54 PM

All replies

  • Have you run any analysis on this to determine why it is so slow?  Does the release build help?

    Jeff Sanders (MSFT)

    @jsandersrocks - Windows Store Developer Solutions @WSDevSol
    Getting Started With Windows Azure Mobile Services development? Click here
    Getting Started With Windows Phone or Store app development? Click here
    My Team Blog: Windows Store & Phone Developer Solutions
    My Blog: Http Client Protocol Issues (and other fun stuff I support)

    Wednesday, October 16, 2013 12:01 PM
    Moderator
  • Hi Jeff

    There is no big difference in Page loading Time between Release and Debug build.

    I will try to run an analysis and post the observations here.

    peter

    Wednesday, October 16, 2013 4:14 PM
  • 10 seconds sounds like a long time. Have you profiled to know where this is coming from? Where is the data coming from: is it generated within the app, read from the disk or network, etc.? Knowing where the time is going will let you know where to optimize.

    As for loading asynchronously, these need to be created on the UI thread so you can't push the loading onto a background task. Instead, you can batch the element creation and loading so the UI has a chance to respond in the middle.

    Something like (untested)

    Task<bool> LoadAFewAsync()
    {
        // Load a few paths
        // return true if there are more, else false.
    }
    
    async void LoadPaths()
    {
        VisualStateManager::GoToState(this,"Loading",true);
    
        while (await LoadAFewAsync())
        {
            // just looping
        }
        
        VisualStateManager::GoToState(this,"Ready",true);
    }

    Wednesday, October 16, 2013 5:32 PM
    Moderator
  • Hi
    I tried to collect some analysis.
    Profiler shows that in my UseCase the Hot Path is in Windows.UI.Xaml.dll that calls d3d11.dll

    Page.xaml

    <Grid>
     <ScrollViewer x:name="scrollViewer" ZoomMode="Enabled" />
    </Grid>
    Page.xaml.cs
    Page_ctor()
    {
     // Create Collapsed Hidden Frame and add it to Layout Tree
    
    }
    
    Page_LoadState(Object navParam, Dictionary<string, Object> pageState)
    {
      // Navigate the Hidden Frame to load big canvas
    
      // Once the canvas is loaded remove it from Hidden Frame and add it to the page
      
      this.scrollViewer.Content = bigCanvasFromHiddenPage; // typeof Canvas
    }

    The Page_LoadState methods completes in 0.28 ms
    I suspect that when the Canvas gets inserted into Page it triggers the engine Layout pass and the Layout takes several seconds to complete.

    Thursday, October 17, 2013 4:21 PM
  • I have some anecdotal information, where I did something similar and knowing the differences may help. This was a fairly complex patterned page background built with XAML and with many Paths. I my case this was implemented as a user control, which was placed within a grid on the page. In this case there was no perceivable delay to load a page. (However I have a similar scenario, where a runtime method takes 10ms to execute but the layout takes longer than I would really like to see in a different app). You can see the visualization built from XAML on the first page here for the Russian language version: http://apps.microsoft.com/windows/ru-ru/app/newsnet/824a2336-71f2-4128-9aad-2ed82f99f74d (It has around 500 paths)
    • Edited by Ben - GGT Thursday, October 17, 2013 7:16 PM example
    Thursday, October 17, 2013 6:58 PM