blazor-devexpress-dot-blazor-dot-dxwindow-3c904c00.md
Specifies the size of the component and its content.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
[DefaultValue(null)]
[Parameter]
public SizeMode? SizeMode { get; set; }
| 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.
|
The SizeMode property allows you to apply different size modes to the DxWindow component and its content. For additional information, refer to the following topic: Size Modes.
The following code snippet applies the Large size mode to the DxWindow component.
<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);
}
}
<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"};
}
See Also