Response.Write("Hello LOLOTA")

Slider控制項是讓使用者可以根據其需求，透過滑桿去動態調整特定的值，例如像是ColorPicker，就可以透過Slider來實做。

我們透過實際操作來看看Slider如何運作：

 

1.

首先，新增一個Silverlight專案，並在Page.xaml中寫入下列程式碼：

<UserControl x:Class="SL_D20._2.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid x:Name="LayoutRoot" Background="White"> <Slider x:Name="uxSL_Width" Maximum="400" Minimum="0" ValueChanged="uxSL_Width_ValueChanged" Margin="16,133,0,132" Width="152" HorizontalAlignment="Left"/> <Slider x:Name="uxSL_Height" Maximum="300" Minimum="0" ValueChanged="uxSL_Height_ValueChanged" Margin="0,136,46,132" Width="154" HorizontalAlignment="Right" /> <Slider x:Name="uxSL_R" Maximum="255" Minimum="0" ValueChanged="uxSL_R_ValueChanged" Margin="16,0,0,77" Width="154" HorizontalAlignment="Left" VerticalAlignment="Bottom" Height="29" /> <Slider x:Name="uxSL_G" Maximum="255" Minimum="0" ValueChanged="uxSL_G_ValueChanged" Margin="16,0,0,48" Width="152" HorizontalAlignment="Left" VerticalAlignment="Bottom" Height="29" /> <Slider x:Name="uxSL_B" Maximum="255" Minimum="0" ValueChanged="uxSL_B_ValueChanged" Margin="16,0,0,15" VerticalAlignment="Bottom" Height="29" Width="152" HorizontalAlignment="Left" /> <Button x:Name="uxButton" Width="20" Height="20" Content="xx" HorizontalAlignment="Left" Margin="44,16,0,0" VerticalAlignment="Top" d:LayoutOverrides="Width, Height" RenderTransformOrigin="-1.2,0"/> <TextBlock Height="20" Margin="184,0,184,15" VerticalAlignment="Bottom" Text="B" TextWrapping="Wrap"/> <TextBlock Height="20" Margin="184,0,184,48" VerticalAlignment="Bottom" Text="G" TextWrapping="Wrap"/> <TextBlock Height="16" Margin="184,0,184,84" VerticalAlignment="Bottom" Text="R" TextWrapping="Wrap"/> </Grid> </UserControl>

 

我們透過五個Slider來對Button的屬性作控制，一個控制「寬」的值，一個控制「高」的值，另外三個則是控制Button的背景色。

 

2.

對應的事件程式碼：

private void uxSL_Width_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e) { //處理寬 uxButton.SetValue(Button.WidthProperty, uxSL_Width.Value); } private void uxSL_Height_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e) { //處理高 uxButton.SetValue(Button.HeightProperty, uxSL_Height.Value); } private void uxSL_R_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e) { //透過筆刷套用顏色 uxButton.SetValue(Button.BackgroundProperty,new SolidColorBrush(Color.FromArgb(255,(byte) uxSL_R.Value,(byte)uxSL_G.Value,(byte)uxSL_B.Value))); } private void uxSL_G_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e) { uxButton.SetValue(Button.BackgroundProperty, new SolidColorBrush(Color.FromArgb(255, (byte) uxSL_R.Value, (byte)uxSL_G.Value, (byte)uxSL_B.Value))); } private void uxSL_B_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e) { uxButton.SetValue(Button.BackgroundProperty, new SolidColorBrush(Color.FromArgb(255, (byte) uxSL_R.Value, (byte)uxSL_G.Value, (byte)uxSL_B.Value))); }

當Slider被使用者拖曳滑動時，會觸發ValueChanged事件，然後我們在事件中去改變Button的屬性值。

 

3.

按下F5執行的結果：

 

線上Demo

程式碼下載

 

 

Slider的使用上是不是很簡單呢？

 

 

修煉大會，我們下次見~

 

 

如果您有微軟技術開發的問題，可以到MSDN Forum發問。

如果您有微軟IT管理的問題，可以到TechNet Forum發問喔。