Carousel
One page at a time, sliding on a spring, with dots as a PipsPager.
<StackPanel Spacing="16" Width="320" Margin="48,0" HorizontalAlignment="Left">
<Panel>
<Carousel Name="Slides" Focusable="True">
<Border Height="160" CornerRadius="5.5" BorderThickness="1" BackgroundSizing="OuterBorderEdge"
Background="{DynamicResource UIKit.Muted}" BorderBrush="{DynamicResource UIKit.Border}">
<TextBlock Text="1" FontSize="32" FontWeight="SemiBold" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<Border Height="160" CornerRadius="5.5" BorderThickness="1" BackgroundSizing="OuterBorderEdge"
Background="{DynamicResource UIKit.Muted}" BorderBrush="{DynamicResource UIKit.Border}">
<TextBlock Text="2" FontSize="32" FontWeight="SemiBold" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<Border Height="160" CornerRadius="5.5" BorderThickness="1" BackgroundSizing="OuterBorderEdge"
Background="{DynamicResource UIKit.Muted}" BorderBrush="{DynamicResource UIKit.Border}">
<TextBlock Text="3" FontSize="32" FontWeight="SemiBold" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</Carousel>
<Button Classes="outline icon-only rounded-full" Margin="-48,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" Click="OnPrevious">
<PathIcon Data="{StaticResource UIKit.Icon.ChevronLeft}" />
</Button>
<Button Classes="outline icon-only rounded-full" Margin="0,0,-48,0" HorizontalAlignment="Right" VerticalAlignment="Center" Click="OnNext">
<PathIcon Data="{StaticResource UIKit.Icon.ChevronRight}" />
</Button>
</Panel>
<PipsPager Classes="carousel" NumberOfPages="3" HorizontalAlignment="Center"
SelectedPageIndex="{Binding #Slides.SelectedIndex, Mode=TwoWay}" />
</StackPanel>Usage
The theme covers Carousel: it shows one page at a time, clipped to its bounds, and its PageTransition is uikit:SpringSlide, on which both pages ride one track 16px apart on a spring. Set Focusable="True" to make the carousel a tab stop (Avalonia then handles the arrow keys); keyboard focus rings the pages.
The app adds the controls around the pages: Previous and Next are Button Classes="outline icon-only rounded-full" with a chevron, 16px outside the pages and centered on them, whose Click handlers call the carousel's Previous() and Next(); the dots are a PipsPager Classes="carousel" 16px below, with SelectedPageIndex bound two-way to the carousel's SelectedIndex.
Examples
A smaller carousel with small buttons and two pages.
<StackPanel Spacing="16" Width="200" Margin="40,0" HorizontalAlignment="Left">
<Panel>
<Carousel Name="Slides" Focusable="True">
<Border Height="100" CornerRadius="5.5" BorderThickness="1" BackgroundSizing="OuterBorderEdge"
Background="{DynamicResource UIKit.Muted}" BorderBrush="{DynamicResource UIKit.Border}">
<TextBlock Text="1" FontSize="24" FontWeight="SemiBold" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<Border Height="100" CornerRadius="5.5" BorderThickness="1" BackgroundSizing="OuterBorderEdge"
Background="{DynamicResource UIKit.Muted}" BorderBrush="{DynamicResource UIKit.Border}">
<TextBlock Text="2" FontSize="24" FontWeight="SemiBold" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</Carousel>
<Button Classes="outline icon-only rounded-full small" Margin="-40,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" Click="OnPrevious">
<PathIcon Data="{StaticResource UIKit.Icon.ChevronLeft}" />
</Button>
<Button Classes="outline icon-only rounded-full small" Margin="0,0,-40,0" HorizontalAlignment="Right" VerticalAlignment="Center" Click="OnNext">
<PathIcon Data="{StaticResource UIKit.Icon.ChevronRight}" />
</Button>
</Panel>
<PipsPager Classes="carousel" NumberOfPages="2" HorizontalAlignment="Center"
SelectedPageIndex="{Binding #Slides.SelectedIndex, Mode=TwoWay}" />
</StackPanel>Previous and Next
uikit:CarouselPrevious and uikit:CarouselNext are the buttons above, bound to a carousel with Carousel="{Binding #Slides}". Put them in the same Panel as the carousel: they sit 16px outside the pages, centered on them, or above and below a vertical carousel, with a chevron along its axis. They are disabled at the first and the last page unless the carousel has WrapSelection="True", and after a click the carousel takes the focus without a ring, so the arrow keys go on paging. Sizes: xsmall, small, large. Content set on a button replaces its chevron.
Pointer input
With uikit:Carousels.TracksPointer="True" the pages lie side by side, 16px apart, on a track that moves on the same spring. A drag along the axis moves the pages with the pointer and lets go on the nearest page; a drag across the axis is left to the page around the carousel, and a drag never clicks a control on a page. A wheel notch along the axis steps one page; a trackpad scroll moves the pages and settles on the nearest one when it stops. A vertical carousel passes a scroll that starts at its first or last page on to the page that contains it. Going to a page several pages away slides past the pages between, and with WrapSelection="True" the track goes on from the last page to the first without sliding back. Leave the carousel's ItemsPanel to the theme.
Drag the pages, or use the buttons, the dots or the arrow keys.
<StackPanel Spacing="16" Width="320" Margin="48,0" HorizontalAlignment="Left">
<Panel>
<Carousel Name="Slides" Focusable="True" uikit:Carousels.TracksPointer="True">
<Border Height="160" CornerRadius="5.5" BorderThickness="1" BackgroundSizing="OuterBorderEdge"
Background="{DynamicResource UIKit.Muted}" BorderBrush="{DynamicResource UIKit.Border}">
<TextBlock Text="1" FontSize="32" FontWeight="SemiBold" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<Border Height="160" CornerRadius="5.5" BorderThickness="1" BackgroundSizing="OuterBorderEdge"
Background="{DynamicResource UIKit.Muted}" BorderBrush="{DynamicResource UIKit.Border}">
<TextBlock Text="2" FontSize="32" FontWeight="SemiBold" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<Border Height="160" CornerRadius="5.5" BorderThickness="1" BackgroundSizing="OuterBorderEdge"
Background="{DynamicResource UIKit.Muted}" BorderBrush="{DynamicResource UIKit.Border}">
<TextBlock Text="3" FontSize="32" FontWeight="SemiBold" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</Carousel>
<uikit:CarouselPrevious Carousel="{Binding #Slides}" />
<uikit:CarouselNext Carousel="{Binding #Slides}" />
</Panel>
<PipsPager Classes="carousel" NumberOfPages="3" HorizontalAlignment="Center"
SelectedPageIndex="{Binding #Slides.SelectedIndex, Mode=TwoWay}" />
</StackPanel>WrapSelection="True" with four pages and small buttons.
<Panel Width="320" Margin="48,0" HorizontalAlignment="Left">
<Carousel Name="Slides" Focusable="True" WrapSelection="True" uikit:Carousels.TracksPointer="True">
<Border Height="120" CornerRadius="5.5" BorderThickness="1" BackgroundSizing="OuterBorderEdge"
Background="{DynamicResource UIKit.Muted}" BorderBrush="{DynamicResource UIKit.Border}">
<TextBlock Text="1" FontSize="32" FontWeight="SemiBold" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<Border Height="120" CornerRadius="5.5" BorderThickness="1" BackgroundSizing="OuterBorderEdge"
Background="{DynamicResource UIKit.Muted}" BorderBrush="{DynamicResource UIKit.Border}">
<TextBlock Text="2" FontSize="32" FontWeight="SemiBold" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<Border Height="120" CornerRadius="5.5" BorderThickness="1" BackgroundSizing="OuterBorderEdge"
Background="{DynamicResource UIKit.Muted}" BorderBrush="{DynamicResource UIKit.Border}">
<TextBlock Text="3" FontSize="32" FontWeight="SemiBold" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<Border Height="120" CornerRadius="5.5" BorderThickness="1" BackgroundSizing="OuterBorderEdge"
Background="{DynamicResource UIKit.Muted}" BorderBrush="{DynamicResource UIKit.Border}">
<TextBlock Text="4" FontSize="32" FontWeight="SemiBold" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</Carousel>
<uikit:CarouselPrevious Classes="small" Carousel="{Binding #Slides}" />
<uikit:CarouselNext Classes="small" Carousel="{Binding #Slides}" />
</Panel>A vertical carousel: its PageTransition is a vertical uikit:SpringSlide.
<Panel Width="240" Height="160" Margin="0,48" HorizontalAlignment="Left">
<Carousel Name="Slides" Focusable="True" uikit:Carousels.TracksPointer="True">
<Carousel.PageTransition>
<uikit:SpringSlide Orientation="Vertical" Spring="{StaticResource UIKit.Spring.CarouselSnap}" Gap="16" />
</Carousel.PageTransition>
<Border Height="160" CornerRadius="5.5" BorderThickness="1" BackgroundSizing="OuterBorderEdge"
Background="{DynamicResource UIKit.Muted}" BorderBrush="{DynamicResource UIKit.Border}">
<TextBlock Text="1" FontSize="32" FontWeight="SemiBold" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<Border Height="160" CornerRadius="5.5" BorderThickness="1" BackgroundSizing="OuterBorderEdge"
Background="{DynamicResource UIKit.Muted}" BorderBrush="{DynamicResource UIKit.Border}">
<TextBlock Text="2" FontSize="32" FontWeight="SemiBold" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<Border Height="160" CornerRadius="5.5" BorderThickness="1" BackgroundSizing="OuterBorderEdge"
Background="{DynamicResource UIKit.Muted}" BorderBrush="{DynamicResource UIKit.Border}">
<TextBlock Text="3" FontSize="32" FontWeight="SemiBold" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</Carousel>
<uikit:CarouselPrevious Carousel="{Binding #Slides}" />
<uikit:CarouselNext Carousel="{Binding #Slides}" />
</Panel>