WP8滑动条（Slider）控件的使用

1. 

<Grid x:Name="LayoutRoot" Background="Transparent">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>



        <!--TitlePanel 包含应用程序的名称和页标题-->

        <StackPanel Grid.Row="0" Margin="12,17,0,28">

            <TextBlock Text="我的应用程序" Style="{StaticResource PhoneTextNormalStyle}"/>

            <TextBlock Text="Slider" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

        </StackPanel>



        <!--ContentPanel - 在此处放置其他内容-->

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            <TextBlock HorizontalAlignment="Left" Height="42" Margin="26,14,0,0" TextWrapping="Wrap" Text="红色" VerticalAlignment="Top" Width="105"/>

            <TextBlock HorizontalAlignment="Left" Height="42" Margin="193,14,0,0" TextWrapping="Wrap" Text="绿色" VerticalAlignment="Top" Width="105"/>

            <TextBlock HorizontalAlignment="Left" Height="42" Margin="341,14,0,0" TextWrapping="Wrap" Text="蓝色" VerticalAlignment="Top" Width="105"/>

            <Slider x:Name="RedSilder" HorizontalAlignment="Left" Height="82" Margin="10,72,0,0" VerticalAlignment="Top" Width="142" Maximum="255"/>

            <Slider x:Name="GreenSlider" HorizontalAlignment="Left" Height="82" Margin="152,72,0,0" VerticalAlignment="Top" Width="142" Maximum="255"/>

            <Slider x:Name="BlueSlider" HorizontalAlignment="Left" Height="82" Margin="294,72,0,0" VerticalAlignment="Top" Width="142" Maximum="255"/>

            <TextBlock x:Name="RedText" HorizontalAlignment="Left" Height="41" Margin="26,159,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="105"/>

            <TextBlock x:Name="GreenText" HorizontalAlignment="Left" Height="41" Margin="167,159,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="105"/>

            <TextBlock x:Name="BlueText" HorizontalAlignment="Left" Height="41" Margin="312,159,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="105"/>

            <Ellipse x:Name="ColorEll" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="160" Margin="90,274,0,0" Stroke="Black" VerticalAlignment="Top" Width="257"/>



        </Grid>

    </Grid>

View Code

 

2.

namespace PhoneApp1

{

    public partial class Slider : PhoneApplicationPage

    {

        public Slider()

        {

            InitializeComponent();

            RedSilder.Value = 100;

            GreenSlider.Value = 120;

            BlueSlider.Value = 109;

            RedSilder.ValueChanged += RedSilder_ValueChanged;

            GreenSlider.ValueChanged += GreenSlider_ValueChanged;

            BlueSlider.ValueChanged += BlueSlider_ValueChanged;

            BindColor();

        }



        void BlueSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)

        {

            BindColor();

        }



        void GreenSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)

        {

            BindColor();

        }



        void RedSilder_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)

        {

            BindColor();

        }



        private void BindColor()

        {

            Color c = Color.FromArgb(255, (byte)RedSilder.Value, (byte)GreenSlider.Value, (byte)BlueSlider.Value);

            ColorEll.Fill = new SolidColorBrush(c);

            RedText.Text = c.R.ToString("X2");

            GreenText.Text =c.G.ToString("X2");

            BlueText.Text = c.B.ToString("X2");

        }

       

    }

}

View Code