DxWindow.SizeMode Property

Specifies the size of the component and its content.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(null)]
[Parameter]
public SizeMode? SizeMode { get; set; }

Property Value

Type	Default	Description
Nullable<SizeMode>	null	The size mode. If the property is not specified (the value is null), the size is determined by the SizeMode global option.

Available values:

Name	Description
Small	Small size.
Medium	Medium size.
Large	Large size.

Remarks

The SizeMode property allows you to apply different size modes to the DxWindow component and its content. For more information, refer to the following topic: Size Modes.

The following code snippet applies the Large size mode to the DxWindow component.

Razor

<div class="d-flex justify-content-center p-3" @ref=@popupTarget>
    <DxButton RenderStyle="ButtonRenderStyle.Secondary" Click="@TogglePopupVisibilityAsync">@GetButtonText()</DxButton>
</div>
<DxWindow @ref=windowRef
          SizeMode="SizeMode.Large"
          ShowCloseButton="true"
          HeaderText="Edit Contact"
          FooterText="Footer"
          ShowFooter="true"
          @bind-Visible=windowVisible>
    <BodyContentTemplate>
        <SampleEditForm />
    </BodyContentTemplate>
    <FooterContentTemplate>
        <DxButton RenderStyle="ButtonRenderStyle.Primary" Text="OK" Click="@context.CloseCallback" />
        <DxButton RenderStyle="ButtonRenderStyle.Secondary" Text="Cancel" Click="@context.CloseCallback" />
    </FooterContentTemplate>
</DxWindow>

@code {
    DxWindow windowRef;
    ElementReference popupTarget;
    bool windowVisible;
    string GetButtonText() => !windowVisible ? "SHOW A WINDOW" : "CLOSE A WINDOW";
    async Task TogglePopupVisibilityAsync() {
        if (windowVisible)
            await windowRef.CloseAsync();
        else
            await windowRef.ShowAtAsync(popupTarget);
    }
}

SampleEditForm.razor

<div class="d-flex flex-fill pt-1 pb-2 w-100">
    <DxFormLayout Data="@editFormData" CssClass="w-100">
        <DxFormLayoutItem Field="@nameof(FormDataItem.Name)" Caption="Contact Name:" CaptionPosition="CaptionPosition.Vertical" CaptionCssClass="popup-demo-caption" CssClass="popup-demo-item" ColSpanMd="12">
            <div class="popup-demo-layout-item">
                <span class="popup-image popup-icon-user"></span>
                <DxTextBox Text="@(((string)((ValueEditContext)context).Value))" CssClass="popup-demo-textbox" />
            </div>
        </DxFormLayoutItem>
        <DxFormLayoutItem Field="@nameof(FormDataItem.BirthDate)" Caption="Birth Date:" CaptionPosition="CaptionPosition.Vertical" CaptionCssClass="popup-demo-caption" CssClass="popup-demo-item" ColSpanMd="12">
            <div class="popup-demo-layout-item">
                <span class="popup-image popup-icon-birthday"></span>
                <DxDateEdit Date="@(((DateTime)((ValueEditContext)context).Value))" CssClass="popup-demo-textbox" />
            </div>
        </DxFormLayoutItem>
        <DxFormLayoutItem Field="@nameof(FormDataItem.YearsWorked)" Caption="Years Worked:" CaptionPosition="CaptionPosition.Vertical" CaptionCssClass="popup-demo-caption" CssClass="popup-demo-item" ColSpanMd="12">
            <div class="popup-demo-layout-item">
                <span class="popup-image popup-icon-worked"></span>
                <DxSpinEdit Value="@(((int)((ValueEditContext)context).Value))" CssClass="popup-demo-textbox" />
            </div>
        </DxFormLayoutItem>
        <DxFormLayoutItem Field="@nameof(FormDataItem.Position)" Caption="Position:" CaptionPosition="CaptionPosition.Vertical" CaptionCssClass="popup-demo-caption" CssClass="popup-demo-item" ColSpanMd="12">
            <div class="popup-demo-layout-item">
                <span class="popup-image popup-icon-position"></span>
                <DxComboBox CssClass="popup-demo-textbox"
                            Data="@(new List<string>() {"Sales Representative", "Designer"})"
                            Value="@(((string)((ValueEditContext)context).Value))">
                </DxComboBox>
            </div>
        </DxFormLayoutItem>
    </DxFormLayout>
</div>

@code {
    FormDataItem editFormData = new() {Name = "Nancy Davolio", BirthDate = DateTime.Now.AddYears(-30), YearsWorked = 3, Position = "Sales Representative"};
}

Run Demo: Window - Overview