RangeSlider
带两个拇指或对数刻度的滑块,即 uikit:RangeSlider。
示例可交互
Live demo unavailable
<StackPanel Orientation="Horizontal" Spacing="24" HorizontalAlignment="Left">
<uikit:RangeSlider StartValue="12" EndValue="45" Width="240" Margin="12,8" VerticalAlignment="Center" />
<uikit:RangeSlider StartValue="20" EndValue="60" Orientation="Vertical" Margin="12,8" />
</StackPanel>用法
uikit:RangeSlider 具有 Slider 的外观,并带两个拇指:StartValue 与 EndValue,两者之间的区间被填充,范围从 Minimum 到 Maximum(默认 0 到 100),步长为 Step(默认 1)。在轨道上按下会把较近的拇指移到该处;拇指直接拖拽,并在另一个拇指处停下。每个拇指都有自己的圆环。用户移动数值时会引发 Changed,指针松开后引发 Released。Orientation="Vertical" 的用法与 Slider 相同。
Scale="Logarithmic" 按比例分布数值:在 1 到 1000 之间,三分之一处是 10,三分之二处是 100。它要求 Minimum 大于 0。IsRange="False" 则在 EndValue 处显示单个拇指,并从头(或使用 reverse 时到末端)填充,适用于对数刻度上的单值场景。
演示展示了水平与垂直的范围滑块。
示例
对数刻度上从 0.25x 到 4x 的单值滑块。
Live demo unavailable
<StackPanel Spacing="8" Width="264" HorizontalAlignment="Left">
<uikit:RangeSlider Name="Zoom" IsRange="False" Minimum="0.25" Maximum="4" Step="0.05" EndValue="1"
Scale="Logarithmic" Margin="12,8" />
<TextBlock Margin="12,0" Text="{Binding #Zoom.EndValue, StringFormat='Zoom: {0:0.00}x'}" />
</StackPanel>