Alerts & Dialogs

Alerts & Dialogs

Engage users with modern popups, notifications, and modal windows.

Jump to

1. Alert Dialog

A simple message box to display information. Supports custom icons and titles.

ℹī¸

Information

Operation completed successfully.

App.xml 
<Handler Name="ShowInfo">
    <Alert 
        Title="Information" 
        Message="Operation completed successfully." 
        Icon="Info"/>
</Handler>

2. Toast Notification

Non-intrusive notification that appears briefly and disappears automatically.

✓ File saved successfully! 
<Handler Name="ShowToast">
    <Toast 
        Message="File saved successfully!" 
        Type="Success" 
        Position="TopRight" 
        Duration="3000"/>
</Handler>

Parameters

  • Type: Success, Error, Warning, Info
  • Position: TopRight, TopLeft, BottomRight, BottomLeft, TopCenter, BottomCenter
  • Duration: Time in milliseconds (default 3000)

3. Confirm Dialog

Ask the user for confirmation before proceeding (e.g., Delete).

<Handler Name="DeleteFile">
    <Confirm 
        Title="Delete File?" 
        Message="Are you sure you want to delete this file?">
        
        <Yes>
            <!-- Logic if user clicks Yes -->
            <Call Handler="PerformDelete"/>
        </Yes>
        
        <No>
            <Toast Message="Cancelled"/>
        </No>
        
    </Confirm>
</Handler>

Create completely custom dialogs using any UI components.

Settings ✕

This is a custom modal content.

<Handler Name="OpenSettings">
    <Modal Name="settingsModal" Title="Settings" Width="400">
        <Content>
            <StackPanel Margin="20">
                <TextBlock Text="Enter your name:"/>
                <TextBox Name="txtName" Margin="0,10"/>
                
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                    <Button Content="Cancel" onClick="ClosePopup"/>
                    <Button Content="Save" Background="#0078D4" Margin="10,0,0,0"/>
                </StackPanel>
            </StackPanel>
        </Content>
    </Modal>
</Handler>