精通Silverlight——12.4.6 Slider拖动条控件

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");

        }

    }

现在运行该示例程序，会看到如图所示的结果，当拖动小圆点时，文本块中会显示当前的位置值。