你的位置:首页 > ASP.net教程

[ASP.net教程][WPF]Slider控件常用方法


WPF的Slider控件继承自RangeBase类型,同继承自RangeBase的控件还有ProgressBar和ScrollBar,这类控件都是在一定数值范围内表示一个值的用途。

 

首先注意而RangeBase是基于浮点double类型的,不是基于整数int的,WPF中的许多度量单位都是基于浮点的。

 

对于Slider来说,RangeBase的Minimum(最小值)默认是0,Maximum(最大值)默认是10,Value(当前值)默认是0。

 

接下来就是RangeBase的剩余两个变量,SmallChange和LargeChange。SmallChange用来当Slider有焦点时,使用键盘的左右箭头来改变值的大小,而LargeChange则是点击Slider条的空白部分造成值的改变大小(和滚动条类似)。

 

SmallChange默认是0.1,LargeChange默认是1。

 

注意由于浮点数的表示涉及到精度的问题,某些值的表示无法准确而只能存储成近似值,所以一个空空的默认Slider会有如下问题:

 

首先XAML,一个默认Slider,下面一个TextBlock绑定Value属性来显示当前值:

<Slider Name="slider"/>

<TextBlock Text="{Binding ElementName=slider,Path=Value}"/>


 

运行程序,如果你从左往右按住右箭头(这样是SmallChange:0.1),结果会是:

 

而如果把值先设置成最右的10,然后按住左箭头从右往左滑动,结果会是:

 

问题看到了吧,Slider不仅把内部丑陋的冗长小数显示出来,而且还由于浮点数精度问题显示的值还不一样,上面两个图本来显示的都是8.3这个数。

 

由于Slider是基于RangeBase的,后者又是基于浮点数的,所以滑动值时作出的改变肯定是按浮点数的方式改变的,改变后的结果不一定是整数,为此我们可以吧Slider分成一段一段的,然后每一个段代表一个整数,让Slider仅在这些段中滑动,这个段就是Slider中所谓的”Tick”。具体每段的间隔可以用TickFrequency来设置,这个TickFrequency默认已经是1的,但是为了让Slider在Tick中移动,还需要设置IsSnapToTickEnabled属性。

 

这样的话:

<Slider Name="slider" IsSnapToTickEnabled="True"/>

<TextBlock Text="{Binding ElementName=slider,Path=Value}"/>


 

结果就是无论怎样移动Slider的位置,值都会是整数。

 

不过Slider的Tick默认是不显示的,TickPlacement默认是None,通过调节TickPlacement,我们可以让Slider的Tick显示出来:

<Slider Name="slider" IsSnapToTickEnabled="True" TickPlacement="Both"/>


 

结果:可以看到由于TickPlacement设置成了Both,Slider上下出现了两列小点代表Tick。

 

 

上面都是按照TickFrequency均匀分布的Tick,Slider还有一个Ticks属性(类型是DoubleCollection)可以完全自定义所有Tick,Ticks被定义后,TickFrequency就没有意义了,如下代码:

<Slider Name="slider" IsSnapToTickEnabled="True" TickPlacement="Both" Ticks="0.5 1.0 1.5 3.0"/>


 

仔细观察Slider,它的Tick会按照Ticks属性的定义变成这样:

 

有了上述知识,我们可以把WPF得Slider控件调整地再人性化一些,如下代码:

<StackPanel>

    <UniformGrid Columns="3" Rows="1" Margin="1">

        <TextBlock Text="{Binding ElementName=slider,Path=Minimum}"

                   TextAlignment="Left"/>

        <TextBlock Text="{Binding ElementName=slider,Path=Value}"

                   TextAlignment="Center"/>

        <TextBlock Text="{Binding ElementName=slider,Path=Maximum}"

                   TextAlignment="Right"/>

    </UniformGrid>

    <Slider Name="slider"

            IsSnapToTickEnabled="True"

            TickPlacement="TopLeft"

            />

</StackPanel>


 

运行结果:

 

 

最后WPF的Slider还支持把一部分范围的选项高亮化(也就是所谓的SelectionRange:选择范围),没有什么实际意义,仅仅是界面上的高亮,不过还是很有意思的。实现需要设置Slider的IsSelectionRangeEnabled为True,接着设置SelectionStart和SelectionEnd来标记具体范围。

 

如下代码:

<Slider Name="slider" IsSnapToTickEnabled="True" TickPlacement="Both"

       IsSelectionRangeEnabled="True"

       SelectionStart="2" SelectionEnd="5"/>

<TextBlock Text="{Binding ElementName=slider,Path=Value}"/>


 

运行结果:

 

 

另外Slider控件还有Direction属性可以调节显示方向,IsDirectionReversed属性反转方向,Delay属性控制内部RepeatButton的重复时段还有一些关于提示框的显示设置,这些属性相对使用上比较少见(或者较好理解)这里就不多讲了,读者可以根据需求浏览MSDN。