Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic tablenode in blazor (Read 210 times)
davel
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 29
Location: USA
Joined: Dec 3rd, 2007
tablenode in blazor
May 16th, 2026 at 10:02pm
Print Post  
Hi Guys,

I am porting some code from winforms to blazor and I'm having trouble creating a tablenode in blazor similar to the winform tablenode.

A screen shot is attached.

The features:
* 4 columns, 2 very thin on the outside that hold an image of circle near the anchor point. The inner columns hold the text "in" and "out"
* 2 rows
* 3 shapenode buttons along the bottom in a group, each with an image and their own click events
an image in the center of the table node.
* The caption with a gradient background
* The body has a background color as well.

Could you provide sample blazor code with some or all of these features?

Thanks, David
  

tablenode.png ( 19 KB | 13 Downloads )
tablenode.png
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3491
Joined: Oct 19th, 2005
Re: tablenode in blazor
Reply #1 - May 18th, 2026 at 7:26am
Print Post  
Hi David,

Our Blazor API is direct port from WinForms library (version 7), but base types like Point, Rect, Color come from the multi-platform Microsoft.Maui.Graphics instead of Windows-only System.Drawing, and float-type properties have been changed to double now. Here's code from the WinForms sample project I think your image is based on ported to Blazor version:

Code
Select All
double rh = diagram.TableRowHeight;
double th = diagram.TableCaptionHeight;
double totalh = th + 4 * rh;
TableNode t = new TableNode(diagram);
t.Bounds = new Rect(5, 5, 30 + 2 * rh, totalh);
t.Caption = "test";
diagram.Nodes.Add(t);

// add buttons to the table
Group buttons = diagram.Factory.CreateGroup(t);

// create the help button
Rect rc = t.Bounds;
ShapeNode btn = new ShapeNode(diagram);
btn.Bounds = new Rect(rc.Left + 1.4F, rc.Bottom - rh, rh, rh);
btn.Transparent = true;
btn.Image = LoadImage("ac0001-64.png"); //images.Images[3];
btn.ImageAlign = MindFusion.Drawing.ImageAlign.Center;
buttons.AttachToCorner(btn, 3);
btn.Locked = true;
btn.Tag = 1;
diagram.Nodes.Add(btn);

// create the info button
btn = new ShapeNode(diagram);
btn.Bounds = new Rect(rc.Left + 2.0F + rh, rc.Bottom - rh, rh, rh);
btn.Transparent = true;
btn.Image = LoadImage("ac0001-64.png"); //images.Images[4];
btn.ImageAlign = MindFusion.Drawing.ImageAlign.Center;
buttons.AttachToCorner(btn, 3);
btn.Locked = true;
btn.Tag = 3;
diagram.Nodes.Add(btn);

// set table properties
LinearGradientBrush tbrush = new
	LinearGradientBrush(
		Color.FromRgb(224, 233, 233),
		Color.FromRgb(156, 170, 198), 90);

tbrush.Colors = new []
{
	Color.FromRgb(224, 233, 233),
	Colors.Black,
	Color.FromRgb(224, 233, 233),
	Color.FromRgb(102, 154, 204)
};
tbrush.Positions = new double[]
{
	0, th / totalh, th / totalh, 1
};

t.Brush = tbrush;

t.RowCount = 3;
t.ColumnCount = 4;

t.Scrollable = false;
t.EnabledHandles = AdjustmentHandles.Move;
t.CellFrameStyle = CellFrameStyle.None;
t.HandlesStyle = HandlesStyle.HatchHandles3;
t.Columns[0].Width = rh;
t.Columns[3].Width = rh;
t.Columns[1].Width = 15;
t.Columns[2].Width = 15;
t.Shape = SimpleShape.RoundedRectangle;
t.CaptionBrush = new MindFusion.Drawing.SolidBrush(Colors.White);

// set connection points
AnchorPoint ptin = new AnchorPoint(50, 50, true, false, Color.FromRgb(206, 0, 0), 0);
AnchorPoint ptout = new AnchorPoint(50, 50, false, true, Color.FromRgb(206, 0, 0), 3);
ArrayList al = new ArrayList();

for (int i = 0; i <= 2; i++)
{
	al.Clear();
	//if (!(form.GetInput(i) == null))
	{
		t[0, i].ImageAlign = MindFusion.Drawing.ImageAlign.Center;
		t[0, i].Image = LoadImage("ac0001-64.png"); //images.Images[0];
		t[1, i].Text = "1";//form.GetInput(i);
		al.Add(ptin.Clone());
	}
	//if (!(form.GetOutput(i) == null))
	{
		t[3, i].ImageAlign = MindFusion.Drawing.ImageAlign.Center;
		t[3, i].Image = LoadImage("ac0001-64.png");// images.Images[1];
		t[2, i].Text = "2"; //form.GetOutput(i);
		t[2, i].TextFormat.Alignment = StringAlignment.Far;
		al.Add(ptout.Clone());
	}
	t.Rows[i].AnchorPattern = new AnchorPattern(
		(AnchorPoint[])al.ToArray(typeof(AnchorPoint)));
} 



Also check the SpanningCells sample project from our Blazor distribution.

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3491
Joined: Oct 19th, 2005
Re: tablenode in blazor
Reply #2 - May 18th, 2026 at 7:42am
Print Post  
With latest version of the API, we'd recommend adding NodeLabel objects to the table as more lightweight alternative to attaching ShapeNodes. You can set NodeLabel.Image and check the Label event argument of NodeClicked event raised for the table.

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint