一天一天学 windows phone 控件之 Slider（十七）

现在的位置: 首页 > 综合 > 正文

RSS

一天一天学 windows phone 控件之 Slider（十七）

2013年01月04日 ⁄ 综合 ⁄ 共 1892字 ⁄ 字号小中大 ⁄ 评论关闭

Slider 是我们最常见的控件之一，看到最多的一般在两个地方，一个是声音的大小，一个是色域。

控制声音大小的网上很多，所以我们挑个控制颜色的，很多画图工具都有。明暗度什么的。

windows phone的颜色一般采用 ARGB颜色 A 表示透明度，rgb 分别是 red ，green，blue 。种颜色的首先字母。值从0,255.

我们首先画个矩形，然后分别用4个slider控件来控制矩形的颜色。

页面的代码如下：

        <Grid x:Name="ContentPanel"
              Grid.Row="0"
              Margin="12,0,12,0">
            <StackPanel>
                <Rectangle Name="recBoard"
                           Width="480"
                           Height="300"
                           Fill="#fff"
                           Opacity="{Binding Path=Value,
                                             ElementName=sliderTran}" />
                <TextBlock>R</TextBlock>
                <Slider Name="sliderRed"
                        Maximum="255"
                        Minimum="0"
                        ValueChanged="sliderRed_ValueChanged" />
                <TextBlock>G</TextBlock>
                <Slider Name="sliderGreen"
                        Maximum="255"
                        Minimum="0"
                        ValueChanged="sliderGreen_ValueChanged" />
                <TextBlock>B</TextBlock>
                <Slider Name="sliderBlue"
                        Maximum="255"
                        Minimum="0"
                        ValueChanged="sliderBlue_ValueChanged" />
                <TextBlock>Transparency</TextBlock>
                <Slider Name="sliderTran"
                        Maximum="1"
                        Minimum="0"
                        Value="1" />
            </StackPanel>
        </Grid>

效果如图

然后我们切换到代码页面，构建Slider 控件移动的事件触发更改颜色

代码如下：

//初始化 
        byte red = 0;
        byte green = 0;
        byte blue = 0;
        private void sliderRed_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            red = Convert.ToByte(e.NewValue);
            Color color = Color.FromArgb(255, red, green, blue);
            SolidColorBrush scb = new SolidColorBrush(color);
            recBoard.Fill = scb;
        }

        private void sliderGreen_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            green = Convert.ToByte(e.NewValue);
            Color color = Color.FromArgb(100, red, green, blue);
            SolidColorBrush scb = new SolidColorBrush(color);
            recBoard.Fill = scb;
        }

        private void sliderBlue_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            blue = Convert.ToByte(e.NewValue);
            Color color = Color.FromArgb(100, red, green, blue);
            SolidColorBrush scb = new SolidColorBrush(color);
            recBoard.Fill = scb;
        }

OK 非常简单吧。三个事件分别控制红绿蓝。透明度，我用了另外一种写法直接绑定到属性Opacity来控制。

启动，模拟器，自己拖动下不同颜色来组成各种颜色。效果如图：