Adding many shaps are slowly

[Maite]

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. 

[Maite]

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!!

[Maite]

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

}

[Zarko]

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

 

 

[Maite]

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. 

[Maite]

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.

[Maite]

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.

[Zarko]

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