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

Adding many shaps are slowly

7 Answers 54 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Maite
Top achievements
Rank 1
Maite asked on 17 Jul 2014, 09:36 AM
Hi, 

I have a very big problem: when I add many shapes (>100), the paint is very slowly. First, I calculate the position in background (for put the shapes one next to each other) and I paint (diagram.AddShape()) after.

Can somebody help me?

Thanks. 

7 Answers, 1 is accepted

Sort by
0
Maite
Top achievements
Rank 1
answered on 17 Jul 2014, 12:46 PM
I need to load up to 200 shapes in my diagram, but this is very slow (I think it comes Diagram.AddShape instruction). I need urgent help. How could I do this without the user having to wait for the load?

Thanks!!
0
Maite
Top achievements
Rank 1
answered on 17 Jul 2014, 12:57 PM
This is the form that I draw my shapes. 


Dispatcher.BeginInvoke(new Action(() => TelerikControl.LoadBackgroundImage(dlg.FileName)),System.Windows.Threading.DispatcherPriority.ApplicationIdle);

foreach(Figure fig in HlpVisSelected.Figures)
{
TelerikControl.CreateFigure(fig.Name, !fig.bIsElement, fig.RecMain, fig.RecInfo, Brushes.DarkBlue, Brushes.WhiteSmoke); 
fig.RecMain = TelerikControl.GetRecMain(fig.Name, !fig.bIsElement);
fig.RecInfo = TelerikControl.GetRecInfo(fig.Name, !fig.bIsElement);
}


public void CreateFigure(string NameFigure, bool IsContact, System.Drawing.Rectangle? RecMain, System.Drawing.Rectangle? RecInfo, 
Brush BackgroundColorMain, Brush BackgroundColorOne, Brush BackgroundColorTwo = null)
{

double maxX = Background.ActualWidth == 0 ? Diagram.ActualWidth : Background.ActualWidth;
double maxY = Background.ActualHeight == 0 ? Diagram.ActualHeight : Background.ActualHeight;
Position PositionMain = new Position();
if(RecMain.HasValue)
{
PositionMain = new Position(RecMain.Value.Width, RecMain.Value.Height, RecMain.Value.X, RecMain.Value.Y);
}
else
{
Position posLastElement  = new Position();
if(IsContact)
{
if(ListContacts.Count() > 0)
{
posLastElement = ListContacts[ListContacts.Count-1].PositionMain;
PositionMain.XFigure = posLastElement.XFigure+posLastElement.WidthFigure+10;
if(PositionMain.XFigure+posLastElement.WidthFigure < maxX)
{
PositionMain.YFigure = posLastElement.YFigure;
}
else
{
PositionMain.XFigure = 0;
PositionMain.YFigure = posLastElement.YFigure+posLastElement.HeightFigure+35;
}
}
}
else
{
if(ListElements.Count() > 0)
{
posLastElement = ListElements[ListElements.Count-1].PositionMain;
PositionMain.XFigure = posLastElement.XFigure+posLastElement.WidthFigure+10;
if(PositionMain.XFigure+posLastElement.WidthFigure < maxX)
{
PositionMain.YFigure = posLastElement.YFigure;
}
else
{
PositionMain.XFigure = 0;
PositionMain.YFigure = posLastElement.YFigure+posLastElement.HeightFigure+35;
}
}
else
{
if(ListContacts.Count() > 0)
{
Position LastContact = ListContacts[ListContacts.Count-1].PositionMain;
PositionMain.XFigure = LastContact.XFigure + LastContact.WidthFigure + 10;
if(PositionMain.XFigure + LastContact.WidthFigure < maxX)
{
PositionMain.YFigure = LastContact.YFigure;
}
else
{
PositionMain.XFigure = 0;
PositionMain.YFigure = LastContact.YFigure + LastContact.HeightFigure + 35;
}

}
}
}
PositionMain.WidthFigure = Background.ActualBounds.Width > 0 ? Background.ActualBounds.Width*0.035 : Diagram.ActualWidth*0.035;
PositionMain.HeightFigure = Background.ActualBounds.Width > 0 ? Background.ActualBounds.Width*0.035: Diagram.ActualWidth*0.035;
}

Position PositionInfo = new Position();
if(RecInfo.HasValue)
{
PositionInfo = new Position(RecInfo.Value.Width, RecInfo.Value.Height, RecInfo.Value.X, RecInfo.Value.Y);
}
else
{
PositionInfo = new Position(PositionMain.WidthFigure/2, PositionMain.HeightFigure/2, PositionMain.XFigure+PositionMain.WidthFigure/2, PositionMain.YFigure);

}

PaintFigure(IsContact, PositionMain, PositionInfo, NameFigure, BackgroundColorMain, BackgroundColorOne, BackgroundColorTwo);
}



public void PaintFigure(bool isContact, Position PositionMain, Position PositionInfo, string NameFigure,
Brush BackgroundColorMain, Brush BackgroundColorOneInfo, Brush BackgroundColorTwoInfo = null)
{
FiguraShape shape = new FiguraShape();
shape.Template = (ControlTemplate)FindResource("RecMainTemplate");
shape.IsContact = isContact;
shape.IsMain = true;
shape.Identifier = shape.Id;
shape.IsEnabled = true;
FiguraShape shapeInfo = new FiguraShape();
shapeInfo.Template = BackgroundColorTwoInfo == null ?
(ControlTemplate)FindResource("RecInfoOneTemplate") : 
(ControlTemplate)FindResource("RecInfoTwoTemplate");
shapeInfo.IsContact = isContact;
shapeInfo.IsMain = false;
shapeInfo.Identifier = shape.Identifier;

FiguraInfo figura = new FiguraInfo
{
Identifier = shape.Id,
PositionMain = PositionMain,
PositionInfo = PositionInfo,
BackgroundColorMain = BackgroundColorMain,
BackgroundColorInfoOne = BackgroundColorOneInfo,
BackgroundColorInfoTwo = BackgroundColorTwoInfo,
GeometryFigure = isContact ? ShapeFactory.GetShapeGeometry(CommonShapeType.EllipseShape) : 
ShapeFactory.GetShapeGeometry(CommonShapeType.RectangleShape),
CornerRadiusFigure = isContact ? new CornerRadius(100) : new CornerRadius(0),
NameFigure = NameFigure, 
isContact = isContact
};


shape.Position = new Point(figura.PositionMain.XFigure, figura.PositionMain.YFigure);
shape.WidthMain = figura.PositionMain.WidthFigure;
shape.HeightMain = figura.PositionMain.HeightFigure;

shapeInfo.Position = new Point(figura.PositionInfo.XFigure, figura.PositionInfo.YFigure);

shape.DataContext = figura;
shapeInfo.DataContext = figura;

if(isContact) ListContacts.Add(figura);
else ListElements.Add(figura);

Diagram.AddShape(shape);
Diagram.AddShape(shapeInfo);

}











0
Zarko
Telerik team
answered on 21 Jul 2014, 01:29 PM
Hi Maite,
The loading time of the RadDiagram depends on a lot of things - shapes count, shapes templates, layout and etc. and unfortunately the code snippet that you've provided wasn't enough to reproduce the issue.
I've attached two project:
1) The first one loads 300 simple shapes (no custom template) and everything works for less than a second
2) The second one demonstrates a lay to load a lot of heavy shapes - we set the visibility of the RadDiagramShapes to collapsed by default and this way the items will be loaded but no visual elements will be created (this is one of the most time consuming actions). After this we start a dispatcherTimer and show a couple of items on each tick - distributing the loading time.
I hope I was able to help you.


Regards,
Zarko
Telerik
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Maite
Top achievements
Rank 1
answered on 22 Jul 2014, 05:51 AM
Hello Zarko, 

I tried your code (300 shapes) in two cases: when I have my telerik code in a dll and when is in a executable. The messageBox show the same time, but in the case of dll, the shapes slow appears. I need to have a dll for reasons to application, and I don't understand how it goes slowly in case of dll.

Thanks for your help. 
0
Maite
Top achievements
Rank 1
answered on 22 Jul 2014, 08:03 AM
Hi, 

After some test, I have seen than this isn't the problem. I think that the problem is for my aplication. 

Thanks for all. 

Maite.
0
Maite
Top achievements
Rank 1
answered on 22 Jul 2014, 09:45 AM
Hello!

I have discovered the real Problem. I have a question. As does the RadDiagramNavigationPane to show its content? I have expand my RadDiagramNavigationPane  all time and when I do a test expanded = false the shapes show very fast. But when I put expanded = true, shapes show very slowly. 

I want to know as does the control for show its content for arrange my problem, because I need have the control expanded all time. 

Thanks.
0
Zarko
Telerik team
answered on 24 Jul 2014, 02:43 PM
Hi Maite,
Indeed the problem in your scenario could be the NavigationPane because by default the RadThumbnail is refreshed on every item change. This means that it will create a new picture of the diagram 300+ times and this could really slow down the performance. To change this behavior you'll need a custom style:
<Style x:Key="myStyle" TargetType="telerik:RadDiagramThumbnail">
    <Setter Property="IsAutoRefreshEnabled" Value="False"></Setter>
    <Setter Property="Height" Value="161"></Setter>
    <Setter Property="Margin" Value="2 2 2 3"></Setter>
</Style>

and some code - before you add your shapes you'll apply the style:
this.navigationPane.ThumbnailStyle = this.Resources["myStyle"] as Style;
and clear it after that:
// add the items.
 
this.navigationPane.ClearValue(RadDiagramNavigationPane.ThumbnailStyleProperty);
this.navigationPane.RefreshThumbnail();
I hope I was able to help you.

Regards,
Zarko
Telerik
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
Tags
Diagram
Asked by
Maite
Top achievements
Rank 1
Answers by
Maite
Top achievements
Rank 1
Zarko
Telerik team
Share this question
or