### Navigation Drawer Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/drawer.md

Demonstrates a complete example of implementing and displaying a navigation drawer. This includes the ViewModel, View, and usage of `OverlayDrawer.ShowStandard`.

```APIDOC
## Complete Example: Navigation Drawer

### Description
Provides a full implementation of a navigation drawer, including its ViewModel, View definition, and how to invoke it using `OverlayDrawer.ShowStandard`. This example showcases a typical use case for side navigation.

### Usage
```csharp
// ViewModel
public class NavigationViewModel
{
    public List<NavItem> Items { get; } = new()
    {
        new NavItem { Title = "Home", Icon = "home" },
        new NavItem { Title = "Settings", Icon = "settings" },
        new NavItem { Title = "About", Icon = "info" }
    };

    public Action<NavItem>? OnItemSelected { get; set; }
}

// View
public class NavigationView : UserControl
{
    public NavigationView()
    {
        var vm = new NavigationViewModel();
        DataContext = vm;

        Content = new StackPanel
        {
            Children =
            {
                new TextBlock { Text = "Navigation", FontSize = 18, Margin = new Thickness(16) },
                new ItemsControl
                {
                    Items = vm.Items,
                    ItemTemplate = new FuncDataTemplate<NavItem>((item, _) =>
                        new Button { Content = item.Title }
                    )
                }
            }
        };
    }
}

// Invocation
OverlayDrawer.ShowStandard<NavigationView, NavigationViewModel>(
    navigationViewModel,
    hostId: "mainHost",
    options: new DrawerOptions
    {
        Position = Position.Left,
        CanLightDismiss = true,
        MinWidth = 250,
        MaxWidth = 350
    }
);
```
```

--------------------------------

### DatePicker Initialization Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/date-time-pickers.md

Example of how to instantiate and configure a DatePicker control. This sets the display format and highlights the current day.

```csharp
var picker = new DatePicker
{
    DisplayFormat = "yyyy-MM-dd",
    IsTodayHighlighted = true
};
```

--------------------------------

### OverlayDialogHost Setup in XAML

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/dialog-controls.md

Example of how to include an OverlayDialogHost within a UrsaWindow in XAML for handling overlay dialogs.

```xml
<u:UrsaWindow xmlns:u="https://irihi.tech/ursa">
    <!-- Your content here -->
    <u:OverlayDialogHost x:Name="MainDialogHost" />
</u:UrsaWindow>
```

--------------------------------

### ImageViewer Usage Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/other-controls.md

Demonstrates how to instantiate and configure an ImageViewer control in C#.

```csharp
var viewer = new ImageViewer
{
    Source = new Bitmap("image.png"),
    IsZoomEnabled = true,
    IsPanEnabled = true,
    MinZoom = 0.5,
    MaxZoom = 5.0
};
```

--------------------------------

### Right Sidebar Navigation Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/drawer.md

Example of showing a non-modal drawer from the right with specified minimum and maximum width.

```csharp
OverlayDrawer.ShowStandard<NavigationView, NavigationViewModel>(
    viewModel,
    hostId: "mainHost",
    options: new DrawerOptions
    {
        Position = Position.Right,
        CanLightDismiss = true,
        MinWidth = 300,
        MaxWidth = 400
    }
);
```

--------------------------------

### TagInput Usage Example - Basic

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/tag-input.md

Demonstrates a basic setup of the TagInput control with common properties like placeholder text, maximum count, and duplicate handling.

```APIDOC
## Usage Example

### Basic TagInput

```csharp
var tagInput = new TagInput
{
    PlaceholderText = "Enter tags...",
    MaxCount = 5,
    AllowDuplicates = false,
    LostFocusBehavior = LostFocusBehavior.Add,
    Tags = new ObservableCollection<string>()
};
```
```

--------------------------------

### Notification Usage Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/notification-toast.md

Demonstrates how to create and display simple and interactive notifications using the Notification class. Includes examples with and without callbacks.

```csharp
// Simple information notification
var notif = new Notification(
    title: "Upload Complete",
    content: "Your file has been uploaded successfully.",
    type: NotificationType.Success,
    expiration: TimeSpan.FromSeconds(5)
);

// With callbacks
var notif2 = new Notification(
    title: "New Message",
    content: "You have a new message.",
    type: NotificationType.Information,
    expiration: TimeSpan.FromSeconds(7),
    showClose: true,
    onClick: () => Console.WriteLine("Notification clicked"),
    onClose: (reason) => Console.WriteLine($"Closed: {reason}")
);
```

--------------------------------

### Basic Time Picker Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/date-time-pickers.md

Illustrates the basic usage of a TimePicker with placeholder text.

```xml
<u:TimePicker
    xmlns:u="https://irihi.tech/ursa"
    PlaceholderText="Select time" />
```

--------------------------------

### Left Menu Drawer Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/drawer.md

Example of showing a non-modal custom drawer from the left, disabling light dismiss and specifying close button visibility.

```csharp
OverlayDrawer.ShowCustom<MenuView, MenuViewModel>(
    menuViewModel,
    hostId: "mainHost",
    options: new DrawerOptions
    {
        Position = Position.Left,
        CanLightDismiss = false,
        MinWidth = 200,
        IsCloseButtonVisible = true
    }
);
```

--------------------------------

### Setup WindowNotificationManager in MainWindow

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/notification-toast.md

Demonstrates how to initialize and configure the `WindowNotificationManager` within a `MainWindow`'s lifecycle.

```csharp
public partial class MainWindow : Window
{
    private WindowNotificationManager? _notificationManager;

    public MainWindow()
    {
        InitializeComponent();
        this.Opened += (s, e) =>
        {
            _notificationManager = new WindowNotificationManager(this)
            {
                Position = NotificationPosition.TopRight,
                MaxItems = 5
            };
        };
    }

    public void ShowNotification(string title, string message)
    {
        _notificationManager?.Show(new Notification(
            title: title,
            content: message,
            type: NotificationType.Information,
            expiration: TimeSpan.FromSeconds(5)
        ));
    }
}
```

--------------------------------

### Pagination Usage Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/other-controls.md

Demonstrates how to configure the Pagination control in XAML for data navigation.

```xml
<u:Pagination
    xmlns:u="https://irihi.tech/ursa"
    Total="150"
    PageSize="10"
    Current="{Binding CurrentPage, Mode=TwoWay}"
    MaxVisible="7"
    ShowSizeChanger="True" />
```

--------------------------------

### Basic Date Picker Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/date-time-pickers.md

Demonstrates a simple DatePicker with a specified display format and placeholder text.

```xml
<u:DatePicker
    xmlns:u="https://irihi.tech/ursa"
    DisplayFormat="yyyy-MM-dd"
    PlaceholderText="Select a date" />
```

--------------------------------

### Date-Time Picker Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/date-time-pickers.md

Demonstrates a DateTimePicker with a custom display format, confirmation requirement, and placeholder text.

```xml
<u:DateTimePicker
    xmlns:u="https://irihi.tech/ursa"
    DisplayFormat="yyyy-MM-dd HH:mm:ss"
    NeedConfirmation="True"
    PlaceholderText="Select date and time" />
```

--------------------------------

### Notification Bell XAML Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/avatar-badge.md

A XAML example demonstrating a Badge control used with a Button to create a notification bell icon.

```xml
<u:Badge
    Header="{Binding NotificationCount}"
    CornerPosition="TopRight"
    OverflowCount="99">
    <Button>
        <PathIcon Data="{StaticResource BellIcon}" />
    </Button>
</u:Badge>
```

--------------------------------

### Complete Example: Navigation Drawer

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/drawer.md

Demonstrates the creation and usage of a navigation drawer. Includes ViewModel, View, and the code to display the drawer.

```csharp
// ViewModel
public class NavigationViewModel
{
    public List<NavItem> Items { get; } = new()
    {
        new NavItem { Title = "Home", Icon = "home" },
        new NavItem { Title = "Settings", Icon = "settings" },
        new NavItem { Title = "About", Icon = "info" }
    };

    public Action<NavItem>? OnItemSelected { get; set; }
}

// View
public class NavigationView : UserControl
{
    public NavigationView()
    {
        var vm = new NavigationViewModel();
        DataContext = vm;

        Content = new StackPanel
        {
            Children =
            {
                new TextBlock { Text = "Navigation", FontSize = 18, Margin = new Thickness(16) },
                new ItemsControl
                {
                    Items = vm.Items,
                    ItemTemplate = new FuncDataTemplate<NavItem>((item, _) =>
                        new Button { Content = item.Title }
                    )
                }
            }
        };
    }
}

// Usage
OverlayDrawer.ShowStandard<NavigationView, NavigationViewModel>(
    navigationViewModel,
    hostId: "mainHost",
    options: new DrawerOptions
    {
        Position = Position.Left,
        CanLightDismiss = true,
        MinWidth = 250,
        MaxWidth = 350
    }
);
```

--------------------------------

### Avatar Usage Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/avatar-badge.md

Demonstrates how to create and configure an Avatar control in C#.

```csharp
var avatar = new Avatar
{
    Source = new Bitmap("avatar.png"),
    HoverMask = new TextBlock { Text = "Edit Profile" }
};
```

--------------------------------

### Form Usage Example (C#)

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/form-controls.md

Demonstrates how to instantiate and configure a Form control in C#, adding input fields with labels.

```csharp
var form = new Form
{
    LabelPosition = Position.Left,
    LabelWidth = new GridLength(100),
    LabelAlignment = HorizontalAlignment.Left
};

form.Items.Add(new TextBox { [!FormItem.LabelProperty] = new TextBlock { Text = "Name" } });
form.Items.Add(new TextBox { [!FormItem.LabelProperty] = new TextBlock { Text = "Email" } });
```

--------------------------------

### LoadingContainer Usage Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/other-controls.md

Demonstrates how to use the LoadingContainer in XAML to show a loading overlay.

```xml
<u:LoadingContainer
    xmlns:u="https://irihi.tech/ursa"
    IsLoading="{Binding IsLoading}">
    <StackPanel>
        <TextBlock Text="{Binding Content}" />
    </StackPanel>
</u:LoadingContainer>
```

--------------------------------

### UrsaWindow Customization Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/ursa-window.md

Demonstrates how to create and configure a UrsaWindow with custom title bar and resizing options.

```csharp
// Create a custom UrsaWindow with title bar customization
var window = new UrsaWindow
{
    Title = "My Application",
    IsTitleBarVisible = true,
    IsMinimizeButtonVisible = true,
    IsRestoreButtonVisible = true,
    IsCloseButtonVisible = true,
    IsManagedResizerVisible = true,
    TitleBarContent = new TextBlock { Text = "Custom Title" }
};

// Access the main content
window.Content = new MainView();
```

--------------------------------

### Date Range Picker Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/date-time-pickers.md

Shows a DateRangePicker configured with a specific display format and placeholder text.

```xml
<u:DateRangePicker
    xmlns:u="https://irihi.tech/ursa"
    DisplayFormat="yyyy-MM-dd"
    PlaceholderText="Select date range" />
```

--------------------------------

### TagInput Data Binding Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/tag-input.md

Provides an example of integrating TagInput with a ViewModel for data binding, showcasing how to manage the Tags collection.

```APIDOC
## Examples

### ViewModel Integration

```csharp
public class TagViewModel : NotifyPropertyChangedBase
{
    private ObservableCollection<string> _tags;

    public ObservableCollection<string> Tags
    {
        get => _tags;
        set => Set(ref _tags, value);
    }

    public TagViewModel()
    {
        _tags = new ObservableCollection<string> { "csharp", "avalonia" };
    }
}
```

### Data Binding

```xml
<u:TagInput
    PlaceholderText="Skills"
    MaxCount="20"
    Tags="{Binding Tags}"
    AllowDuplicates="False"/>
```
```

--------------------------------

### Rating Usage Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/other-controls.md

Demonstrates how to use the Rating control in XAML, allowing half-star ratings.

```xml
<u:Rating
    xmlns:u="https://irihi.tech/ursa"
    Value="{Binding Rating}"
    Count="5"
    AllowHalf="True" />
```

--------------------------------

### QRCode Usage Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/other-controls.md

Instantiates a QRCode control and sets its content, error correction level, foreground, and background colors.

```csharp
var qrCode = new QRCode
{
    Content = "https://example.com",
    ErrorCorrectionLevel = ErrorCorrectionLevel.M,
    Foreground = Brushes.Black,
    Background = Brushes.White
};
```

--------------------------------

### Add Ursa NuGet Package

Source: https://github.com/irihitech/ursa.avalonia/blob/main/README.md

Install the core Ursa UI library package using the .NET CLI.

```bash
dotnet add package Irihi.Ursa
```

--------------------------------

### Show Custom and Standard Dialogs

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/dialog-controls.md

Demonstrates how to display a non-modal custom dialog and a modal standard dialog with result handling. Requires OverlayDialogHost setup for overlay dialogs.

```csharp
// Non-modal custom dialog
OverlayDialog.ShowCustom<DetailsView, DetailsViewModel>(
    viewModel,
    hostId: "mainHost",
    options: new OverlayDialogOptions
    {
        HorizontalAnchor = HorizontalPosition.Center,
        VerticalAnchor = VerticalPosition.Center,
        CanDragMove = true
    }
);

// Modal standard dialog with result
var result = await OverlayDialog.ShowStandardAsync<ConfirmView, ConfirmViewModel>(
    confirmViewModel,
    hostId: "mainHost",
    options: new OverlayDialogOptions
    {
        Title = "Confirm",
        Mode = DialogMode.Warning,
        Buttons = DialogButton.YesNo
    }
);

if (result == DialogResult.Ok)
{
    // Process result
}
```

--------------------------------

### MultiComboBox C# Usage Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/combo-list-controls.md

Instantiates a MultiComboBox in C# and sets its items and display member path.

```csharp
var combo = new MultiComboBox
{
    Items = new[] { "C#", "Python", "JavaScript", "Rust" },
    DisplayMemberPath = "."
};
```

--------------------------------

### Avatar XAML Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/avatar-badge.md

Shows how to use the Avatar control in XAML, binding its Source property.

```xml
<u:Avatar
    xmlns:u="https://irihi.tech/ursa"
    Source="{Binding UserImage}"
    Width="40"
    Height="40"
    CornerRadius="20" />
```

--------------------------------

### EnumSelector C# Usage

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/combo-list-controls.md

Example of how to instantiate and configure an EnumSelector in C#.

```csharp
var selector = new EnumSelector
{
    EnumType = typeof(Status),
    SelectedValue = Status.Active,
    SelectionMode = EnumSelectionMode.ComboBox
};
```

--------------------------------

### Timeline Usage Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/other-controls.md

Demonstrates how to use the Timeline control in XAML to display events with custom item templates.

```xml
<u:Timeline
    xmlns:u="https://irihi.tech/ursa"
    Orientation="Vertical"
    Items="{Binding Events}">
    <u:Timeline.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding Title}" FontWeight="Bold" />
                <TextBlock Text="{Binding Description}" />
            </StackPanel>
        </DataTemplate>
    </u:Timeline.ItemTemplate>
</u:Timeline>
```

--------------------------------

### Add Semi Design Theme Packages

Source: https://github.com/irihitech/ursa.avalonia/blob/main/README.md

Install the Semi Design theme package and its Ursa integration for Avalonia applications.

```bash
dotnet add package Semi.Avalonia
dotnet add package Irihi.Ursa.Themes.Semi
```

--------------------------------

### Setup OverlayDialogHost in XAML

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/drawer.md

Add an OverlayDialogHost to your application's layout to enable drawers and dialogs. Reference it by name or use the default host.

```xml
<u:UrsaWindow xmlns:u="https://irihi.tech/ursa">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        
        <!-- Your main content -->
        <ContentControl Content="{Binding MainContent}" />
        
        <!-- Dialog/Drawer Host -->
        <u:OverlayDialogHost x:Name="MainDialogHost" />
    </Grid>
</u:UrsaWindow>
```

--------------------------------

### Badge Count Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/avatar-badge.md

Configures a Badge control to display a numerical count with an overflow indicator.

```csharp
var badge = new Badge
{
    Content = new Button { Content = "Messages" },
    Header = "5",  // Shows "5" on the badge
    CornerPosition = CornerPosition.TopRight,
    OverflowCount = 99  // Shows "99+" if count exceeds 99
};
```

--------------------------------

### Form XAML Usage Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/form-controls.md

Shows how to define a Form control and its items using XAML, including setting label properties and nesting FormItems.

```xml
<u:Form
    xmlns:u="https://irihi.tech/ursa"
    LabelPosition="Left"
    LabelWidth="100">
    <u:FormItem Label="First Name">
        <TextBox />
    </u:FormItem>
    <u:FormItem Label="Last Name">
        <TextBox />
    </u:FormItem>
    <u:FormItem Label="Email">
        <TextBox />
    </u:FormItem>
</u:Form>
```

--------------------------------

### Badge XAML Count Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/avatar-badge.md

Demonstrates using a Badge control in XAML to display a count, with content and overflow settings.

```xml
<u:Badge
    xmlns:u="https://irihi.tech/ursa"
    Header="{Binding UnreadCount}"
    CornerPosition="TopRight"
    OverflowCount="99">
    <Button Content="Messages" />
</u:Badge>
```

--------------------------------

### Add Ursa Theme Packages

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/errors.md

Install the necessary theme packages for Ursa and Semi.Avalonia. Include the theme styles in your Application.xaml.

```bash
dotnet add package Semi.Avalonia
dotnet add package Irihi.Ursa.Themes.Semi
```

```xml
<Application.Styles>
    <semi:SemiTheme Locale="en-US" />
    <semi:UrsaSemiTheme Locale="en-US" />
</Application.Styles>
```

--------------------------------

### Adding Required Dependencies

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/errors.md

Install all necessary NuGet packages for Ursa.Avalonia and its related themes. Use the `dotnet add package` command for each required package.

```bash
dotnet add package Avalonia
dotnet add package Semi.Avalonia
dotnet add package Irihi.Ursa
dotnet add package Irihi.Ursa.Themes.Semi
```

--------------------------------

### FormItem XAML Usage Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/form-controls.md

Illustrates the usage of FormItem in XAML, demonstrating how to set labels, indicate required fields, and associate input controls.

```xml
<u:FormItem Label="Username" IsRequired="True">
    <TextBox />
</u:FormItem>

<u:FormItem Label="Password" IsRequired="True">
    <PasswordBox />
</u:FormItem>

<u:FormItem Label="Remember me" NoLabel="False">
    <CheckBox />
</u:FormItem>
```

--------------------------------

### TagInput Usage Example - XAML

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/tag-input.md

Shows how to declare and configure the TagInput control using XAML, including data binding for the Tags property.

```APIDOC
### XAML

```xml
<u:TagInput
    xmlns:u="https://irihi.tech/ursa"
    PlaceholderText="Add tags"
    MaxCount="10"
    AllowDuplicates="False"
    Tags="{Binding Tags}"/>
```
```

--------------------------------

### AutoCompleteBox C# Usage Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/combo-list-controls.md

Instantiates an AutoCompleteBox in C#, setting its items source, filter mode, and minimum prefix length.

```csharp
var autoComplete = new AutoCompleteBox
{
    Items = new[] { "apple", "apricot", "avocado", "banana" },
    FilterMode = AutoCompleteFilterMode.StartsWith,
    MinimumPrefixLength = 1
};
```

--------------------------------

### TagInput Usage Example - With Custom Tag Template

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/tag-input.md

Demonstrates how to provide a custom DataTemplate for rendering individual tags within the TagInput control.

```APIDOC
### With Custom Tag Template

```xml
<u:TagInput Tags="{Binding Tags}">
    <u:TagInput.ItemTemplate>
        <DataTemplate>
            <Grid Background="LightBlue" CornerRadius="4" Padding="8,4">
                <StackPanel Orientation="Horizontal" Spacing="8">
                    <TextBlock Text="{Binding}" />
                    <Button Content="✕" Command="{Binding $parent[u:TagInput].CloseCommand}"
                            CommandParameter="{Binding}"/>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </u:TagInput.ItemTemplate>
</u:TagInput>
```
```

--------------------------------

### Basic Ursa Avalonia Application Setup

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/README.md

Configure your Avalonia application's XAML to include Ursa and Semi themes for styling.

```xml
<Application
    xmlns="https://github.com/avaloniaui"
    xmlns:semi="https://irihi.tech/semi"
    xmlns:u="https://irihi.tech/ursa">
    
    <Application.Styles>
        <semi:SemiTheme Locale="en-US" />
        <semi:UrsaSemiTheme Locale="en-US" />
    </Application.Styles>
</Application>
```

--------------------------------

### Badge Simple Notification Dot Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/avatar-badge.md

Creates a Badge control to display a simple notification dot, optionally with content and positioned to the top right.

```csharp
var badge = new Badge
{
    Content = new Image { Source = new Bitmap("icon.png") },
    Header = "●",  // Or use Dot = true
    CornerPosition = CornerPosition.TopRight
};
```

--------------------------------

### MultiAutoCompleteBox XAML Usage Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/combo-list-controls.md

Declares a MultiAutoCompleteBox in XAML, binding its items and selected items to tags.

```xml
<u:MultiAutoCompleteBox
    xmlns:u="https://irihi.tech/ursa"
    Items="{Binding AllTags}"
    SelectedItems="{Binding SelectedTags}"
    PlaceholderText="Select tags..." />
```

--------------------------------

### FormGroup XAML Usage Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/form-controls.md

Demonstrates how to use FormGroup in XAML to organize multiple FormItems under a common header within a Form.

```xml
<u:Form LabelPosition="Left" LabelWidth="120">
    <u:FormGroup Header="Personal Information">
        <u:FormItem Label="First Name" IsRequired="True">
            <TextBox />
        </u:FormItem>
        <u:FormItem Label="Last Name" IsRequired="True">
            <TextBox />
        </u:FormItem>
    </u:FormGroup>
    
    <u:FormGroup Header="Contact Information">
        <u:FormItem Label="Email" IsRequired="True">
            <TextBox />
        </u:FormItem>
        <u:FormItem Label="Phone">
            <TextBox />
        </u:FormItem>
    </u:FormGroup>
</u:Form>
```

--------------------------------

### TreeComboBox C# Usage Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/combo-list-controls.md

Instantiates a TreeComboBox in C#, providing hierarchical data and specifying display and value paths.

```csharp
public class Category
{
    public string Name { get; set; }
    public List<Item> Items { get; set; }
}

var treeCombo = new TreeComboBox
{
    Items = categories,
    DisplayMemberPath = "Name",
    SelectedValuePath = "Id"
};
```

--------------------------------

### Complete Form Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/form-controls.md

This XAML snippet demonstrates how to construct a complete form using Ursa's Form, FormGroup, and FormItem controls. It includes various input types like TextBox, PasswordBox, ComboBox, and interactive elements like CheckBox and Button.

```xml
<Window
    xmlns="https://github.com/avaloniaui"
    xmlns:u="https://irihi.tech/ursa"
    Title="User Registration">
    
    <ScrollViewer>
        <u:Form
            LabelPosition="Left"
            LabelWidth="120"
            LabelAlignment="Right"
            Padding="20">
            
            <u:FormGroup Header="Account Details">
                <u:FormItem Label="Username" IsRequired="True">
                    <TextBox Watermark="Enter username" />
                </u:FormItem>
                <u:FormItem Label="Password" IsRequired="True">
                    <PasswordBox />
                </u:FormItem>
                <u:FormItem Label="Confirm Password" IsRequired="True">
                    <PasswordBox />
                </u:FormItem>
            </u:FormGroup>
            
            <u:FormGroup Header="Personal Information">
                <u:FormItem Label="Full Name" IsRequired="True">
                    <TextBox />
                </u:FormItem>
                <u:FormItem Label="Email" IsRequired="True">
                    <TextBox InputType="Email" />
                </u:FormItem>
                <u:FormItem Label="Phone">
                    <TextBox />
                </u:FormItem>
            </u:FormGroup>
            
            <u:FormGroup Header="Preferences">
                <u:FormItem Label="Subscribe to Newsletter">
                    <CheckBox />
                </u:FormItem>
                <u:FormItem Label="Preferred Language">
                    <ComboBox>
                        <ComboBoxItem>English</ComboBoxItem>
                        <ComboBoxItem>Spanish</ComboBoxItem>
                        <ComboBoxItem>French</ComboBoxItem>
                    </ComboBox>
                </u:FormItem>
            </u:FormGroup>
            
            <StackPanel Orientation="Horizontal" Spacing="10" Margin="0,20,0,0">
                <Button Content="Submit" />
                <Button Content="Cancel" />
            </StackPanel>
        </u:Form>
    </ScrollViewer>
</Window>
```

--------------------------------

### Inspect Visual Tree with Ursa.Avalonia

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/errors.md

Use debug console commands to inspect the visual tree. Find the `OverlayDialogHost` and get visual ancestors using `VisualTree.GetVisualAncestors`.

```csharp
// In debug console
var host = this.FindControl<OverlayDialogHost>("DialogHost");
var visual = VisualTree.GetVisualAncestors(this).First();
```

--------------------------------

### WindowNotificationManager Usage Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/notification-toast.md

Configures a WindowNotificationManager for a specific window, setting its position and maximum displayed items, then shows a new notification.

```csharp
var manager = new WindowNotificationManager(windowControl)
{
    Position = NotificationPosition.TopRight,
    MaxItems = 5
};

manager.Show(new Notification(
    title: "Success",
    content: "Operation completed successfully.",
    type: NotificationType.Success,
    expiration: TimeSpan.FromSeconds(4)
));
```

--------------------------------

### Descriptions Usage Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/other-controls.md

Configures a Descriptions control in XAML to display key-value pairs with two columns and borders, using a DataTemplate for individual items.

```xml
<u:Descriptions
    xmlns:u="https://irihi.tech/ursa"
    Column="2"
    Bordered="True"
    Items="{Binding Properties}">
    <u:Descriptions.ItemTemplate>
        <DataTemplate>
            <u:DescriptionsItem
                Label="{Binding Key}"
                Content="{Binding Value}" />
        </DataTemplate>
    </u:Descriptions.ItemTemplate>
</u:Descriptions>
```

--------------------------------

### User List with Avatars and Status Badges XAML

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/avatar-badge.md

An example of an ItemsControl displaying a list of users, each with an Avatar and a status Badge.

```xml
<ItemsControl Items="{Binding Users}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <u:Badge
                Dot="True"
                CornerPosition="BottomRight">
                <u:Avatar
                    Source="{Binding Image}"
                    Width="40"
                    Height="40"
                    CornerRadius="20" />
            </u:Badge>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>
```

--------------------------------

### SelectionList Control XAML Usage

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/combo-list-controls.md

Example of how to use the SelectionList control in XAML for multiple item selection.

```xml
<u:SelectionList
    xmlns:u="https://irihi.tech/ursa"
    Items="{Binding Items}"
    SelectedItems="{Binding SelectedItems}"
    SelectionMode="Multiple" />
```

--------------------------------

### EnumSelector XAML Usage

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/combo-list-controls.md

Example of how to use the EnumSelector control in XAML, binding to a local enum type.

```xml
<u:EnumSelector
    xmlns:u="https://irihi.tech/ursa"
    EnumType="{x:Type local:Priority}"
    SelectedValue="{Binding Priority}"
    SelectionMode="ComboBox" />
```

--------------------------------

### Show Modal Dialog with Result

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/README.md

Demonstrates how to display a standard modal dialog and handle its result. Ensure the owner window and dialog options are correctly configured.

```csharp
var result = await Dialog.ShowStandardAsync(
    new ConfirmView(),
    new ConfirmViewModel(),
    owner: window,
    options: new DialogOptions
    {
        Title = "Confirm",
        Button = DialogButton.YesNo,
        Mode = DialogMode.Warning
    }
);

if (result == DialogResult.Yes)
{
    // User confirmed
}
```

--------------------------------

### MultiComboBox XAML Usage Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/combo-list-controls.md

Declares a MultiComboBox in XAML, binding its items and selected items to properties.

```xml
<u:MultiComboBox
    xmlns:u="https://irihi.tech/ursa"
    Items="{Binding AvailableItems}"
    SelectedItems="{Binding SelectedItems}"
    PlaceholderText="Select items..." />
```

--------------------------------

### ShowCustom (Non-Modal) Overloads

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/drawer.md

Methods to display a non-modal custom drawer without standard buttons.

```csharp
public static void ShowCustom<TView, TViewModel>(
    TViewModel vm,
    string? hostId = null,
    DrawerOptions? options = null)
    where TView : Control, new()
```

```csharp
public static void ShowCustom(
    Control control,
    object? vm,
    string? hostId = null,
    DrawerOptions? options = null)
```

--------------------------------

### Badge XAML Dot Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/avatar-badge.md

Shows a Badge control used as a dot for status indication, overlaid on an Avatar.

```xml
<u:Badge
    Dot="True"
    CornerPosition="TopRight">
    <u:Avatar Source="{Binding UserImage}" />
</u:Badge>
```

--------------------------------

### Show Overlay Dialog

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/README.md

Illustrates how to display an overlay dialog within the UI hierarchy. Specify the view model, host ID, and positioning options.

```csharp
OverlayDialog.ShowStandard<DetailsView, DetailsViewModel>(
    viewModel,
    hostId: "mainHost",
    options: new OverlayDialogOptions
    {
        HorizontalAnchor = HorizontalPosition.Center,
        VerticalAnchor = VerticalPosition.Center
    }
);
```

--------------------------------

### TagInput Usage Example - With Separator

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/tag-input.md

Illustrates configuring the TagInput control to use a custom separator character for input, such as a comma.

```APIDOC
### With Separator

```csharp
var input = new TagInput
{
    Tags = new ObservableCollection<string>(),
    Separator = ",",  // Split on comma
    PlaceholderText = "Enter comma-separated tags"
};
```
```

--------------------------------

### Configure Drawer Options

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/configuration.md

Use DrawerOptions to configure drawers, specifying their position, dimensions, and UI behavior. Options include light dismissal and drag-move capabilities.

```csharp
var options = new DrawerOptions
{
    // Position where drawer slides from
    Position = Position.Right,  // Left, Right, Top, Bottom
    
    // Dimensions
    MinWidth = 250,
    MaxWidth = 400,
    MinHeight = null,
    MaxHeight = null,
    
    // UI behavior
    CanLightDismiss = true,     // Click outside to close
    IsCloseButtonVisible = true,
    CanDragMove = true,
    CanResize = true,
    
    // Standard drawer buttons
    Title = "Navigation",
    Buttons = DialogButton.OKCancel,
    
    // Host targeting
    TopLevelHashCode = null,
    
    // Scrolling
    HorizontalScrollBarVisibility = ScrollBarVisibility.Auto,
    VerticalScrollBarVisibility = ScrollBarVisibility.Auto,
    
    // Styling
    StyleClass = "dark-drawer"
};

OverlayDrawer.ShowStandard(view, viewModel, hostId: "mainHost", options: options);
```

--------------------------------

### Enabling Virtualization and Pagination for Lists

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/errors.md

Optimize list control performance with large datasets by enabling item virtualization and using pagination. This limits the number of items rendered and processed at any given time.

```xaml
// Use pagination
<u:Pagination
    Total="10000"
    PageSize="20"
    Current="{Binding CurrentPage, Mode=TwoWay}" />
```

--------------------------------

### OverlayDialog Methods

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/dialog-controls.md

Static utility methods for showing overlay dialogs. These methods mirror the standard window dialog API and support both non-modal and modal dialogs with customizable options.

```APIDOC
## OverlayDialog Class

Static utility class for showing overlay dialogs within the UI hierarchy.

```csharp
namespace Ursa.Controls;

public static partial class OverlayDialog
```

### Methods

Overlay dialog methods mirror the window dialog API:

- `ShowStandard<TView, TViewModel>()` — Non-modal standard dialog
- `ShowCustom<TView, TViewModel>()` — Non-modal custom dialog
- `ShowStandardAsync<TView, TViewModel>()` — Modal standard dialog
- `ShowCustomAsync<TView, TViewModel, TResult>()` — Modal custom dialog

### Parameters

| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| `vm` / `view` | `TViewModel` / `Control` | — | ViewModel or view control to display |
| `hostId` | `string?` | `null` | ID of the specific dialog host; uses first host if null |
| `options` | `OverlayDialogOptions?` | Default | Dialog configuration options |
| `token` | `CancellationToken?` | `null` | Optional cancellation token for async dialogs |
```

--------------------------------

### Initialize TagInput Tags Property

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/errors.md

When using TagInput, ensure the Tags property is initialized, for example, with an ObservableCollection. Configure MaxCount and AllowDuplicates as needed.

```csharp
var tagInput = new TagInput
{
    Tags = new ObservableCollection<string>(),  // Must be initialized
    MaxCount = 10,
    AllowDuplicates = false
};
```

--------------------------------

### DisableContainer Usage Example

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/other-controls.md

Applies a DisableContainer to a StackPanel containing a TextBox and Button, binding its IsDisabled property to a ViewModel's IsLoading property.

```xml
<u:DisableContainer
    xmlns:u="https://irihi.tech/ursa"
    IsDisabled="{Binding IsLoading}">
    <StackPanel>
        <TextBox />
        <Button Content="Submit" />
    </StackPanel>
</u:DisableContainer>
```

--------------------------------

### Use Overlay Dialogs to Avoid Window Handle Exhaustion

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/errors.md

For frequent operations, use lightweight overlay dialogs (`OverlayDialog.ShowStandard`) instead of window dialogs (`Dialog.ShowStandardAsync`) to prevent window handle exhaustion.

```csharp
// Instead of window dialogs for frequent operations
await Dialog.ShowStandardAsync(view, vm);  // Creates window

// Use overlay dialogs
OverlayDialog.ShowStandard(view, vm);  // Lightweight
```

--------------------------------

### Breadcrumb Control XAML Usage

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/combo-list-controls.md

Example of how to use the Breadcrumb control in XAML, displaying navigation items and defining a custom item template.

```xml
<u:Breadcrumb
    xmlns:u="https://irihi.tech/ursa"
    Items="{Binding NavigationPath}">
    <u:Breadcrumb.ItemTemplate>
        <DataTemplate>
            <Button Content="{Binding Title}" Command="{Binding NavigateCommand}" />
        </DataTemplate>
    </u:Breadcrumb.ItemTemplate>
</u:Breadcrumb>
```

--------------------------------

### Standard Dialog Configuration

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/dialog-controls.md

Configure and display a standard modal dialog with custom options. Use this for user confirmations or information requiring a response.

```csharp
var options = new DialogOptions
{
    Title = "Confirm Action",
    Mode = DialogMode.Warning,
    Button = DialogButton.YesNoCancel,
    CanResize = true,
    StartupLocation = WindowStartupLocation.CenterOwner
};

var result = await Dialog.ShowStandardAsync(
    new ConfirmView(),
    new ConfirmViewModel(),
    owner: window,
    options: options
);

if (result == DialogResult.Ok)
{
    // User confirmed
}
```

--------------------------------

### OnApplyTemplate Method

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/ursa-view.md

Overrides the OnApplyTemplate method to apply the control template and initialize the dialog host if it exists within the template.

```csharp
protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
```

--------------------------------

### Create Notification with Click and Close Actions

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/notification-toast.md

Illustrates creating a notification with custom `onClick` and `onClose` event handlers to manage user interactions.

```csharp
var notification = new Notification(
    title: "Download Complete",
    content: "File.zip has been downloaded.",
    type: NotificationType.Success,
    expiration: TimeSpan.FromSeconds(8),
    onClick: () =>
    {
        // Open file location or perform action
        System.Diagnostics.Process.Start("explorer.exe", "/select, File.zip");
    },
    onClose: (reason) =>
    {
        if (reason == MessageCloseReason.User)
        {
            Console.WriteLine("User dismissed the notification");
        }
    }
);

manager.Show(notification);
```

--------------------------------

### Show Custom Drawer with Typed Return

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/drawer.md

Launches a custom drawer that can return a specific type of data. Useful for selection or input scenarios where a precise result is needed.

```csharp
var selectedItem = await OverlayDrawer.ShowCustomAsync<SelectionDrawer, SelectionViewModel, string>(
    selectionViewModel,
    hostId: "mainHost",
    options: new DrawerOptions
    {
        Position = Position.Left,
        CanLightDismiss = false,
        MinWidth = 250
    }
);

if (selectedItem != null)
{
    // Use selected item
}
```

--------------------------------

### ShowCustom (Non-Modal) Method

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/dialog-controls.md

Shows a non-modal dialog with fully customized content using a Control for the view.

```csharp
public static void ShowCustom(
    Control view,
    object? vm,
    Window? owner = null,
    DialogOptions? options = null)
```

--------------------------------

### ReactiveUI Integration for Ursa

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/README.md

Shows a basic ReactiveWindow that can be extended with Ursa features. This integration is facilitated by the 'Irihi.Ursa.ReactiveUIExtension' package.

```csharp
// Package: Irihi.Ursa.ReactiveUIExtension
public class MyWindow : ReactiveWindow<MyViewModel>
{
    // Reactive window with Ursa features
}
```

--------------------------------

### Configure Notification Manager and Notification

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/configuration.md

Set up the notification manager with position and item limits, and configure individual notification properties like title, content, type, and expiration.

```csharp
// WindowNotificationManager setup
var manager = new WindowNotificationManager(window)
{
    Position = NotificationPosition.TopRight,
    MaxItems = 5  // Show max 5 notifications
};

// Individual notification configuration
var notification = new Notification
{
    Title = "Upload Complete",
    Content = "File has been uploaded.",
    Type = NotificationType.Success,
    Expiration = TimeSpan.FromSeconds(5),  // Auto-close after 5 seconds
    ShowIcon = true,
    ShowClose = true,
    OnClick = () => { /* handle click */ },
    OnClose = (reason) => { /* handle close */ }
};

manager.Show(notification);
```

--------------------------------

### ShowCustom (Non-Modal) Generic Method

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/dialog-controls.md

Shows a non-modal dialog with fully customized content using generic types for view and view model.

```csharp
public static void ShowCustom<TView, TViewModel>(
    TViewModel? vm,
    Window? owner = null,
    DialogOptions? options = null)
    where TView : Control, new()
```

--------------------------------

### TagInput with Custom Item Template

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/tag-input.md

Defines a custom DataTemplate for rendering individual tags within the TagInput. This example shows a blue background, rounded corners, and a close button with a command binding.

```xml
<u:TagInput Tags="{Binding Tags}">
    <u:TagInput.ItemTemplate>
        <DataTemplate>
            <Grid Background="LightBlue" CornerRadius="4" Padding="8,4">
                <StackPanel Orientation="Horizontal" Spacing="8">
                    <TextBlock Text="{Binding}" />
                    <Button Content="✕" Command="{Binding $parent[u:TagInput].CloseCommand}"
                            CommandParameter="{Binding}"/>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </u:TagInput.ItemTemplate>
</u:TagInput>
```

--------------------------------

### Show Bottom Drawer Panel

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/drawer.md

Displays a standard drawer anchored to the bottom of the screen. Configure its appearance and behavior using DrawerOptions.

```csharp
OverlayDrawer.ShowStandard(
    new FilterPanel(),
    filterViewModel,
    hostId: "mainHost",
    options: new DrawerOptions
    {
        Position = Position.Bottom,
        CanLightDismiss = true,
        MinHeight = 200,
        MaxHeight = 400
    }
);
```

--------------------------------

### ShowCustomAsync with Typed Return

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/drawer.md

Opens a custom drawer asynchronously and returns a specific type of data. This method is flexible for scenarios where you need to select an item or get a specific piece of data back from the drawer.

```APIDOC
## Custom Drawer with Typed Return

### Description
Displays a custom drawer asynchronously and allows for a specific return type, enabling the retrieval of selected items or custom data upon drawer closure. This is useful for selection-based interactions.

### Method
`OverlayDrawer.ShowCustomAsync<TDrawer, TViewModel, TResult>`

### Parameters
- **viewModel**: The ViewModel for the custom drawer content.
- **hostId**: The ID of the `OverlayDialogHost` to use.
- **options**: Configuration options for the drawer, such as `Position`, `CanLightDismiss`, and `MinWidth`.

### Request Example
```csharp
var selectedItem = await OverlayDrawer.ShowCustomAsync<SelectionDrawer, SelectionViewModel, string>(
    selectionViewModel,
    hostId: "mainHost",
    options: new DrawerOptions
    {
        Position = Position.Left,
        CanLightDismiss = false,
        MinWidth = 250
    }
);

if (selectedItem != null)
{
    // Use selected item
}
```
```

--------------------------------

### DialogOptions Class

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/types.md

Configuration options for displaying dialogs. Allows customization of startup location, title, buttons, and appearance.

```APIDOC
## DialogOptions Class

### Description
Options for configuring dialog behavior and appearance.

### Properties
- `StartupLocation` (WindowStartupLocation) - The initial location of the dialog window. Defaults to `WindowStartupLocation.CenterOwner`.
- `Position` (PixelPoint?) - The specific pixel position of the dialog window.
- `Title` (string?) - The title displayed in the dialog's title bar.
- `Mode` (DialogMode) - The mode of the dialog. Defaults to `DialogMode.None`.
- `Button` (DialogButton) - The buttons to display in the dialog. Defaults to `DialogButton.OKCancel`.
- `IsCloseButtonVisible` (bool?) - Whether the close button is visible. Defaults to `true`.
- `ShowInTaskBar` (bool) - Whether the dialog should appear in the task bar. Defaults to `true`.
- `CanDragMove` (bool) - Whether the dialog can be moved by dragging. Defaults to `true`.
- `CanResize` (bool) - Whether the dialog can be resized.
- `StyleClass` (string?) - A custom style class to apply to the dialog.
- `HorizontalScrollBarVisibility` (ScrollBarVisibility) - Visibility of the horizontal scroll bar. Defaults to `ScrollBarVisibility.Auto`.
- `VerticalScrollBarVisibility` (ScrollBarVisibility) - Visibility of the vertical scroll bar. Defaults to `ScrollBarVisibility.Auto`.
```

--------------------------------

### ViewModel for TagInput Integration

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/tag-input.md

A sample ViewModel demonstrating how to manage the Tags collection for a TagInput control using data binding. It includes a property for the ObservableCollection and initializes it with sample data.

```csharp
public class TagViewModel : NotifyPropertyChangedBase
{
    private ObservableCollection<string> _tags;

    public ObservableCollection<string> Tags
    {
        get => _tags;
        set => Set(ref _tags, value);
    }

    public TagViewModel()
    {
        _tags = new ObservableCollection<string> { "csharp", "avalonia" };
    }
}
```

--------------------------------

### Dialog.ShowCustom (Non-Modal)

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/dialog-controls.md

Shows a non-modal window-based dialog with fully customized content. User interaction with the owner window is allowed, and multiple dialogs can be displayed concurrently.

```APIDOC
## Dialog.ShowCustom (Non-Modal)

### Description
Shows a non-modal dialog with fully customized content. Non-modal dialogs allow user interaction with the owner window. Multiple dialogs can be shown simultaneously.

### Method
`static void ShowCustom<TView, TViewModel>(TViewModel? vm, Window? owner = null, DialogOptions? options = null)` where `TView` : `Control`, new()
`static void ShowCustom(Control view, object? vm, Window? owner = null, DialogOptions? options = null)`

### Parameters
#### Parameters
- **vm / view** (`TViewModel` / `Control`) - Required - ViewModel or view control to display
- **owner** (`Window?`) - Optional - Owner window; main window used if null
- **options** (`DialogOptions?`) - Optional - Dialog configuration options
```

--------------------------------

### ShowStandard (Non-Modal) Overloads

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/drawer.md

Methods to display a non-modal standard drawer with different parameter options.

```csharp
public static void ShowStandard<TView, TViewModel>(
    TViewModel vm,
    string? hostId = null,
    DrawerOptions? options = null)
    where TView : Control, new()
```

```csharp
public static void ShowStandard(
    Control control,
    object? vm,
    string? hostId = null,
    DrawerOptions? options = null)
```

```csharp
public static void ShowStandard(
    object? vm,
    string? hostId = null,
    DrawerOptions? options = null)
```

--------------------------------

### ShowCustomAsync<TResult> Overloads

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/drawer.md

Methods to display a modal custom drawer and wait for a typed result. Returns Task<TResult?>.

```csharp
public static Task<TResult?> ShowCustomAsync<TView, TViewModel, TResult>(
    TViewModel vm,
    string? hostId = null,
    DrawerOptions? options = null)
```

```csharp
public static Task<TResult?> ShowCustomAsync<TResult>(
    Control control,
    object? vm,
    string? hostId = null,
    DrawerOptions? options = null)
```

--------------------------------

### Show Overlay Dialog with Host ID

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/errors.md

Use OverlayDialog.ShowStandard to display an overlay dialog. You can use the default host by passing null for hostId, or specify a custom host ID.

```csharp
// Use default host (first found)
OverlayDialog.ShowStandard(view, vm);  // hostId = null

// Or specify host ID
var hostId = "mainHost";
OverlayDialog.ShowStandard(view, vm, hostId: hostId);
```

--------------------------------

### Notification Full Constructor

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/notification-toast.md

Initializes a new Notification with specified title, content, type, expiration, and callbacks. Supports default values for most parameters.

```csharp
public Notification(
    string? title,
    string? content,
    NotificationType type = NotificationType.Information,
    TimeSpan? expiration = null,
    bool showClose = true,
    Action? onClick = null,
    Action<MessageCloseReason>? onClose = null)
```

--------------------------------

### ShowCustomAsync (Modal) Method

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/api-reference/dialog-controls.md

Shows a modal custom dialog, waits for a typed result, and returns it. Uses a Control for the view.

```csharp
public static Task<TResult?> ShowCustomAsync<TResult>(
    Control view,
    object? vm,
    Window? owner = null,
    DialogOptions? options = null)
```

--------------------------------

### Initialize and Attach WindowNotificationManager

Source: https://github.com/irihitech/ursa.avalonia/blob/main/_autodocs/errors.md

Initialize WindowNotificationManager in the MainWindow's Opened event handler, passing the window instance. Configure Position and MaxItems as needed.

```csharp
public partial class MainWindow : Window
{
    private WindowNotificationManager _notificationManager;

    public MainWindow()
    {
        InitializeComponent();
        this.Opened += (s, e) =>
        {
            // Initialize after window is open
            _notificationManager = new WindowNotificationManager(this)
            {
                Position = NotificationPosition.TopRight,
                MaxItems = 5
            };
        };
    }

    public void ShowNotification(string title, string message)
    {
        _notificationManager?.Show(new Notification(title, message));
    }
}
```