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);
 }
 }
}