Adding many shaps are slowly

8 posts, 0 answers
  1. Maite
    Maite avatar
    33 posts
    Member since:
    Mar 2014

    Posted 17 Jul 2014 Link to this post

    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. 
  2. Maite
    Maite avatar
    33 posts
    Member since:
    Mar 2014

    Posted 17 Jul 2014 Link to this post

    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!!
  3. UI for WPF is Visual Studio 2017 Ready
  4. Maite
    Maite avatar
    33 posts
    Member since:
    Mar 2014

    Posted 17 Jul 2014 Link to this post

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

    }











  5. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 21 Jul 2014 Link to this post

    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.
     
  6. Maite
    Maite avatar
    33 posts
    Member since:
    Mar 2014

    Posted 22 Jul 2014 in reply to Zarko Link to this post

    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. 
  7. Maite
    Maite avatar
    33 posts
    Member since:
    Mar 2014

    Posted 22 Jul 2014 in reply to Maite Link to this post

    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.
  8. Maite
    Maite avatar
    33 posts
    Member since:
    Mar 2014

    Posted 22 Jul 2014 in reply to Maite Link to this post

    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.
  9. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 24 Jul 2014 Link to this post

    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.
     
Back to Top
UI for WPF is Visual Studio 2017 Ready