ایجاد یک نمودار بصری با استفاده از Syncfusion در یک برنامه C# Windows Forms

Summarize this content to 400 words in Persian Lang
در دنیای تجسم داده ها، نمایش ساختارهای سلسله مراتبی به طور واضح و موثر می تواند چالش برانگیز باشد. با این حال، با ابزارهایی مانند کنترل Syncfusion's Diagram، ایجاد نمودارهای بصری جذاب و بسیار کاربردی بسیار آسان تر می شود. در این پست وبلاگ، من شما را از طریق فرآیند ایجاد یک نمودار بصری با استفاده از HierarchicLayoutManager Syncfusion در یک برنامه Windows Forms راهنمایی می کنم.

ما به فرآیند گام به گام اولیه سازی نمودار، پر کردن آن با گره هایی که اشیاء داده را نشان می دهند، و سفارشی سازی طرح برای رفع نیازهای خاص شما می پردازیم.

راه اندازی برنامه Windows Forms

قبل از شروع، مطمئن شوید که کنترل Syncfusion's Diagram را در پروژه خود نصب کرده اید. اگر هنوز آن را ندارید، می توانید آن را از طریق NuGet اضافه کنید:

Install-Package Syncfusion.Windows.Forms.Diagram

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

پیاده سازی کد

کد زیر نحوه تنظیم یک نمودار در برنامه Windows Forms را با استفاده از HierarchicLayoutManager Syncfusion نشان می دهد. این مثال از داده های ثابت برای سادگی استفاده می کند.

using System;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;
using Syncfusion.Windows.Forms.Diagram;

namespace TADA.EndAround.DataOrganizer.UI.General
{
public partial class WorkspaceSnapshot : Form
{
#region Members

HierarchicLayoutManager hierarchicalLayout;

#endregion

public WorkspaceSnapshot()
{
InitializeComponent();

dataSourceDiagram.BeginUpdate();
this.dataSourceDiagram.Model.BoundaryConstraintsEnabled = false;
comboLytDirection.SelectedIndex = 0;

PopulateFields();

this.dataSourceDiagram.Model.RenderingStyle.SmoothingMode = SmoothingMode.HighQuality;
this.dataSourceDiagram.View.BackgroundColor = Color.Transparent;
this.dataSourceDiagram.Model.BoundaryConstraintsEnabled = false;
this.dataSourceDiagram.View.HandleRenderer.HandleColor = Color.AliceBlue;
this.dataSourceDiagram.View.HandleRenderer.HandleOutlineColor = Color.SkyBlue;
this.dataSourceDiagram.View.SelectionList.Clear();

hierarchicalLayout = new HierarchicLayoutManager(this.dataSourceDiagram.Model, 0, 55, 10);
hierarchicalLayout.LeftMargin = 25;
hierarchicalLayout.TopMargin = 25;
hierarchicalLayout.Model.RightMargin = 25;
hierarchicalLayout.Model.BottomMargin = 25;

this.dataSourceDiagram.LayoutManager = hierarchicalLayout;
this.dataSourceDiagram.View.Magnification = 55;
this.dataSourceDiagram.LayoutManager.UpdateLayout(null);

txtHSpacing.Text = hierarchicalLayout.HorizontalSpacing.ToString();
txtVSpacing.Text = hierarchicalLayout.VerticalSpacing.ToString();
txtLMarigin.Text = hierarchicalLayout.LeftMargin.ToString();
txtTMarigin.Text = hierarchicalLayout.TopMargin.ToString();
txtBMarigin.Text = hierarchicalLayout.Model.BottomMargin.ToString();
txtRMarigin.Text = hierarchicalLayout.Model.RightMargin.ToString();

chkAutoLayout.Checked = hierarchicalLayout.AutoLayout;

dataSourceDiagram.EndUpdate();
}

#region InitializeDiagram

///
/// Initialize the nodes and links in the diagram based on static data.
///
private void PopulateFields()
{
// Static Architecture Node
string architectureName = “System Architecture”;

Syncfusion.Windows.Forms.Diagram.RoundRect architectureNode = new Syncfusion.Windows.Forms.Diagram.RoundRect(0, 0, 120, 75, MeasureUnits.Pixel);
architectureNode.FillStyle.Color = Color.FromArgb(255, 86, 4);
architectureNode.FillStyle.ForeColor = Color.FromArgb(255, 165, 74);
architectureNode.LineStyle.LineColor = Color.White;
architectureNode.FillStyle.Type = FillStyleType.LinearGradient;
architectureNode.Name = architectureName;

Syncfusion.Windows.Forms.Diagram.Label architectureLabel = new Syncfusion.Windows.Forms.Diagram.Label(architectureNode, architectureName);
architectureLabel.FontStyle.Family = “Segoe UI”;
architectureLabel.FontStyle.Size = 10;
architectureLabel.FontColorStyle.Color = Color.Black;
architectureNode.Labels.Add(architectureLabel);

dataSourceDiagram.Model.AppendChild(architectureNode);

// Static Data Source and Tables
int dataSourceX = 150;
int dataSourceY = 150;
int tableX = 300;
int tableY = 150;
int clauseX = 450;
int clauseY = 150;
int columnOffset = 70;

string[] dataSources = { “Database A”, “Database B” };
string[][] tables = {
new string[] { “Table 1”, “Table 2” },
new string[] { “Table 3”, “Table 4” }
};

string[][][] dataClauses = {
new string[][] { new string[] { “Clause 1A”, “Clause 1B” }, new string[] { “Clause 2A”, “Clause 2B” } },
new string[][] { new string[] { “Clause 3A”, “Clause 3B” }, new string[] { “Clause 4A”, “Clause 4B” } }
};

for (int i = 0; i
/// Connects the given nodes
///
/// Parent Node
/// Child node
private void ConnectNodes(Node parentNode, Node childNode)
{
if (parentNode != null && childNode != null)
{
OrgLineConnector conn = new OrgLineConnector(PointF.Empty, new PointF(0, 1));
conn.VerticalDistance = 35;
conn.LineStyle.LineColor = Color.Gray;
Decorator decor = conn.HeadDecorator;
decor.DecoratorShape = DecoratorShape.Filled45Arrow;
decor.FillStyle.Color = Color.White;
decor.LineStyle.LineColor = Color.Gray;

this.dataSourceDiagram.Model.AppendChild(conn);

parentNode.CentralPort.TryConnect(conn.TailEndPoint);
childNode.CentralPort.TryConnect(conn.HeadEndPoint);

this.dataSourceDiagram.Model.SendToBack(conn);
}
}

#endregion

#region Event Handlers

private void apply_Click(object sender, EventArgs e)
{
float rotationAngle = 0;
float parseVal;
if (txtHSpacing.Text != string.Empty && float.TryParse(txtHSpacing.Text.ToString(), out parseVal))
((HierarchicLayoutManager)this.dataSourceDiagram.LayoutManager).HorizontalSpacing = parseVal;
else
txtHSpacing.Text = ((HierarchicLayoutManager)this.dataSourceDiagram.LayoutManager).HorizontalSpacing.ToString();

if (txtVSpacing.Text != string.Empty && float.TryParse(txtVSpacing.Text.ToString(), out parseVal))
((HierarchicLayoutManager)this.dataSourceDiagram.LayoutManager).VerticalSpacing = parseVal;
else
txtVSpacing.Text = ((HierarchicLayoutManager)this.dataSourceDiagram.LayoutManager).VerticalSpacing.ToString();

if (txtRMarigin.Text != string.Empty && float.TryParse(txtRMarigin.Text.ToString(), out parseVal))
((HierarchicLayoutManager)this.dataSourceDiagram.LayoutManager).Model.RightMargin = parseVal;
else
txtRMarigin.Text = ((HierarchicLayoutManager)this.dataSourceDiagram.LayoutManager).Model.RightMargin.ToString();

if (txtBMarigin.Text != string.Empty && float.TryParse(txtBMarigin.Text.ToString(), out parseVal))
((HierarchicLayoutManager)this.dataSourceDiagram.LayoutManager).Model.BottomMargin = parseVal;
else
txtBMarigin.Text = ((HierarchicLayoutManager)this.dataSourceDiagram.LayoutManager).Model.BottomMargin.ToString();

if (txtLMarigin.Text != string.Empty && float.TryParse(txtLMarigin.Text.ToString(), out parseVal))
((HierarchicLayoutManager)this.dataSourceDiagram.LayoutManager).LeftMargin = parseVal;
else
txtLMarigin.Text = ((HierarchicLayoutManager)this.dataSourceDiagram.LayoutManager).LeftMargin.ToString();

if (txtTMarigin.Text != string.Empty && float.TryParse(txtTMarigin.Text.ToString(), out parseVal))
((HierarchicLayoutManager)this.dataSourceDiagram.LayoutManager).TopMargin = parseVal;
else
txtTMarigin.Text = ((HierarchicLayoutManager)this.dataSourceDiagram.LayoutManager).TopMargin.ToString();

hierarchicalLayout.Model.DocumentSize = new SizeF((hierarchicalLayout.Model.BoundingRect.Size.Width + hierarchicalLayout.Model.RightMargin),
(hierarchicalLayout.Model.BoundingRect.Size.Height + hierarchicalLayout.Model.BottomMargin));
}

#endregion
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

تفکیک اجزای کلیدی

مقداردهی اولیه نمودار:نمودار با تنظیمات خاصی مانند محدودیت‌های مرزی، سبک‌های رندر و رنگ‌های دسته مقداردهی اولیه می‌شود تا اطمینان حاصل شود که چیدمان نمودار صاف و از نظر بصری جذاب است.
روش PopulateFields:این روش گره هایی را ایجاد می کند که معماری سیستم، منابع داده، جداول و بندها را نشان می دهند. گره ها با استفاده از اتصال دهنده ها (OrgLineConnector) به هم متصل می شوند تا روابط بین آنها برقرار شود.
HierarchicLayoutManager:HierarchicLayoutManager برای مدیریت طرح بندی گره ها در نمودار، از جمله فاصله و حاشیه، پیکربندی شده است. به طور خودکار موقعیت گره ها را برای ایجاد یک طرح سلسله مراتبی تنظیم می کند.
مسئولین رویداد:کنترل کننده رویداد application_Click به کاربران اجازه می دهد فاصله و حاشیه ها را به صورت پویا تنظیم کنند، که می تواند برای تنظیم دقیق طرح در زمان واقعی مفید باشد.

نتیجه گیری

با ابزارهای نمودارسازی قدرتمند Syncfusion، ایجاد نمودارهای سلسله مراتبی پیچیده ساده می شود. با استفاده از HierarchicLayoutManager، می توانید اطمینان حاصل کنید که نمودار شما نه تنها کاربردی است، بلکه از نظر زیبایی نیز دلپذیر است. این رویکرد یک پایه محکم برای تجسم ساختارهای داده پیچیده در یک برنامه Windows Forms فراهم می کند.

به راحتی می توانید کد را مطابق با نیازهای خاص خود تغییر دهید، خواه شامل ساختارهای داده پیچیده تر باشد یا سبک های بصری متفاوت. انعطاف‌پذیری کنترل‌های Syncfusion امکان‌های بی‌پایانی را در تجسم داده‌ها فراهم می‌کند.

Install-Package Syncfusion.Windows.Forms.Diagram

using System;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;
using Syncfusion.Windows.Forms.Diagram;

namespace TADA.EndAround.DataOrganizer.UI.General
{
    public partial class WorkspaceSnapshot : Form
    {
        #region Members

        HierarchicLayoutManager hierarchicalLayout;

        #endregion

        public WorkspaceSnapshot()
        {
            InitializeComponent();

            dataSourceDiagram.BeginUpdate();
            this.dataSourceDiagram.Model.BoundaryConstraintsEnabled = false;
            comboLytDirection.SelectedIndex = 0;

            PopulateFields();

            this.dataSourceDiagram.Model.RenderingStyle.SmoothingMode = SmoothingMode.HighQuality;
            this.dataSourceDiagram.View.BackgroundColor = Color.Transparent;
            this.dataSourceDiagram.Model.BoundaryConstraintsEnabled = false;
            this.dataSourceDiagram.View.HandleRenderer.HandleColor = Color.AliceBlue;
            this.dataSourceDiagram.View.HandleRenderer.HandleOutlineColor = Color.SkyBlue;
            this.dataSourceDiagram.View.SelectionList.Clear();

            hierarchicalLayout = new HierarchicLayoutManager(this.dataSourceDiagram.Model, 0, 55, 10);
            hierarchicalLayout.LeftMargin = 25;
            hierarchicalLayout.TopMargin = 25;
            hierarchicalLayout.Model.RightMargin = 25;
            hierarchicalLayout.Model.BottomMargin = 25;

            this.dataSourceDiagram.LayoutManager = hierarchicalLayout;
            this.dataSourceDiagram.View.Magnification = 55;
            this.dataSourceDiagram.LayoutManager.UpdateLayout(null);

            txtHSpacing.Text = hierarchicalLayout.HorizontalSpacing.ToString();
            txtVSpacing.Text = hierarchicalLayout.VerticalSpacing.ToString();
            txtLMarigin.Text = hierarchicalLayout.LeftMargin.ToString();
            txtTMarigin.Text = hierarchicalLayout.TopMargin.ToString();
            txtBMarigin.Text = hierarchicalLayout.Model.BottomMargin.ToString();
            txtRMarigin.Text = hierarchicalLayout.Model.RightMargin.ToString();

            chkAutoLayout.Checked = hierarchicalLayout.AutoLayout;

            dataSourceDiagram.EndUpdate();
        }

        #region InitializeDiagram

        /// 

        /// Initialize the nodes and links in the diagram based on static data.
        /// 
        private void PopulateFields()
        {
            // Static Architecture Node
            string architectureName = "System Architecture";

            Syncfusion.Windows.Forms.Diagram.RoundRect architectureNode = new Syncfusion.Windows.Forms.Diagram.RoundRect(0, 0, 120, 75, MeasureUnits.Pixel);
            architectureNode.FillStyle.Color = Color.FromArgb(255, 86, 4);
            architectureNode.FillStyle.ForeColor = Color.FromArgb(255, 165, 74);
            architectureNode.LineStyle.LineColor = Color.White;
            architectureNode.FillStyle.Type = FillStyleType.LinearGradient;
            architectureNode.Name = architectureName;

            Syncfusion.Windows.Forms.Diagram.Label architectureLabel = new Syncfusion.Windows.Forms.Diagram.Label(architectureNode, architectureName);
            architectureLabel.FontStyle.Family = "Segoe UI";
            architectureLabel.FontStyle.Size = 10;
            architectureLabel.FontColorStyle.Color = Color.Black;
            architectureNode.Labels.Add(architectureLabel);

            dataSourceDiagram.Model.AppendChild(architectureNode);

            // Static Data Source and Tables
            int dataSourceX = 150;
            int dataSourceY = 150;
            int tableX = 300;
            int tableY = 150;
            int clauseX = 450;
            int clauseY = 150;
            int columnOffset = 70;

            string[] dataSources = { "Database A", "Database B" };
            string[][] tables = {
                new string[] { "Table 1", "Table 2" },
                new string[] { "Table 3", "Table 4" }
            };

            string[][][] dataClauses = {
                new string[][] { new string[] { "Clause 1A", "Clause 1B" }, new string[] { "Clause 2A", "Clause 2B" } },
                new string[][] { new string[] { "Clause 3A", "Clause 3B" }, new string[] { "Clause 4A", "Clause 4B" } }
            };

            for (int i = 0; i 
        /// Connects the given nodes
        /// 
        /// Parent Node
        /// Child node
        private void ConnectNodes(Node parentNode, Node childNode)
        {
            if (parentNode != null && childNode != null)
            {
                OrgLineConnector conn = new OrgLineConnector(PointF.Empty, new PointF(0, 1));
                conn.VerticalDistance = 35;
                conn.LineStyle.LineColor = Color.Gray;
                Decorator decor = conn.HeadDecorator;
                decor.DecoratorShape = DecoratorShape.Filled45Arrow;
                decor.FillStyle.Color = Color.White;
                decor.LineStyle.LineColor = Color.Gray;

                this.dataSourceDiagram.Model.AppendChild(conn);

                parentNode.CentralPort.TryConnect(conn.TailEndPoint);
                childNode.CentralPort.TryConnect(conn.HeadEndPoint);

                this.dataSourceDiagram.Model.SendToBack(conn);
            }
        }

        #endregion

        #region Event Handlers

        private void apply_Click(object sender, EventArgs e)
        {
            float rotationAngle = 0;
            float parseVal;
            if (txtHSpacing.Text != string.Empty && float.TryParse(txtHSpacing.Text.ToString(), out parseVal))
                ((HierarchicLayoutManager)this.dataSourceDiagram.LayoutManager).HorizontalSpacing = parseVal;
            else
                txtHSpacing.Text = ((HierarchicLayoutManager)this.dataSourceDiagram.LayoutManager).HorizontalSpacing.ToString();

            if (txtVSpacing.Text != string.Empty && float.TryParse(txtVSpacing.Text.ToString(), out parseVal))
                ((HierarchicLayoutManager)this.dataSourceDiagram.LayoutManager).VerticalSpacing = parseVal;
            else
                txtVSpacing.Text = ((HierarchicLayoutManager)this.dataSourceDiagram.LayoutManager).VerticalSpacing.ToString();

            if (txtRMarigin.Text != string.Empty && float.TryParse(txtRMarigin.Text.ToString(), out parseVal))
                ((HierarchicLayoutManager)this.dataSourceDiagram.LayoutManager).Model.RightMargin = parseVal;
            else
                txtRMarigin.Text = ((HierarchicLayoutManager)this.dataSourceDiagram.LayoutManager).Model.RightMargin.ToString();

            if (txtBMarigin.Text != string.Empty && float.TryParse(txtBMarigin.Text.ToString(), out parseVal))
                ((HierarchicLayoutManager)this.dataSourceDiagram.LayoutManager).Model.BottomMargin = parseVal;
            else
                txtBMarigin.Text = ((HierarchicLayoutManager)this.dataSourceDiagram.LayoutManager).Model.BottomMargin.ToString();

            if (txtLMarigin.Text != string.Empty && float.TryParse(txtLMarigin.Text.ToString(), out parseVal))
                ((HierarchicLayoutManager)this.dataSourceDiagram.LayoutManager).LeftMargin = parseVal;
            else
                txtLMarigin.Text = ((HierarchicLayoutManager)this.dataSourceDiagram.LayoutManager).LeftMargin.ToString();

            if (txtTMarigin.Text != string.Empty && float.TryParse(txtTMarigin.Text.ToString(), out parseVal))
                ((HierarchicLayoutManager)this.dataSourceDiagram.LayoutManager).TopMargin = parseVal;
            else
                txtTMarigin.Text = ((HierarchicLayoutManager)this.dataSourceDiagram.LayoutManager).TopMargin.ToString();

            hierarchicalLayout.Model.DocumentSize = new SizeF((hierarchicalLayout.Model.BoundingRect.Size.Width + hierarchicalLayout.Model.RightMargin),
                                               (hierarchicalLayout.Model.BoundingRect.Size.Height + hierarchicalLayout.Model.BottomMargin));
        }

        #endregion
    }
}