Fluent Markup

Overview

Fluent Markup is a collection of helper methods and classes aimed at simplifying the creation of declarative .NET App UI in code.

While Wisej.NET allows you to use the designer to build rich UI components, there are many occasions where it is necessary to build or modify visual components through code. The new Wisej.Web.Markup extensions make this task significantly more enjoyable.

Fluent Markup is not supported with VB.NET. Properties are similar to methods and clash with extension methods with the same name.

Examples

Currently, if you want to add a Button with a label, a data-bound text with binding events, and attach a "click" event to the button, you would need to write code similar to the following:

C#

var textBox = new TextBox
{
	LabelText = "Name:",
	Location = new Point(20, 20),
	Size = new Size(150, 24)
};
var binding = textBox.DataBindings.Add("Text", dataSource, "FirstName");
binding.Format += (s, e) => { 
	e.Value = e.Value.ToString().ToUpper();
};
var button = new Button
{
	Text = "Click me",
	Location = new Point(20, 50),
	Size = new Size(80, 32),
};
button.Click += (s, e) => { 
	// Do something on click.
};
page.Controls.Add(button);
page.Controls.Add(textBox);

With the new Wisej.Web.Markup extensions, the same code can be written as follows:

C#

using Wisej.Web.Markup;

page.Controls(
	new TextBox()
		.LabelText("Name:")
		.Location(20, 20)
		.Size(154, 24)
		.Bind("Text", dataSource, "FirstName", 
			format: v => v.Value.ToString().ToUpper()),
	new Button()
		.Text("Click me")
		.Location(20, 50)
		.Size(80, 32)
		.OnClick(b =>
		{
			// Do something on click.
		}
));

This syntax comes particularly handy when using Wisej.NET with Visual Studio Code.

Properties are added as methods with the same name as the property. Events are added with the prefix ".On" followed by the name of the event.

Events that use the EventArgs type is represented by simple methods that only use the sender as a single argument. Events that pass an argument are represented by actions that take both the sender and the arguments.

For example:

C#

// Closing event uses CancelEventArgs
form.OnClosing((f, e) => e.Cancel = false);

// Closed event uses EventArgs
form1.OnClosed(f => Debug.WriteLine($"{f.Text} is closed."));

VB.NET

' Closing event using CancelEventArgs
form.OnClosing(Sub(f, e) e.Cancel = False)

' Closed event using EventArgs
form.OnClosed(Sub(f) Debug.WriteLine($"{f.Text} is closed."))

Due to the extensive range of properties and events in Wisej.NET controls, we are excited to enhance the markup extensions. Additional properties and methods will be included in upcoming builds.