### Basic SimpleButton Usage Example

Source: https://github.com/radekvym/simpletoolkit/blob/main/docs/SimpleToolkit.SimpleButton/README.md

Define a SimpleButton with an Image and Label. This example shows how to set background, shape, and content for the button.

```xml
<sb:SimpleButton
    Clicked="StarButtonClicked"
    Background="Orange"
    HorizontalOptions="Center"
    StrokeShape="{RoundRectangle CornerRadius=6}">
    <HorizontalStackLayout Padding="12,10" Spacing="10">
        <Image
            Source="star.png" TintColor="White"
            VerticalOptions="Center"
            HeightRequest="18" WidthRequest="18"/>
        <Label
            Text="Star this repo" TextColor="White"
            FontAttributes="Bold"
            VerticalOptions="Center"/>
    </HorizontalStackLayout>
</sb:SimpleButton>
```

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

### SimpleButton with Visual States

Source: https://github.com/radekvym/simpletoolkit/blob/main/docs/SimpleToolkit.SimpleButton/README.md

Configure visual states (Normal, Pressed, PointerOver) for SimpleButton to provide touch feedback. This example changes the background color for each state.

```xml
<sb:SimpleButton
    Clicked="StarButtonClicked"
    Background="Orange"
    HorizontalOptions="Center"
    StrokeShape="{RoundRectangle CornerRadius=6}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroupList>
            <VisualStateGroup>
                <VisualState x:Name="Normal"/>
                <VisualState x:Name="Pressed">
                    <VisualState.Setters>
                        <Setter
                            Property="Background" 
                            Value="OrangeRed"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="PointerOver">
                    <VisualState.Setters>
                        <Setter
                            Property="Background" 
                            Value="DarkOrange"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </VisualStateManager.VisualStateGroups>
    <HorizontalStackLayout Padding="12,10" Spacing="10">
        <Image
            Source="star.png" TintColor="White"
            VerticalOptions="Center"
            HeightRequest="18" WidthRequest="18"/>
        <Label
            Text="Star this repo" TextColor="White"
            FontAttributes="Bold"
            VerticalOptions="Center"/>
    </HorizontalStackLayout>
</sb:SimpleButton>
```

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

### Setting Default Application Transitions

Source: https://github.com/radekvym/simpletoolkit/blob/main/docs/SimpleToolkit.SimpleShell/Transitions.md

Configure the default transition behavior for all pages within the application by calling SetTransition in the AppShell constructor. This example demonstrates custom logic for switching, pushing, and popping transitions, including opacity and translation animations.

```csharp
public AppShell()
{
    InitializeComponent();

    Routing.RegisterRoute(nameof(YellowDetailPage), typeof(YellowDetailPage));

    this.SetTransition(
        callback: static args =>
        {
            switch (args.TransitionType)
            {
                case SimpleShellTransitionType.Switching:
                    if (args.OriginShellSectionContainer == args.DestinationShellSectionContainer)
                    {
                        // Navigatating within the same ShellSection
                        args.OriginPage.Opacity = 1 - args.Progress;
                        args.DestinationPage.Opacity = args.Progress;
                    }
                    else
                    {
                        // Navigatating between different ShellSections
                        (args.OriginShellSectionContainer ?? args.OriginPage).Opacity = 1 - args.Progress;
                        (args.DestinationShellSectionContainer ?? args.DestinationPage).Opacity = args.Progress;
                    }
                    break;
                case SimpleShellTransitionType.Pushing:
                    // Hide the page until it is fully measured
                    args.DestinationPage.Opacity = args.DestinationPage.Width < 0 ? 0.01 : 1;
                    // Slide the page in from right
                    args.DestinationPage.TranslationX = (1 - args.Progress) * args.DestinationPage.Width;
                    break;
                case SimpleShellTransitionType.Popping:
                    // Slide the page out to right
                    args.OriginPage.TranslationX = args.Progress * args.OriginPage.Width;
                    break;
            }
        },
        finished: static args =>
        {
            args.OriginPage.Opacity = 1;
            args.OriginPage.TranslationX = 0;
            args.DestinationPage.Opacity = 1;
            args.DestinationPage.TranslationX = 0;
            if (args.OriginShellSectionContainer is not null)
                args.OriginShellSectionContainer.Opacity = 1;
            if (args.DestinationShellSectionContainer is not null)
                args.DestinationShellSectionContainer.Opacity = 1;
        },
        destinationPageInFront: static args => args.TransitionType switch
        {
            SimpleShellTransitionType.Popping => false,
            _ => true
        },
        duration: static args => args.TransitionType switch
        {
            SimpleShellTransitionType.Switching => 300u,
            _ => 200u
        },
        easing: static args => args.TransitionType switch
        {
            SimpleShellTransitionType.Pushing => Easing.SinIn,
            SimpleShellTransitionType.Popping => Easing.SinOut,
            _ => Easing.Linear
        });
}
```

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

### Binding Custom Controls to SimpleShell Properties

Source: https://context7.com/radekvym/simpletoolkit/llms.txt

Examples of binding custom UI elements to SimpleShell's read-only bindable properties like CurrentShellContent and ShellContents.

```xml
<!-- Bind a title label to the current page title -->
<Label Text="{Binding CurrentShellContent.Title, Source={x:Reference thisShell}}"/>

<!-- Bind a tab bar to all root contents -->
<BindableLayout.ItemsSource>
    <Binding Path="ShellContents" Source="{x:Reference thisShell}"/>
</BindableLayout.ItemsSource>

<!-- Bind a section-level tab to ShellSections -->
<BindableLayout.ItemsSource>
    <Binding Path="ShellSections" Source="{x:Reference thisShell}"/>
</BindableLayout.ItemsSource>
```

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

### Configure RootPageContainer in SimpleShell

Source: https://github.com/radekvym/simpletoolkit/blob/main/docs/SimpleToolkit.SimpleShell/README.md

Use RootPageContainer to wrap your root page content. This example shows how to place a tab bar within the RootPageContainer and the main content in the SimpleShell.Content. Ensure a SimpleNavigationHost is present in the RootPageContainer.

```xml
<simpleShell:SimpleShell.RootPageContainer>
    <Grid
        RowDefinitions="*, 50">
        <simpleShell:SimpleNavigationHost/>
        <HorizontalStackLayout
            x:Name="tabBar"
            Grid.Row="1"
            Margin="20,5"
            HorizontalOptions="Center" Spacing="10"
            BindableLayout.ItemsSource="{Binding ShellContents, Source={x:Reference thisShell}}">
            <BindableLayout.ItemTemplate>
                <DataTemplate
                    x:DataType="BaseShellItem">
                    <Button
                        Clicked="ShellItemButtonClicked"
                        Background="Black"
                        Text="{Binding Title}"/>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </HorizontalStackLayout>
    </Grid>
</simpleShell:SimpleShell.RootPageContainer>

<simpleShell:SimpleShell.Content>
    <Grid
        RowDefinitions="50, *">
        <Button
            x:Name="backButton"
            Clicked="BackButtonClicked"
            Text="Back"
            Margin="20,5"
            HorizontalOptions="Start"
            Background="Black"/>
        <Label
            Margin="20,5"
            HorizontalOptions="Center" VerticalOptions="Center"
            Text="{Binding CurrentShellContent.Title, Source={x:Reference thisShell}}"
            FontAttributes="Bold" FontSize="18"/>
        <simpleShell:SimpleNavigationHost
            Grid.Row="1"/>
    </Grid>
</simpleShell:SimpleShell.Content>
```

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

### Set Per-Page Override Transition

Source: https://context7.com/radekvym/simpletoolkit/llms.txt

Override the default transition for a specific page with a custom animation, such as a scale-in effect. This example sets a scale transition for a DetailPage.

```csharp
public DetailPage()
{
    InitializeComponent();

    this.SetTransition(
        callback: args => args.DestinationPage.Scale = args.Progress,
        starting: args => args.DestinationPage.Scale = 0,
        finished: args => args.DestinationPage.Scale = 1,
        duration: args => 500u);
}
```

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

### Root Page Container with Tab Bar

Source: https://github.com/radekvym/simpletoolkit/blob/main/docs/SimpleToolkit.SimpleShell/README.md

Defines the main container for the shell's root pages, featuring a custom horizontal tab bar at the bottom. This setup is used when the root pages are organized into `ShellSection`s.

```xml
<simpleShell:SimpleShell.RootPageContainer>
    <Grid
        RowDefinitions="*, 50">
        <simpleShell:SimpleNavigationHost/>
        <HorizontalStackLayout
            x:Name="tabBar"
            Grid.Row="1"
            Margin="20,5"
            HorizontalOptions="Center"
            Spacing="10"
            BindableLayout.ItemsSource="{Binding ShellSections, Source={x:Reference thisShell}}">
            <BindableLayout.ItemTemplate>
                <DataTemplate
                    x:DataType="BaseShellItem">
                    <Button
                        Clicked="ShellItemButtonClicked"
                        Background="Black"
                        Text="{Binding Title}"/>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </HorizontalStackLayout>
    </Grid>
</simpleShell:SimpleShell.RootPageContainer>
```

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

### Get Window Insets

Source: https://github.com/radekvym/simpletoolkit/blob/main/docs/nuget/SimpleToolkit.Helpers.md

Retrieves current window insets, such as Safe Area on iOS/MacCatalyst and System Bars/Display Cutouts on Android. Ensures UI elements are not obscured by system UI.

```csharp
Thickness insets = WindowInsetsProvider.GetInsets();
```

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

### Navigating with Shell.Current.GoToAsync

Source: https://context7.com/radekvym/simpletoolkit/llms.txt

Demonstrates various ways to navigate using GoToAsync, including pushing pages, switching root tabs, passing query parameters, and navigating back.

```csharp
// Navigating from any page:
await Shell.Current.GoToAsync(nameof(YellowDetailPage));            // push
await Shell.Current.GoToAsync($"///RedPage");                       // switch root tab
await Shell.Current.GoToAsync($"{nameof(SettingsPage)}?id=42");     // with query param
await Shell.Current.GoToAsync("..");                                 // pop
```

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

### Initialize SimpleHelpers in MauiProgram.cs

Source: https://context7.com/radekvym/simpletoolkit/llms.txt

Call `UseSimpleShell()` in your `MauiProgram.cs` to initialize SimpleHelpers. If you are using SimpleShell, Helpers are initialized automatically.

```csharp
// MauiProgram.cs
builder.UseSimpleShell(); // SimpleShell also initializes Helpers automatically when used together
```

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

### SimpleHelpers Initialization

Source: https://context7.com/radekvym/simpletoolkit/llms.txt

Initialize the SimpleHelpers library in your MauiProgram.cs file. This is often done automatically if SimpleShell is used.

```APIDOC
## SimpleToolkit.Helpers

### Initialization — `UseSimpleHelpers()`

Initialize the helpers library in `MauiProgram.cs` if required by the package.

```csharp
// MauiProgram.cs
builder.UseSimpleShell(); // SimpleShell also initializes Helpers automatically when used together
```
```

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

### Setting Individual Page Transitions

Source: https://github.com/radekvym/simpletoolkit/blob/main/docs/SimpleToolkit.SimpleShell/Transitions.md

Override the default transition for a specific page by calling SetTransition within its constructor. This example applies a scaling transition to the destination page with a custom duration.

```csharp
public YellowDetailPage()
{
    InitializeComponent();

    this.SetTransition(
        callback: args => args.DestinationPage.Scale = args.Progress,
        starting: args => args.DestinationPage.Scale = 0,
        finished: args => args.DestinationPage.Scale = 1,
        duration: args => 500u);
}
```

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

### Load Raw Asset File in MAUI

Source: https://github.com/radekvym/simpletoolkit/blob/main/src/Playground/Playground.Original/Resources/Raw/AboutAssets.txt

Use FileSystem.OpenAppPackageFileAsync to open a stream to a deployed raw asset. Ensure the file name matches the deployed asset's name.

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

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

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

### Access Raw Assets with Essentials

Source: https://github.com/radekvym/simpletoolkit/blob/main/src/Samples/Sample.SimpleShell/Resources/Raw/AboutAssets.txt

Use `FileSystem.OpenAppPackageFileAsync` from .NET MAUI Essentials to open a stream to a deployed raw asset. Ensure the asset is correctly included in the project file.

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

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

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

### Include Raw Assets in .csproj

Source: https://github.com/radekvym/simpletoolkit/blob/main/src/Samples/Sample.SimpleShell/Resources/Raw/AboutAssets.txt

Use the `MauiAsset` build action in your `.csproj` file to include raw files and specify their logical name within the application package.

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

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

### Define Custom Platform Transitions in C#

Source: https://github.com/radekvym/simpletoolkit/blob/main/docs/SimpleToolkit.SimpleShell/Transitions.md

Configure platform-specific animations and transition behaviors for SimpleShell. Uses conditional compilation to apply different settings for Android, iOS/Mac Catalyst, and Windows.

```csharp
public static class Transitions
{
    public static PlatformSimpleShellTransition CustomPlatformTransition => new PlatformSimpleShellTransition
    {
#if ANDROID
        SwitchingEnterAnimation = static (args) => Resource.Animation.nav_default_enter_anim,
        SwitchingLeaveAnimation = static (args) => Resource.Animation.nav_default_exit_anim,
        PushingEnterAnimation = static (args) => Resource.Animator.flip_right_in,
        PushingLeaveAnimation = static (args) => Resource.Animator.flip_right_out,
        PoppingEnterAnimation = static (args) => Resource.Animator.flip_left_in,
        PoppingLeaveAnimation = static (args) => Resource.Animator.flip_left_out,
#elif IOS || MACCATALYST
        SwitchingAnimationDuration = static (args) => 0.3,
        SwitchingAnimation = static (args) => static (from, to) =>
        {
            from.Alpha = 0;
            to.Alpha = 1;
        },
        SwitchingAnimationStarting = static (args) => static (from, to) =>
        {
            to.Alpha = 0;
        },
        SwitchingAnimationFinished = static (args) => static (from, to) =>
        {
            from.Alpha = 1;
        },
        PushingAnimation = static (args) => new AppleTransitioning(true),
        PoppingAnimation = static (args) => new AppleTransitioning(false),
#elif WINDOWS
        PushingAnimation = static (args) => new Microsoft.UI.Xaml.Media.Animation.DrillInNavigationTransitionInfo(),
        PoppingAnimation = static (args) => new Microsoft.UI.Xaml.Media.Animation.DrillInNavigationTransitionInfo(),
#endif
    };
}
```

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

### Create Icon Compatibility Wrapper

Source: https://github.com/radekvym/simpletoolkit/blob/main/docs/migration/Migrating From SimpleToolkit.Core.md

Implement a thin wrapper for IconTintColorBehavior to maintain a similar developer experience when migrating the Icon feature.

```csharp
public class Icon : Image
{
	private readonly IconTintColorBehavior tintBehavior;

	public static readonly BindableProperty TintColorProperty =
		BindableProperty.Create(nameof(TintColor), typeof(Color), typeof(Icon), propertyChanged: OnTintColorChanged);

	public virtual Color TintColor
	{
		get => (Color)GetValue(TintColorProperty);
		set => SetValue(TintColorProperty, value);
	}

	public Icon()
	{
		intBehavior = new IconTintColorBehavior();
		Behaviors.Add(tintBehavior);
	}

	private static void OnTintColorChanged(BindableObject bindable, object oldValue, object newValue)
	{
		if (bindable is not Icon icon)
			return;

		icon.tintBehavior.TintColor = newValue as Color;
	}
}
```

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

### Initialize SimpleShell in MauiProgram.cs

Source: https://github.com/radekvym/simpletoolkit/blob/main/docs/nuget/SimpleToolkit.SimpleShell.md

Register the SimpleShell handler in your MauiProgram.cs file. Set usePlatformTransitions to true to enable native page animations.

```csharp
builder.UseSimpleShell(usePlatformTransitions: true);
```

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

### AppShell Code-Behind for Navigation

Source: https://github.com/radekvym/simpletoolkit/blob/main/docs/nuget/SimpleToolkit.SimpleShell.md

This C# code handles initialization, route registration, and navigation logic for the custom shell. It includes methods for handling button clicks to navigate between tabs and to go back.

```csharp
public partial class AppShell : SimpleToolkit.SimpleShell.SimpleShell
{
    public AppShell()
    {
        InitializeComponent();

        Routing.RegisterRoute(nameof(YellowDetailPage), typeof(YellowDetailPage));
    }

    private async void ShellItemButtonClicked(object sender, EventArgs e)
    {
        var button = sender as Button;
        var shellItem = button.BindingContext as BaseShellItem;

        // Navigate to a new tab if it is not the current tab
        if (!CurrentState.Location.OriginalString.Contains(shellItem.Route))
            await GoToAsync($"///{shellItem.Route}");
    }

    private async void BackButtonClicked(object sender, EventArgs e)
    {
        await GoToAsync("..");
    }
}
```

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

### WindowInsetsProvider.GetInsets()

Source: https://context7.com/radekvym/simpletoolkit/llms.txt

Retrieve cross-platform window insets to manage safe areas and avoid UI obstruction by system elements like notches or status bars.

```APIDOC
## `WindowInsetsProvider.GetInsets()` — Cross-Platform Safe Area

Retrieves the current window insets as a `Thickness`, abstracting platform differences: Safe Area on iOS/Mac Catalyst and System Bars / Display Cutout insets on Android. Use this to manually pad your layouts so content is not obscured by notches, status bars, or navigation bars.

```csharp
// In any page or view — apply insets as padding to avoid system UI overlap
protected override void OnAppearing()
{
    base.OnAppearing();

    Thickness insets = WindowInsetsProvider.GetInsets();

    // Apply insets as padding to the root layout
    rootLayout.Padding = insets;

    // Or apply only specific edges
    topBar.Padding     = new Thickness(0, insets.Top, 0, 0);
    bottomBar.Padding  = new Thickness(0, 0, 0, insets.Bottom);
}
```

```xml
<!-- Alternatively, bind insets in XAML via a converter or ViewModel property -->
<Grid x:Name="rootLayout">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>  <!-- status bar spacer -->
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>  <!-- nav bar spacer -->
    </Grid.RowDefinitions>
</Grid>
```
```

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

### Setting Default Transitions in AppShell

Source: https://github.com/radekvym/simpletoolkit/blob/main/docs/SimpleToolkit.SimpleShell/Transitions.md

Demonstrates how to set a default transition for all pages by calling `SetTransition` in the `AppShell` constructor.

```APIDOC
## Setting Default Transitions in AppShell

This example shows how to configure a default transition for all pages within your application by implementing the `SetTransition` method in the `AppShell` constructor.

### Example

```csharp
public AppShell()
{
    InitializeComponent();

    Routing.RegisterRoute(nameof(YellowDetailPage), typeof(YellowDetailPage));

    this.SetTransition(
        callback: static args =>
        {
            switch (args.TransitionType)
            {
                case SimpleShellTransitionType.Switching:
                    if (args.OriginShellSectionContainer == args.DestinationShellSectionContainer)
                    {
                        // Navigatating within the same ShellSection
                        args.OriginPage.Opacity = 1 - args.Progress;
                        args.DestinationPage.Opacity = args.Progress;
                    }
                    else
                    {
                        // Navigatating between different ShellSections
                        (args.OriginShellSectionContainer ?? args.OriginPage).Opacity = 1 - args.Progress;
                        (args.DestinationShellSectionContainer ?? args.DestinationPage).Opacity = args.Progress;
                    }
                    break;
                case SimpleShellTransitionType.Pushing:
                    // Hide the page until it is fully measured
                    args.DestinationPage.Opacity = args.DestinationPage.Width < 0 ? 0.01 : 1;
                    // Slide the page in from right
                    args.DestinationPage.TranslationX = (1 - args.Progress) * args.DestinationPage.Width;
                    break;
                case SimpleShellTransitionType.Popping:
                    // Slide the page out to right
                    args.OriginPage.TranslationX = args.Progress * args.OriginPage.Width;
                    break;
            }
        },
        finished: static args =>
        {
            args.OriginPage.Opacity = 1;
            args.OriginPage.TranslationX = 0;
            args.DestinationPage.Opacity = 1;
            args.DestinationPage.TranslationX = 0;
            if (args.OriginShellSectionContainer is not null)
                args.OriginShellSectionContainer.Opacity = 1;
            if (args.DestinationShellSectionContainer is not null)
                args.DestinationShellSectionContainer.Opacity = 1;
        },
        destinationPageInFront: static args => args.TransitionType switch
        {
            SimpleShellTransitionType.Popping => false,
            _ => true
        },
        duration: static args => args.TransitionType switch
        {
            SimpleShellTransitionType.Switching => 300u,
            _ => 200u
        },
        easing: static args => args.TransitionType switch
        {
            SimpleShellTransitionType.Pushing => Easing.SinIn,
            SimpleShellTransitionType.Popping => Easing.SinOut,
            _ => Easing.Linear
        });
}
```
```

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

### Custom iOS/Mac Catalyst Transition Class

Source: https://github.com/radekvym/simpletoolkit/blob/main/docs/SimpleToolkit.SimpleShell/Transitions.md

Implements `IUIViewControllerAnimatedTransitioning` for custom push and pop animations on iOS and Mac Catalyst. Handles view manipulation within the transition context.

```csharp
public class AppleTransitioning : Foundation.NSObject, UIKit.IUIViewControllerAnimatedTransitioning
{
    private readonly bool pushing;

    public AppleTransitioning(bool pushing)
    {
        this.pushing = pushing;
    }

    public void AnimateTransition(UIKit.IUIViewControllerContextTransitioning transitionContext)
    {
        var fromView = transitionContext.GetViewFor(UIKit.UITransitionContext.FromViewKey);
        var toView = transitionContext.GetViewFor(UIKit.UITransitionContext.ToViewKey);
        var container = transitionContext.ContainerView;
        var duration = TransitionDuration(transitionContext);

        if (pushing)
            container.AddSubview(toView);
        else
            container.InsertSubviewBelow(toView, fromView);

        var currentFrame = pushing ? toView.Frame : fromView.Frame;
        var offsetFrame = new CoreGraphics.CGRect(x: currentFrame.Location.X, y: currentFrame.Height, width: currentFrame.Width, height: currentFrame.Height);

        if (pushing)
        {
            toView.Frame = offsetFrame;
            toView.Alpha = 0;
        }

        var animations = () =>
        {
            UIKit.UIView.AddKeyframeWithRelativeStartTime(0.0, 1, () =>
            {
                if (pushing)
                {
                    toView.Frame = currentFrame;
                    toView.Alpha = 1;
                }
                else
                {

```

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

### Initialize SimpleButton in MauiProgram.cs

Source: https://github.com/radekvym/simpletoolkit/blob/main/docs/SimpleToolkit.SimpleButton/README.md

Call the UseSimpleButton() extension method in your MauiProgram.cs file to enable the SimpleButton control.

```csharp
builder.UseSimpleButton();
```

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

### Set Default Platform Transition

Source: https://github.com/radekvym/simpletoolkit/blob/main/docs/SimpleToolkit.SimpleShell/Transitions.md

Sets a custom platform-specific transition as the default for all pages within the AppShell. Ensure `InitializeComponent()` is called before setting the transition.

```csharp
public AppShell()
{
    InitializeComponent();

    Routing.RegisterRoute(nameof(YellowDetailPage), typeof(YellowDetailPage));

    this.SetTransition(Transitions.CustomPlatformTransition);
}
```

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

### Apply WindowInsetsProvider for Safe Area Padding

Source: https://context7.com/radekvym/simpletoolkit/llms.txt

Use `WindowInsetsProvider.GetInsets()` to retrieve cross-platform safe area insets. Apply these insets as padding to your root layout or specific elements to prevent content from being obscured by system UI like notches or navigation bars.

```csharp
// In any page or view — apply insets as padding to avoid system UI overlap
protected override void OnAppearing()
{
    base.OnAppearing();

    Thickness insets = WindowInsetsProvider.GetInsets();

    // Apply insets as padding to the root layout
    rootLayout.Padding = insets;

    // Or apply only specific edges
    topBar.Padding     = new Thickness(0, insets.Top, 0, 0);
    bottomBar.Padding  = new Thickness(0, 0, 0, insets.Bottom);
}
```

```xml
<!-- Alternatively, bind insets in XAML via a converter or ViewModel property -->
<Grid x:Name="rootLayout">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>  <!-- status bar spacer -->
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>  <!-- nav bar spacer -->
    </Grid.RowDefinitions>
</Grid>
```

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

### Initialize SimpleShell in MauiProgram.cs

Source: https://github.com/radekvym/simpletoolkit/blob/main/README.md

Call `UseSimpleShell()` in your MauiProgram.cs to integrate SimpleShell into your .NET MAUI application. This enables custom navigation experiences.

```csharp
builder.UseSimpleShell();
```

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

### Extension Methods for Setting Transitions

Source: https://github.com/radekvym/simpletoolkit/blob/main/docs/SimpleToolkit.SimpleShell/Transitions.md

These extension methods simplify the process of defining page transitions. They allow for setting transitions using an ISimpleShellTransition object or a callback function with various configurable parameters.

```csharp
public static void SetTransition(
    this Page page,
    ISimpleShellTransition transition)
```

```csharp
public static void SetTransition(
    this Page page,
    Action<SimpleShellTransitionArgs> callback,
    Func<SimpleShellTransitionArgs, uint> duration = null,
    Action<SimpleShellTransitionArgs> starting = null,
    Action<SimpleShellTransitionArgs> finished = null,
    Func<SimpleShellTransitionArgs, bool> destinationPageInFront = null,
    Func<SimpleShellTransitionArgs, Easing> easing = null)
```

```csharp
public static void SetTransition(
    this Page page,
    Action<SimpleShellTransitionArgs> switchingCallback = null,
    Action<SimpleShellTransitionArgs> pushingCallback = null,
    Action<SimpleShellTransitionArgs> poppingCallback = null,
    Func<SimpleShellTransitionArgs, uint> duration = null,
    Action<SimpleShellTransitionArgs> starting = null,
    Action<SimpleShellTransitionArgs> finished = null,
    Func<SimpleShellTransitionArgs, bool> destinationPageInFront = null,
    Func<SimpleShellTransitionArgs, Easing> easing = null)
```

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

### Define Custom Platform-Specific Transitions

Source: https://context7.com/radekvym/simpletoolkit/llms.txt

Use `#if` compiler directives to configure custom native animations for Android, iOS, macOS, and Windows. Apply the transition in the AppShell constructor.

```csharp
// Transitions.cs
public static class Transitions
{
    public static PlatformSimpleShellTransition CustomPlatformTransition => new PlatformSimpleShellTransition
    {
#if ANDROID
        SwitchingEnterAnimation = static (args) => Resource.Animation.nav_default_enter_anim,
        SwitchingLeaveAnimation = static (args) => Resource.Animation.nav_default_exit_anim,
        PushingEnterAnimation   = static (args) => Resource.Animator.flip_right_in,
        PushingLeaveAnimation   = static (args) => Resource.Animator.flip_right_out,
        PoppingEnterAnimation   = static (args) => Resource.Animator.flip_left_in,
        PoppingLeaveAnimation   = static (args) => Resource.Animator.flip_left_out,
#elif IOS || MACCATALYST
        SwitchingAnimationDuration = static (args) => 0.3,
        SwitchingAnimationStarting = static (args) => static (from, to) => { to.Alpha = 0; },
        SwitchingAnimation         = static (args) => static (from, to) => { from.Alpha = 0; to.Alpha = 1; },
        SwitchingAnimationFinished = static (args) => static (from, to) => { from.Alpha = 1; },
        PushingAnimation = static (args) => new AppleTransitioning(pushing: true),
        PoppingAnimation = static (args) => new AppleTransitioning(pushing: false),
#elif WINDOWS
        PushingAnimation = static (args) => new Microsoft.UI.Xaml.Media.Animation.DrillInNavigationTransitionInfo(),
        PoppingAnimation = static (args) => new Microsoft.UI.Xaml.Media.Animation.DrillInNavigationTransitionInfo(),
#endif
    };
}

// Apply in AppShell constructor
public AppShell()
{
    InitializeComponent();
    Routing.RegisterRoute(nameof(DetailPage), typeof(DetailPage));
    this.SetTransition(Transitions.CustomPlatformTransition);
}
```

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

### Define Custom Shell with Tab Bar and App Bar

Source: https://github.com/radekvym/simpletoolkit/blob/main/docs/nuget/SimpleToolkit.SimpleShell.md

Use this XAML structure to define a SimpleShell with a custom tab bar and app bar. The `SimpleNavigationHost` is used as the content area for pages.

```xml
<simpleShell:SimpleShell
    x:Class="SimpleToolkit.SimpleShellSample.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:simpleShell="clr-namespace:SimpleToolkit.SimpleShell;assembly=SimpleToolkit.SimpleShell"
    xmlns:pages="clr-namespace:SimpleToolkit.SimpleShellSample.Views.Pages"
    x:Name="thisShell"

    Background="White">

    <!-- Pages can be grouped into tabs (ShellSections) -->
    <Tab
        Title="Yellow-Green"
        Route="YellowGreenTab">
        <ShellContent
            Title="Yellow"
            ContentTemplate="{DataTemplate pages:YellowPage}"
            Route="YellowPage"/>

        <ShellContent
            Title="Green"
            ContentTemplate="{DataTemplate pages:GreenPage}"
            Route="GreenPage"/>
    </Tab>

    <ShellContent
        Title="Red"
        ContentTemplate="{DataTemplate pages:RedPage}"
        Route="RedPage"/>

    <ShellContent
        Title="Blue"
        ContentTemplate="{DataTemplate pages:BluePage}"
        Route="BluePage"/>

    <simpleShell:SimpleShell.RootPageContainer>
        <Grid
            RowDefinitions="*, 50">
            <simpleShell:SimpleNavigationHost/>
            <HorizontalStackLayout
                x:Name="tabBar"
                Grid.Row="1"
                Margin="20,5"
                HorizontalOptions="Center" Spacing="10"
                BindableLayout.ItemsSource="{Binding ShellContents, Source={x:Reference thisShell}}">
                <BindableLayout.ItemTemplate>
                    <DataTemplate
                        x:DataType="BaseShellItem">
                        <Button
                            Clicked="ShellItemButtonClicked"
                            Background="Black"
                            Text="{Binding Title}"/>
                    </DataTemplate>
                </BindableLayout.ItemTemplate>
            </HorizontalStackLayout>
        </Grid>
    </simpleShell:SimpleShell.RootPageContainer>

    <simpleShell:SimpleShell.Content>
        <Grid
            RowDefinitions="50, *">
            <Button
                x:Name="backButton"
                Clicked="BackButtonClicked"
                Text="Back"
                Margin="20,5"
                HorizontalOptions="Start"
                Background="Black"/>
            <Label
                Margin="20,5"
                HorizontalOptions="Center" VerticalOptions="Center"
                Text="{Binding CurrentShellContent.Title, Source={x:Reference thisShell}}"
                FontAttributes="Bold" FontSize="18"/>
            <simpleShell:SimpleNavigationHost
                Grid.Row="1"/>
        </Grid>
    </simpleShell:SimpleShell.Content>
</simpleShell:SimpleShell>
```

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

### Registering Detail Routes in AppShell

Source: https://context7.com/radekvym/simpletoolkit/llms.txt

Register routes for detail pages in the AppShell constructor. Navigation uses the standard Shell.Current.GoToAsync() URI scheme.

```csharp
// AppShell.xaml.cs
public partial class AppShell : SimpleToolkit.SimpleShell.SimpleShell
{
    public AppShell()
    {
        InitializeComponent();

        // Register detail page routes
        Routing.RegisterRoute(nameof(YellowDetailPage), typeof(YellowDetailPage));
        Routing.RegisterRoute(nameof(SettingsPage), typeof(SettingsPage));
    }

    private async void TabButtonClicked(object sender, EventArgs e)
    {
        var shellItem = (sender as Button)?.BindingContext as BaseShellItem;
        if (shellItem is null) return;

        // Only navigate if not already on this tab
        if (!CurrentState.Location.OriginalString.Contains(shellItem.Route))
            await GoToAsync($"///{shellItem.Route}");
    }

    private async void BackButtonClicked(object sender, EventArgs e)
    {
        await GoToAsync("..");
    }
}
```

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

### SimpleButton with Icon, Label, and Command Binding

Source: https://context7.com/radekvym/simpletoolkit/llms.txt

Use this XAML to create a rich button with an icon, label, command binding, and custom visual states for interactive feedback. Ensure the SimpleToolkit.SimpleButton namespace is correctly referenced.

```xml
<!-- A rich button with an icon, label, command binding, and visual state animations -->
<sb:SimpleButton
    xmlns:sb="clr-namespace:SimpleToolkit.SimpleButton;assembly=SimpleToolkit.SimpleButton"
    Command="{Binding StarCommand}"
    CommandParameter="{Binding RepoId}"
    HorizontalOptions="Center"
    Background="Orange"
    StrokeShape="{RoundRectangle CornerRadius=8}"
    StrokeThickness="0">

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroupList>
            <VisualStateGroup>
                <VisualState x:Name="Normal"/>
                <VisualState x:Name="Pressed">
                    <VisualState.Setters>
                        <Setter Property="Background" Value="OrangeRed"/>
                        <Setter Property="Scale" Value="0.97"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="PointerOver">
                    <VisualState.Setters>
                        <Setter Property="Background" Value="DarkOrange"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </VisualStateManager.VisualStateGroups>

    <HorizontalStackLayout Padding="16,10" Spacing="10">
        <Image Source="star.png" TintColor="White"
               HeightRequest="18" WidthRequest="18"
               VerticalOptions="Center"/>
        <Label Text="Star this repo" TextColor="White"
               FontAttributes="Bold" VerticalOptions="Center"/>
    </HorizontalStackLayout>
</sb:SimpleButton>
```

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

### iOS Custom View Transition Implementation

Source: https://github.com/radekvym/simpletoolkit/blob/main/docs/SimpleToolkit.SimpleShell/Transitions.md

Implements a custom view transition for iOS using UIKit's animation keyframes. This is useful for creating unique visual transitions between views.

```csharp
public class PlatformSimpleShellTransition : UIKit.IUIViewControllerAnimatedTransitioning
{
    public void AnimateTransition(UIKit.IUIViewControllerContextTransitioning transitionContext)
    {
        var toView = transitionContext.GetViewFor (transitionContext.ToViewController);
        var fromView = transitionContext.GetViewFor (transitionContext.FromViewController);
        var container = transitionContext.ContainerView;

        container.AddSubview (toView);

        var offsetFrame = fromView.Frame;
        offsetFrame.X = container.Bounds.Width;

        UIView.AnimateKeyframes(
            duration: 0.3,
            initialStartTime: 0,
            options: UIViewKeyframeAnimationOptions.CalculationModeCubic,
            animations: () =>
            {
                UIView.AddKeyframeWithRelativeStartTime(0, 0.5, () =>
                {
                    fromView.Frame = offsetFrame;
                    fromView.Alpha = 0;
                });
            },
            completion: (finished) =>
            {
                container.AddSubview (toView);
                transitionContext.CompleteTransition (!transitionContext.TransitionWasCancelled);

                toView.Alpha = 1;
                fromView.Alpha = 1;
            });
    }

    public double TransitionDuration(UIKit.IUIViewControllerContextTransitioning transitionContext)
    {
        return 0.25;
    }
}
```

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

### Extension Method for Setting Transition

Source: https://github.com/radekvym/simpletoolkit/blob/main/docs/SimpleToolkit.SimpleShell/Transitions.md

Signature of the extension method used to set a transition on a page. This method simplifies the process of assigning an `ISimpleShellTransition` to a page.

```csharp
public static void SetTransition(
    this Page page,
    ISimpleShellTransition transition)
```

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

### Register Detail Routes in Code-Behind

Source: https://github.com/radekvym/simpletoolkit/blob/main/docs/SimpleToolkit.SimpleShell/README.md

Registers a detail route for 'YellowDetailPage' in the application's code-behind file. This is a standard practice for navigation in .NET MAUI Shell applications.

```csharp
public partial class AppShell : SimpleToolkit.SimpleShell.SimpleShell
{
    public AppShell()
    {
        InitializeComponent();

        Routing.RegisterRoute(nameof(YellowDetailPage), typeof(YellowDetailPage));
    }
}
```

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

### SimpleButton API Reference

Source: https://github.com/radekvym/simpletoolkit/blob/main/docs/SimpleToolkit.SimpleButton/README.md

Reference for the properties and events available on the SimpleButton control.

```APIDOC
## SimpleButton API Reference

Since `SimpleButton` inherits from `Border`, it includes all standard Border properties plus:

| Member | Description |
| --- | --- |
| **`Clicked`** | Event fired when the button is tapped/clicked. |
| **`Pressed`** | Event fired when the button is pressed. |
| **`Released`** | Event fired when the touch is released. |
| **`Command`** | `ICommand` invoked on click. |
| **`CommandParameter`** | Object passed to the `Command`. |
```

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

### Combine Transitions with Fallback Logic

Source: https://context7.com/radekvym/simpletoolkit/llms.txt

Compose transitions using `CombinedWith` to apply a specific transition under certain conditions, falling back to a default transition otherwise. The `when` delegate determines if the fallback should be used.

```csharp
// DetailPage.xaml.cs — use scale-in only when pushing; fall back to shell default otherwise
public DetailPage()
{
    InitializeComponent();

    var scaleTransition = new SimpleShellTransition(
        callback: args => args.DestinationPage.Scale = args.Progress,
        starting: args => args.DestinationPage.Scale = 0,
        finished: args => args.DestinationPage.Scale = 1,
        duration: args => 500u);

    this.SetTransition(
        scaleTransition.CombinedWith(
            transition: SimpleShell.Current.GetTransition(),
            when: args => args.TransitionType != SimpleShellTransitionType.Pushing));
}
```

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

### SimpleButton API Reference

Source: https://github.com/radekvym/simpletoolkit/blob/main/docs/nuget/SimpleToolkit.SimpleButton.md

SimpleButton extends the functionality of the standard .NET MAUI Border control. It provides additional members for button-like interactions.

```APIDOC
## SimpleButton Members

Since `SimpleButton` inherits from `Border`, it includes all standard Border properties plus the following members:

### Events

- **`Clicked`** (event): Fired when the button is tapped or clicked.
- **`Pressed`** (event): Fired when the button is pressed.
- **`Released`** (event): Fired when the touch is released.

### Commands

- **`Command`** (ICommand): The `ICommand` to be invoked when the button is clicked.
- **`CommandParameter`** (object): The object to be passed to the `Command`.
```

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

### Setting Page-Specific Transitions

Source: https://github.com/radekvym/simpletoolkit/blob/main/docs/SimpleToolkit.SimpleShell/Transitions.md

Illustrates how to override the default transition for a specific page by calling `SetTransition` within its constructor.

```APIDOC
## Setting Page-Specific Transitions

This example demonstrates how to apply a unique transition to an individual page, overriding any globally set default transitions.

### Example

```csharp
public YellowDetailPage()
{
    InitializeComponent();

    this.SetTransition(
        callback: args => args.DestinationPage.Scale = args.Progress,
        starting: args => args.DestinationPage.Scale = 0,
        finished: args => args.DestinationPage.Scale = 1,
        duration: args => 500u);
}
```
```

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

### Define Shell Hierarchy in XAML

Source: https://context7.com/radekvym/simpletoolkit/llms.txt

Defines the logical and visual structure of the SimpleShell hierarchy using XAML. `SimpleNavigationHost` is the placeholder for page rendering, and `RootPageContainer` and `Content` define global UI elements.

```xml
<!-- AppShell.xaml -->
<?xml version="1.0" encoding="UTF-8" ?>
<simpleShell:SimpleShell
    x:Class="MyApp.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:simpleShell="clr-namespace:SimpleToolkit.SimpleShell;assembly=SimpleToolkit.SimpleShell"
    xmlns:pages="clr-namespace:MyApp.Views"
    x:Name="thisShell"
    Background="White">

    <!-- Logical hierarchy: tabs with nested pages -->
    <Tab Title="Yellow-Green" Route="YellowGreenTab">
        <ShellContent Title="Yellow" ContentTemplate="{DataTemplate pages:YellowPage}" Route="YellowPage"/>
        <ShellContent Title="Green"  ContentTemplate="{DataTemplate pages:GreenPage}"  Route="GreenPage"/>
    </Tab>
    <ShellContent Title="Red"  ContentTemplate="{DataTemplate pages:RedPage}"  Route="RedPage"/>
    <ShellContent Title="Blue" ContentTemplate="{DataTemplate pages:BluePage}" Route="BluePage"/>

    <!-- RootPageContainer: visible only on root (tab-level) pages -->
    <simpleShell:SimpleShell.RootPageContainer>
        <Grid RowDefinitions="*, 50">
            <simpleShell:SimpleNavigationHost/>
            <HorizontalStackLayout
                Grid.Row="1" x:Name="tabBar"
                HorizontalOptions="Center" Spacing="10" Margin="20,5"
                BindableLayout.ItemsSource="{Binding ShellContents, Source={x:Reference thisShell}}">
                <BindableLayout.ItemTemplate>
                    <DataTemplate x:DataType="BaseShellItem">
                        <Button Text="{Binding Title}" Background="Black" Clicked="TabButtonClicked"/>
                    </DataTemplate>
                </BindableLayout.ItemTemplate>
            </HorizontalStackLayout>
        </Grid>
    </simpleShell:SimpleShell.RootPageContainer>

    <!-- Content: the global wrapper visible on every page -->
    <simpleShell:SimpleShell.Content>
        <Grid RowDefinitions="50, *">
            <Button x:Name="backButton" Text="Back" HorizontalOptions="Start"
                    Margin="20,5" Background="Black" Clicked="BackButtonClicked"/>
            <Label HorizontalOptions="Center" VerticalOptions="Center"
                   Text="{Binding CurrentShellContent.Title, Source={x:Reference thisShell}}"
                   FontAttributes="Bold" FontSize="18"/>
            <simpleShell:SimpleNavigationHost Grid.Row="1"/>
        </Grid>
    </simpleShell:SimpleShell.Content>

</simpleShell:SimpleShell>
```

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

### SetTransition Overloads

Source: https://github.com/radekvym/simpletoolkit/blob/main/docs/SimpleToolkit.SimpleShell/Transitions.md

Provides an overview of the different overloads available for the SetTransition extension method, allowing for various customization options.

```APIDOC
## SetTransition Overloads

This section details the available overloads for the `SetTransition` extension method.

### Method Signature 1

```csharp
public static void SetTransition(
    this Page page,
    ISimpleShellTransition transition)
```

### Method Signature 2

```csharp
public static void SetTransition(
    this Page page,
    Action<SimpleShellTransitionArgs> callback,
    Func<SimpleShellTransitionArgs, uint> duration = null,
    Action<SimpleShellTransitionArgs> starting = null,
    Action<SimpleShellTransitionArgs> finished = null,
    Func<SimpleShellTransitionArgs, bool> destinationPageInFront = null,
    Func<SimpleShellTransitionArgs, Easing> easing = null)
```

### Method Signature 3

```csharp
public static void SetTransition(
    this Page page,
    Action<SimpleShellTransitionArgs> switchingCallback = null,
    Action<SimpleShellTransitionArgs> pushingCallback = null,
    Action<SimpleShellTransitionArgs> poppingCallback = null,
    Func<SimpleShellTransitionArgs, uint> duration = null,
    Action<SimpleShellTransitionArgs> starting = null,
    Action<SimpleShellTransitionArgs> finished = null,
    Func<SimpleShellTransitionArgs, bool> destinationPageInFront = null,
    Func<SimpleShellTransitionArgs, Easing> easing = null)
```
```

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

### Set Default Universal Page Transitions

Source: https://context7.com/radekvym/simpletoolkit/llms.txt

Define default cross-platform animations for all pages using SetTransition. The callback receives transition progress, page references, and transition type.

```csharp
public AppShell()
{
    InitializeComponent();
    Routing.RegisterRoute(nameof(DetailPage), typeof(DetailPage));

    this.SetTransition(
        callback: static args =>
        {
            switch (args.TransitionType)
            {
                case SimpleShellTransitionType.Switching:
                    // Cross-fade between root tabs (or section containers)
                    var origin = args.OriginShellSectionContainer ?? args.OriginPage;
                    var dest   = args.DestinationShellSectionContainer ?? args.DestinationPage;
                    origin.Opacity = 1 - args.Progress;
                    dest.Opacity   = args.Progress;
                    break;

                case SimpleShellTransitionType.Pushing:
                    // Slide in from right; hide until measured
                    args.DestinationPage.Opacity      = args.DestinationPage.Width < 0 ? 0.01 : 1;
                    args.DestinationPage.TranslationX = (1 - args.Progress) * args.DestinationPage.Width;
                    break;

                case SimpleShellTransitionType.Popping:
                    // Slide out to right
                    args.OriginPage.TranslationX = args.Progress * args.OriginPage.Width;
                    break;
            }
        },
        finished: static args =>
        {
            // Reset all transform/opacity values after transition completes
            args.OriginPage.Opacity = 1;
            args.OriginPage.TranslationX = 0;
            args.DestinationPage.Opacity = 1;
            args.DestinationPage.TranslationX = 0;
            if (args.OriginShellSectionContainer is not null)
                args.OriginShellSectionContainer.Opacity = 1;
            if (args.DestinationShellSectionContainer is not null)
                args.DestinationShellSectionContainer.Opacity = 1;
        },
        destinationPageInFront: static args =>
            args.TransitionType != SimpleShellTransitionType.Popping,
        duration: static args =>
            args.TransitionType == SimpleShellTransitionType.Switching ? 300u : 200u,
        easing: static args => args.TransitionType switch
        {
            SimpleShellTransitionType.Pushing => Easing.SinIn,
            SimpleShellTransitionType.Popping => Easing.SinOut,
            _ => Easing.Linear
        });
}
```

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

### Define App Hierarchy with SimpleShell Components

Source: https://github.com/radekvym/simpletoolkit/blob/main/docs/SimpleToolkit.SimpleShell/README.md

Defines the logical hierarchy of an app using SimpleShell, TabBar, Tab, and ShellContent elements. This structure mirrors standard .NET MAUI Shell.

```xml
<?xml version="1.0" encoding="UTF-8" ?>
<simpleShell:SimpleShell
    x:Class="SimpleToolkit.SimpleShellSample.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:simpleShell="clr-namespace:SimpleToolkit.SimpleShell;assembly=SimpleToolkit.SimpleShell"
    xmlns:pages="clr-namespace:SimpleToolkit.SimpleShellSample.Views.Pages"
    x:Name="thisShell"

    Background="White">

    <TabBar>
        <!-- Pages can be grouped into tabs (ShellSections) -->
        <Tab
            Title="Yellow-Green"
            Route="YellowGreenTab">
            <ShellContent
                Title="Yellow"
                ContentTemplate="{DataTemplate pages:YellowPage}"
                Route="YellowPage"/>

            <ShellContent
                Title="Green"
                ContentTemplate="{DataTemplate pages:GreenPage}"
                Route="GreenPage"/>
        </Tab>

        <Tab
            Title="Red"
            Route="RedTab">
            <ShellContent
                Title="Red"
                ContentTemplate="{DataTemplate pages:RedPage}"
                Route="RedPage"/>
        </Tab>

        <Tab
            Title="Blue"
            Route="BlueTab">
            <ShellContent
                Title="Blue"
                ContentTemplate="{DataTemplate pages:BluePage}"
                Route="BluePage"/>
        </Tab>
    </TabBar>

</simpleShell:SimpleShell>
```