Slider

胶囊形轨道填充至当前值，悬停与拖拽时拇指周围出现圆环。

示例可交互

Slider — Avalonia UIKit

Live demo unavailable

<Slider Value="40" Minimum="0" Maximum="100" Width="240" Margin="12,8" HorizontalAlignment="Left" />

用法

主题涵盖 Slider 及其 Track、Thumb 与 TickBar：在 24px 高的区域内，6px 的胶囊形轨道填充到当前值；16px 的拇指居中于值上，并向两端各溢出半个宽度，因此请在控件周围留出边距。悬停或按下拇指或滑块时，拇指周围会弹出一个 3px 的圆环，松开后淡出。

Orientation="Vertical" 使其默认宽 24px、高 120px，并从底部开始填充；Classes="reverse" 则从拇指反向填充到末端。禁用时不绘制拇指，填充保持其长度。只有一种尺寸。刻度（TickPlacement、TickFrequency）是 Avalonia 自有的，在区域边缘以 muted 的 1px 线条绘制。

需要两个拇指或对数刻度时，请使用 uikit:RangeSlider。

示例

分别处于最小值、中间某个值与最大值的三个垂直滑块。

垂直可交互

Live demo unavailable

<StackPanel Orientation="Horizontal" Spacing="24" HorizontalAlignment="Left">
  <Slider Orientation="Vertical" Value="0" Height="120" Margin="8,12" />
  <Slider Orientation="Vertical" Value="40" Height="120" Margin="8,12" />
  <Slider Orientation="Vertical" Value="100" Height="120" Margin="8,12" />
</StackPanel>

同一值下的普通滑块与 reverse 滑块。

反向可交互

Live demo unavailable

<StackPanel Spacing="8" Width="264" HorizontalAlignment="Left">
  <Slider Value="40" Margin="12,8" />
  <Slider Classes="reverse" Value="40" Margin="12,8" />
</StackPanel>

禁用的滑块保留填充，但不绘制拇指。

禁用可交互

Live demo unavailable

<StackPanel Spacing="8" Width="264" HorizontalAlignment="Left">
  <Slider Value="0" Margin="12,8" IsEnabled="False" />
  <Slider Value="40" Margin="12,8" IsEnabled="False" />
  <Slider Value="100" Margin="12,8" IsEnabled="False" />
</StackPanel>

Slider

#用法

#示例

用法

示例