The thumbnail loading is slow

9 posts, 1 answers
  1. Jonathan
    Jonathan avatar
    26 posts
    Member since:
    Jan 2016

    Posted 19 Aug Link to this post

    Hi, I create a diagrampane. When display in the docking, the Diagram shows fast, but the thumbnail shows after a few seconds. Perhaps the diagram has many  items, have some method for display the two synchronously? 

    thanks

     

    Main code:

    RadDocumentPane diagramPane = new RadDocumentPane();

    MyUserControl diagramUserControl = new MydiagramUserControl(diagram , true);

    MyWindow.PaneGroup.Items.Add(diagramUserControl);

     

    MydiagramUserControl code:

    MydiagramUserControl(RadDiagram diagram, bool isNeedThumbnail){

        InitializeComponent();

        this.diagramPane.Children.Add(diagram);

        if(isNeedThumbnail){

            RadDiagramThumbnail diagramThumbnail = new RadDiagramThumbnail(){Diagram = diagram};

            diagramThumbnail.VerticalAlignment = VerticalAlignment.Bottom;

            diagramThumbnail.HorizontalAlignment = HorizontalAlignment.Left;

            diagramThumbnial.Width = 150;

            diagramThumbnail.Height = 100;

            this.diagramPane.Children.Add(diagramThumbnail);

        }

    }

  2. Dinko
    Admin
    Dinko avatar
    206 posts

    Posted 23 Aug Link to this post

    Hello Jonathan,

    When the diagram thumbnail is included there is a peculiarity which you should keep in mind. The thumbnail shows the diagram shapes with images which are created with the BitmapUtils.CreateWriteableBitmap() method. The method is called many times because the thumbnail control listens for changes in the visual children of the diagram. Each time an item is added in the diagram, the thumbnail stops the UI virtualization and makes a snapshot (and image) of all diagram elements. Then it enables the virtualization again.

    In a scenario with many elements, this is a quite slow operation. To improve the performance, you can set the IsAutoRefreshEnabled property of the thumbnail to false before you start adding new items in the diagram. This will prevent it from updating, and therefore creating new images. After the items are added you can call the RefreshThumbnail() method which will create snapshots of the diagram items and display them in the thumbnail.
    diagramThumbnail.IsAutoRefreshEnabled = false;
    this.diagramPane.Children.Add(diagramThumbnail);
    diagramThumbnail.RefreshThumbnail();

    Give it a try and let us know if it works for you.


    Regards,
    Dinko
    Telerik by Progress
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Jonathan
    Jonathan avatar
    26 posts
    Member since:
    Jan 2016

    Posted 27 Aug in reply to Dinko Link to this post

    hi, Dinko. Thanks for your reply. I use the code below:

    diagramThumbnail.IsAutoRefreshEnabled = false;
    this.diagramHostPanel.Children.Add(diagramThumbnail);
     diagramThumbnail.RefreshThumbnail();

    but when the pane display, the thumbnail is blank. And there are some shapes in the diagram, I don't know why the thumbnail contains no shapes?

  5. Dinko
    Admin
    Dinko avatar
    206 posts

    Posted 31 Aug Link to this post

    Hi Jonathan,

    We are not aware of such behavior and without your implementation, we cannot be sure what is causing it. This is why we would ask you to elaborate a bit more on your scenario by sending us a sample project demonstrating it so we can further test it on our side.

    Also, this is shot in the dark, but you can double check if the Diagram property of the RadDiagramThumbnail is set to your diagram before adding it to the diagramHostPanel as is in your case.

    We are looking forward to your answer.

    Regards,
    Dinko
    Telerik by Progress
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  6. Jonathan
    Jonathan avatar
    26 posts
    Member since:
    Jan 2016

    Posted 01 Sep in reply to Jonathan Link to this post

    Hello, the link below is the C# project, click the menu start -> open, to show the diagrampane, the thumbnail is slow, and why the diagram zoom in first then zoom out? How cancel this?  If not to access, tell me.Thanks!

     

    Link: http://pan.baidu.com/s/1pLCiHC3

    Extracted code: 134w

  7. Dinko
    Admin
    Dinko avatar
    206 posts

    Posted 02 Sep Link to this post

    Hi Jonathan,

    Unfortunately, I wasn't able to download the project as the system detect that the zip file contains malware software.

    I have prepared sample project attached to this reply. You can take a look and let me know what I need to change so it reproduces the described behavior in your last post.

    Regards,
    Dinko
    Telerik by Progress
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  8. Jonathan
    Jonathan avatar
    26 posts
    Member since:
    Jan 2016

    Posted 02 Sep in reply to Dinko Link to this post

    Hi, Dinko! The Change is:
    MainWindow.xaml: add a MouseLeftButtonUp event
    <TextBlock Text="Some simple text here" MouseLeftButtonUp="TextBlock_MouseLeftButtonUp"></TextBlock>
    Then add a UserControl that named UserControl1.
    And in it's xaml, remove the DesignWidth and DesignHeight, set  the default grid's x:Name= "diagramUserControl".
    In it's xaml.cs, add the code below:
     public UserControl1(RadDiagram diagram)
            {
                InitializeComponent();
                RadDiagramThumbnail diagramThumbnail = new RadDiagramThumbnail() { Diagram = diagram };
                diagramThumbnail.VerticalAlignment = VerticalAlignment.Bottom;
                diagramThumbnail.HorizontalAlignment = HorizontalAlignment.Left;
                diagramThumbnail.Width = 150;
                diagramThumbnail.Height = 100;
                this.diagramUserControl.Children.Add(diagram);
                diagramThumbnail.IsAutoRefreshEnabled = false;
                this.diagramUserControl.Children.Add(diagramThumbnail);
                diagramThumbnail.RefreshThumbnail();
            }
    The TextBlock_MouseLeftButtonUp event is:
     private void TextBlock_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
            {
                RadDiagram diagram = new RadDiagram();
                for (int i = 0; i < 100; i++)
                {
                    RadDiagramShape shape = new RadDiagramShape();
                    double x = rnd.Next(20, 900);
                    double y = rnd.Next(20, 900);
                    shape.Position = new Point(x, y);
                    diagram.AddShape(shape);
                }

                RadDocumentPane diagramPane = new RadDocumentPane();
                UserControl1 uc = new UserControl1(diagram);
                diagramPane.Content = uc;
                diagramPane.Header = "testthumbnail";
                this.radPaneGroup.AddItem(diagramPane, Telerik.Windows.Controls.Docking.DockPosition.Center);
            }
    Then, run the program to click the "Some simple text here" TextBlock, you'll see the result that the thumbnail is blank.And in UserControl1's constructed function, remove "diagramThumbnail.IsAutoRefreshEnabled = false;" and "diagramThumbnail.RefreshThumbnail();",the thumbnail's display is slow. I think I make something wrong,Thanks.
  9. Answer
    Martin
    Admin
    Martin avatar
    1101 posts

    Posted 07 Sep Link to this post

    Hello Jonathan,

    Thank you for the additional description. I tested the Dinko's project and reproduced the issue. It seems that when the RefreshThumbnail() method is called the diagram shapes are not yet generated and this is why there is nothing in the thumbnail. In other words the method is called too early.

    To resolve this you can subscribe for the diagram's Loaded event and call the method there.
    diagram.Loaded += (s, e) => { diagramThumbnail.RefreshThumbnail(); };

    I hope this helps.

    Regards,
    Martin
    Telerik by Progress
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  10. Jonathan
    Jonathan avatar
    26 posts
    Member since:
    Jan 2016

    Posted 07 Sep in reply to Martin Link to this post

    Thanks, Martin!

    The problem has solved!

Back to Top
UI for WPF is Visual Studio 2017 Ready