Form

Description

This component represents a windowed form in Blazor using the Gap.Blazor.Form model. It uses the Telerik Window component to simulate a WinForms-style form, supporting features like modal behavior, draggable windows, control boxes, MDI containers, and dynamic positioning.

Usage

<WMStyleBase model=@this.Form></WMStyleBase>

<TelerikWindow class="@model.GetStringClasses()"
               Modal="@this.Form.Modal"
               Visible=@model.Visible
               State="@GetWindowState()"
               ContainmentSelector="@SetContainmentSelector()"
               Draggable="@Draggable"
               @ref="this.TelerikWindowRef">
    <WindowTitle>
        @if (this.Form.Icon != null)
        {
            <img src="@this.GetIconImage()" width="18em">
        }
        @Text
    </WindowTitle>
    <WindowActions>
        @if (this.Form.ControlBox)
        {
            @if (this.Form.MinimizeBox)
            {
                <WindowAction Name="Minimize"></WindowAction>
            }
            @if (this.Form.MaximizeBox)
            {
                <WindowAction Name="Maximize"></WindowAction>
            }
            <WindowAction Name="Close" OnClick="@FormClosing"></WindowAction>
        }
    </WindowActions>
    <WindowContent>
        <CascadingValue Value=MainTabOrderService>
            @ChildContent
            @{
                if (Form.IsMdiContainer)
                {
                    <WMMdiContainerComponent MdiChildren="@Form.MdiChildren"></WMMdiContainerComponent>
                }
            }
        </CascadingValue>
    </WindowContent>
</TelerikWindow>

Properties

  • Form: Instance of the Gap.Blazor.Form model.

  • TelerikWindowRef: Reference to the Telerik Window component.

  • Draggable: Boolean indicating whether the form is draggable (disabled for MDI containers).

  • Start Position Properties: LeftStartPosition, TopStartPosition, StyleStartPosition, TransformStartPosition control the initial window placement.

Methods

  • OnInitialized(): Subscribes to model and component events, initializes file support, and calculates start position styles.

  • FormClosing(): Invokes the model’s Close() method.

  • GetWindowState(): Maps the model’s WindowState to Telerik’s WindowState.

  • ActivateView(): Focuses the window when activated.

  • Focus(): Focuses the first control using MainTabOrderService.

  • GetStartPositionStyles(): Calculates CSS positioning based on StartPosition.

  • GetIconImage(): Retrieves the form’s icon image.

  • GetHeightPX() / GetWidthPX(): Calculates the form’s dimensions including frame adjustments.

  • BorderStyleToCss(): Converts FormBorderStyle to a CSS-compatible border style.

Dynamic Rendering

The component dynamically renders a windowed form based on the Form model:

  • WMStyleBase: Applies styles based on the model.

  • TelerikWindow: Provides the window UI with title, actions, and content.

  • WindowTitle: Displays the form’s icon and title.

  • WindowActions: Renders minimize, maximize, and close buttons based on model flags.

  • WindowContent: Hosts child content and optionally an MDI container.

Styles

.@model.GetComponentClass() {
    border: [based on FormBorderStyle];
    position: [absolute or centered];
    left: [calculated];
    top: [calculated];
    transform: [calculated];
    height: [Form.Height + 45px];
    width: [Form.Width + 2px];
}

.@model.GetComponentClass() .k-window-content,
.@model.GetComponentClass() .k-prompt-container {
    overflow: [based on AutoScroll];
}

Events

  • Activated

  • AutoScrollChanged

  • ControlBoxChange

  • ActivateView

  • NotifyModelChanged

Last updated