Pr3/carousel page (#772)

* feat: add CarouselPage and PipsPager.

* feat: add PipsPager control and integrate into index

* feat: add PipsPagerDemo and integrate into MainView

---------

Co-authored-by: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
This commit is contained in:
Dong Bin
2026-03-21 17:58:35 +08:00
committed by GitHub
parent 96f7f3d1e1
commit b3b7459088
15 changed files with 400 additions and 3 deletions

View File

@@ -0,0 +1,69 @@
<UserControl xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Semi.Avalonia.Demo.Pages.CarouselPageDemo">
<DockPanel>
<ScrollViewer DockPanel.Dock="Right" Width="220">
<StackPanel Margin="12" Spacing="8">
<TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16"
Foreground="{DynamicResource SystemControlHighlightAccentBrush}" />
<TextBlock Text="Navigation" FontWeight="SemiBold" FontSize="13" />
<StackPanel Spacing="6">
<Button Content="Previous" Click="OnPrevious" HorizontalAlignment="Stretch" />
<Button Content="Next" Click="OnNext" HorizontalAlignment="Stretch" />
</StackPanel>
<Separator />
<TextBlock Text="Status" FontWeight="SemiBold" FontSize="13" />
<TextBlock Name="StatusText" Text="Page 1 of 3" Opacity="0.7" TextWrapping="Wrap" />
</StackPanel>
</ScrollViewer>
<Border DockPanel.Dock="Right" Width="1"
Background="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" />
<Border Margin="12"
BorderBrush="{DynamicResource SystemControlForegroundBaseMediumLowBrush}"
BorderThickness="1" CornerRadius="6" ClipToBounds="True">
<Panel>
<CarouselPage Name="DemoCarousel"
SelectionChanged="OnSelectionChanged">
<ContentPage Header="Welcome">
<StackPanel Margin="24" Spacing="12"
HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Text="Welcome" FontSize="28" FontWeight="Bold"
HorizontalAlignment="Center" />
<TextBlock Text="Swipe left or use the buttons to navigate."
TextWrapping="Wrap" Opacity="0.7" TextAlignment="Center" MaxWidth="280" />
</StackPanel>
</ContentPage>
<ContentPage Header="Explore">
<StackPanel Margin="24" Spacing="12"
HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Text="Explore" FontSize="28" FontWeight="Bold"
HorizontalAlignment="Center" />
<TextBlock Text="CarouselPage supports scroll-based and transition-based navigation modes."
TextWrapping="Wrap" Opacity="0.7" TextAlignment="Center" MaxWidth="280" />
</StackPanel>
</ContentPage>
<ContentPage Header="Get Started">
<StackPanel Margin="24" Spacing="12"
HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Text="Get Started" FontSize="28" FontWeight="Bold"
HorizontalAlignment="Center" />
<TextBlock Text="Use SelectedIndex to jump to any page, or assign a PageTransition for animated switching."
TextWrapping="Wrap" Opacity="0.7" TextAlignment="Center" MaxWidth="280" />
</StackPanel>
</ContentPage>
</CarouselPage>
<PipsPager HorizontalAlignment="Center"
VerticalAlignment="Bottom" Margin="0,0,0,20"
NumberOfPages="3"
SelectedPageIndex="{Binding #DemoCarousel.SelectedIndex}" />
</Panel>
</Border>
</DockPanel>
</UserControl>

View File

@@ -0,0 +1,34 @@
using System.Collections;
using Avalonia.Controls;
using Avalonia.Interactivity;
namespace Semi.Avalonia.Demo.Pages;
public partial class CarouselPageDemo : UserControl
{
public CarouselPageDemo()
{
InitializeComponent();
}
private void OnPrevious(object? sender, RoutedEventArgs e)
{
if (DemoCarousel.SelectedIndex > 0)
DemoCarousel.SelectedIndex--;
}
private void OnNext(object? sender, RoutedEventArgs e)
{
var pageCount = (DemoCarousel.Pages as IList)?.Count ?? 0;
if (DemoCarousel.SelectedIndex < pageCount - 1)
DemoCarousel.SelectedIndex++;
}
private void OnSelectionChanged(object? sender, PageSelectionChangedEventArgs e)
{
if (StatusText == null)
return;
var pageCount = (DemoCarousel.Pages as IList)?.Count ?? 0;
StatusText.Text = $"Page {DemoCarousel.SelectedIndex + 1} of {pageCount}";
}
}

View File

@@ -0,0 +1,99 @@
<UserControl
x:Class="Semi.Avalonia.Demo.Pages.PipsPagerDemo"
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="600"
d:DesignWidth="800"
mc:Ignorable="d">
<ScrollViewer>
<StackPanel HorizontalAlignment="Left" Spacing="16" Margin="0,0,0,20">
<!-- Horizontal PipsPager -->
<TextBlock Classes="H6" Text="Horizontal" />
<PipsPager
NumberOfPages="8"
Orientation="Horizontal" />
<!-- Vertical PipsPager -->
<TextBlock Classes="H6" Text="Vertical" />
<PipsPager
NumberOfPages="8"
Orientation="Vertical" />
<!-- Linked with Carousel -->
<TextBlock Classes="H6" Text="Linked with Carousel" />
<Panel>
<Carousel
Name="DemoCarousel"
Height="160">
<Border Background="#EAF5FF">
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="#1C1F23"
Text="Page 1" />
</Border>
<Border Background="#F9F9F9">
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="#1C1F23"
Text="Page 2" />
</Border>
<Border Background="#FFF8EA">
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="#1C1F23"
Text="Page 3" />
</Border>
<Border Background="#FEF2ED">
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="#1C1F23"
Text="Page 4" />
</Border>
<Border Background="#F0F5FF">
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="#1C1F23"
Text="Page 5" />
</Border>
</Carousel>
<ThemeVariantScope RequestedThemeVariant="Light">
<PipsPager
Name="LinkedPager"
NumberOfPages="5"
Orientation="Horizontal"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
Margin="0,0,0,8"
SelectedPageIndex="{Binding #DemoCarousel.SelectedIndex}" />
</ThemeVariantScope>
</Panel>
<!-- Various page counts -->
<TextBlock Classes="H6" Text="Various Page Counts" />
<StackPanel Spacing="12">
<StackPanel Orientation="Horizontal" Spacing="8">
<TextBlock VerticalAlignment="Center" Width="80" Text="3 pages" />
<PipsPager NumberOfPages="3" Orientation="Horizontal" />
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="8">
<TextBlock VerticalAlignment="Center" Width="80" Text="5 pages" />
<PipsPager NumberOfPages="5" Orientation="Horizontal" />
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="8">
<TextBlock VerticalAlignment="Center" Width="80" Text="10 pages" />
<PipsPager NumberOfPages="10" Orientation="Horizontal" />
</StackPanel>
</StackPanel>
</StackPanel>
</ScrollViewer>
</UserControl>

View File

@@ -0,0 +1,12 @@
using Avalonia.Controls;
namespace Semi.Avalonia.Demo.Pages;
public partial class PipsPagerDemo : UserControl
{
public PipsPagerDemo()
{
InitializeComponent();
}
}

View File

@@ -200,6 +200,9 @@
<TabItem Header="ContentPage">
<pages:ContentPageDemo />
</TabItem>
<TabItem Header="CarouselPage">
<pages:CarouselPageDemo />
</TabItem>
<TabItem Header="DrawerPage">
<pages:DrawerPageDemo />
</TabItem>
@@ -222,6 +225,9 @@
<TabItem Header="Carousel">
<pages:CarouselDemo />
</TabItem>
<TabItem Header="PipsPager">
<pages:PipsPagerDemo />
</TabItem>
<TabItem Header="Expander">
<pages:ExpanderDemo />
</TabItem>

View File

@@ -156,7 +156,7 @@
Theme="{DynamicResource InnerPathIcon}"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
Data="{DynamicResource CarouselButtonGlyph}"
Data="{TemplateBinding Content}"
Foreground="{TemplateBinding Foreground}" />
</ControlTemplate>
</Setter>
@@ -213,6 +213,7 @@
Theme="{DynamicResource CarouselButton}"
Margin="{DynamicResource CarouselButtonMargin}"
Foreground="{DynamicResource CarouselButtonForeground}"
Content="{StaticResource SemiIconChevronLeft}"
IsVisible="{TemplateBinding ItemCount, Converter={x:Static semi:ItemConverter.ItemVisibleConverter}}"
Command="{Binding $parent[Carousel].Previous}" />
<Button
@@ -222,9 +223,9 @@
Theme="{DynamicResource CarouselButton}"
Margin="{DynamicResource CarouselButtonMargin}"
Foreground="{DynamicResource CarouselButtonForeground}"
Content="{StaticResource SemiIconChevronRight}"
IsVisible="{TemplateBinding ItemCount, Converter={x:Static semi:ItemConverter.ItemVisibleConverter}}"
Command="{Binding $parent[Carousel].Next}"
RenderTransform="rotate(180deg)" />
Command="{Binding $parent[Carousel].Next}" />
</Grid>
</ControlTemplate>
</Setter>

View File

@@ -0,0 +1,19 @@
<ResourceDictionary
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ControlTheme x:Key="{x:Type CarouselPage}" TargetType="CarouselPage">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<ControlTemplate>
<Carousel
Name="PART_Carousel"
Background="{TemplateBinding Background}"
ItemTemplate="{TemplateBinding PageTemplate}"
PageTransition="{TemplateBinding PageTransition}"
ItemsPanel="{TemplateBinding ItemsPanel}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" />
</ControlTemplate>
</Setter>
</ControlTheme>
</ResourceDictionary>

View File

@@ -0,0 +1,130 @@
<ResourceDictionary
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Design.PreviewWith>
<StackPanel Margin="20" >
<PipsPager NumberOfPages="10" />
</StackPanel>
</Design.PreviewWith>
<ControlTheme x:Key="PipsPagerButton" TargetType="Button">
<Setter Property="Width" Value="24" />
<Setter Property="Height" Value="24" />
<Setter Property="Foreground" Value="{DynamicResource PipsPagerButtonForeground}" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Template">
<ControlTemplate TargetType="Button">
<PathIcon
Theme="{DynamicResource InnerPathIcon}"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
Data="{TemplateBinding Content}"
Foreground="{TemplateBinding Foreground}" />
</ControlTemplate>
</Setter>
<Style Selector="^:pointerover /template/ PathIcon">
<Setter Property="Foreground" Value="{DynamicResource PipsPagerButtonPointeroverForeground}" />
</Style>
</ControlTheme>
<ControlTheme x:Key="PipsPagerIndicatorDotListBoxItem" TargetType="ListBoxItem">
<Setter Property="Foreground" Value="{DynamicResource PipsPagerIndicatorForeground}" />
<Setter Property="Margin" Value="4" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Template">
<ControlTemplate TargetType="ListBoxItem">
<Ellipse
Name="Container"
Width="{DynamicResource CarouselIndicatorDotWidth}"
Height="{DynamicResource CarouselIndicatorDotHeight}"
Fill="{TemplateBinding Foreground}" />
</ControlTemplate>
</Setter>
<Style Selector="^:pointerover">
<Setter Property="Foreground" Value="{DynamicResource PipsPagerIndicatorPointeroverForeground}" />
</Style>
<Style Selector="^:pressed">
<Setter Property="Foreground" Value="{DynamicResource PipsPagerIndicatorPressedForeground}" />
</Style>
<Style Selector="^:selected">
<Setter Property="Foreground" Value="{DynamicResource PipsPagerIndicatorSelectedForeground}" />
</Style>
</ControlTheme>
<ControlTheme x:Key="{x:Type PipsPager}" TargetType="PipsPager">
<Setter Property="IsTabStop" Value="False" />
<Setter Property="PreviousButtonStyle" Value="{StaticResource PipsPagerButton}" />
<Setter Property="NextButtonStyle" Value="{StaticResource PipsPagerButton}" />
<Setter Property="Template">
<ControlTemplate>
<StackPanel
Name="PART_RootPanel"
Orientation="{TemplateBinding Orientation}"
Background="{TemplateBinding Background}"
ClipToBounds="False">
<Button
Name="PART_PreviousButton"
Theme="{TemplateBinding PreviousButtonStyle}"
IsVisible="{TemplateBinding IsPreviousButtonVisible}"
Foreground="{DynamicResource PipsPagerButtonForeground}"
Content="{StaticResource SemiIconSmallTriangleLeft}" />
<ListBox
Name="PART_PipsPagerList"
HorizontalAlignment="Center"
VerticalAlignment="Center"
ScrollViewer.HorizontalScrollBarVisibility="Hidden"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
ItemsSource="{Binding TemplateSettings.Pips, RelativeSource={RelativeSource TemplatedParent}}"
SelectedIndex="{TemplateBinding SelectedPageIndex, Mode=TwoWay}"
AutoScrollToSelectedItem="False"
ItemContainerTheme="{StaticResource PipsPagerIndicatorDotListBoxItem}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="{Binding $parent[PipsPager].Orientation}" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
<Button
Name="PART_NextButton"
Theme="{TemplateBinding NextButtonStyle}"
Foreground="{DynamicResource PipsPagerButtonForeground}"
Content="{StaticResource SemiIconSmallTriangleRight}"
IsVisible="{TemplateBinding IsNextButtonVisible}" />
</StackPanel>
</ControlTemplate>
</Setter>
<Style Selector="^:horizontal /template/ StackPanel#PART_RootPanel">
<Setter Property="Orientation" Value="Horizontal" />
</Style>
<Style Selector="^:vertical">
<Style Selector="^ /template/ StackPanel#PART_RootPanel">
<Setter Property="Orientation" Value="Vertical" />
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
<Style Selector="^ /template/ Button#PART_PreviousButton">
<Setter Property="Content" Value="{DynamicResource SemiIconSmallTriangleTop}" />
</Style>
<Style Selector="^ /template/ Button#PART_NextButton">
<Setter Property="Content" Value="{DynamicResource SemiIconSmallTriangleDown}" />
</Style>
</Style>
<Style Selector="^:first-page /template/ Button#PART_PreviousButton">
<Setter Property="Opacity" Value="0" />
<Setter Property="IsHitTestVisible" Value="False" />
</Style>
<Style Selector="^:last-page /template/ Button#PART_NextButton">
<Setter Property="Opacity" Value="0" />
<Setter Property="IsHitTestVisible" Value="False" />
</Style>
</ControlTheme>
</ResourceDictionary>

View File

@@ -11,6 +11,7 @@
<ResourceInclude Source="Calendar.axaml" />
<ResourceInclude Source="CalendarDatePicker.axaml" />
<ResourceInclude Source="Carousel.axaml" />
<ResourceInclude Source="CarouselPage.axaml" />
<ResourceInclude Source="CheckBox.axaml" />
<ResourceInclude Source="ComboBox.axaml" />
<ResourceInclude Source="CommandBar.axaml" />
@@ -37,6 +38,7 @@
<ResourceInclude Source="NumericUpDown.axaml" />
<ResourceInclude Source="NavigationPage.axaml" />
<ResourceInclude Source="PathIcon.axaml" />
<ResourceInclude Source="PipsPager.axaml" />
<ResourceInclude Source="Popup.axaml" />
<ResourceInclude Source="ProgressBar.axaml" />
<ResourceInclude Source="RadioButton.axaml" />

View File

@@ -0,0 +1,9 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<SolidColorBrush x:Key="PipsPagerButtonForeground" Opacity="0.5" Color="{StaticResource SemiWhiteColor}" />
<SolidColorBrush x:Key="PipsPagerButtonPointeroverForeground" Color="{StaticResource SemiWhiteColor}" />
<SolidColorBrush x:Key="PipsPagerIndicatorForeground" Opacity="0.5" Color="{StaticResource SemiWhiteColor}" />
<SolidColorBrush x:Key="PipsPagerIndicatorPointeroverForeground" Opacity="0.7" Color="{StaticResource SemiWhiteColor}" />
<SolidColorBrush x:Key="PipsPagerIndicatorPressedForeground" Color="{StaticResource SemiWhiteColor}" />
<SolidColorBrush x:Key="PipsPagerIndicatorSelectedForeground" Color="{StaticResource SemiWhiteColor}" />
</ResourceDictionary>

View File

@@ -29,6 +29,7 @@
<ResourceInclude Source="NotificationCard.axaml" />
<ResourceInclude Source="NavigationPage.axaml" />
<ResourceInclude Source="NumericUpDown.axaml" />
<ResourceInclude Source="PipsPager.axaml" />
<ResourceInclude Source="ProgressBar.axaml" />
<ResourceInclude Source="RadioButton.axaml" />
<ResourceInclude Source="RefreshContainer.axaml" />

View File

@@ -0,0 +1,4 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
</ResourceDictionary>

View File

@@ -29,6 +29,7 @@
<ResourceInclude Source="NavigationPage.axaml" />
<ResourceInclude Source="NotificationCard.axaml" />
<ResourceInclude Source="NumericUpDown.axaml" />
<ResourceInclude Source="PipsPager.axaml" />
<ResourceInclude Source="ProgressBar.axaml" />
<ResourceInclude Source="RadioButton.axaml" />
<ResourceInclude Source="RefreshContainer.axaml" />

View File

@@ -0,0 +1,9 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<SolidColorBrush x:Key="PipsPagerButtonForeground" Opacity="0.5" Color="{StaticResource SemiBlackColor}" />
<SolidColorBrush x:Key="PipsPagerButtonPointeroverForeground" Color="{StaticResource SemiBlackColor}" />
<SolidColorBrush x:Key="PipsPagerIndicatorForeground" Opacity="0.5" Color="{StaticResource SemiBlackColor}" />
<SolidColorBrush x:Key="PipsPagerIndicatorPointeroverForeground" Opacity="0.7" Color="{StaticResource SemiBlackColor}" />
<SolidColorBrush x:Key="PipsPagerIndicatorPressedForeground" Color="{StaticResource SemiBlackColor}" />
<SolidColorBrush x:Key="PipsPagerIndicatorSelectedForeground" Color="{StaticResource SemiBlackColor}" />
</ResourceDictionary>

View File

@@ -29,6 +29,7 @@
<ResourceInclude Source="NotificationCard.axaml" />
<ResourceInclude Source="NavigationPage.axaml" />
<ResourceInclude Source="NumericUpDown.axaml" />
<ResourceInclude Source="PipsPager.axaml" />
<ResourceInclude Source="ProgressBar.axaml" />
<ResourceInclude Source="RadioButton.axaml" />
<ResourceInclude Source="RefreshContainer.axaml" />