Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxWindow.AllowDrag Property

Specifies whether users can drag the Window.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[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:

Razor
<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

See Also