Scrollable

覆盖式滚动条，即 Avalonia 的 ScrollViewer。

示例可交互

Scrollable — Avalonia UIKit

Live demo unavailable

<!-- AllowAutoHide False keeps the scrollbar shown. -->
<Border BorderBrush="{DynamicResource UIKit.Border}" BorderThickness="1" CornerRadius="5.5" Width="320" Height="160" HorizontalAlignment="Left">
  <ScrollViewer AllowAutoHide="False">
    <StackPanel Spacing="8" Margin="12">
      <TextBlock Text="v0.9.0 · Stepper and Form" />
      <TextBlock Text="v0.8.0 · DescriptionList" />
      <TextBlock Text="v0.7.0 · Badge, Tag and Alert" />
      <TextBlock Text="v0.6.0 · Avatar and AvatarGroup" />
      <TextBlock Text="v0.5.0 · Carousel" />
      <TextBlock Text="v0.4.0 · Sheet and Sidebar" />
      <TextBlock Text="v0.3.0 · Table" />
      <TextBlock Text="v0.2.0 · Calendar" />
      <TextBlock Text="v0.1.0 · Initial release" />
    </StackPanel>
  </ScrollViewer>
</Border>

用法

主题覆盖 ScrollViewer、ScrollBar 与 Thumb，因此每个可滚动控件都会使用这些滚动条。它们以 16px 的条带覆盖在内容之上；滑块宽 6px、两端为圆角，在指针悬停或拖动时立即变为悬停颜色，并在 300ms 内加宽到 8px。ScrollViewer 上的两个属性用于在三种模式中选择一种。

模式	`AllowAutoHide`	`uikit:Scrollbars.ShowOnHover`	行为
始终显示	`False`	–	滚动条始终显示。
悬停（默认）	`True`	`True`	指针进入条带或内容滚动时显示，在 300ms 内淡入；指针离开或滚动停止后 2s 隐藏，在 500ms 内淡出并滑回其边缘。
滚动时	`True`	`False`	仅在滚动之后显示，并在指针于其上移动时保持显示。

当指针径直指向滑块时，隐藏的滚动条会一边淡入一边从其边缘滑入。

示例

三种模式并排展示。

模式可交互

Live demo unavailable

<StackPanel Orientation="Horizontal" Spacing="16" HorizontalAlignment="Left">
  <StackPanel Spacing="8">
    <TextBlock Text="Always" Foreground="{DynamicResource UIKit.MutedForeground}" />
    <Border BorderBrush="{DynamicResource UIKit.Border}" BorderThickness="1" CornerRadius="5.5" Width="180" Height="140">
      <ScrollViewer AllowAutoHide="False">
        <StackPanel Spacing="8" Margin="12">
          <TextBlock Text="Apple" />
          <TextBlock Text="Banana" />
          <TextBlock Text="Cherry" />
          <TextBlock Text="Grape" />
          <TextBlock Text="Lemon" />
          <TextBlock Text="Mango" />
          <TextBlock Text="Orange" />
          <TextBlock Text="Peach" />
        </StackPanel>
      </ScrollViewer>
    </Border>
  </StackPanel>
  <StackPanel Spacing="8">
    <TextBlock Text="Hover" Foreground="{DynamicResource UIKit.MutedForeground}" />
    <Border BorderBrush="{DynamicResource UIKit.Border}" BorderThickness="1" CornerRadius="5.5" Width="180" Height="140">
      <ScrollViewer AllowAutoHide="True">
        <StackPanel Spacing="8" Margin="12">
          <TextBlock Text="Apple" />
          <TextBlock Text="Banana" />
          <TextBlock Text="Cherry" />
          <TextBlock Text="Grape" />
          <TextBlock Text="Lemon" />
          <TextBlock Text="Mango" />
          <TextBlock Text="Orange" />
          <TextBlock Text="Peach" />
        </StackPanel>
      </ScrollViewer>
    </Border>
  </StackPanel>
  <StackPanel Spacing="8">
    <TextBlock Text="Scrolling" Foreground="{DynamicResource UIKit.MutedForeground}" />
    <Border BorderBrush="{DynamicResource UIKit.Border}" BorderThickness="1" CornerRadius="5.5" Width="180" Height="140">
      <ScrollViewer AllowAutoHide="True" uikit:Scrollbars.ShowOnHover="False">
        <StackPanel Spacing="8" Margin="12">
          <TextBlock Text="Apple" />
          <TextBlock Text="Banana" />
          <TextBlock Text="Cherry" />
          <TextBlock Text="Grape" />
          <TextBlock Text="Lemon" />
          <TextBlock Text="Mango" />
          <TextBlock Text="Orange" />
          <TextBlock Text="Peach" />
        </StackPanel>
      </ScrollViewer>
    </Border>
  </StackPanel>
</StackPanel>

一个水平滚动条，使用 HorizontalScrollBarVisibility="Auto"。

水平可交互

Live demo unavailable

<Border BorderBrush="{DynamicResource UIKit.Border}" BorderThickness="1" CornerRadius="5.5" Width="400" Height="120" HorizontalAlignment="Left">
  <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" AllowAutoHide="False">
    <StackPanel Orientation="Horizontal" Spacing="12" Margin="12">
      <Border Width="120" Height="64" CornerRadius="5.5" Background="{DynamicResource UIKit.Muted}" />
      <Border Width="120" Height="64" CornerRadius="5.5" Background="{DynamicResource UIKit.Muted}" />
      <Border Width="120" Height="64" CornerRadius="5.5" Background="{DynamicResource UIKit.Muted}" />
      <Border Width="120" Height="64" CornerRadius="5.5" Background="{DynamicResource UIKit.Muted}" />
      <Border Width="120" Height="64" CornerRadius="5.5" Background="{DynamicResource UIKit.Muted}" />
      <Border Width="120" Height="64" CornerRadius="5.5" Background="{DynamicResource UIKit.Muted}" />
    </StackPanel>
  </ScrollViewer>
</Border>

Scrollable

#用法

#示例

用法

示例