Silder控件的外观与GridThumb控件类似。实际上,Silder就是由一个可拖动的Thumb控件和一个矩形条组成的。
Silder控件的声明方式如下所示。
<uicontrol:Slider x:Name="hSlider" Canvas.Top="60" Canvas.Left="60" />
运行效果如图所示。
尽管程序可以正常运行,但是Thumb是不可以拖动的,还需要设置Silder的Range属性指定拖动范围。
默认情况下,Silder控件水平显示,可以通过设置Silder的几个属性来设置垂直显示。由于缺少XAML中的类型转换支持,Silder控件有几个属性是不能直接在XAML中设置的,要完成设置,须要要在代码后置文件中设置。
下面的示例将分别创建一个垂直和水平的Silder,XAML代码如下所示。
<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="Page_Loaded"
x:Class="SilderDemo.Page;assembly=ClientBin/SilderDemo.dll" xmlns:uicontrol='clr-namespace:Silverlight.Samples.Controls;assembly=ClientBin/Silverlight.Samples.Controls.dll'
Width="640"
Height="480"
Background="White"
>
<!--定义一个垂直和水平的Silder控件,为了指定控件的方向和范围,须使用代码后置文件-->
<uicontrol:Slider x:Name="Hsilder" Canvas.Top="60" Canvas.Left="50" />
<uicontrol:Slider x:Name="Vsilder" Canvas.Top="100" Canvas.Left="30" />
</Canvas>
接下来进入代码后置文件,在Page_load事件代码中初始化两个Silder控件的范围和方向,代码如下所示。
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
//为了在代码中设置Silder的属性,必须引用此命名空间
using Silverlight.Samples.Controls;
namespace SilderDemo
{
public partial class Page : Canvas
{
public void Page_Loaded(object o, EventArgs e)
{
// Required to initialize variables
InitializeComponent();
//指定Silder控件的拖动范围
Hsilder.Range = new ValueRange(0, 50);
Vsilder.Range = new ValueRange(50, 150);
//使用Orientation属性指定Silder的方向
Vsilder.Orientation = Orientation.Vertical;
}
}
}
代码通过使用Silder控件的Range属性来指定移动的范围 ,Range属性是一个ValueRange类型的属性,分别指定拖动的最小值和最大值。Orientation是一个枚举类型的属性,该枚举具有两个值:
q Horizontal枚举值:表示按水平方向。
q Vertical枚举值:表示按垂直方向。
单纯的拖动可能并不具有太大的意义,Silder还提供了一个ValueChanged的事件,当Silder的位置值改变时,触发该事件。Silder还有一个名为Value的属性,通过读取该属性的值,可以获知目前的位置。
现在为上个示例添加两个文本块,XAML代码如下所示。
<TextBlock Canvas.Left="100" Canvas.Top="80" x:Name="Msgv"></TextBlock>
<TextBlock Canvas.Left="50" Canvas.Top="120" x:Name="MsgH"></TextBlock>
然后为两个Silder控件添加ValueChanged事件,如下所示。
public partial class Page : Canvas
{
public void Page_Loaded(object o, EventArgs e)
{
// Required to initialize variables
InitializeComponent();
//指定Silder控件的拖动范围
Hsilder.Range = new ValueRange(0, 50);
Vsilder.Range = new ValueRange(50, 150);
//使用Orientation属性指定Silder的方向
Vsilder.Orientation = Orientation.Vertical;
Hsilder.ValueChanged += new EventHandler(Hsilder_ValueChanged);
Vsilder.ValueChanged += new EventHandler(Vsilder_ValueChanged);
}
void Vsilder_ValueChanged(object sender, EventArgs e)
{
//在文本块中显示垂直位置。
MsgH.Text = "Vertical Position:" +Vsilder.Value.ToString("0");
}
void Hsilder_ValueChanged(object sender, EventArgs e)
{
//在文本块中显示水平位置。
Msgv.Text = "Horizontal Position:"+Hsilder.Value.ToString("0");
}
}
现在运行该示例程序,会看到如图所示的结果,当拖动小圆点时,文本块中会显示当前的位置值。