### Convert Method Example

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/status-to-color-converter.md

Demonstrates how to instantiate and use the StatusToColorConverter to get a color for the 'New' order status.

```csharp
var converter = new StatusToColorConverter();
var lightColor = converter.Convert(OrderStatus.New, typeof(Color), null, null);
// Returns #60BA07 in light theme, #A0CD73 in dark theme
```

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

### OrderItemAction Method Example

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/main-view-model-master-detail.md

Shows an example implementation of the OrderItemAction method, which logs a debug message indicating the caption of the clicked action item.

```csharp
// When user taps the "Share" button, this method is called
public void OrderItemAction(ActionItem actionItem)
{
    Debug.WriteLine(actionItem.Caption + " click");
    // Output: "Share click"
}
```

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

### ActionItem Initialization Example

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/action-item.md

Demonstrates how to create an instance of the ActionItem class with specific caption, icon, and command.

```csharp
var actionItem = new ActionItem(
    "Share", 
    "share", 
    new Command<ActionItem>(OrderItemAction)
);
```

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

### CreateOrders Example Usage

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/data-generator.md

Demonstrates how to call the CreateOrders method and iterate through the generated orders.

```csharp
var orders = DataGenerator.CreateOrders();
// Returns a collection with 20 pre-populated orders
foreach (var order in orders)
{
    Console.WriteLine($"{order.OrderID}: {order.Status}");
}
```

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

### Product Class Usage Example

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/product.md

Demonstrates how to create a Product instance and use it within an OrderDetails object to calculate the total price.

```csharp
var product = new Product
{
    ProductName = "Sasquatch Ale",
    ImagePath = "beverages",
    UnitPrice = 10.25m
};

// Use in an order detail
var item = new OrderDetails
{
    Product = product,
    Quantity = 2
};

// Total for 2 units
decimal total = item.ProductTotal; // 20.50m
```

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

### AppShell Class Definition

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/code-behind-reference.md

Defines the AppShell class for shell navigation setup. This example uses a minimal code-behind implementation.

```csharp
public partial class AppShell : Shell
{
}
```

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

### MAUI FlexLayout Grid of Buttons Example

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/xaml-controls-reference.md

A flexible layout container that supports wrapping and alignment. This example shows a grid of action buttons using FlexLayout.

```xml
<FlexLayout AlignItems="Center" 
    BindableLayout.ItemsSource="{Binding Actions}" 
    Wrap="Wrap" 
    Margin="16,20,0,0">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <dx:DXStackLayout FlexLayout.Basis="25%">
                <!-- Item content -->
            </dx:DXStackLayout>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</FlexLayout>
```

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

### MainViewModel with ActionItems

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/action-item.md

Example ViewModel demonstrating how to populate an ObservableCollection of ActionItems for use in a bottom sheet. Includes a command handler for item clicks.

```csharp
public class MainViewModel : BindableBase
{
    public ObservableCollection<ActionItem> ActionItems { get; set; } 
    
    public MainViewModel()
    {
        var command = new Command<ActionItem>(OrderItemAction);
        ActionItems = new ObservableCollection<ActionItem>
        {
            new ActionItem("Share", "share", command),
            new ActionItem("Print", "print", command),
            new ActionItem("Repeat", "repeat", command),
            new ActionItem("Feedback", "feedback", command),
            new ActionItem("Bookmark", "bookmark", command),
        };
    }
    
    public void OrderItemAction(ActionItem actionItem)
    {
        Debug.WriteLine(actionItem.Caption + " click");
    }
}
```

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

### MainViewModel for Master-Detail Example

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/types.md

The view model for the Master-Detail bottom sheet example. It manages a collection of orders, the selected order, and a list of action items. Use this for scenarios involving lists and item-specific actions.

```csharp
public class MainViewModel : BindableBase
{
    public ObservableCollection<Order> Orders { get; set; }
    public Order SelectedOrder { get; set; }
    public ObservableCollection<ActionItem> ActionItems { get; set; }
    
    public MainViewModel();
    public void OrderItemAction(ActionItem actionItem);
}
```

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

### XAML BindingContext Setup

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/main-view-model-master-detail.md

Illustrates how to set the BindingContext of a ContentPage to an instance of MainViewModel in XAML.

```xml
<ContentPage.BindingContext>
    <local:MainViewModel/>
</ContentPage.BindingContext>
```

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

### MasterDetail Example Data Flow

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/architecture.md

Illustrates the data flow between the View, ViewModel, and Model layers in the MasterDetail example. This diagram shows how data is structured and passed between components.

```text
┌─────────────────────────────────────────────────────────────────┐
│ View Layer (MainPage.xaml)                                      │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  CollectionView                    BottomSheet                 │
│  ItemsSource="{Binding Orders}"   Content bound to             │
│  SelectedItem="{Binding           SelectedOrder                │
│    SelectedOrder}"                Details                      │
│                                                                 │
│  SelectionChanged event ──────┐                               │
│                               │                               │
│  CollectionView_SelectionChanged  │                           │
│  ├─ bottomSheet.State ←────────┘                             │
│  └─ bottomSheet.HalfExpandedRatio                            │
│                                                                 │
├─────────────────────────────────────────────────────────────────┤
│ ViewModel Layer (MainViewModel)                                 │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  Orders (ObservableCollection<Order>)                         │
│  SelectedOrder (Order) ───────┐                              │
│                              │ PropertyChanged event         │
│  ActionItems (ObservableCollection<ActionItem>)              │
│                                                                 │
├─────────────────────────────────────────────────────────────────┤
│ Model Layer (DataGenerator)                                     │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  CreateOrders()                                               │
│  └─ Order[20]                                                │
│     ├─ OrderDetails[3-8]                                    │
│     │  └─ Product (from AllProducts)                       │
│     └─ OrderStatus                                          │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
```

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

### XAML Binding Example for Orders

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/data-generator.md

Demonstrates how to bind a CollectionView's ItemsSource to the Orders collection in XAML.

```xml
<CollectionView ItemsSource="{Binding Orders}" SelectionMode="Single">
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="{x:Type local:Order}">
            <Label Text="{Binding OrderID}" />
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>
```

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

### Order Status Usage Example

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/order-status.md

Demonstrates how to create an order with an initial status and how to check or update the order's status using the OrderStatus enum.

```csharp
var order = new Order
{
    OrderID = "OD0001",
    OrderDate = DateTime.Now,
    Status = OrderStatus.New  // Start with New status
};

// Check status
if (order.Status == OrderStatus.Shipping)
{
    // Order is currently in transit
}

// Update status
order.Status = OrderStatus.Finished;
```

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

### DataGenerator Usage in ViewModel

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/data-generator.md

Example of initializing the Orders collection in a ViewModel using DataGenerator.CreateOrders().

```csharp
public class MainViewModel : BindableBase
{
    public ObservableCollection<Order> Orders { get; set; }
    
    public MainViewModel()
    {
        // Generate sample data on initialization
        Orders = DataGenerator.CreateOrders();
    }
}
```

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

### MAUI Image Usage Example

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/xaml-controls-reference.md

Displays an image from a specified source. Use for showing images within your application.

```xml
<Image Source="{Binding ImagePath}" 
    HeightRequest="24" 
    WidthRequest="24" 
    Margin="0,0,16,0" 
    VerticalOptions="Center"/>
```

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

### Order Class Usage Example

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/order.md

Demonstrates how to create a new Order object, initialize its properties including the Details collection, and access the computed TotalAmount. Ensure OrderStatus and OrderDetails are defined elsewhere.

```csharp
// Creating an order
var order = new Order
{
    OrderID = "OD0042",
    OrderDate = DateTime.Now,
    Status = OrderStatus.New,
    Details = new ObservableCollection<OrderDetails>
    {
        new OrderDetails 
        {
            Product = new Product { ProductName = "Chai", UnitPrice = 4.4m },
            Quantity = 2
        }
    }
};

// Accessing the calculated total
decimal total = order.TotalAmount; // 8.8m
```

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

### MainViewModel for Google Maps Example

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/types.md

The view model for the Google Maps bottom sheet example. It holds the currently selected city and a collection of all cities. This is suitable for map-centric UIs displaying locations.

```csharp
public class MainViewModel : BaseViewModel
{
    public CityItem SelectedCity { get; set; }
    public ObservableCollection<CityItem> Cities { get; set; }
    
    public MainViewModel();
}
```

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

### DXSeparator Usage Example

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/xaml-controls-reference.md

Add a DXSeparator to visually divide content. Customize its height, color, and margins for appropriate spacing.

```xml
<dx:DXSeparator HeightRequest="1" 
    BackgroundColor="{AppThemeBinding Light=#CAC4D0, Dark=#625A71}" 
    Margin="20,20,20,20"/>
```

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

### MAUI Grid Layout Example

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/xaml-controls-reference.md

A layout container that arranges elements in rows and columns. Use for structured layouts with precise element positioning.

```xml
<Grid RowDefinitions="Auto, Auto, *" ColumnDefinitions="Auto, *" Padding="16">
    <Label Text="Name" Grid.Row="0" Grid.Column="0"/>
    <Label Text="{Binding Name}" Grid.Row="0" Grid.Column="1"/>
    
    <Label Text="Description" Grid.Row="1" Grid.Column="0"/>
    <Label Text="{Binding Description}" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"/>
</Grid>
```

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

### MAUI ScrollView Horizontal Example

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/xaml-controls-reference.md

Enables scrolling for content that exceeds the available space. This example demonstrates horizontal scrolling for an image gallery.

```xml
<ScrollView Orientation="Horizontal" Margin="16,10,0,0">
    <dx:DXStackLayout Orientation="Horizontal">
        <!-- Items -->
    </dx:DXStackLayout>
</ScrollView>
```

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

### Configure DevExpress Controls in MauiProgram.cs

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/getting-started.md

Initialize the DevExpress MAUI controls and related components in your application's `MauiProgram.cs` file. This setup is required for all DevExpress MAUI components to function correctly.

```csharp
builder
    .UseMauiApp<App>()
    .UseDevExpressControls()
    .UseDevExpressCollectionView()
    .UseDevExpress(useLocalization: true)
```

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

### MAUI Label Usage Example

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/xaml-controls-reference.md

Displays text content with options for font size, color, and attributes. Use for displaying static or bound text.

```xml
<Label Text="{Binding OrderID}" 
    FontSize="18" 
    FontAttributes="Bold" 
    TextColor="{AppThemeBinding Light=#333, Dark=#FFF}"/>
```

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

### BottomSheet Configuration Example

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/getting-started.md

This XML snippet demonstrates key configuration points for the DevExpress BottomSheet control in a .NET MAUI application. It includes settings for initial height, grabber visibility, dismiss behavior, and modal behavior.

```xml
<dx:BottomSheet 
    HalfExpandedRatio="0.4"        <!-- Initial height: 40% -->
    ShowGrabber="True"             <!-- Visible grab handle -->
    AllowDismiss="True"            <!-- Users can swipe down -->
    IsModal="false"                <!-- Doesn't block master -->
    BackgroundColor="..."/>         <!-- Theme-aware background -->

```

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

### MainViewModel Constructor

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/main-view-model-google-maps.md

Initializes the MainViewModel with a predefined collection of cities and action items. This constructor sets up the initial data for the POI details example.

```csharp
public MainViewModel()
```

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

### MAUI Border Usage Example

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/xaml-controls-reference.md

A container control that supports borders and rounded corners. Use to visually frame content.

```xml
<Border StrokeShape="RoundRectangle 10" 
    BackgroundColor="{AppThemeBinding Light=#FFF, Dark=#333}" 
    StrokeThickness="1">
    <!-- Content -->
</Border>
```

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

### CityItem Location Assignment

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/location.md

Demonstrates assigning Location objects to the Location property of a CityItem, used in a Google Maps-inspired example.

```csharp
var athens = new CityItem
{
    Name = "Athens",
    Location = new Location(37.9838, 23.7275),
    Address = "Greece"
};

var paris = new CityItem
{
    Name = "Paris",
    Location = new Location(48.8566, 2.3522),
    Address = "France"
};
```

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

### Example Usage of OnPropertyChanged

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/base-view-model.md

Demonstrates how a derived ViewModel (MainViewModel) uses the protected OnPropertyChanged method to notify the binding system about property changes. The property name is automatically inferred.

```csharp
public class MainViewModel : BaseViewModel
{
    private CityItem selectedCity;
    
    public CityItem SelectedCity
    {
        get { return selectedCity; }
        set 
        {
            selectedCity = value;
            OnPropertyChanged(); // Property name is automatically inferred
        }
    }
}
```

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

### Animate Bottom Sheet Height

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/bottom-sheet-control.md

Use the Animate method to smoothly transition the bottom sheet's height. This example animates the HalfExpandedRatio.

```csharp
bottomSheet.Animate("bottomsheet", 
    x => bottomSheet.HalfExpandedRatio = x, 
    startValue: 0.4, 
    endValue: 0.2);
```

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

### MAUI CollectionView Usage Example

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/xaml-controls-reference.md

Displays a scrollable collection of items with data binding and customizable item appearance. Use for lists or grids of data.

```xml
<CollectionView ItemsSource="{Binding Orders}" 
    SelectionMode="Single" 
    SelectedItem="{Binding SelectedOrder, Mode=TwoWay}" 
    SelectionChanged="CollectionView_SelectionChanged">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical" ItemSpacing="10"/>
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="{x:Type local:Order}">
            <!-- Item display template -->
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>
```

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

### ViewModel Implementation with BindableBase

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/bindable-base.md

Example of a ViewModel inheriting from BindableBase to enable property change notifications for data binding. The RaisePropertyChanged method is called automatically when a property's value is set.

```csharp
public class MainViewModel : BindableBase
{
    private Order selectedOrder;
    
    public Order SelectedOrder
    {
        get { return selectedOrder; }
        set 
        {
            selectedOrder = value;
            RaisePropertyChanged(); // Property name is automatically inferred
        }
    }
}
```

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

### Implement BaseViewModel for MVVM with Google Maps

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/types.md

A base class for MVVM view models, specifically tailored for the Google Maps example. It provides property change notification support.

```csharp
public class BaseViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = "");
}
```

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

### Master-Detail View Binding Example

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/getting-started.md

This XML snippet shows how to bind data to a CollectionView for both the master list of orders and the detail view within a bottom sheet. It utilizes two-way binding for selected items and displays order details.

```xml
<CollectionView ItemsSource="{Binding Orders}" 
    SelectedItem="{Binding SelectedOrder, Mode=TwoWay}"
    SelectionChanged="CollectionView_SelectionChanged">

<!-- Detail view binding -->
<CollectionView ItemsSource="{Binding SelectedOrder.Details}">

```

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

### Create and Initialize OrderDetails Instance

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/order-details.md

Demonstrates how to create a Product instance and then use it to initialize an OrderDetails object. Shows how to access the computed ProductTotal.

```csharp
var product = new Product 
{
    ProductName = "Chai", 
    ImagePath = "beverages", 
    UnitPrice = 4.4m 
};

var item = new OrderDetails
{
    Product = product,
    Quantity = 3
};

// Access computed total
decimal itemTotal = item.ProductTotal; // 13.2m (4.4m * 3)
```

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

### MainPage Initialization

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/main-view-model-google-maps.md

Sets up the MainPage by initializing its components and binding the MainViewModel to its DataContext. This is the entry point for the UI logic.

```csharp
public class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        BindingContext = new MainViewModel();
    }
}
```

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

### MainViewModel Constructor

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/main-view-model-master-detail.md

Initializes the MainViewModel with sample orders and action items. It loads 20 sample orders and creates 5 action items, all sharing the same command handler.

```APIDOC
## MainViewModel()

### Description
Initializes the view model with sample orders and action items.

### Parameters
None

### Returns
void

### Behavior
- Loads 20 sample orders via DataGenerator.CreateOrders()
- Creates 5 action items (Share, Print, Repeat, Feedback, Bookmark)
- All action items share the same command handler (OrderItemAction)
```

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

### Create a CityItem Instance

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/city-item.md

Demonstrates how to instantiate and populate a CityItem object with sample data for Athens. This includes setting its name, location, address, image paths, description, and additional actions.

```csharp
var athens = new CityItem
{
    Name = "Athens",
    Location = new Location(37.9838, 23.7275),
    Address = "Greece",
    ImagePaths = new ObservableCollection<string>
    {
        "academyofathens.jpg",
        "acropolisofathens.jpg",
        "nationallibraryofgreece.jpg"
    },
    Description = "Although there are many other acropoleis in Greece, " +
                  "the significance of the Acropolis of Athens is such that " +
                  "it is commonly known as The Acropolis without qualification.",
    AdditionalActions = new ObservableCollection<ActionItem>
    {
        new ActionItem 
        {
            Name = "Restaurants", 
            Color = Color.FromArgb("#669DF7"), 
            IconPath = "restaurant" 
        }
    }
};
```

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

### Create Location Instances

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/location.md

Demonstrates how to create new Location instances using the constructor with specified latitude and longitude values.

```csharp
var athenslocation = new Location(37.9838, 23.7275);
var parislocation = new Location(48.8566, 2.3522);
```

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

### Map Initialization with Location and Span

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/location.md

Illustrates initializing a MAUI Map control with a specific center Location and a MapSpan to define the visible area.

```xml
<maps:Map>
    <x:Arguments>
        <maps:MapSpan>
            <x:Arguments>
                <sensors:Location>
                    <x:Arguments>
                        <x:Double>34</x:Double>
                        <x:Double>13</x:Double>
                    </x:Arguments>
                </sensors:Location>
                <x:Double>24</x:Double>
                <x:Double>24</x:Double>
            </x:Arguments>
        </maps:MapSpan>
    </x:Arguments>
</maps:Map>
```

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

### Implement Asynchronous Data Loading

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/architecture.md

Shows how to implement asynchronous data loading using an IOrderRepository. This prevents the UI from blocking during data retrieval, improving user experience.

```csharp
// Implement async loading
public async Task InitializeAsync()
{
    var repository = ServiceProvider.GetService<IOrderRepository>();
    var orders = await repository.GetOrdersAsync();
    Orders = new ObservableCollection<Order>(orders);
}
```

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

### ActionItem Constructor (MasterDetail Version)

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/action-item.md

Initializes a new instance of the ActionItem class with a caption, icon path, and command. This is used for the Master-Detail bottom sheet.

```APIDOC
## ActionItem Constructor

### Description
Initializes a new instance of the ActionItem class.

### Method
`ActionItem(string caption, string iconPath, ICommand command)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
#### Constructor Parameters
- **caption** (string) - Yes - Display text for the button
- **iconPath** (string) - Yes - Path or resource key for the button's icon
- **command** (ICommand) - Yes - Command to execute when the button is clicked

### Request Example
```csharp
var actionItem = new ActionItem("Share", "share", new Command<ActionItem>(OrderItemAction));
```

### Response
None
```

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

### Project Structure

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/architecture.md

Illustrates the directory and file organization following the MVVM pattern in a MAUI application.

```tree
MasterDetail/
├── Model/
│   ├── BindableBase              (Base MVVM class)
│   ├── Order                     (Domain model)
│   ├── OrderDetails              (Domain model)
│   ├── Product                   (Domain model)
│   └── ActionItem                (UI model)
├── ViewModel/
│   ├── MainViewModel             (Provides data for view)
│   └── DataGenerator             (Sample data)
├── View/
│   ├── MainPage.xaml             (XAML layout)
│   ├── MainPage.xaml.cs          (Code-behind)
│   ├── App.xaml                  (App resources)
│   └── AppShell.xaml             (Navigation shell)
├── Converters/
│   └── StatusToColorConverter    (XAML value converter)
├── Resources/
│   ├── AppResources.xaml
│   ├── Colors.xaml
│   └── Fonts/
└── Platforms/
    ├── Android/
    └── iOS/
```

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

### Integrate OrderDetails with Order

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/order-details.md

Shows how to create an Order and populate its Details collection with OrderDetails instances. It also demonstrates accessing the Order's total amount, which sums individual item totals.

```csharp
var order = new Order
{
    OrderID = "OD0001",
    Details = new ObservableCollection<OrderDetails>
    {
        new OrderDetails { Product = product1, Quantity = 2 },
        new OrderDetails { Product = product2, Quantity = 1 }
    }
};

// Order.TotalAmount sums all ProductTotal values
var orderTotal = order.TotalAmount;
```

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

### MainPage Constructor

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/code-behind-reference.md

Initializes the main page and calls the auto-generated XAML initialization method. The BindingContext is set in XAML.

```csharp
public MainPage()
{
    InitializeComponent();
}
```

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

### ActionItem Type Definition (Google Maps)

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/action-item.md

Defines an alternative ActionItem class for a Google Maps-inspired example. This version includes a Color property for styling.

```csharp
namespace MapAndBottmSheetExample
{
    public class ActionItem
    {
        public string Name { get; set; }
        public Color Color { get; set; }
        public string IconPath { get; set; }
    }
}
```

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

### MainViewModel Type Definition

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/main-view-model-google-maps.md

Defines the MainViewModel class, inheriting from BaseViewModel, with properties for selected city and a collection of cities. This is the core data structure for the POI details example.

```csharp
namespace MapAndBottmSheetExample
{
    public class MainViewModel : BaseViewModel
    {
        public CityItem SelectedCity { get; set; }
        public ObservableCollection<CityItem> Cities { get; set; }
        public MainViewModel();
    }
}
```

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

### Add New City to MAUI ViewModel

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/getting-started.md

Shows how to add a new city item with its details, location, and image paths to the Cities collection in the MainViewModel constructor.

```csharp
Cities.Add(new CityItem
{
    Name = "London",
    Location = new Location(51.5074, -0.1278),
    Address = "United Kingdom",
    ImagePaths = new ObservableCollection<string> { "image1.jpg", "image2.jpg" },
    Description = "Description of London",
    AdditionalActions = defaultAdditionalActions
});
```

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

### CreateOrders

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/data-generator.md

Generates a collection of sample orders for use in the application. This method is a public static utility for initializing the application with data.

```APIDOC
## CreateOrders

### Description
Generates a collection of sample orders for use in the application. This method is a public static utility for initializing the application with data.

### Method
`public static ObservableCollection<Order> CreateOrders()`

### Parameters
#### Path Parameters
(none)

#### Query Parameters
(none)

#### Request Body
(none)

### Response
#### Success Response
`ObservableCollection<Order>` - A collection of 20 orders with random products and varying statuses (New, Shipping, Finished, Cancelled), dated from today going back in 2-day increments.

### Request Example
```csharp
var orders = DataGenerator.CreateOrders();
// Returns a collection with 20 pre-populated orders
foreach (var order in orders)
{
    Console.WriteLine($"{order.OrderID}: {order.Status}");
}
```
```

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

### Change MAUI Bottom Sheet Height

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/getting-started.md

Demonstrates how to set the initial height and animate height changes for a MAUI Bottom Sheet using HalfExpandedRatio.

```csharp
// Set initial height
bottomSheet.HalfExpandedRatio = 0.5;  // 50% of screen

// Animate height change
bottomSheet.Animate("resize",
    x => bottomSheet.HalfExpandedRatio = x,
    0.4,  // from 40%
    0.6); // to 60%
```

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

### XAML for Displaying ActionItems

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/action-item.md

XAML code demonstrating how to bind an ObservableCollection of ActionItems to a DXStackLayout and display each item as a button with an icon and caption.

```xml
<dx:DXStackLayout Orientation="Horizontal" 
    BindableLayout.ItemsSource="{Binding ActionItems}">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <dx:DXButton Command="{Binding Command}" 
                CommandParameter="{Binding}">
                <dx:DXStackLayout Orientation="Vertical">
                    <dx:DXImage Source="{Binding IconPath}" />
                    <Label Text="{Binding Caption}" />
                </dx:DXStackLayout>
            </dx:DXButton>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</dx:DXStackLayout>
```

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

### Add New Order in MAUI

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/getting-started.md

Demonstrates how to create and add a new order object to the Orders collection in a MAUI ViewModel.

```csharp
var newOrder = new Order
{
    OrderID = "OD1234",
    OrderDate = DateTime.Now,
    Status = OrderStatus.New,
    Details = new ObservableCollection<OrderDetails>
    {
        new OrderDetails 
        {
            Product = new Product { ProductName = "Chai", UnitPrice = 4.4m },
            Quantity = 2
        }
    }
};

viewModel.Orders.Add(newOrder);
```

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

### ViewModel Layer Structure

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/architecture.md

Outlines the structure of the MainViewModel, showing its properties and inheritance from BindableBase.

```tree
MainViewModel (BindableBase)
├── Orders (ObservableCollection<Order>)
├── SelectedOrder (Order with PropertyChanged)
└── ActionItems (ObservableCollection<ActionItem>)
```

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

### AppThemeBinding for TextColor and BackgroundColor

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/xaml-controls-reference.md

Applies different values to properties based on the current light or dark theme. Supports direct color values or references to static resources.

```xml
<Label TextColor="{AppThemeBinding Light=#333, Dark=#FFF}" />
<Rectangle BackgroundColor="{AppThemeBinding Light={StaticResource WhiteColor}, Dark={StaticResource BlackColor}}" />
```

```xml
BackgroundColor="{AppThemeBinding Light={StaticResource Light_Background}, 
                                   Dark={StaticResource Dark_Background}}"
```

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

### ActionItem Constructor (MasterDetail)

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/action-item.md

The constructor for the ActionItem class, used to initialize a new action item with a caption, icon path, and command.

```csharp
public ActionItem(string caption, string iconPath, ICommand command)
```

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

### Product Class Type Definition

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/product.md

Defines the structure of a Product object with properties for its name, image path, and unit price.

```csharp
namespace MasterDetailBottomSheet
{
    public class Product
    {
        public string ProductName { get; set; }
        public string ImagePath { get; set; }
        public decimal UnitPrice { get; set; }
    }
}
```

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

### MAUI Theme Support with AppThemeBinding

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/getting-started.md

Applies theme-aware colors to UI elements using AppThemeBinding for background and a converter for text color based on status.

```xml
BackgroundColor="{AppThemeBinding Light={StaticResource LightColor}, Dark={StaticResource DarkColor}}"
TextColor="{Binding Status, Converter={StaticResource statusToColorConverter}}"
```

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

### Location Constructor

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/location.md

Creates a new Location instance with specified coordinates.

```APIDOC
## Location Constructor

### Description
Creates a new Location instance with specified coordinates.

### Method
```csharp
public Location(double latitude, double longitude)
```

### Parameters
#### Path Parameters
- **latitude** (double) - Required - Latitude coordinate (-90 to 90 degrees)
- **longitude** (double) - Required - Longitude coordinate (-180 to 180 degrees)

### Request Example
```csharp
var athenslocation = new Location(37.9838, 23.7275);
var parislocation = new Location(48.8566, 2.3522);
```
```

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

### ICommand Interface

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/types.md

Standard interface for command patterns, typically used for button actions in UI frameworks. Provides Execute and CanExecute methods.

```csharp
public interface ICommand
{
    void Execute(object parameter);
    bool CanExecute(object parameter);
    event EventHandler CanExecuteChanged;
}
```

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

### CreateOrders Method Signature

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/data-generator.md

Signature for the CreateOrders method, which generates a collection of sample orders.

```csharp
public static ObservableCollection<Order> CreateOrders()
```

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

### Implement Virtual Scrolling for Large Lists

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/architecture.md

Demonstrates how to implement virtual scrolling using CollectionView's RemainingItemsThreshold and RemainingItemsThresholdReachedCommand. This is essential for efficiently displaying large datasets without performance degradation.

```csharp
// Implement virtual scrolling for large lists
<CollectionView ItemsSource="{Binding Orders}" RemainingItemsThreshold="5">
    <CollectionView.RemainingItemsThresholdReachedCommand>
        <Command>LoadMoreOrdersCommand</Command>
    </CollectionView.RemainingItemsThresholdReachedCommand>
</CollectionView>
```

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

### Implement BindableBase for MVVM

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/types.md

Provides a base class for implementing MVVM pattern by supporting property change notifications. Implements the INotifyPropertyChanged interface.

```csharp
public class BindableBase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    public void RaisePropertyChanged([CallerMemberName] string propertyName = "");
}
```

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

### OrderItemAction Method

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/main-view-model-master-detail.md

Handles action item button clicks. This method is invoked when a user interacts with an action item, such as 'Share' or 'Print'.

```APIDOC
## OrderItemAction(ActionItem actionItem)

### Description
Handles action item button clicks. Outputs a debug message indicating which action was clicked.

### Method
`public void OrderItemAction(ActionItem actionItem)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **actionItem** (ActionItem) - Required - The action item that was clicked

### Request Example
```csharp
// When user taps the "Share" button, this method is called
public void OrderItemAction(ActionItem actionItem)
{
    Debug.WriteLine(actionItem.Caption + " click");
    // Output: "Share click"
}
```

### Response
#### Success Response (void)
This method does not return a value.

#### Response Example
None
```

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

### AllProducts Property Signature

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/data-generator.md

Signature for the private static AllProducts property, which holds a list of predefined products.

```csharp
private static List<Product> AllProducts
```

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

### App Class Definition

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/code-behind-reference.md

Defines the App class, inheriting from Application. This is a minimal implementation with most configuration handled in XAML.

```csharp
public partial class App : Application
{
    public App();
}
```

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

### StaticResource for Color Definition and Usage

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/xaml-controls-reference.md

References a resource defined in ResourceDictionary. Use StaticResource to apply a defined color to a property.

```xml
<ContentPage.Resources>
    <Color x:Key="PrimaryColor">#007AFF</Color>
</ContentPage.Resources>

<Label TextColor="{StaticResource PrimaryColor}" />
```

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

### Implement Data Persistence Interface

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/architecture.md

Defines an interface for data persistence operations, including fetching and saving orders. This is crucial for production applications to manage data effectively.

```csharp
// Implement data persistence
public interface IOrderRepository
{
    Task<List<Order>> GetOrdersAsync();
    Task<Order> GetOrderAsync(string id);
    Task SaveOrderAsync(Order order);
}
```

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

### DXImage: Icon with Tint Color

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/xaml-controls-reference.md

Apply a tint color to a DXImage to change its appearance. This is useful for icons that need to match theme colors.

```xml
<dx:DXImage Source="share" 
    HeightRequest="18" 
    WidthRequest="18" 
    TintColor="{AppThemeBinding Light=#333, Dark=#FFF}" />
```

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

### XAML DXStackLayout Binding for Action Items

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/main-view-model-master-detail.md

Shows how to use DXStackLayout with BindableLayout.ItemsSource to dynamically display action items from the ActionItems collection. Each item is rendered as a DXButton with its command and parameter bound.

```xml
<dx:DXStackLayout BindableLayout.ItemsSource="{Binding ActionItems}">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <dx:DXButton Command="{Binding Command}" 
                        CommandParameter="{Binding}"/>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</dx:DXStackLayout>
```

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

### Populating Action Buttons with BindableLayout

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/CS/GoogleMaps-InspiredPOIDetails/Readme.md

Uses BindableLayout to dynamically create action buttons for the POI details view. FlexLayout.Basis controls the width of each button within the container.

```xml
<BindableLayout.ItemTemplate>
    <DataTemplate x:DataType="{x:Type local:ActionItem}">
        <dx:DXStackLayout Orientation="Vertical" Margin="5" HorizontalOptions="Center" FlexLayout.Basis="25%">
            <!-- ... -->
        </dx:DXStackLayout>
    </DataTemplate>
</BindableLayout.ItemTemplate>
```

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

### MVVM with BindableBase for Property Changes

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/architecture.md

Implement MVVM pattern using BindableBase for efficient property change notifications. The RaisePropertyChanged method automatically infers the property name, reducing boilerplate code.

```csharp
public class BindableBase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    
    public void RaisePropertyChanged([CallerMemberName] string propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

// Usage in ViewModel
public class MainViewModel : BindableBase
{
    private Order selectedOrder;
    
    public Order SelectedOrder
    {
        get { return selectedOrder; }
        set
        {
            selectedOrder = value;
            RaisePropertyChanged();  // Automatically uses property name
        }
    }
}
```

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

### MAUI Map Control Pin Configuration

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/location.md

Shows how to use Location objects within a MAUI Map control to define the position of pins.

```xml
<maps:Map>
    <maps:Map.ItemTemplate>
        <DataTemplate>
            <maps:Pin Location="{Binding Location}" 
                     Label="{Binding Name}" />
        </DataTemplate>
    </maps:Map.ItemTemplate>
</maps:Map>
```

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

### ConvertBack Method Signature

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/status-to-color-converter.md

Signature for the ConvertBack method, which is not implemented for this converter and throws NotImplementedException.

```csharp
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
```

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

### Convert Method Signature

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/status-to-color-converter.md

Signature for the Convert method, which takes order status and returns a platform-aware Color.

```csharp
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
```

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

### Asynchronous Data Loading with Main Thread Update

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/architecture.md

For production applications involving server communication, load data asynchronously and then update observable collections on the main thread.

```csharp
public async Task LoadDataAsync()
{
    var data = await api.GetOrdersAsync();
    
    MainThread.BeginInvokeOnMainThread(() =>
    {
        Orders = new ObservableCollection<Order>(data);
    });
}
```

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

### StatusToColorConverter Usage in XAML

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/status-to-color-converter.md

Shows how to register the StatusToColorConverter as a resource and apply it to a Label's TextColor binding in XAML.

```xml
<ContentPage.Resources>
    <local:StatusToColorConverter x:Key="statusToColorConverter"/>
</ContentPage.Resources>

<Label 
    Text="{Binding Status}" 
    TextColor="{Binding Status, Converter={StaticResource statusToColorConverter}}" />
```

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

### View Layer Structure

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/architecture.md

Describes the components of the View layer, including XAML layout and code-behind for MainPage.

```tree
MainPage.xaml
├── XAML Layout
│   ├── CollectionView (Orders)
│   └── BottomSheet (Details)
└── MainPage.xaml.cs (Code-behind)
    ├── Event handlers
    └── UI-specific logic
```

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

### DataGenerator Utility Class

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/types.md

A static utility class providing a method to generate sample order data. Use this for populating collections with test data during development or for demonstration purposes.

```csharp
public static class DataGenerator
{
    public static ObservableCollection<Order> CreateOrders();
}
```

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

### BindableLayout ItemsSource and ItemTemplate

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/xaml-controls-reference.md

Dynamically generates items from a collection using BindableLayout.ItemsSource and BindableLayout.ItemTemplate. Requires a collection bound to the ItemsSource property and a DataTemplate to define the appearance of each item.

```xml
<dx:DXStackLayout BindableLayout.ItemsSource="{Binding Orders}">
    <BindableLayout.ItemTemplate>
        <DataTemplate x:DataType="{x:Type local:Order}">
            <Label Text="{Binding OrderID}" />
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</dx:DXStackLayout>
```

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

### StatusToColorConverter Implementation

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/types.md

A value converter that translates an order's status into a specific color. Implement this when you need to visually represent different order states using color.

```csharp
public class StatusToColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture);
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture);
}
```

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

### Define Order Class

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/types.md

Represents a customer order, including its ID, date, total amount, status, and a collection of order details. The TotalAmount property is read-only.

```csharp
public class Order
{
    public string OrderID { get; set; }
    public DateTime OrderDate { get; set; }
    public decimal TotalAmount { get; }
    public OrderStatus Status { get; set; }
    public ObservableCollection<OrderDetails> Details { get; set; }
}
```

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

### CreateRandomDetails Method Signature

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/api-reference/data-generator.md

Signature for the private CreateRandomDetails method, used internally to create order details.

```csharp
private static ObservableCollection<OrderDetails> CreateRandomDetails()
```

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

### Import BottomSheet Namespace

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/bottom-sheet-control.md

Include this namespace to use the DevExpress BottomSheet control in your MAUI application.

```csharp
using DevExpress.Maui.Controls;
```

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

### User Interaction Sequence for Bottom Sheet

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/architecture.md

Details the sequence of events triggered by a user tapping an order in the CollectionView. This outlines the flow from UI interaction to data updates and UI state changes.

```text
User taps order
  │
  ├─→ CollectionView.SelectedItem set
  │
  ├─→ MainViewModel.SelectedOrder updated
  │
  ├─→ PropertyChanged event fires
  │
  ├─→ Bindings update:
  │   ├─ BottomSheet detail CollectionView
  │   └─ All order details display
  │
  ├─→ CollectionView_SelectionChanged fires
  │
  └─→ Code-behind updates:
      ├─ bottomSheet.State = HalfExpanded
      └─ bottomSheet.HalfExpandedRatio (if needed)
```

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

### Integrate Map with Bottom Sheet

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/bottom-sheet-control.md

Update the selected location and set the bottom sheet to a half-expanded state when a map pin is tapped.

```csharp
public void OnMapPinTapped(Location location)
{
    ViewModel.SelectedLocation = location;
    bottomSheet.HalfExpandedRatio = 0.6;
    bottomSheet.State = BottomSheetState.HalfExpanded;
}
```

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

### Display Details on Item Selection

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/bottom-sheet-control.md

Set the selected item and expand the bottom sheet to a half-expanded state when an item is selected.

```csharp
public void OnItemSelected(Item item)
{
    ViewModel.SelectedItem = item;
    bottomSheet.State = BottomSheetState.HalfExpanded;
}
```

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

### BindableLayout for Dynamic Item Generation

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/architecture.md

Use BindableLayout with DXStackLayout to dynamically generate UI items from a collection. This eliminates the need for code-behind to manage item templates and ensures items are added or removed automatically.

```xml
<dx:DXStackLayout BindableLayout.ItemsSource="{Binding ActionItems}">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <dx:DXButton Command="{Binding Command}" CommandParameter="{Binding}" />
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</dx:DXStackLayout>
```

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

### Enable iOS Safe Area in XAML

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/getting-started.md

Configure the Page to use the safe area on iOS devices by setting the `UseSafeArea` property in XAML. This ensures content is displayed correctly within the device's screen boundaries.

```xml
xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
ios:Page.UseSafeArea="true"
```

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

### Handle Events Requiring Direct Control Access in MAUI

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/code-behind-reference.md

This pattern is for handling events that necessitate direct access to UI controls, such as managing the state or animating a BottomSheet. It allows for fine-grained control over UI elements beyond what data binding can offer.

```csharp
private void OnBottomSheetInteraction(object sender, EventArgs e)
{
    // Can't be done purely via binding
    bottomSheet.State = BottomSheetState.HalfExpanded;
    bottomSheet.Animate("name", x => bottomSheet.Property = x, start, end);
}
```

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

### BottomSheet State Management in C#

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/getting-started.md

Programmatically controls the BottomSheet's expansion state and size. This snippet sets the sheet to open at 60% height when a map pin is clicked.

```csharp
bottomSheet.HalfExpandedRatio = 0.6;  // Set to 60% for city details
bottomSheet.State = BottomSheetState.HalfExpanded;
```

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

### MAUI Bottom Sheet Google Maps Architecture

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/architecture.md

Illustrates the layered architecture for integrating a bottom sheet with a Google Maps view in MAUI. Shows the interaction between the View, ViewModel, and Model layers.

```text
┌─────────────────────────────────────────────────────────────────┐
│ View Layer (MainPage.xaml)                                      │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  Map                               BottomSheet                 │
│  ItemsSource="{Binding Cities}"   Content bound to             │
│    → Creates Pin per CityItem     SelectedCity                │
│                                                                 │
│  Pin_MarkerClicked event ──────┐                             │
│                                │                             │
│  Extract CityItem from Pin     │                             │
│  │                                                            │
│  ├─→ ViewModel.SelectedCity ←────┘                           │
│  ├─→ bottomSheet.HalfExpandedRatio = 0.6                     │
│  └─→ bottomSheet.State = HalfExpanded                        │
│                                                                 │
├─────────────────────────────────────────────────────────────────┤
│ ViewModel Layer (MainViewModel)                                 │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  Cities (ObservableCollection<CityItem>)                      │
│  SelectedCity (CityItem) ────────────────┐                   │
│                                         │ PropertyChanged    │
│  └─ Creates Pin instances per item     event                │
│                                                                 │
├─────────────────────────────────────────────────────────────────┤
│ Model Layer                                                     │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  CityItem                                                      │
│  ├─ Name                                                      │
│  ├─ Location (determines Pin position on map)               │
│  ├─ ImagePaths (Collection<string>)                         │
│  └─ AdditionalActions (Collection<ActionItem>)              │
│                                                                 │
│  Location (Microsoft.Maui.Devices.Sensors)                   │
│  ├─ Latitude (double)                                        │
│  └─ Longitude (double)                                       │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
```

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

### Test StatusToColorConverter

Source: https://github.com/devexpress-examples/maui-bottom-sheet/blob/24.2.3+/_autodocs/architecture.md

Unit test the StatusToColorConverter to verify that it returns the correct color based on the OrderStatus input.

```csharp
[Test]
public void Convert_NewStatus_ReturnsGreenColor()
{
    var converter = new StatusToColorConverter();
    var result = converter.Convert(OrderStatus.New, typeof(Color), null, null);
    
    Assert.AreEqual(Color.FromArgb("#60BA07"), result);
}
```