Form Designer Overview

AlterNET Form Designer is a .NET component library providing a quick and convenient way to create visual user interfaces. It allows users to place controls on the design surface, set their initial properties, and write event handlers for their events.

The main components in the package are FormDesignerControl for WinForms and <xref:Alternet.FormDesigner.Wpf.FormDesignerControl> for WPF. These controls represent a design surface allowing users to add controls to a form, arrange them, and write code for their events.

Form Designer supports all common editing operations such as dragging, selecting, and deleting components and controls, changing their size and z-order, aligning them horizontally or vertically, copy and pasting controls. Like Visual Studio Form Designer, it serializes its content into C#/VisualBasic or TypeScript/JavaScript source code.

Form Designer includes a set of demos and quick start projects that show how to place controls from the toolbox, load and save forms being designed, write code in control's event handlers, and run these forms.

Below is a brief overview of these projects:

FormDesigner - This project shows how to build visual interfaces by placing controls on the design surface, arranging them, and writing code for their events.

LoadAndSave - demonstrates how to save/load forms being designed.

DesignAndRun - shows how to write event handlers code and run the form being designed.

CustomizeToolbox - shows how to rearrange toolbox tabs and install third-party assemblies on the toolbox.

Creating your first project

The first thing to do after creating a new WinForms or WPF application is to place the FormDesignerControl or <xref:Alternet.FormDesigner.Wpf.FormDesignerControl> controls on your form. You would also need to place ToolboxControl or <xref:Alternet.FormDesigner.Wpf.Toolbox.ToolboxControl> controls and assign their FormDesignerControl property so you can drag and drop controls and components from it to the design surface.

When you run the application, you will see a new empty form with the design surface, where you can drag controls from the toolbox, resize, arrange them, etc.

If you'd like to examine and change the properties of the selected controls, you will need to place PropertyGridControl or <xref:Alternet.FormDesigner.Wpf.PropertyGrid.PropertyGridControl> controls, set their FormDesignerControl property, so it displays a component or control currently selected by the designer.

Similarly, for navigation through the form's controls, you can place OutlineControl or <xref:Alternet.FormDesigner.Wpf.Outline.OutlineControl> controls and set their FormDesignerControl property.