This is a migrated thread and some comments may be shown as answers.

The thumbnail loading is slow

8 Answers 212 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Jonathan
Top achievements
Rank 1
Jonathan asked on 19 Aug 2016, 06:07 AM

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);

    }

}

8 Answers, 1 is accepted

Sort by
0
Dinko | Tech Support Engineer
Telerik team
answered on 23 Aug 2016, 11:17 AM
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.
0
Jonathan
Top achievements
Rank 1
answered on 27 Aug 2016, 10:16 AM

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?

0
Dinko | Tech Support Engineer
Telerik team
answered on 31 Aug 2016, 11:09 AM
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.
0
Jonathan
Top achievements
Rank 1
answered on 01 Sep 2016, 09:38 AM

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

0
Dinko | Tech Support Engineer
Telerik team
answered on 02 Sep 2016, 09:18 AM
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.
0
Jonathan
Top achievements
Rank 1
answered on 02 Sep 2016, 06:07 PM
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.
0
Accepted
Martin Ivanov
Telerik team
answered on 07 Sep 2016, 09:20 AM
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.
0
Jonathan
Top achievements
Rank 1
answered on 07 Sep 2016, 10:35 AM

Thanks, Martin!

The problem has solved!

Tags
Diagram
Asked by
Jonathan
Top achievements
Rank 1
Answers by
Dinko | Tech Support Engineer
Telerik team
Jonathan
Top achievements
Rank 1
Martin Ivanov
Telerik team
Share this question
or