How to adjust the unit width of the Container in the WPF Diagram?

In the WPF Diagram (SfDiagram), you can dynamically adjust the UnitWidth of a Container based on the width of its Annotation. This adjustment can be achieved using the AnnotationChanged event. We have provided the code example for how to achieve this. Please refer to the code example

Code Snippet:

// Here diagram is the instance of the SfDigram

//Adding AnnotationChanged Event

(diagram.Info as IGraphInfo).AnnotationChanged += MainWindow_AnnotationChanged;


//Method for execute the AnnotationChanged Event

private void MainWindow_AnnotationChanged(object sender, ChangeEventArgs<object, AnnotationChangedEventArgs> args)
{
   if (args.Item is AnnotationEditorViewModel &&  (args.Item as AnnotationEditorViewModel).Content != null && args.InitialValue.OriginalSource !=null)
   {
       var Annotation = (args.Item as AnnotationEditorViewModel).Content as string;
       var WidthOfTheAnnotation = getTextSize(Annotation);

       if ((args.InitialValue.OriginalSource as AnnotationEditor).Parent != null)
       {
           // Get the parent of the Annotation.
           var ParentOfTheAnnotation = ((args.InitialValue.OriginalSource as AnnotationEditor).Parent as AnnotationPanel).DataContext;


           if (ParentOfTheAnnotation is ContainerViewModel)
           {
               // This for container without header
               if (WidthOfTheAnnotation >= (ParentOfTheAnnotation as ContainerViewModel).UnitWidth)
               {
                   var value = WidthOfTheAnnotation - (ParentOfTheAnnotation as ContainerViewModel).UnitWidth;
                   (ParentOfTheAnnotation as ContainerViewModel).UnitWidth += value;
               }
           }

           else
           {
               //This for container with header
               foreach (var container in diagram.Groups as IEnumerable<object>)
               {
                   if (((container as ContainerViewModel).Header as ContainerHeaderViewModel) == ParentOfTheAnnotation)
                   {
                       if (WidthOfTheAnnotation >= (container as ContainerViewModel).UnitWidth)
                       {
                           var value = WidthOfTheAnnotation - (container as ContainerViewModel).UnitWidth;
                           (container as ContainerViewModel).UnitWidth += value;
                       }
                   }
               }
           }
       }

   }

}

// This method is used to find the Width of the Annotation
private float getTextSize(string text)
{
   //If we update the font weight or font size we need to update this value to half of the Font size.
   Font font = new Font("Courier New", 6.0F);
   System.Drawing.Image fakeImage = new Bitmap(1, 1);
   Graphics graphics = Graphics.FromImage(fakeImage);
   SizeF size = graphics.MeasureString(text, font);
   return size.Width;
} 

View sample in GitHub

Conclusion:
I hope you enjoyed learning how to adjust the unit width of the container in the WPF Diagram.

Refer to our WPF Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.

Please let us know in the following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!