### Blazor Counter Component Example

Source: https://github.com/dreamescaper/blazorbindings.maui/blob/main/Readme.md

A sample Blazor component demonstrating a counter that increments a value on button press. It uses familiar Blazor syntax with mobile-specific components for native UI rendering. This example showcases the integration of C# code and Razor markup for UI definition.

```razor
<StackLayout>
    <Label FontSize="30">You pressed @count times </Label>
    <Button Text="+1" OnClick="@HandleClick" />
</StackLayout>

@code {
    int count;

    void HandleClick()
    {
        count++;
    }
}
```

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

### Blazor MAUI Navigation with INavigation Service

Source: https://context7.com/dreamescaper/blazorbindings.maui/llms.txt

This code snippet demonstrates how to use the `INavigation` service in a Blazor MAUI application for page navigation. It shows examples of navigating to different pages, passing parameters, opening modal pages, and using event callbacks. The code includes examples for both basic navigation and more complex scenarios.

```xml
@* NavigationPage.razor *@
@inject INavigation Navigation

<ContentPage Title="Navigation Demo">
    <VerticalStackLayout Padding="10" Spacing="10">

        <Label Text="@($"Current item: {_item.Name}")" />

        @* Navigate with no parameters *@
        <Button Text="Go to Details"
                OnClick="NavigateToDetails" />

        @* Navigate with parameters *@
        <Button Text="Go to Details with Item"
                OnClick="NavigateWithItem" />

        @* Navigate with event callback *@
        <Button Text="Go to Details with Callback"
                OnClick="NavigateWithCallback" />

        @* Modal navigation *@
        <Button Text="Open Modal"
                OnClick="OpenModal" />

        @* Navigate using RenderFragment *@
        <Button Text="Navigate with Markup"
                OnClick="NavigateWithMarkup" />

        @if (_callbackCount > 0)
        {
            <Label Text="@($"Callback triggered {_callbackCount} times")"
                   TextColor="Colors.Green" />
        }
    </VerticalStackLayout>
</ContentPage>

@code {
    ItemModel _item = new("Sample", 42);
    int _callbackCount;

    // Basic navigation
    Task NavigateToDetails() => Navigation.PushAsync<DetailsPage>();

    // Navigation with parameters
    Task NavigateWithItem() => Navigation.PushAsync<DetailsPage>(new()
    {
        [nameof(DetailsPage.Item)] = _item
    });

    // Navigation with event callback
    Task NavigateWithCallback() => Navigation.PushAsync<DetailsPage>(new()
    {
        [nameof(DetailsPage.Item)] = _item,
        [nameof(DetailsPage.OnSaved)] = EventCallback.Factory.Create(this, OnItemSaved)
    });

    // Modal navigation
    Task OpenModal() => Navigation.PushModalAsync<ModalPage>(new()
    {
        [nameof(ModalPage.Title)] = "Edit Item"
    });

    // Navigation using RenderFragment syntax
    Task NavigateWithMarkup() => Navigation.PushAsync(
        @<DetailsPage Item="_item" OnSaved="OnItemSaved" />);

    void OnItemSaved() => _callbackCount++;

    record ItemModel(string Name, int Value);
}
```

```xml
@* DetailsPage.razor - Target page *@
@inject INavigation Navigation

<ContentPage Title="Details">
    <VerticalStackLayout Padding="20">
        <Label Text="@($"Item: {Item?.Name}")" FontSize="24" />
        <Label Text="@($"Value: {Item?.Value}")" />

        <Button Text="Save & Go Back" OnClick="SaveAndGoBack" />
        <Button Text="Go Back" OnClick="GoBack" />
    </VerticalStackLayout>
</ContentPage>

@code {
    [Parameter] public ItemModel Item { get; set; }
    [Parameter] public EventCallback OnSaved { get; set; }

    async Task SaveAndGoBack()
    {
        await OnSaved.InvokeAsync();
        await Navigation.PopAsync();
    }

    Task GoBack() => Navigation.PopAsync();

    record ItemModel(string Name, int Value);
}
```

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

### Switch and Checkbox Components in Blazor MAUI

Source: https://context7.com/dreamescaper/blazorbindings.maui/llms.txt

Demonstrates the use of Switch and Checkbox components for boolean value toggling with two-way binding. The examples show how to bind the `IsToggled` property of a Switch and the `IsChecked` property of a Checkbox to boolean variables. It also includes an example of enabling a button based on the checkbox state.

```xml
<ContentPage Title="Toggle Controls">
    <VerticalStackLayout Margin="20" Spacing="10">

        @* Switch with two-way binding *@
        <Grid ColumnDefinitions="*,Auto">
            <Label Text="Enable notifications"
                   VerticalOptions="LayoutOptions.Center"
                   Grid.Column="0" />
            <Switch @bind-IsToggled="_notificationsEnabled" Grid.Column="1" />
        </Grid>
        <Label Text="@($"Notifications: {(_notificationsEnabled ? "ON" : "OFF")}")" />

        @* Checkbox with two-way binding *@
        <HorizontalStackLayout>
            <CheckBox @bind-IsChecked="_agreedToTerms" />
            <Label Text="I agree to the terms and conditions"
                   VerticalOptions="LayoutOptions.Center" />
        </HorizontalStackLayout>

        <Button Text="Continue"
                IsEnabled="@_agreedToTerms"
                OnClick="HandleContinue" />

    </VerticalStackLayout>
</ContentPage>

@code {
    bool _notificationsEnabled;
    bool _agreedToTerms;

    void HandleContinue()
    {
        // Process form submission
    }
}
```

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

### StackLayout for Linear UI Arrangement

Source: https://context7.com/dreamescaper/blazorbindings.maui/llms.txt

Demonstrates the use of `StackLayout` for arranging UI elements in a vertical or horizontal line. This example includes `Label`, `Entry`, `Button`, and `ActivityIndicator` components, showcasing two-way data binding and conditional enabling of a button.

```razor
<StackLayout Orientation="StackOrientation.Vertical" Spacing="10">
    <Label Text="Welcome to BlazorBindings.Maui"
           FontSize="24"
           HorizontalTextAlignment="TextAlignment.Center" />

    <Entry @bind-Text="username"
           Placeholder="Enter username" />

    <Entry @bind-Text="password"
           IsPassword="true"
           Placeholder="Enter password" />

    <Button Text="Login"
            OnClick="HandleLogin"
            IsEnabled="@(!string.IsNullOrWhiteSpace(username))" />

    <ActivityIndicator IsRunning="@isLoading"
                       Color="Colors.Orange" />
</StackLayout>

@code {
    string username;
    string password;
    bool isLoading;

    async Task HandleLogin()
    {
        isLoading = true;
        await Task.Delay(1000); // Simulate API call
        isLoading = false;
    }
}
```

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

### FlexLayout Usage in Blazor MAUI

Source: https://context7.com/dreamescaper/blazorbindings.maui/llms.txt

Demonstrates the use of FlexLayout for creating responsive layouts in a Blazor MAUI application. It showcases row layouts, wrapping layouts for dynamic content, and a page layout with header, sidebar, content, and footer sections. The examples utilize attached properties like `FlexLayout.Basis`, `FlexLayout.Grow`, and `FlexLayout.Order` for layout control.

```xml
@using Microsoft.Maui.Layouts

<ContentPage Title="FlexLayouts">
    <ScrollView>
        <VerticalStackLayout Padding="10" Spacing="10">

            @* Row layout with percentage-based sizing *@
            <FlexLayout Direction="FlexDirection.Row"
                        HorizontalOptions="LayoutOptions.Fill"
                        HeightRequest="40">
                <BoxView Color="Colors.Red" FlexLayout.Basis="20%" />
                <BoxView Color="Colors.Green" FlexLayout.Basis="60%" />
                <BoxView Color="Colors.Blue" FlexLayout.Basis="20%" />
            </FlexLayout>

            @* Wrapping layout for dynamic content *@
            <FlexLayout Wrap="FlexWrap.Wrap" JustifyContent="FlexJustify.SpaceAround">
                @foreach (var item in items)
                {
                    <BoxView Color="@item.Color"
                             HeightRequest="50"
                             WidthRequest="50"
                             Margin="5" />
                }
            </FlexLayout>

            @* Page layout with header, sidebar, content, footer *@
            <FlexLayout Direction="FlexDirection.Column" HeightRequest="300">
                <Label Text="HEADER" BackgroundColor="Colors.Aqua" />

                <FlexLayout FlexLayout.Grow="1">
                    <BoxView Color="Colors.Blue" FlexLayout.Basis="50" FlexLayout.Order="-1" />
                    <Label Text="CONTENT" FlexLayout.Grow="1" BackgroundColor="Colors.Gray" />
                    <BoxView Color="Colors.Green" FlexLayout.Basis="50" />
                </FlexLayout>

                <Label Text="FOOTER" BackgroundColor="Colors.Pink" />
            </FlexLayout>

        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

@code {
    List<ColorItem> items = new()
    {
        new(Colors.AliceBlue), new(Colors.Aqua), new(Colors.Azure),
        new(Colors.Beige), new(Colors.Crimson), new(Colors.DarkGray)
    };

    record ColorItem(Color Color);
}
```

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

### Gesture Recognizers in Blazor MAUI

Source: https://context7.com/dreamescaper/blazorbindings.maui/llms.txt

Explains how to add touch interactions to elements using gesture recognizers, supporting tap, pan, swipe, pinch, and drag gestures. The example demonstrates tap, pan, and swipe gestures with corresponding event handlers.

```xml
<ContentPage Title="Gesture Recognizers">
    <StackLayout Margin="20">

        @* Tap gesture *@
        <Label Text="@($"Tapped {_tapCount} times")"
               FontSize="40"
               BackgroundColor="Colors.LightCoral"
               Padding="20">
            <TapGestureRecognizer NumberOfTapsRequired="1"
                                  OnTapped="@OnTapped" />
        </Label>

        @* Pan gesture for dragging *@
        <Label Text="Pan me around!"
               FontSize="30"
               BackgroundColor="Colors.LightBlue"
               TranslationX="@_panX"
               TranslationY="@_panY">
            <PanGestureRecognizer OnPanUpdated="@OnPan" />
        </Label>

        @* Swipe gestures for actions *@
        <Label Text="@($"Swipe state: {_swipeState}")"
               FontSize="24"
               BackgroundColor="Colors.AntiqueWhite"
               Padding="20">
            <SwipeGestureRecognizer Direction="SwipeDirection.Left"
                                    OnSwiped="@OnSwiped" />
            <SwipeGestureRecognizer Direction="SwipeDirection.Right"
                                    OnSwiped="@OnSwiped" />
        </Label>

    </StackLayout>
</ContentPage>

@code {
    int _tapCount;
    double _panX, _panY;
    string _swipeState = "None";

    void OnTapped() => _tapCount++;

    void OnPan(PanUpdatedEventArgs e)
    {
        if (e.StatusType == GestureStatus.Running)
        {
            _panX = e.TotalX;
            _panY = e.TotalY;
        }
    }

    void OnSwiped(SwipedEventArgs e)
    {
        _swipeState = e.Direction switch
        {
            SwipeDirection.Left => "Deleted",
            SwipeDirection.Right => "Archived",
            _ => "Unknown"
        };
    }
}
```

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

### Access Deployed Assets with C# Essentials

Source: https://github.com/dreamescaper/blazorbindings.maui/blob/main/samples/FlyoutPageSample/Resources/Raw/AboutAssets.txt

This C# code snippet shows how to load and read the contents of a raw asset that has been deployed with your MAUI application. It utilizes the `FileSystem.OpenAppPackageFileAsync` method from the Essentials library to get a stream to the asset, which can then be read into a string.

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

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

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

### Blazor MAUI Shell Navigation Structure

Source: https://context7.com/dreamescaper/blazorbindings.maui/llms.txt

Defines the main application shell using Blazor Bindings for MAUI. It supports flyout menus, tabs, and URI-based navigation, allowing for declarative app structure and automatic route registration. Includes examples of flyout items, tabs, standalone menu items, and menu items with click handlers.

```xml
@* AppShell.razor - Main application shell *@@<Shell FlyoutBackgroundImage="@_backgroundImage"
       FlyoutBackgroundImageAspect="Aspect.AspectFill"
       FlyoutHeaderBehavior="FlyoutHeaderBehavior.CollapseOnScroll">

    <FlyoutHeader>
        <VerticalStackLayout Padding="20" BackgroundColor="Colors.DarkBlue">
            <Label Text="My App" FontSize="24" TextColor="Colors.White" />
        </VerticalStackLayout>
    </FlyoutHeader>

    <ChildContent>
        @* Flyout items with tabs *@
        <FlyoutItem Route="home" Title="Home"
                    FlyoutDisplayOptions="FlyoutDisplayOptions.AsMultipleItems">
            <Tab Title="Dashboard" Route="dashboard" Icon="@_dashboardIcon">
                <ShellContent Route="overview" Title="Overview">
                    <OverviewPage />
                </ShellContent>
                <ShellContent Route="stats" Title="Statistics">
                    <StatsPage />
                </ShellContent>
            </Tab>

            <ShellContent Route="profile" Title="Profile" Icon="@_profileIcon">
                <ProfilePage />
            </ShellContent>
        </FlyoutItem>

        @* Standalone menu items *@
        <ShellContent Route="settings" Title="Settings" Icon="@_settingsIcon">
            <SettingsPage />
        </ShellContent>

        @* Menu items with click handlers *@
        <MenuItem Text="Help" IconImageSource="@_helpIcon" OnClick="OnHelpClick" />
        <MenuItem Text="Logout" IconImageSource="@_logoutIcon" OnClick="OnLogout" />
    </ChildContent>
</Shell>

@code {
    [Inject] INavigation Navigation { get; set; }

    ImageSource _backgroundImage = ImageSource.FromFile("background.png");
    ImageSource _dashboardIcon = ImageSource.FromFile("dashboard.png");
    ImageSource _profileIcon = ImageSource.FromFile("profile.png");
    ImageSource _settingsIcon = ImageSource.FromFile("settings.png");
    ImageSource _helpIcon = ImageSource.FromFile("help.png");
    ImageSource _logoutIcon = ImageSource.FromFile("logout.png");

    async Task OnHelpClick()
    {
        await Launcher.OpenAsync("https://docs.example.com");
    }

    async Task OnLogout()
    {
        // Navigate to specific route using URI
        await Navigation.NavigateToAsync("//login");
    }
}
```

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

### Entry Component with Data Binding in Blazor MAUI

Source: https://context7.com/dreamescaper/blazorbindings.maui/llms.txt

Illustrates the use of the Entry component for text input, including two-way binding, keyboard types, and binding to different data types. It covers basic text entry, email input, numeric input, and password entry. The examples demonstrate how to handle user input and update the UI accordingly.

```xml
<ContentPage Title="Entry Examples">
    <StackLayout Margin="20">
        @* Basic text entry with two-way binding *@
        <Entry @bind-Text="_text"
               Placeholder="Enter text"
               OnCompleted="OnTextCompleted" />
        <Label Text="@($"Text entered: {_text}")" />

        @* Email keyboard *@
        <Label Text="Email:" />
        <Entry @bind-Text="_email" Keyboard="Keyboard.Email" />

        @* Numeric entry bound to int *@
        <Label Text="@($"Quantity: {_quantity}")" />
        <Entry @bind-Text="_quantity" Keyboard="Keyboard.Numeric" />

        @* Nullable double with programmatic updates *@
        <Label Text="@($"Price: {_price:C}")" />
        <Entry @bind-Text="_price" Keyboard="Keyboard.Numeric" />
        <Button Text="Set to $12.34" OnClick="() => _price = 12.34" />

        @* Password entry *@
        <Entry @bind-Text="_password"
               IsPassword="true"
               Placeholder="Enter password" />
    </StackLayout>
</ContentPage>

@code {
    string _text;
    string _email;
    int _quantity;
    double? _price;
    string _password;

    void OnTextCompleted()
    {
        // Called when user presses return/enter
    }
}
```

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

### Configure MAUI App with BlazorBindings

Source: https://context7.com/dreamescaper/blazorbindings.maui/llms.txt

Sets up the MAUI application builder to use BlazorBindings by calling `UseMauiBlazorBindings()` and specifying the root component with `BlazorBindingsApplication<T>`. It also demonstrates registering services for dependency injection.

```csharp
using BlazorBindings.Maui;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<BlazorBindingsApplication<TodoApp>>()
            .UseMauiBlazorBindings();

        // Register services for dependency injection
        builder.Services.AddSingleton<AppState>();
        builder.Services.AddSingleton<TodoItemDatabase>();

        return builder.Build();
    }
}
```

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

### Include Raw Assets with MauiAsset Build Action (.csproj)

Source: https://github.com/dreamescaper/blazorbindings.maui/blob/main/samples/FlyoutPageSample/Resources/Raw/AboutAssets.txt

This snippet demonstrates how to configure the `.csproj` file to include raw assets in your MAUI application. The `MauiAsset` build action ensures that files in the specified directory (and its children) are deployed with the application package. The `LogicalName` property controls how the file is named within the deployed package.

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

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

### Dependency Injection in Blazor Bindings MAUI (C#)

Source: https://context7.com/dreamescaper/blazorbindings.maui/llms.txt

Illustrates how to register services in MauiProgram.cs and inject them into Blazor components using standard Blazor patterns. This facilitates managing application dependencies.

```csharp
// MauiProgram.cs - Service registration
public static MauiApp CreateMauiApp()
{
    var builder = MauiApp.CreateBuilder();
    builder.UseMauiApp<BlazorBindingsApplication<App>>() 
           .UseMauiBlazorBindings();

    // Register services
    builder.Services.AddSingleton<IDataService, DataService>();
    builder.Services.AddSingleton<AppState>();
    builder.Services.AddTransient<IApiClient, ApiClient>();

    return builder.Build();
}
```

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

### Hybrid Apps with BlazorWebView in Blazor Bindings MAUI

Source: https://context7.com/dreamescaper/blazorbindings.maui/llms.txt

Shows how to build hybrid applications by embedding Blazor web UI within native MAUI screens using BlazorWebView. This enables sharing state and components between native and web parts of the application.

```xml
@* MainPage.razor - Hybrid page with native and web content *@
@using HybridSample.Web
@implements IDisposable

<ContentPage>
    <Grid RowDefinitions="*,*">

        @* Native MAUI UI in top half *@
        <GridCell Row="0">
            <ScrollView>
                <VerticalStackLayout Spacing="25" Padding="30,0">
                    <Image Source="@_logoSource"
                           HeightRequest="200"
                           HorizontalOptions="LayoutOptions.Center" />

                    <Label Text="Hello from Native MAUI!"
                           FontSize="32"
                           HorizontalOptions="LayoutOptions.Center" />

                    <Button Text="@_buttonText"
                            HorizontalOptions="LayoutOptions.Center"
                            OnClick="OnCounterClicked" />
                </VerticalStackLayout>
            </ScrollView>
        </GridCell>

        @* Blazor Web UI in bottom half *@
        <GridCell Row="1">
            <BlazorWebView HostPage="wwwroot/index.html">
                <RootComponents>
                    <RootComponent Selector="#app" ComponentType="typeof(WebApp)" />
                </RootComponents>
            </BlazorWebView>
        </GridCell>

    </Grid>
</ContentPage>

@code {
    [Inject] CounterState CounterState { get; set; }

    ImageSource _logoSource = ImageSource.FromFile("dotnet_bot.png");

    string _buttonText => CounterState.CurrentCount switch
    {
        0 => "Click me",
        1 => "Clicked 1 time",
        _ => $"Clicked {CounterState.CurrentCount} times"
    };

    void OnCounterClicked()
    {
        CounterState.IncrementCount();
    }

    protected override void OnInitialized()
    {
        // Share state between native and web components
        CounterState.StateChanged += StateHasChanged;
    }

    public void Dispose()
    {
        CounterState.StateChanged -= StateHasChanged;
    }
}
```

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

### Grid Layout for Row and Column Arrangement

Source: https://context7.com/dreamescaper/blazorbindings.maui/llms.txt

Illustrates the `Grid` layout for arranging elements in rows and columns. It shows two methods for positioning child elements: using the `GridCell` wrapper and using attached properties (`Grid.Row`, `Grid.Column`). Supports flexible sizing with Auto, numeric, and star (*) options.

```razor
@* Using GridCell wrapper for positioning *@
<Grid ColumnDefinitions="*,*,*"
      RowDefinitions="*,*,*"
      HorizontalOptions="LayoutOptions.Center"
      WidthRequest="300">

    <GridCell Row="0" Column="0" ColumnSpan="2" RowSpan="2">
        <Border BackgroundColor="Colors.DarkRed">
            <Label Text="Spans 2x2" HorizontalOptions="LayoutOptions.Center" />
        </Border>
    </GridCell>

    <GridCell Row="0" Column="2">
        <Border BackgroundColor="Colors.DarkSeaGreen">
            <Label Text="Cell 2" HorizontalOptions="LayoutOptions.Center" />
        </Border>
    </GridCell>

    <GridCell Row="2" Column="1" ColumnSpan="2">
        <Border BackgroundColor="Colors.DarkViolet">
            <Label Text="Bottom row" HorizontalOptions="LayoutOptions.Center" />
        </Border>
    </GridCell>
</Grid>

@* Using attached properties for positioning *@
<Grid ColumnDefinitions="*,Auto" RowDefinitions="Auto,*,Auto">
    <Label Text="Header" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" />
    <ScrollView Grid.Row="1" Grid.Column="0">
        <Label Text="Main content area" />
    </ScrollView>
    <BoxView Color="Colors.Gray" Grid.Row="1" Grid.Column="1" WidthRequest="200" />
    <Label Text="Footer" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" />
</Grid>
```

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

### Dependency Injection in Blazor Bindings MAUI (Razor)

Source: https://context7.com/dreamescaper/blazorbindings.maui/llms.txt

Demonstrates injecting services like IDataService and AppState into a Blazor component using the `@inject` directive. The component then uses these services to fetch and display data.

```xml
@* Component using injected services *@
@inject IDataService DataService
@inject AppState AppState

<ContentPage Title="Data View">
    <VerticalStackLayout>
        @if (_loading)
        {
            <ActivityIndicator IsRunning="true" />
        }
        else
        {
            @foreach (var item in _items)
            {
                <Label Text="@item.Name" />
            }
        }
    </VerticalStackLayout>
</ContentPage>

@code {
    List<Item> _items = new();
    bool _loading = true;

    protected override async Task OnInitializedAsync()
    {
        _items = await DataService.GetItemsAsync();
        _loading = false;
    }
}
```

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

### Basic Blazor Component with State and Event Handling

Source: https://context7.com/dreamescaper/blazorbindings.maui/llms.txt

A basic Blazor component demonstrating state management and event handling. It displays a counter value from `AppState` and increments it when a button is clicked.

```razor
@* Counter.razor - Basic component with state and event handling *@@inject AppState AppState

<StackLayout>
    <Label FontSize="30"
           FontAttributes="FontAttributes.Italic"
           Text="@($"You have pressed {AppState.Counter} times")" />

    <Button OnClick="HandleClick">
        +1
    </Button>
</StackLayout>

@code {
    void HandleClick()
    {
        AppState.Counter++;
    }
}
```

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

### TabbedPage Navigation in Blazor Bindings MAUI

Source: https://context7.com/dreamescaper/blazorbindings.maui/llms.txt

Demonstrates how to create a TabbedPage for tab-based navigation in a Blazor Bindings MAUI application. This allows users to switch between different content pages via tabs at the bottom of the screen.

```xml
@* TodoApp.razor - Root component with tabs *@
<TabbedPage>

    <ContentPage Title="Todo">
        <StackLayout>
            <Label FontSize="20"
                   TextColor="Colors.Crimson"
                   Text="Todo Items"
                   HorizontalTextAlignment="TextAlignment.Center" />
            <TodoList />
        </StackLayout>
    </ContentPage>

    <ContentPage Title="Counter">
        <Counter />
    </ContentPage>

    <ContentPage Title="About">
        <About />
    </ContentPage>

</TabbedPage>
```

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

### Blazor MAUI ContentPage Navigation Bar and Toolbar Customization

Source: https://context7.com/dreamescaper/blazorbindings.maui/llms.txt

Demonstrates customizing ContentPage properties in MAUI using Blazor Bindings. This includes controlling navigation bar visibility and shadow, tab bar visibility, title color, back button text and visibility, and implementing custom title views and toolbar items. It also shows how to handle back button presses and display alerts.

```xml
<ContentPage @ref="_page"
             Title="Page Properties Demo"
             NavBarIsVisible="@_navBarVisible"
             NavBarHasShadow="true"
             TabBarIsVisible="@_tabBarVisible"
             TitleColor="Colors.White"
             BackButtonText="Back"
             BackButtonVisible="true"
             OnBackButtonPressed="HandleBackButton">

    @* Custom title view in navigation bar *@
    <TitleView>
        <HorizontalStackLayout Spacing="10">
            <Image Source="logo.png" HeightRequest="30" />
            <Label Text="Custom Title" TextColor="Colors.White" />
        </HorizontalStackLayout>
    </TitleView>

    @* Toolbar items *@
    <ToolbarItems>
        <ToolbarItem Text="Save" OnClick="Save" />
        <ToolbarItem Text="Settings" OnClick="OpenSettings" />
    </ToolbarItems>

    <ChildContent>
        <VerticalStackLayout Padding="20">
            <HorizontalStackLayout>
                <Label Text="Show NavBar:" />
                <Switch @bind-IsToggled="_navBarVisible" />
            </HorizontalStackLayout>

            <HorizontalStackLayout>
                <Label Text="Show TabBar:" />
                <Switch @bind-IsToggled="_tabBarVisible" />
            </HorizontalStackLayout>

            <Button Text="Show Alert" OnClick="ShowAlert" />
        </VerticalStackLayout>
    </ChildContent>
</ContentPage>

@code {
    BlazorBindings.Maui.Elements.Page _page;
    bool _navBarVisible = true;
    bool _tabBarVisible = true;

    async Task HandleBackButton()
    {
        // Custom back button behavior
        bool confirm = await _page.NativeControl.DisplayAlert(
            "Confirm", "Discard changes?", "Yes", "No");
        if (confirm)
        {
            await Navigation.PopAsync();
        }
    }

    async Task ShowAlert()
    {
        await _page.NativeControl.DisplayAlert("Info", "Hello!", "OK");
    }

    Task Save() => Task.CompletedTask;
    Task OpenSettings() => Task.CompletedTask;
}
```

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

### CollectionView Component in Blazor MAUI

Source: https://context7.com/dreamescaper/blazorbindings.maui/llms.txt

Demonstrates how to use the CollectionView component to display scrollable lists with customizable item templates, selection modes, and empty states. It utilizes ItemsSource for data binding and ItemTemplate for custom rendering. Includes functionality for adding and removing items.

```xml
@using System.Collections.ObjectModel

<ContentPage Title="Item List">
    <Grid RowDefinitions="Auto,*">
        <VerticalStackLayout Grid.Row="0">
            <Button Text="Add Item" OnClick="AddItem" />
            <Button Text="Remove Selected" OnClick="RemoveSelected" />
        </VerticalStackLayout>

        <CollectionView ItemsSource="_items"
                        SelectionMode="SelectionMode.Single"
                        @bind-SelectedItem="_selectedItem"
                        Grid.Row="1">

            @* Empty state when no items *@
            <EmptyView>
                <VerticalStackLayout HorizontalOptions="LayoutOptions.Center"
                                     VerticalOptions="LayoutOptions.Center">
                    <Label Text="No items found" FontSize="18" />
                    <Button Text="Add first item" OnClick="AddItem" />
                </VerticalStackLayout>
            </EmptyView>

            @* Item template for each item *@
            <ItemTemplate>
                <Border Padding="10" Margin="5" StrokeColor="Colors.LightGray">
                    <HorizontalStackLayout Spacing="10">
                        <Label Text="@context.Name" FontSize="16" />
                        <Label Text="@($"${context.Price:F2}")"
                               TextColor="Colors.Green" />
                    </HorizontalStackLayout>
                </Border>
            </ItemTemplate>
        </CollectionView>
    </Grid>
</ContentPage>

@code {
    List<Product> _items = new()
    {
        new("Widget", 9.99m),
        new("Gadget", 19.99m),
        new("Gizmo", 14.99m)
    };

    Product _selectedItem;

    void AddItem()
    {
        _items.Add(new Product($"Item {_items.Count + 1}",
                               Random.Shared.Next(5, 50)));
    }

    void RemoveSelected()
    {
        if (_selectedItem != null)
        {
            _items.Remove(_selectedItem);
            _selectedItem = null;
        }
    }

    record Product(string Name, decimal Price);
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.