在探索现代Web开发技术时，经常会遇到需要创建交互式控件的情况。例如，可能会想要制作一些简单的小游戏或者应用程序，这时候Silverlight和HTML5技术就显得尤为重要。本文将介绍如何使用这些技术创建自定义的滑块控件，以及一些基本的设计和编码步骤。
Silverlight是一种由微软开发的技术，它允许开发者创建丰富的交互式应用程序。尽管Silverlight曾经非常流行，但由于其受众有限，许多开发者转向了HTML5。尽管如此，Silverlight的一些基本概念和技术仍然值得学习。
HTML5是一种更为现代和广泛支持的技术，它允许开发者创建跨平台的交互式Web应用程序。在决定转向HTML5后，学习了如何使用HTML5进行游戏开发。虽然在Silverlight上花费了几周的时间，但这些经验并没有白费，因为许多技术可以应用到其他语言中。
设计一个简单的滑块控件是一个很好的开始。在本文中，将创建一个简单的滑块控件，它允许用户通过拖动滑块来选择一个整数值。将使用XAML来定义控件的布局，并使用C#来处理事件和逻辑。
在XAML中，定义了滑块控件的布局。创建了三个滑块，每个滑块都有一个与之关联的文本块，用于显示当前的值。还定义了一些自定义属性，如滑块的颜色和效果。
<StackPanel Orientation="Horizontal">
<StackPanel Margin="100,10,10,20" Width="150">
<local:DiscreteSlider Grid.Column="0" x:Name="discreteSlider1" PropertyChanged="discreteSlider1_ValueChanged">
</local:DiscreteSlider>
<TextBlock Margin="0,20,0,0" Name="slider1Text" Grid.Column="0" Grid.Row="1">
New Value:
</TextBlock>
</StackPanel>
<StackPanel Margin="100,10,10,20" Width="150">
<local:DiscreteSlider Grid.Column="1" x:Name="discreteSlider2" SliderBrush="#FFFF00FF" ThumbBrush="#FFFFFF00" ThumbEffect="{StaticResource thumbEffect}" PropertyChanged="discreteSlider2_ValueChanged">
</local:DiscreteSlider>
<TextBlock Margin="0,20,0,0" Name="slider2Text" Grid.Column="1" Grid.Row="1">
New Value:
</TextBlock>
</StackPanel>
<StackPanel Margin="100,10,10,20" Width="150">
<local:DiscreteSlider Grid.Column="2" x:Name="discreteSlider3" SliderBrush="{StaticResource greenToRedBrush}" PropertyChanged="discreteSlider3_ValueChanged">
</local:DiscreteSlider>
<TextBlock Margin="0,20,0,0" Name="slider3Text" Grid.Column="2" Grid.Row="1">
New Value:
</TextBlock>
</StackPanel>
</StackPanel>
在C#中，定义了事件处理程序来更新滑块旁边的文本块。当用户改变滑块的选择时，会触发PropertyChanged事件，可以在事件处理程序中获取当前的选择值。
private void discreteSlider1_ValueChanged(object sender, PropertyChangedEventArgs e)
{
slider1Text.Text = "New Value: " + discreteSlider1.Value;
}
滑块控件提供了一些自定义选项，包括滑块的颜色、滑块的填充颜色和滑块的效果。这些自定义选项允许根据需要调整滑块的外观。
滑块控件由几个基本组件组成，包括一个用于背景条的矩形、一个用于滑块的椭圆形、一个用于显示当前值的文本块和一个用于绘制值周围花哨轮廓的路径。
对于初学者来说，从头开始创建这样的控件是一个很好的练习。以下是创建滑块控件的逐步过程。
首先，在Visual Studio中创建一个新的Silverlight-5应用程序，并在Blend中打开它。然后，添加一个新的用户控件，并设置根面板的类型为Canvas，以便进行绝对定位。
在设计完成后，将注意力转向编码。需要完成的任务包括移动滑块、记录其位置以及确定选定的位置。不会在这里重现整个代码，因为它可以在下载中找到，而且很简单。