Windows Phone 7 Slider控件的运用调色板

通过对红绿蓝三个Slider控件的赋值来综合起来三种颜色调试出来大面板的颜色。

xaml

 <!--LayoutRoot contains the root grid where all other page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="COLOR SCROLL" Style="{StaticResource PhoneTextNormalStyle}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            
            <Rectangle Name="rect"
                       Grid.Row="0"
                       Grid.Column="0" />
            
            <Grid Name="controlGrid"
                  Grid.Row="1"
                  Grid.Column="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                
                <!-- Red column -->
                <TextBlock Grid.Column="0"
                           Grid.Row="0"
                           Text="Red"
                           Foreground="Red"
                           Style="{StaticResource textStyle}" />
                
                <Slider Name="redSlider"
                        Grid.Column="0"
                        Grid.Row="1"
                        Foreground="Red"
                        Style="{StaticResource sliderStyle}"
                        ValueChanged="OnSliderValueChanged" />
                
                <TextBlock Name="redText"
                           Grid.Column="0" 
                           Grid.Row="2"
                           Text="0"
                           Foreground="Red"
                           Style="{StaticResource textStyle}" />
                
                <!-- Green column -->
                <TextBlock Grid.Column="1"
                           Grid.Row="0"
                           Text="Green"
                           Foreground="Green"
                           Style="{StaticResource textStyle}" />

                <Slider Name="greenSlider"
                        Grid.Column="1"
                        Grid.Row="1"
                        Foreground="Green"
                        Style="{StaticResource sliderStyle}"
                        ValueChanged="OnSliderValueChanged" />

                <TextBlock Name="greenText"
                           Grid.Column="1" 
                           Grid.Row="2"
                           Text="0"
                           Foreground="Green"
                           Style="{StaticResource textStyle}" />

                <!-- Blue column -->
                <TextBlock Grid.Column="2"
                           Grid.Row="0"
                           Text="Blue"
                           Foreground="Blue"
                           Style="{StaticResource textStyle}" />

                <Slider Name="blueSlider"
                        Grid.Column="2"
                        Grid.Row="1"
                        Foreground="Blue"
                        Style="{StaticResource sliderStyle}"
                        ValueChanged="OnSliderValueChanged" />

                <TextBlock Name="blueText"
                           Grid.Column="2" 
                           Grid.Row="2"
                           Text="0"
                           Foreground="Blue"
                           Style="{StaticResource textStyle}" />
            </Grid>
        </Grid>
    </Grid>

cs

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using Microsoft.Phone.Controls;

namespace ColorScroll
{
    public partial class MainPage : PhoneApplicationPage
    {
        public MainPage()
        {
            InitializeComponent();

            //三个slider控件的初始值
            redSlider.Value = 128;
            greenSlider.Value = 128;
            blueSlider.Value = 128;
        }

        //slider控件变化时触发的事件
        void OnSliderValueChanged(object sender, RoutedPropertyChangedEventArgs<double> args)
        {
            Color clr = Color.FromArgb(255, (byte)redSlider.Value,
                                            (byte)greenSlider.Value,
                                            (byte)blueSlider.Value);//获取调剂的颜色

            rect.Fill = new SolidColorBrush(clr);//用该颜色的笔刷填充大面板

            redText.Text = clr.R.ToString("X2");
            greenText.Text = clr.G.ToString("X2");
            blueText.Text = clr.B.ToString("X2");
        }

        //手机方向变化触发的事件，从新布局
        protected override void OnOrientationChanged(OrientationChangedEventArgs args)
        {
            ContentPanel.RowDefinitions.Clear();
            ContentPanel.ColumnDefinitions.Clear();

            // Landscape
            if ((args.Orientation & PageOrientation.Landscape) != 0)
            {
                ColumnDefinition coldef = new ColumnDefinition();
                coldef.Width = new GridLength(1, GridUnitType.Star);
                ContentPanel.ColumnDefinitions.Add(coldef);

                coldef = new ColumnDefinition();
                coldef.Width = new GridLength(1, GridUnitType.Star);
                ContentPanel.ColumnDefinitions.Add(coldef);

                Grid.SetRow(controlGrid, 0);
                Grid.SetColumn(controlGrid, 1);
            }
            // Portrait
            else
            {
                RowDefinition rowdef = new RowDefinition();
                rowdef.Height = new GridLength(1, GridUnitType.Star);
                ContentPanel.RowDefinitions.Add(rowdef);

                rowdef = new RowDefinition();
                rowdef.Height = new GridLength(1, GridUnitType.Star);
                ContentPanel.RowDefinitions.Add(rowdef);

                Grid.SetRow(controlGrid, 1);
                Grid.SetColumn(controlGrid, 0);
            }
            base.OnOrientationChanged(args);
        }
    }
}