Avalonia/samples/ControlCatalog/Pages/CarouselPage/CareCompanionAppPage.xaml

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="ControlCatalog.Pages.CareCompanionAppPage">
  <UserControl.Styles>
    <Style Selector="PipsPager /template/ ListBox ListBoxItem">
      <Setter Property="Width" Value="24" />
      <Setter Property="Height" Value="24" />
      <Setter Property="Padding" Value="0" />
      <Setter Property="Margin" Value="2,0" />
      <Setter Property="MinWidth" Value="0" />
      <Setter Property="MinHeight" Value="0" />
      <Setter Property="ClipToBounds" Value="False" />
      <Setter Property="VerticalAlignment" Value="Center" />
      <Setter Property="Template">
        <ControlTemplate>
          <Grid Background="Transparent">
            <Border Name="Pip"
                    Width="6" Height="6" CornerRadius="3"
                    HorizontalAlignment="Center" VerticalAlignment="Center"
                    Background="#d1d5db">
              <Border.Transitions>
                <Transitions>
                  <DoubleTransition Property="Width" Duration="0:0:0.2" Easing="CubicEaseOut" />
                  <DoubleTransition Property="Height" Duration="0:0:0.2" Easing="CubicEaseOut" />
                  <CornerRadiusTransition Property="CornerRadius" Duration="0:0:0.2" Easing="CubicEaseOut" />
                  <BrushTransition Property="Background" Duration="0:0:0.2" />
                </Transitions>
              </Border.Transitions>
            </Border>
          </Grid>
        </ControlTemplate>
      </Setter>
    </Style>
    <Style Selector="PipsPager /template/ ListBox ListBoxItem:pointerover /template/ Border#Pip">
      <Setter Property="Width" Value="8" />
      <Setter Property="Height" Value="8" />
      <Setter Property="CornerRadius" Value="4" />
      <Setter Property="Background" Value="#b0b0b0" />
    </Style>
    <Style Selector="PipsPager /template/ ListBox ListBoxItem:selected /template/ Border#Pip">
      <Setter Property="Width" Value="20" />
      <Setter Property="Height" Value="6" />
      <Setter Property="CornerRadius" Value="3" />
      <Setter Property="Background" Value="#137fec" />
    </Style>
    <Style Selector="PipsPager /template/ ListBox ListBoxItem:selected:pointerover /template/ Border#Pip">
      <Setter Property="Width" Value="20" />
      <Setter Property="Height" Value="6" />
      <Setter Property="CornerRadius" Value="3" />
      <Setter Property="Background" Value="#0a5bb5" />
    </Style>
    <Style Selector="PipsPager /template/ ListBox ListBoxItem:pressed /template/ Border#Pip">
      <Setter Property="Width" Value="6" />
      <Setter Property="Height" Value="6" />
      <Setter Property="Background" Value="#909090" />
    </Style>
  </UserControl.Styles>
  <DockPanel>
    <ScrollViewer x:Name="InfoPanel" DockPanel.Dock="Right" Width="300">
      <StackPanel Margin="16" Spacing="16">

        <TextBlock Text="Care Companion" FontSize="16" FontWeight="SemiBold"
                   Foreground="{DynamicResource SystemControlHighlightAccentBrush}" />

        <TextBlock TextWrapping="Wrap" FontSize="12" Opacity="0.7"
                   Text="A patient-focused healthcare companion app. CarouselPage handles onboarding (swipe or tap Next) with PipsPager as custom pill-shaped page indicators. Tapping Skip or Get Started pushes the TabbedPage dashboard and removes the onboarding from the navigation stack." />

        <Separator />

        <TextBlock Text="Navigation Flow" FontSize="13" FontWeight="SemiBold" />
        <StackPanel Spacing="4">
          <TextBlock FontSize="12" TextWrapping="Wrap" Text="1. CarouselPage is the NavigationPage root" />
          <TextBlock FontSize="12" TextWrapping="Wrap" Text="2. Swipe or tap Next to advance pages" />
          <TextBlock FontSize="12" TextWrapping="Wrap" Text="3. Skip jumps to Get Started page" />
          <TextBlock FontSize="12" TextWrapping="Wrap" Text="4. Get Started pushes TabbedPage dashboard" />
          <TextBlock FontSize="12" TextWrapping="Wrap" Text="5. RemovePage(carousel) cleans the stack" />
        </StackPanel>

        <Separator />

        <TextBlock Text="Design" FontSize="13" FontWeight="SemiBold" />
        <StackPanel Spacing="4">
          <TextBlock FontSize="12" Text="Primary: #137fec (healthcare blue)" />
          <TextBlock FontSize="12" Text="Background: #f6f7f8 (off-white)" />
          <TextBlock FontSize="12" Text="Cards: #ffffff with border" />
          <TextBlock FontSize="12" Text="Success: #10b981 (streak/done)" />
          <TextBlock FontSize="12" Text="Roundness: 12-16px corners" />
        </StackPanel>

      </StackPanel>
    </ScrollViewer>

    <Border BorderBrush="{DynamicResource SystemControlForegroundBaseMediumLowBrush}"
            BorderThickness="1" CornerRadius="8" ClipToBounds="True">
      <NavigationPage x:Name="NavPage" />
    </Border>
  </DockPanel>
</UserControl>