DxWindow.AllowDrag Property

Specifies whether users can drag the Window.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(true)]
[Parameter]
public bool AllowDrag { get; set; }

Property Value

Type	Default	Description
Boolean	true	true to enable window dragging; otherwise, false.

Remarks

Set the AllowDrag property to true to allow users to drag and drop the window by its header. You can disable the AllowDragByHeaderOnly option to allow dragging by every window element – header, body, or footer.

The following events allow you to process drag actions:

• DragStarted - Fires when a user starts to drag the Window.
• DragCompleted - Fires after the Window is dragged.

<div class="d-flex justify-content-center p-3" @ref=@popupTarget>
    <DxButton RenderStyle="ButtonRenderStyle.Secondary" Click="@TogglePopupVisibilityAsync">@GetButtonText()</DxButton>
</div>
<DxWindow AllowDrag=true
          AllowDragByHeaderOnly="allowDragByHeaderOnly"
          @ref=@windowRef
          DragCompleted="OnWindowDragCompleted"
          ShowCloseButton="true"
          HeaderText="Window" BodyText="@Constants.Text"
          Width="max(25vw, 250px)"
          SizeMode="Params.SizeMode"
          @bind-Visible="windowVisible">
</DxWindow>
@code {
int? positionX, positionY;
bool windowVisible;
bool allowDragByHeaderOnly = true;
DxWindow windowRef;
ElementReference popupTarget;
async Task OnWindowDragCompleted(WindowDragCompletedEventArgs args) {
    (positionX, positionY) = (args.End.X, args.End.Y);
    await SavePositionToLocalStorageAsync(args.End);
}
string GetButtonText() => !windowVisible ? "SHOW A WINDOW" : "CLOSE A WINDOW";
}

Run Demo: Window - Dragging