Carousel

一次显示一页，随弹簧滑动，并以 PipsPager 绘制圆点。

示例可交互

Carousel — Avalonia UIKit

Live demo unavailable

<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>

用法

主题覆盖 Carousel：它一次显示一页，并裁剪到自身边界内，PageTransition 为 uikit:SpringSlide，两页在同一条轨道上相隔 16px，随弹簧移动。设置 Focusable="True" 可让轮播成为一个 Tab 停靠点（此时方向键由 Avalonia 处理）；键盘焦点会为页面绘制焦点环。

页面周围的控件由应用添加：上一页与下一页是带 chevron 的 Button Classes="outline icon-only rounded-full"，位于页面外侧 16px 处并与页面居中对齐，其 Click 处理程序调用轮播的 Previous() 与 Next()；圆点是位于下方 16px 的 PipsPager Classes="carousel"，其 SelectedPageIndex 双向绑定到轮播的 SelectedIndex。

示例

一个更小的轮播，使用 small 按钮和两页。

小尺寸可交互

Live demo unavailable

<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>

uikit:CarouselPrevious 与 uikit:CarouselNext 就是上面的按钮，通过 Carousel="{Binding #Slides}" 绑定到轮播。请把它们放在与轮播相同的 Panel 中：它们位于页面外侧 16px 处并与页面居中对齐；对于垂直轮播，则位于页面上方与下方，chevron 沿其轴向。在第一页和最后一页时它们处于禁用状态，除非轮播设置了 WrapSelection="True"；点击后轮播会取得焦点但不显示焦点环，因此方向键可以继续翻页。尺寸：xsmall、small、large。在按钮上设置内容会替换其 chevron。

指针输入

设置 uikit:Carousels.TracksPointer="True" 后，各页并排相距 16px，位于同一条随相同弹簧移动的轨道上。沿轴向拖动会让页面跟随指针移动，松开后停在最近的页面；横向拖动会交给轮播周围的页面处理，并且拖动过程中不会点击页面上的控件。沿轴向的滚轮一档翻一页；触控板滚动会移动页面，停止时停在最近的一页。垂直轮播会把从第一页或最后一页开始的滚动传递给包含它的页面。跳转到相隔数页的页面时会滑过中间的页面，而在 WrapSelection="True" 时，轨道会从最后一页直接接到第一页，不会倒滑回去。轮播的 ItemsPanel 请交给主题处理。

拖动页面，或使用按钮、圆点和方向键。

拖动可交互

Live demo unavailable

<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" 配合四页内容与 small 按钮。

循环可交互

Live demo unavailable

<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>

一个垂直轮播：它的 PageTransition 是垂直方向的 uikit:SpringSlide。

垂直可交互

Live demo unavailable

<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>

Carousel

#用法

#示例

#上一页与下一页

#指针输入

用法

示例

上一页与下一页

指针输入