### Install UraniumUI.WebComponents package

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/web-components/CodeView.md

Install the UraniumUI.WebComponents package to use the CodeView component.

```bash
dotnet add package UraniumUI.WebComponents
```

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

### Install templates and create a UraniumUI app

Source: https://github.com/enisn/uraniumui/blob/develop/README.md

Installs the UraniumUI project templates and creates a ready-to-run app named MyMauiApp.

```bash
dotnet new install UraniumUI.Templates
dotnet new uraniumui-app -n MyMauiApp
```

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

### Install UraniumUI.Blurs package

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/Blurs.md

Install the UraniumUI.Blurs NuGet package, which is required before using the blur effect.

```bash
dotnet add package UraniumUI.Blurs
```

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

### Install UraniumUI templates from NuGet

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/Getting-Started.md

Installs the latest UraniumUI project templates from NuGet using the dotnet CLI.

```bash
dotnet new install UraniumUI.Templates
```

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

### Install UraniumUI.Dialogs.CommunityToolkit package

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/dialogs/Index.md

Adds the UraniumUI.Dialogs.CommunityToolkit NuGet package to the project.

```bash
dotnet add package UraniumUI.Dialogs.CommunityToolkit
```

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

### Install UraniumUI.Validations.DataAnnotations package

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/validations/DataAnnotations.md

Install the UraniumUI.Validations.DataAnnotations NuGet package to enable DataAnnotations validation support.

```bash
dotnet add package UraniumUI.Validations.DataAnnotations
```

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

### Install UraniumUI.Dialogs.Mopups package

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/dialogs/Index.md

Adds the UraniumUI.Dialogs.Mopups NuGet package to the project.

```bash
dotnet add package UraniumUI.Dialogs.Mopups
```

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

### Template parameters examples

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/Getting-Started.md

Shows how to pass parameters to the template to customize the icon library, dialog integration, and blur support.

```bash
dotnet new uraniumui-app -n MyProject --Icons FluentIcons
```

```bash
dotnet new uraniumui-app -n MyProject --Dialogs CommunityToolkit
```

```bash
dotnet new uraniumui-app -n MyProject --Blurs true
```

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

### Opt in to the Turkish accessibility language pack

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/best-practices/LocalizedSemanticText.md

Opts an app into the Turkish language pack by chaining UseUraniumUITurkishAccessibility after the standard Uranium UI and Material initializers. This is the one-line setup required after installing the package.

```csharp
builder
    .UseUraniumUI()
    .UseUraniumUIMaterial()
    .UseUraniumUITurkishAccessibility();
```

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

### Example view model for AutoFormView

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/infrastructure/AutoFormView.md

Example view model with reactive properties that AutoFormView will generate editors for.

```csharp
public class AutoFormViewPageViewModel : ViewModelBase
{
    [Reactive] public string Email { get; set; }
    [Reactive] public string FullName { get; set; }
    [Reactive] public Gender Gender { get; set; }
    [Reactive] public DateTime? BirthDate { get; set; }
    [Reactive] public TimeSpan? MeetingTime { get; set; }
    [Reactive] public int? NumberOfSeats { get; set; }
    [Reactive] public bool IsTermsAndConditionsAccepted { get; set; }
}
```

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

### Paginator ViewModel example

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/themes/material/components/Paginator.md

Complete ViewModel example for the Paginator. Implements CurrentPage and TotalPages properties with change notification and a SetPageCommand that updates the current page and loads data.

```csharp
public class MyViewModel : BindableObject
{
    private int currentPage = 1;
    private int totalPages = 10;

    public int CurrentPage
    {
        get => currentPage;
        set
        {
            if (currentPage != value)
            {
                currentPage = value;
                OnPropertyChanged();
            }
        }
    }

    public int TotalPages
    {
        get => totalPages;
        set
        {
            if (totalPages != value)
            {
                totalPages = value;
                OnPropertyChanged();
            }
        }
    }

    public ICommand SetPageCommand => new Command<int>(page =>
    {
        CurrentPage = page;
        // Load data for the new page
    });
}
```

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

### CI build and test commands

Source: https://github.com/enisn/uraniumui/blob/develop/AGENTS.md

Full CI shape from repo root: install MAUI workload, build, then test.

```bash
dotnet workload install maui
```

```bash
dotnet build
```

```bash
dotnet test
```

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

### Implement TextField in XAML

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/themes/material/components/TextField.md

Basic usage examples for TextField, including standard inputs and a numeric keyboard configuration.

```xml
<material:TextField Title="Name" />
<material:TextField Title="Surname" />
<material:TextField Title="Age" Keyboard="Numeric" />
```

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

### XAML Usage

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/infrastructure/Dropdown.md

Example of using the Dropdown control in XAML with ItemsSource, SelectedItem, and Placeholder properties.

```APIDOC
## XAML Usage

### Description
Example of using the Dropdown control in XAML with ItemsSource, SelectedItem, and Placeholder properties.

### Namespace
`UraniumUI.Controls`

### XAML Namespace Declaration
```xml
xmlns:uranium="http://schemas.enisn-projects.io/dotnet/maui/uraniumui"
```

### Example
```xml
<uranium:Dropdown ItemsSource="{Binding Items}" SelectedItem="{Binding SelectedItem}" Placeholder="Choose" />
```

### Properties
- **ItemsSource** (IEnumerable) - The collection of items to display in the dropdown.
- **SelectedItem** (object) - The selected item in the dropdown.
- **Placeholder** (string) - The text to display when no item is selected.
- **PlaceholderColor** (Color) - The color of the placeholder text.
- **TextColor** (Color) - The color of the text in the dropdown.
- **HorizontalTextAlignment** (TextAlignment) - The horizontal alignment of the text in the dropdown.
```

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

### Create a UraniumContentPage with dotnet CLI

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/infrastructure/UraniumContentPage.md

Install the UraniumUI.Templates NuGet package, then create a new UraniumContentPage with the specified name and namespace. The -na parameter sets the namespace; if omitted, the default is MauiApp1. Visual Studio automatically provides the namespace.

```bash
dotnet new install UraniumUI.Templates
```

```bash
dotnet new uraniumcontentpage -n MyPage -na MyNamespace
```

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

### Chip example with multiple chips

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/themes/material/Chip.md

Shows a horizontal stack of two chips, one with default remove button and one with the remove button hidden.

```xml
<HorizontalStackLayout Spacing="8">
    <material:Chip Text="Apple" />
    <material:Chip Text="Orange" IsDestroyVisible="False" />
</HorizontalStackLayout>
```

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

### Range selection with RangeStartDate and RangeEndDate bindings

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/infrastructure/CalendarView.md

Enable range selection by setting SelectionMode to Range and binding RangeStartDate and RangeEndDate. The first selectable tap sets RangeStartDate and clears RangeEndDate; the second completes the range. If the second tap is before the first, the range is normalized into date order. Tapping the same date twice creates a one-day range. After a complete range, the next selectable tap starts a new range.

```xml
<uranium:CalendarView
    SelectionMode="Range"
    RangeStartDate="{Binding StartDate}"
    RangeEndDate="{Binding EndDate}" />
```

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

### BlurEffect Properties

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/Blurs.md

Lists the configurable properties of the BlurEffect with their types, defaults, and usage examples.

```APIDOC
## BlurEffect Properties

### Description
Defines the configurable properties of the BlurEffect for .NET MAUI, including blur mode, accent color, opacity, and Android-specific strategies.

### Properties

#### Mode
- **Type**: `BlurMode`
- **Default**: Follows current application theme
- **Description**: Defines the blur mode. It can be `Light` or `Dark`.

#### AccentColor
- **Type**: `Color`
- **Description**: Defines the tint color of the blur effect.

#### AccentOpacity
- **Type**: `float`
- **Default**: `0.2`
- **Description**: Defines the opacity of the tint color.

#### AndroidStrategy
- **Type**: `AndroidBlurStrategy`
- **Default**: `Default`
- **Description**: Defines which Android blur strategy is used. Possible values: `Default`, `RenderEffect`, `Material`, `RealtimeCapture`, `StaticCapture`.

#### AndroidRealtimeCaptureFps
- **Type**: `int`
- **Default**: `15`
- **Description**: Defines the maximum capture update rate for `RealtimeCapture`. Values are clamped between `1` and `60`.

#### AndroidCaptureDownsampleFactor
- **Type**: `float`
- **Default**: `8`
- **Description**: Defines how much the Android capture bitmap is downsampled before blur. Larger values improve performance but reduce blur quality. Values are clamped between `1` and `32`.

### Usage Examples

#### Mode Example
```xml
<StackLayout>
    <StackLayout.Effects>
        <uranium:BlurEffect Mode="Dark" />
    </StackLayout.Effects>
    <!-- Your content goes here -->
</StackLayout>
```

#### AccentColor Example
```xml
<StackLayout>
    <StackLayout.Effects>
        <uranium:BlurEffect AccentColor="Purple"/>
    </StackLayout.Effects>
    <!-- Your content goes here -->
</StackLayout>
```

#### AccentOpacity Example
```xml
<StackLayout>
    <StackLayout.Effects>
        <uranium:BlurEffect Mode="Dark" AccentOpacity="0.8" />
    </StackLayout.Effects>
    <!-- Your content goes here -->
</StackLayout>
```

#### AndroidStrategy Example
```xml
<StackLayout>
    <StackLayout.Effects>
        <uranium:BlurEffect AndroidStrategy="RealtimeCapture" />
    </StackLayout.Effects>
    <!-- Your content goes here -->
</StackLayout>
```

```

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

### Range Selection Mode

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/infrastructure/CalendarView.md

Allows users to select a continuous range. Bind RangeStartDate and RangeEndDate. The first selectable tap sets RangeStartDate and clears RangeEndDate. The second selectable tap completes the range. If the second tap is before the first, the start and end are normalized into date order. Tapping the same date twice creates a one-day range. After a complete range is selected, the next selectable tap starts a new range.

```APIDOC
## Range Selection Mode

### Description
Allows users to select a continuous range. Bind RangeStartDate and RangeEndDate. The first selectable tap sets RangeStartDate and clears RangeEndDate. The second selectable tap completes the range. If the second tap is before the first, the start and end are normalized into date order. Tapping the same date twice creates a one-day range. After a complete range is selected, the next selectable tap starts a new range.

### Usage Example
```xml
<uranium:CalendarView
    SelectionMode="Range"
    RangeStartDate="{Binding StartDate}"
    RangeEndDate="{Binding EndDate}" />
```

### Properties
- **SelectionMode** (enum) - Set to "Range" to enable range selection.
- **RangeStartDate** (DateTime?) - The start date of the selected range.
- **RangeEndDate** (DateTime?) - The end date of the selected range.

```

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

### DisplayTextPromptAsync

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/dialogs/Index.md

Displays a text prompt dialog to get a text input from the user. Returns the entered text.

```APIDOC
## DisplayTextPromptAsync

### Description
Displays a text prompt dialog to get a text input from the user. Returns the entered text. All parameters are same with MAUI default `DisplayPromptAsync` method.

### Method
DisplayTextPromptAsync

### Parameters
- **message** (string) - Required - Message of the dialog.
- **title** (string) - Required - Title of the dialog.
- **placeholder** (string) - Optional - Placeholder text for the input.

### Request Example
```csharp
var result = await this.DisplayTextPromptAsync("Your Name", "What is your name?", placeholder: "Uvuvwevwevwe...Osas");

await DisplayAlert("Result:", result, "OK");
```

### Response
Returns the entered text as a string.
```

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

### Selection colors example

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/themes/material/components/MultiplePickerField.md

Customize chip background, text, and destroy icon colors directly on MultiplePickerField.

```xml
<material:MultiplePickerField
    Title="Pick some options"
    ItemsSource="{Binding Items}"
    ChipBackgroundColor="DeepSkyBlue"
    ChipTextColor="White"
    ChipDestroyIconColor="White" />
```

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

### SelectableLabel usage example

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/infrastructure/SelectableLabel.md

Shows how to define a SelectableLabel with text and line break mode. The control is in the UraniumUI.Controls namespace and supports Label's text-related properties.

```xml
<uranium:SelectableLabel
    Text="You can select and copy this text."
    LineBreakMode="WordWrap" />
```

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

### TreeView with selection binding and command

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/whats-new/What-Is-New-In-3.0.md

Configure a material:TreeView with ItemsSource, SelectedItem, and SelectedItemChangedCommand for selection handling. This example shows the new virtualized TreeView in XAML.

```xml
<material:TreeView
    ItemsSource="{Binding Nodes}"
    SelectedItem="{Binding SelectedNode}"
    SelectedItemChangedCommand="{Binding SelectedNodeChangedCommand}" />
```

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

### Configure ColorResource and StyleResource in App.xaml

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/theming/ColorSystem.md

Use this XML in your App.xaml to merge default theme resources. Include both ColorResource and StyleResource to get all theme resources, as they are separated for theme development needs.

```xml
<?xml version = "1.0" encoding = "UTF-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:App1"
             xmlns:u="http://schemas.enisn-projects.io/dotnet/maui/uraniumui"
             x:Class="App1.App">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                <!-- 👇 You can use theme colors right after your Colors.xaml -->
                <u:ColorResource />
                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
                
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>
```

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

### Icon property example

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/themes/material/components/MultiplePickerField.md

Set an icon on the left side using the Icon property. FontImageSource is recommended because its color can change when focused.

```xml
 <material:MultiplePickerField
    Title="Pick some options"
    Icon="{FontImageSource FontFamily=MaterialOutlined, Glyph={x:Static m:MaterialOutlined.Mail}}"/>
```

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

### Create a blank UraniumUI app

Source: https://github.com/enisn/uraniumui/blob/develop/README.md

Creates a lighter starter project with the blank app template.

```bash
dotnet new uraniumui-blank-app -n MyMauiApp
```

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

### Create a new UraniumUI project

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/Getting-Started.md

Creates a new UraniumUI project with the default template or the blank starter template.

```bash
dotnet new uraniumui-app -n MyProject
```

```bash
dotnet new uraniumui-blank-app -n MyProject
```

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

### Use nested cascading styles in a page

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/theming/CascadingStyling.md

Shows a Label outside the container and a StackLayout with StyleClass 'MyContainer' containing a Frame with a Label. The Frame gets Yellow background and the Label gets Black text due to the nested cascading styles.

```xml
<Label Text="I'm another label outside 'MyContainer'" />

<StackLayout StyleClass="MyContainer">
    <Frame>
        <Label Text="Hello, Uranium ☢️" />
    </Frame>
</StackLayout>
```

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

### Initialize Material Theme in MauiProgram.cs

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/migration-guides/Migrating-To-2.1.md

Add the .UseUraniumUIMaterial() call to your builder chain in MauiProgram.cs to enable the Material Theme in v2.1. This is a new required step.

```csharp
builder
    .UseMauiApp<App>()
    .UseUraniumUI()
    .UseUraniumUIMaterial() // 👈 This is new!
    .ConfigureFonts(fonts =>
    {
        fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
        fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
        fonts.AddMaterialIconFonts();
    });
```

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

### Not condition example

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/infrastructure/DynamicContentView.md

Shows a condition using Not to display content when a value is not True.

```xml
<!-- Not condition -->
<uranium:DynamicContentView Value="{Binding IsLoading}">
    <uranium:DynamicContentView.Conditions>
        <uranium:ValueCondition Not="True">
            <DataTemplate>
                <Label Text="Content is ready"/>
            </DataTemplate>
        </uranium:ValueCondition>
    </uranium:DynamicContentView.Conditions>
</uranium:DynamicContentView>
```

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

### BottomSheet usage in XAML

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/themes/material/components/BottomSheet.md

Example of using a regular BottomSheet with a TableView inside UraniumContentPage.Attachments.

```xml
<uranium:UraniumContentPage x:Class="App1.MainPage"
            xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:uranium="http://schemas.enisn-projects.io/dotnet/maui/uraniumui"
            xmlns:material="http://schemas.enisn-projects.io/dotnet/maui/uraniumui/material">

    <!-- Content here -->

    <uranium:UraniumContentPage.Attachments>
         <material:BottomSheetView>
            <TableView Intent="Menu" Margin="0,0,0,40">
                <TableRoot>
                    <TableSection Title="Chapters">
                        <TextCell Text="1. Introduction to .NET MAUI"
                    Detail="Learn about .NET MAUI and what it provides." />
                        <TextCell Text="2. Anatomy of an app"
                    Detail="Learn about the visual elements in .NET MAUI" />
                        <TextCell Text="3. Text"
                    Detail="Learn about the .NET MAUI controls that display text." />
                        <TextCell Text="4. Dealing with sizes"
                    Detail="Learn how to size .NET MAUI controls on screen." />
                        <TextCell Text="5. XAML vs code"
                    Detail="Learn more about creating your UI in XAML." />
                    </TableSection>
                </TableRoot>
            </TableView>
        </material:BottomSheetView>
    </uranium:UraniumContentPage.Attachments>
</uranium:UraniumContentPage>
```

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

### Load Raw Asset with FileSystem.OpenAppPackageFileAsync

Source: https://github.com/enisn/uraniumui/blob/develop/demo/UraniumApp/Resources/Raw/AboutAssets.txt

Use this C# method to read a raw asset at runtime. It opens the file stream and reads its contents as a string.

```csharp
async Task LoadMauiAsset()
{
	using var stream = await FileSystem.OpenAppPackageFileAsync("AboutAssets.txt");
	using var reader = new StreamReader(stream);

	var contents = reader.ReadToEnd();
}
```

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

### AccentColor property example

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/themes/material/components/MultiplePickerField.md

Change the accent color used for the border and icon when focused.

```xml
 <material:MultiplePickerField
    Title="Pick some options"
    AccentColor="DeepSkyBlue"/>
```

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

### Dialog checkbox colors example

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/themes/material/components/MultiplePickerField.md

Change the colors of the internal checkboxes used in the picker dialog.

```xml
<material:MultiplePickerField
    Title="Pick some options"
    ItemsSource="{Binding Items}"
    CheckBoxColor="DeepSkyBlue"
    CheckBoxBorderColor="Gray"
    CheckBoxTextColor="Black"
    CheckBoxIconColor="White" />
```

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

### Local build shortcut from build.ps1

Source: https://github.com/enisn/uraniumui/blob/develop/AGENTS.md

Local build shortcut from build.ps1: restore then build without restore.

```bash
dotnet restore
```

```bash
dotnet build --no-restore
```

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

### MauiAsset Build Action in .csproj

Source: https://github.com/enisn/uraniumui/blob/develop/demo/UraniumApp/Resources/Raw/AboutAssets.txt

Add this XML to your .csproj to include all files in Resources\Raw and its subdirectories as raw assets. The LogicalName preserves the relative directory structure.

```xml
<MauiAsset Include="Resources\Raw\**" LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />
```

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

### SelectedIndexes binding example

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/themes/material/components/MultiplePickerField.md

Bind SelectedIndexes to selected item positions. It stays synchronized with SelectedItems.

```xml
<material:MultiplePickerField
    Title="Pick some options"
    ItemsSource="{Binding Options}"
    SelectedIndexes="{Binding SelectedOptionIndexes}" />
```

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

### Create and register custom dialog service implementing IDialogService

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/dialogs/Index.md

Shows how to create a custom dialog service by implementing IDialogService and registering it in the DI container with AddSingleton. Replace the comment with your implementation.

```csharp
public class CustomDialogService : IDialogService
{
    // Implement interface methods
}

// Register in DI container
builder.Services.AddSingleton<IDialogService, CustomDialogService>();
```

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

### DisplayCheckBoxPromptAsync

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/dialogs/Index.md

Displays a checkbox prompt dialog to get multiple selections from the user. Returns the selected options.

```APIDOC
## DisplayCheckBoxPromptAsync

### Description
Displays a checkbox prompt dialog to get multiple selections from the user. Returns the selected options as a collection of the same type as the selection source.

### Method
DisplayCheckBoxPromptAsync

### Parameters
- **message** (string) - Required - Message of the dialog. It'll be rendered top of the dialog.
- **selectionSource** (IEnumerable<T>) - Required - Selection source of the dialog. It can be a string collection or an object collection. If you use objects, you can use `displayMember` parameter to specify the property of the object to be displayed or your object should override `ToString()` method.
- **selectedItems** (IEnumerable<T>) - Optional - Selected items of the dialog. They'll be automatically selected when dialog is shown.
- **accept** (string) - Optional - Accept button text of the dialog. It'll be rendered as the accept button text.
- **cancel** (string) - Optional - Cancel button text of the dialog. It'll be rendered as the cancel button text.
- **displayMember** (string) - Optional - Display member of the object. It'll be used to specify the property of the object to be displayed or your object should override `ToString()` method.

### Request Example
```csharp
var result = await this.DisplayCheckBoxPromptAsync(
    "Pick some of them below",
    new [] {"Option 1", "Option 2", "Option 3", "Option 4"});
```

### Response
Returns the selected options as a collection of the same type as the selection source.

### Response Example
```csharp
var result = await this.DisplayCheckBoxPromptAsync(
    "Pick some of them below",
    options,
    new [] { options[1] },
    "OK",
    "Cancel",
    "Name");

await this.DisplayAlert("Result", string.Join(", ", result.Select(x => x.Name)), "OK");
```
```

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

### Template smoke test commands

Source: https://github.com/enisn/uraniumui/blob/develop/AGENTS.md

Local template smoke test: from templates/, run install.ps1, then create a temp app with either template.

```bash
./install.ps1
```

```bash
dotnet new uraniumui-app
```

```bash
dotnet new uraniumui-blank-app
```

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

### Configure UraniumUI handlers in MauiProgram.cs

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/Getting-Started.md

Adds the UraniumUI and UraniumUI.Material handlers to the MAUI app builder. The comment reminds to include both lines.

```csharp
.UseUraniumUI()
.UseUraniumUIMaterial() // 👈 Don't forget these two lines.
```

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

### AutoCompleteTextField Icon Example

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/themes/material/components/AutoCompleteTextField.md

Shows how to set an icon on the left side of the AutoCompleteTextField using the Icon property with a FontImageSource.

```APIDOC
## AutoCompleteTextField Icon

### Description
Sets an icon on the left side of the AutoCompleteTextField control using the Icon property. The icon can be any ImageSource object, with FontImageSource recommended for color changes on focus.

### Properties
- **Icon** (ImageSource) - The icon to display on the left side of the control.

### Example
```xml
<material:AutoCompleteTextField
    Title="Fruit"
    Icon="{FontImageSource FontFamily=MaterialOutlined, Glyph={x:Static m:MaterialOutlined.Forest}}"/>
```
```

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

### ItemDisplayBinding example

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/themes/material/components/MultiplePickerField.md

Use ItemDisplayBinding to display a specific property of objects in ItemsSource for both chips and picker dialog items.

```xml
<material:MultiplePickerField
    Title="Pick tags"
    ItemsSource="{Binding Tags}"
    SelectedItems="{Binding SelectedTags}"
    ItemDisplayBinding="{Binding Name}" />
```

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

### DisplayRadioButtonPromptAsync with Object Collection and DisplayMember

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/dialogs/Index.md

Shows how to use the RadioButton prompt with an object collection, specifying the display member and other parameters. The result is then displayed in an alert.

```csharp
private async void Button_Clicked(object sender, EventArgs e)
{
    var options = new List<MyOption>()
    {
        new MyOption() { Name = "Option 1", Description = "Description 1" },
        new MyOption() { Name = "Option 2", Description = "Description 2" },
        new MyOption() { Name = "Option 3", Description = "Description 3" },
    };
    var result = await this.DisplayRadioButtonPromptAsync(
            "Pick some of them below",
            options,
            options[1],
            "OK",
            "Cancel",
            "Name");

    await this.DisplayAlert("Result", result.Name, "OK");
}
```

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

### Build core library for net10.0

Source: https://github.com/enisn/uraniumui/blob/develop/AGENTS.md

Focused library build for core package. Choose a platform TFM such as net10.0-windows10.0.19041.0 only when platform code/resources are involved.

```bash
dotnet build src/UraniumUI/UraniumUI.csproj -f net10.0
```

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

### Add UraniumUI.Material package

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/Getting-Started.md

Adds the UraniumUI.Material NuGet package to the MAUI application.

```bash
dotnet add package UraniumUI.Material
```

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

### Custom property name factory for localization

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/infrastructure/AutoFormView.md

Configure a custom PropertyNameFactory to localize property names, for example using a resource file.

```csharp
builder.Services.Configure<AutoFormViewOptions>(options =>
{
    options.PropertyNameFactory = property =>
    {
        return Localize(property.Name);
    };
});
```

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

### Set AccentColor property in XAML

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/themes/material/components/TextField.md

Sets the AccentColor property to change the border and icon color when the TextField is focused. The example uses DeepSkyBlue.

```xml
<material:TextField
    Title="Description"
    Icon="{FontImageSource FontFamily=MaterialOutlined, Glyph={x:Static m:MaterialOutlined.Edit}}"
    AccentColor="DeepSkyBlue"/>
```

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

### Create TreeViewPageViewModel with sample Nodes

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/themes/material/components/TreeView.md

Initializes a ViewModel for TreeView with a Nodes collection containing sample hierarchical data. TreeViewPageViewModel derives from BindableObject and populates Nodes in its constructor. Bind this ViewModel to the TreeView's ItemsSource.

```csharp
public class TreeViewPageViewModel : BindableObject
{

    public ObservableCollection<MyItem> Nodes { get; set; } = new();

    public TreeViewPageViewModel()
    {
        Nodes.Add(new MyItem("A")
        {
            Children =
            {
                new MyItem("A.1"),
                new MyItem("A.2"),
            }
        });
        Nodes.Add(new MyItem("B")
        {
            Children =
            {
                new MyItem("B.1")
                {
                    Children =
                    {
                        new MyItem("B.1.a"),
                        new MyItem("B.1.b"),
                        new MyItem("B.1.c"),
                        new MyItem("B.1.d"),

                    }
                },
                new MyItem("B.2"),
            }
        });
        Nodes.Add(new MyItem("C"));
        Nodes.Add(new MyItem("D"));
    }
}
```

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

### Create a Turkish language pack with ConfigureUraniumUIAccessibility

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/best-practices/LocalizedSemanticText.md

Defines a reusable language pack as an extension method on MauiAppBuilder that calls ConfigureUraniumUIAccessibility to set all Turkish accessibility strings in one place. Use this pattern to create a class library or NuGet package for any language.

```csharp
using UraniumUI.Options;

namespace UraniumUI.Accessibility.Turkish;

public static class UraniumUITurkishAccessibilityExtensions
{
    public static MauiAppBuilder UseUraniumUITurkishAccessibility(this MauiAppBuilder builder)
    {
        return builder.ConfigureUraniumUIAccessibility(options =>
        {
            options.ClearTextDescription = "Metni temizle";
            options.ClearTextHint = "Geçerli değeri temizler.";
            options.ClearSelectionDescription = "Seçimi temizle";
            options.ClearSelectionHint = "Seçili değeri temizler.";
            options.ShowPasswordDescription = "Parolayı göster";
            options.HidePasswordDescription = "Parolayı gizle";
            options.PasswordVisibilityToggleHint = "Parola görünürlüğünü değiştirir.";
            options.ValidationErrorDescription = "Doğrulama hatası";
            options.ValidationErrorHintFormat = "Hata: {0}";
            options.ReadOnlyHint = "Salt okunur.";
            options.DisabledHint = "Devre dışı.";
            options.SelectedTabDescriptionFormat = "{0}, seçili";
            options.ExpandTreeNodeDescriptionFormat = "{0} öğesini genişlet";
            options.CollapseTreeNodeDescriptionFormat = "{0} öğesini daralt";
        });
    }
}
```

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

### AutoCompleteTextField usage with fruit items

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/themes/material/components/AutoCompleteTextField.md

Example of an AutoCompleteTextField with a Title and an ItemsSource containing a list of fruit strings. The control provides suggestions as the user types.

```xml
<material:AutoCompleteTextField Title="Fruit">
    <material:AutoCompleteTextField.ItemsSource>
        <x:String>Apple</x:String>
        <x:String>Orange</x:String>
        <x:String>Banana</x:String>
        <x:String>Strawberry</x:String>
        <x:String>Watermelon</x:String>
        <x:String>Cherry</x:String>
        <x:String>Blueberry</x:String>
        <x:String>Blackberry</x:String>
        <x:String>Pineapple</x:String>
        <x:String>Coconut</x:String>
        <x:String>Apricot</x:String>
        <x:String>Avocado</x:String>
        <x:String>Plum</x:String>
        <x:String>Fig</x:String>
        <x:String>Grape</x:String>
        <x:String>Guava</x:String>
        <x:String>Lemon</x:String>
        <x:String>Lime</x:String>
        <x:String>Mango</x:String>
        <x:String>Passion Fruit</x:String>
        <x:String>Peach</x:String>
        <x:String>Pear</x:String>
        <x:String>Pomegranate</x:String>
        <x:String>Raspberry</x:String>
        <x:String>Tomato</x:String>
    </material:AutoCompleteTextField.ItemsSource>
</material:AutoCompleteTextField>
```

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

### Hide chip remove icon example

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/themes/material/components/MultiplePickerField.md

Set IsChipRemoveVisible to False to hide the inline chip remove icon while keeping the picker dialog editable.

```xml
<material:MultiplePickerField
    Title="Pick some options"
    IsChipRemoveVisible="False" />
```

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

### StatefulContentView with TappedCommand and accessibility

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/infrastructure/StatefulContentView.md

Use StatefulContentView as an interactive control with TappedCommand and screen-reader text via SemanticProperties.Description and SemanticProperties.Hint.

```xml
<uranium:StatefulContentView
    TappedCommand="{Binding OpenFiltersCommand}"
    SemanticProperties.Description="Open filters"
    SemanticProperties.Hint="Shows filter options for the current list">
    <Grid Padding="12" ColumnDefinitions="*,Auto">
        <Label Text="Filters" />
        <Label Grid.Column="1" Text=">" />
    </Grid>
</uranium:StatefulContentView>
```

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

### Open()

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/infrastructure/Select.md

Opens the list if the control is enabled and not already open.

```APIDOC
## Open()

### Description
Opens the list if the control is enabled and not already open.

### Method
Open

### Parameters
None

### Response
No return value.
```

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

### Set DatePickerField icon with FontImageSource

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/themes/material/components/DatePickerField.md

Set the Icon property to any ImageSource; FontImageSource is recommended because its color can change when focused. This example uses the MaterialOutlined Calendar_month glyph.

```xml
<material:DatePickerField Title="Pick a Date" Icon="{FontImageSource FontFamily=MaterialOutlined, Glyph={x:Static m:MaterialOutlined.Calendar_month}}"  />
```

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

### DisplayRadioButtonPromptAsync with String Array

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/dialogs/Index.md

Shows the easiest way to use the RadioButton prompt by passing a string array. The method returns the selected option as a string.

```csharp
private async void Button_Clicked(object sender, EventArgs e)
{
    var result = await this.DisplayRadioButtonPromptAsync(
            "Pick some of them below",
            new [] {"Option 1", "Option 2", "Option 3"});
}
```

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

### DisplayCheckBoxPromptAsync via Extension Method

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/dialogs/Index.md

Shows the simplest way to display a checkbox prompt using the extension method on a ContentPage. The method takes a message and an array of options, returning the selected options.

```csharp
public partial class MainPage : ContentPage
{
    private async void ShowDialog_Clicked(object sender, EventArgs e)
    {
        var result = await this.DisplayCheckBoxPromptAsync(
            "Select Options",
            new[] { "Option 1", "Option 2", "Option 3" });
    }
}
```

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

### Icon-Only Action with ButtonView

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/best-practices/ClickableAreas.md

Icon-only actions need semantic text because the icon glyph is not enough for screen readers. This example uses ButtonView with SemanticProperties.Description and SemanticProperties.Hint.

```xml
<material:ButtonView
    TappedCommand="{Binding DeleteCommand}"
    SemanticProperties.Description="Delete attachment"
    SemanticProperties.Hint="Removes this attachment from the message">
    <Image Source="trash.png" WidthRequest="20" HeightRequest="20" />
</material:ButtonView>
```

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

### Register Community Toolkit dialog service with AddCommunityToolkitDialogs

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/dialogs/Index.md

Registers UraniumUI and then configures Community Toolkit as the dialog implementation. Use this when you want to use Community Toolkit for dialogs.

```csharp
builder.Services.AddUraniumUI();
builder.Services.AddCommunityToolkitDialogs();
```

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

### Async form validation with IFormValidator

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/infrastructure/AutoFormView.md

Example view model implementing IFormValidator for async validation. Property errors returned with PropertyError map to the generated field automatically.

```csharp
using UraniumUI.Validations;

public class RegisterViewModel : IFormValidator
{
    public string UserName { get; set; }

    public async Task<FormValidationResult> ValidateAsync(FormValidationContext context)
    {
        if (await userService.UsernameExistsAsync(UserName))
        {
            return FormValidationResult.PropertyError(
                nameof(UserName),
                "The username has already been taken.");
        }

        return FormValidationResult.Success();
    }
}
```

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

### Add BackdropView to UraniumContentPage.Attachments

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/themes/material/components/Backdrop.md

Add a BackdropView to UraniumContentPage.Attachments. Set Title or IconImageSource (or both) to create a toolbar item that toggles the backdrop. The example includes checkboxes and a slider as backdrop content.

```xml
<uranium:UraniumContentPage x:Class="App1.MainPage"
            xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:uranium="http://schemas.enisn-projects.io/dotnet/maui/uraniumui"
            xmlns:input="clr-namespace:InputKit.Shared.Controls;assembly=InputKit.Maui"
            xmlns:material="http://schemas.enisn-projects.io/dotnet/maui/uraniumui/material">

    <!-- Content here -->

    <uranium:UraniumContentPage.Attachments>
           <material:BackdropView Title="Filter" IconImageSource="filter.png">
            <VerticalStackLayout>
                <material:CheckBox Text="Include Disabled Items" Type="Filled" />
                <material:CheckBox Text="Include Deleted Items" Type="Filled" />
                <material:CheckBox Text="Show all categories" Type="Filled"/>
                <input:AdvancedSlider Title="Maximum Value" MinValue="0" MaxValue="1200" StepValue="10" MaxValueSuffix="items" />
            </VerticalStackLayout>
        </material:BackdropView>
    </uranium:UraniumContentPage.Attachments>
</uranium:UraniumContentPage>
```

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

### Register UraniumUI in MauiProgram.cs

Source: https://github.com/enisn/uraniumui/blob/develop/README.md

Registers UraniumUI and Material in MauiProgram.cs by chaining UseUraniumUI() and UseUraniumUIMaterial() on the builder.

```csharp
using UraniumUI;

builder
    .UseMauiApp<App>()
    .UseUraniumUI()
    .UseUraniumUIMaterial();
```

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

### Configure AutoFormViewOptions in MauiProgram.cs

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/infrastructure/AutoFormView.md

Configure AutoFormViewOptions in MauiProgram.cs to customize the AutoFormView behavior.

```csharp
builder.Services.Configure<AutoFormViewOptions>(options =>
{
    // configure options here
});
```

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

### RadioButton group usage with LabelPosition and CheckRadioButton style

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/themes/material/RadioButton.md

Shows three RadioButtonGroupView examples: default label position, LabelPosition='Before', and CheckRadioButton style. Includes disabled and checked states.

```xml
<StackLayout MaximumWidthRequest="400" Margin="20">

    <material:RadioButtonGroupView>
        <material:RadioButton Text="Option 1" />
        <material:RadioButton Text="Option 2" />
        <material:RadioButton Text="Option 3 (Disabled)" IsDisabled="True" />
        <material:RadioButton Text="Option 4 (Disabled)" IsDisabled="True" IsChecked="True" />
    </material:RadioButtonGroupView>

    <BoxView StyleClass="Divider" />

    <material:RadioButtonGroupView>
        <material:RadioButton Text="Option 1" LabelPosition="Before" />
        <material:RadioButton Text="Option 2" LabelPosition="Before" />
        <material:RadioButton Text="Option 3 (Disabled)" IsDisabled="True" LabelPosition="Before" />
        <material:RadioButton Text="Option 4 (Disabled)" IsDisabled="True" IsChecked="True" LabelPosition="Before" />
    </material:RadioButtonGroupView>

    <BoxView StyleClass="Divider" />

    <material:RadioButtonGroupView>
        <material:RadioButton Text="Check Radio Button 1" StyleClass="CheckRadioButton" IsChecked="True"/>
        <material:RadioButton Text="Check Radio Button 1" StyleClass="CheckRadioButton" />
    </material:RadioButtonGroupView>
</StackLayout>
```

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

### Custom command binding with {Binding .} for source item

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/migration-guides/Migrating-To-3.1.md

Example of binding a custom command in the header template. The command is bound to the page's BindingContext and the CommandParameter passes the current source item with {Binding .}.

```xml
<Button Text="Close"
        Command="{Binding Source={x:Reference page}, Path=BindingContext.CloseTabCommand}"
        CommandParameter="{Binding .}" />
```

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

### Create a form with AutoFormView and DataAnnotations validation

Source: https://github.com/enisn/uraniumui/blob/develop/README.md

Use a model with DataAnnotations attributes to generate a form via AutoFormView. Install the UraniumUI.Validations.DataAnnotations package and configure the validation factory in the service collection to enable validation messages.

```csharp
using System.ComponentModel.DataAnnotations;

public class RegisterViewModel
{
    [Required]
    [EmailAddress]
    public string Email { get; set; } = string.Empty;

    [Required]
    public string FullName { get; set; } = string.Empty;

    [Range(1, 10)]
    public int NumberOfSeats { get; set; }

    [Display(Name = "I accept the terms and conditions")]
    public bool AcceptedTerms { get; set; }
}
```

```xml
<uranium:AutoFormView Source="{Binding .}" />
```

```bash
dotnet add package UraniumUI.Validations.DataAnnotations
```

```csharp
using UraniumUI.Options;
using UraniumUI.Validations;

builder.Services.Configure<AutoFormViewOptions>(options =>
{
    options.ValidationFactory = DataAnnotationValidation.CreateValidations;
});
```

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

### Configure UraniumUIAccessibility options in MauiProgram.cs

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/best-practices/LocalizedSemanticText.md

Configure localized semantic text in MauiProgram.cs after UseUraniumUI() and before Build(). The {0} token is replaced with the current validation message, chip text, tab title, or tree node text depending on the option.

```csharp
using UraniumUI.Options;

builder
    .UseMauiApp<App>()
    .UseUraniumUI()
    .UseUraniumUIMaterial()
    .ConfigureUraniumUIAccessibility(options =>
    {
        options.ClearTextDescription = "Metni temizle";
        options.ClearTextHint = "Geçerli değeri temizler.";
        options.ClearAutocompleteTextDescription = "Metni temizle";
        options.ClearAutocompleteTextHint = "Otomatik tamamlama değerini temizler.";

        options.ClearSelectionDescription = "Seçimi temizle";
        options.ClearSelectionHint = "Seçili değeri temizler.";
        options.ClearDateDescription = "Tarihi temizle";
        options.ClearDateHint = "Seçili tarihi temizler.";
        options.ClearTimeDescription = "Saati temizle";
        options.ClearTimeHint = "Seçili saati temizler.";

        options.ShowPasswordDescription = "Parolayı göster";
        options.HidePasswordDescription = "Parolayı gizle";
        options.PasswordVisibilityToggleHint = "Parola görünürlüğünü değiştirir.";

        options.ValidationErrorDescription = "Doğrulama hatası";
        options.ValidationErrorHintFormat = "Hata: {0}";
        options.ReadOnlyHint = "Salt okunur.";
        options.DisabledHint = "Devre dışı.";

        options.OpenDatePickerHint = "Tarih seçiciyi açar.";
        options.RemoveChipDescriptionFormat = "{0} öğesini kaldır";
        options.RemoveChipHint = "Bu seçili öğeyi kaldırır.";

        options.ChangeCalendarYearDescription = "Yılı değiştir";
        options.ChangeCalendarYearHint = "Yıl seçimini gösterir.";
        options.PreviousMonthDescription = "Önceki ay";
        options.NextMonthDescription = "Sonraki ay";

        options.ExpandBottomSheetDescription = "Alt sayfayı genişlet";
        options.CollapseBottomSheetDescription = "Alt sayfayı daralt";
        options.ToggleBottomSheetHint = "Alt sayfayı açar veya kapatır.";

        options.SelectTabHint = "Bu sekmeyi seçer.";
        options.SelectedTabDescriptionFormat = "{0}, seçili";

        options.ExpandTreeNodeDescriptionFormat = "{0} öğesini genişlet";
        options.CollapseTreeNodeDescriptionFormat = "{0} öğesini daralt";
        options.TreeNodeDescriptionFormat = "{0}";
        options.SelectedTreeNodeDescriptionFormat = "{0}, seçili";
        options.TreeNodeHint = "Bu öğeyi seçer.";
    });
```

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

### Create a UraniumContentPage from scratch (XAML and C#)

Source: https://github.com/enisn/uraniumui/blob/develop/docs/en/infrastructure/UraniumContentPage.md

Create a UraniumContentPage from scratch: replace ContentPage with UraniumContentPage in XAML and ensure the code-behind class inherits from UraniumContentPage. The XAML declares the uranium namespace and the C# class calls InitializeComponent.

```xml
<uranium:UraniumContentPage x:Class="App1.MainPage"
            xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:uranium="http://schemas.enisn-projects.io/dotnet/maui/uraniumui"
            xmlns:local="clr-namespace:App1">

    <!-- Content here -->
</uranium:UraniumContentPage>
```

```csharp
public partial class MainPage : UraniumContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }
}
```