（WPF学习记录）第六章 Dock与Grid

来源：互联网发布：python urllib2 open 编辑：程序博客网时间：2024/05/18 03:43

传统的程序具有相当标准的Layout，程序的菜单几乎是放在主窗口客户区的顶端，并延伸到整个窗口的宽度。如果程序有工具条，也是被dock（“停泊”）于客户区顶端，但是其中只有一个控件可以被停靠在最边缘。

WPF包含一个DockPanel类，可以满足不同的dock需求。

第01个小程序：DockPanel上的按钮（DockAroundTheBlock.cs）

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
namespace Chapter06
{
    class DockAroundTheBlock : Window
    {
        [STAThread]
        public static void Main()
        {
            Application app = new Application();
            app.Run(new DockAroundTheBlock());
        }
        public DockAroundTheBlock()
        {
            Title = "Dock Around the Block";
            //Width = 384; 
            //Height = 288; 
            //SizeToContent = SizeToContent.WidthAndHeight; 
            DockPanel dock = new DockPanel();
            //dock.LastChildFill = false;         //默认为true,即最后一个孩子不被Dock. 
            Content = dock;
            for (int i = 0; i < 17; i++)
            {
                Button btn = new Button();
                btn.Content = "按钮" + (i + 1);
                //btn.HorizontalAlignment = HorizontalAlignment.Center; 
                if (i % 4 == 0)
                    btn.Background = Brushes.Silver;
                if (i % 4 == 1)
                    btn.Background = Brushes.SeaGreen;
                if (i % 4 == 2)
                    btn.Background = Brushes.Salmon;
                if (i % 4 == 3)
                    btn.Background = Brushes.RosyBrown;
                if (i == 16)
                    btn.Background = Brushes.Pink;
                dock.Children.Add(btn);
                btn.SetValue(DockPanel.DockProperty, (Dock)(i % 4));
            }
        }
    }
}

此程序建立一个DockPanel，并创建17个按钮当作它的孩子。

btn.SetValue(DockPanel.DockProperty, (Dock)(i % 4))等同于btn.SetDock(ctrl, (Dock)(i % 4))，决定让ctrl控件dock在DockPanel的哪一边。(Dock)(i % 4)为每个按钮循环地指定Dock枚举值，依次为：Dock.Left、Dock.Top、Dock.Right和Dock.Bottom（它们的枚举值分别为0、1、2和3）。

最后加入的控件（按钮17）并没有被dock，但是会占据剩余的内部空间，这是因为DockPanel的LastChildFill属性默认为true所导致的。虽然程序有为最后一个按钮调用SetValue，但是这个值会被忽略。当加入“dock.LastChildFill = false;”这条语句时，就可以看到最后一个按钮也会继续被dock，因而留下一些空间。

当使用DockPanel时，远近要从外向内：第一个孩子具有紧贴着父亲边缘的优先权，后续的孩子会越来越向里。

DockPanel的孩子通常会扩张到版面全部的宽度（或高度），这是因为孩子的HorizontalAlignment和VerticalAlignment属性默认值都是Stretch（延展）。

运行结果：

第02个小程序：DockPanel的使用（MeetTheDockers.cs）

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Input;
using System.Windows.Media;
namespace Chapter06
{
    public class MeetTheDockers : Window
    {
        [STAThread]
        public static void Main()
        {
            Application app = new Application();
            app.Run(new MeetTheDockers());
        }
        public MeetTheDockers()
        {
            Title = "Meet the Dockers";
            Height = 288;
            Width = 384;
            WindowStartupLocation = WindowStartupLocation.CenterScreen;
            DockPanel dock = new DockPanel();
            Content = dock;
            // 创建菜单 
            Menu menu = new Menu();
            MenuItem item = new MenuItem();
            item.Header = "菜单";
            menu.Items.Add(item);
            // 将菜单dock在面板顶端 
            DockPanel.SetDock(menu, Dock.Top);
            dock.Children.Add(menu);
            // 创建工具栏 
            ToolBar tool = new ToolBar();
            tool.Header = "工具栏";
            // 将工具栏dock在面板顶端（菜单下面） 
            DockPanel.SetDock(tool, Dock.Top);
            dock.Children.Add(tool);
            // 创建状态栏 
            StatusBar status = new StatusBar();
            StatusBarItem statitem = new StatusBarItem();
            statitem.Content = "状态栏";
            status.Items.Add(statitem);
            // 将状态栏dock在面板底端 
            DockPanel.SetDock(status, Dock.Bottom);
            dock.Children.Add(status);
            // 创建list box. 
            ListBox lstbox = new ListBox();
            lstbox.Items.Add("List Box 项");
            // 将list box对象dock在面板左边 
            DockPanel.SetDock(lstbox, Dock.Left);
            dock.Children.Add(lstbox);
            // 创建text box. 
            TextBox txtbox = new TextBox();
            txtbox.AcceptsReturn = true;
            // 将text box加入面板，并让它具有输入焦点 
            dock.Children.Add(txtbox);
            txtbox.Focus();
        }
    }
}

这个程序创建了菜单、工具栏、状态栏、ListBox和TextBox控件，但没为它们加上实际的功能，只为演示使用DockPanel。

运行结果：

第03个小程序：计算你的年龄（CalculateYourLife.cs）

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
namespace Chapter06
{
    class CalculateYourLife : Window
    {
        TextBox txtboxBegin, txtboxEnd;
        Label lblLifeYears;
        [STAThread]
        public static void Main()
        {
            Application app = new Application();
            app.Run(new CalculateYourLife());
        }
        public CalculateYourLife()
        {
            Title = "计算你的年龄";
            Height = 140;
            Width = 240;
            WindowStartupLocation = WindowStartupLocation.CenterScreen;
            //SizeToContent = SizeToContent.WidthAndHeight; 
            ResizeMode = ResizeMode.CanMinimize;
            // 创建grid面板 
            Grid grid = new Grid();
            //grid.ShowGridLines = true;       //网格线可见。默认为false，不可见 
            Content = grid;
            // 定义行和列 
            for (int i = 0; i < 3; i++)       //三行 
            {
                RowDefinition rowdef = new RowDefinition();
                rowdef.Height = GridLength.Auto;
                grid.RowDefinitions.Add(rowdef);
            }
            for (int i = 0; i < 2; i++)       //两列 
            {
                ColumnDefinition coldef = new ColumnDefinition();
                coldef.Width = GridLength.Auto;
                grid.ColumnDefinitions.Add(coldef);
            }
            // Label：出生日期 
            Label lbl = new Label();
            lbl.Content = "出生日期: ";
            grid.Children.Add(lbl);
            Grid.SetRow(lbl, 0);
            Grid.SetColumn(lbl, 0);
            // TextBox：出生日期 
            txtboxBegin = new TextBox();
            txtboxBegin.Width = 120;
            txtboxBegin.Text = new DateTime(1111, 1, 1).ToShortDateString();
            txtboxBegin.TextChanged += TextBoxOnTextChanged;
            grid.Children.Add(txtboxBegin);
            Grid.SetRow(txtboxBegin, 0);
            Grid.SetColumn(txtboxBegin, 1);
            // Label：当前日期 
            lbl = new Label();
            lbl.Content = "当前日期: ";
            grid.Children.Add(lbl);
            Grid.SetRow(lbl, 1);
            Grid.SetColumn(lbl, 0);
            // TextBox：：当前日期 
            txtboxEnd = new TextBox();
            txtboxEnd.Width = 120;
            txtboxEnd.Text = DateTime.Now.ToShortDateString();
            txtboxEnd.TextChanged += TextBoxOnTextChanged;
            grid.Children.Add(txtboxEnd);
            Grid.SetRow(txtboxEnd, 1);
            Grid.SetColumn(txtboxEnd, 1);
            // Label：我的年龄 
            lbl = new Label();
            lbl.Content = "我的年龄: ";
            grid.Children.Add(lbl);
            Grid.SetRow(lbl, 2);
            Grid.SetColumn(lbl, 0);
            // Label：计算结果 
            lblLifeYears = new Label();
            grid.Children.Add(lblLifeYears);
            Grid.SetRow(lblLifeYears, 2);
            Grid.SetColumn(lblLifeYears, 1);
            // 设置边界 
            Thickness thick = new Thickness(5); 
            grid.Margin = thick;
            foreach (Control ctrl in grid.Children)
                ctrl.Margin = thick;
            // 设定焦点 
            txtboxBegin.Focus();
            // 计算 
            Calculating();
        }
        // TextBox中的值改变后，计算年龄 
        void TextBoxOnTextChanged(object sender, TextChangedEventArgs args)
        {
            Calculating();   
        }
        // 计算年龄 
        private void Calculating()
        {
            DateTime dtBeg, dtEnd;
            if (DateTime.TryParse(txtboxBegin.Text, out dtBeg) &
                DateTime.TryParse(txtboxEnd.Text, out dtEnd))
            {
                int iYears = dtEnd.Year - dtBeg.Year;
                int iMonths = dtEnd.Month - dtBeg.Month;
                int iDays = dtEnd.Day - dtBeg.Day;
                if (iDays < 0)
                {
                    iDays += DateTime.DaysInMonth(dtEnd.Year,
                                            1 + (dtEnd.Month + 10) % 12);
                    iMonths -= 1;
                }
                if (iMonths < 0)
                {
                    iMonths += 12;
                    iYears -= 1;
                }
                //lblLifeYears.Content = 
                //    String.Format("{0} year{1}, {2} month{3}, {4} day{5}", 
                //                  iYears, iYears == 1 ? "" : "s", 
                //                  iMonths, iMonths == 1 ? "" : "s", 
                //                  iDays, iDays == 1 ? "" : "s"); 
                lblLifeYears.Content =
                    String.Format("{0}岁{1}个月零{2}天",
                                  iYears,
                                  iMonths,
                                  iDays);
            }
            else
            {
                lblLifeYears.Content = "";
            }  
        }
    }
}

Grid面板用行和列的格子状来显示其孩子，来实现行与列的控件布局。

使用GridLength类以指定行的高度和列的宽度。此类有两个构造函数：

new GridLength(100)，这个值是独立单位，这样的构造函数等同于new GridLength(100, GridUnitType.Pixel)。也可以用GridUnitType.Star来当作第二个参数，如new GridLength(50, GridUnitType.Star)，表示将剩余空间的50%分配给该行（列）。当用GridUnitType.Auto作为第二个参数时，如new GridLength(50, GridUnitType.Auto)，这个数字会被忽略，等同静态的属性：GridLength.Auto。

Grid的静态方法SetRow和SetColumn方法，指定一个row和column索引值，以表示控件要摆放的位置。如：Grid.SetRow(lbl, 2)，Grid.SetColumn(lbl, 0)。

程序运行结果如下：

第04个小程序：Grid布局（EnterTheGrid.cs）

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
namespace Chapter06
{
    public class EnterTheGrid : Window
    {
        [STAThread]
        public static void Main()
        {
            Application app = new Application();
            app.Run(new EnterTheGrid());
        }
        public EnterTheGrid()
        {
            Title = "又见Grid";
            MinWidth = 300;       //最小宽度 
            WindowStartupLocation = WindowStartupLocation.CenterScreen;
            SizeToContent = SizeToContent.WidthAndHeight;
            // 创建StackPanel对象 
            StackPanel stack = new StackPanel();
            Content = stack;
            // 创建Grid并将其加入StackPanel 
            Grid grid1 = new Grid();
            grid1.Margin = new Thickness(5);
            stack.Children.Add(grid1);
            // 定义行 
            for (int i = 0; i < 5; i++)
            {
                RowDefinition rowdef = new RowDefinition();
                rowdef.Height = GridLength.Auto;
                grid1.RowDefinitions.Add(rowdef);
            }
            // 定义列 
            ColumnDefinition coldef = new ColumnDefinition();
            coldef.Width = GridLength.Auto;
            grid1.ColumnDefinitions.Add(coldef);
            // 第2列 
            coldef = new ColumnDefinition();
            coldef.Width = new GridLength(100, GridUnitType.Star);  //占据剩余空间 
            grid1.ColumnDefinitions.Add(coldef);
            // 创建labels和text boxes. 
            string[] strLabels = { "姓：", "名：",
                                   "身份证号码：",
                                   "信用卡号码：",
                                   "其它：" };
            for(int i = 0; i < strLabels.Length; i++)
            {
                // 创建Label 
                Label lbl = new Label();
                lbl.Content = strLabels[i];
                lbl.VerticalContentAlignment = VerticalAlignment.Center;
                grid1.Children.Add(lbl);
                Grid.SetRow(lbl, i);       //Label在第i+1行 
                Grid.SetColumn(lbl, 0);    //Label在第1列 
                // 创建TextBox 
                TextBox txtbox = new TextBox();
                txtbox.Margin = new Thickness(5);
                grid1.Children.Add(txtbox);
                Grid.SetRow(txtbox, i);    //TextBox在第i+1行 
                Grid.SetColumn(txtbox, 1); //TextBox在第2列 
            }
            // 创建第二个Grid并将其加入StackPanel 
            Grid grid2 = new Grid();
            grid2.Margin = new Thickness(10);
            stack.Children.Add(grid2);
            // 对于单一行，不需要row定义 
            // 默认列定义 “star” 
            grid2.ColumnDefinitions.Add(new ColumnDefinition());
            grid2.ColumnDefinitions.Add(new ColumnDefinition());
            // 创建按钮 
            Button btn = new Button();
            btn.Content = "提交";
            btn.HorizontalAlignment = HorizontalAlignment.Center;
            btn.IsDefault = true;
            //btn.Click += delegate { Close(); }; 
            btn.Click += ButtonSubClick;
            grid2.Children.Add(btn);    // 行号和列号都为0 
            btn = new Button();
            btn.Content = "取消";
            btn.HorizontalAlignment = HorizontalAlignment.Center;
            btn.IsCancel = true;
            //btn.Click += delegate { Close(); }; 
            btn.Click += ButtonCanClick;
            grid2.Children.Add(btn);
            Grid.SetColumn(btn, 1);     //行0，列1 
            // 为第一个TextBox设置焦点 
            (stack.Children[0] as Panel).Children[1].Focus();
        }
        void ButtonSubClick(object sender, RoutedEventArgs args)
        {
            MessageBox.Show("提交成功！","个人信息");
            this.Close();
        }
        void ButtonCanClick(object sender, RoutedEventArgs args)
        {
            MessageBox.Show("重新填写！", "个人信息");
        } 
    }
}

程序依赖元素默认的行为来填满他们的父亲。StackPanel占用窗口整个宽度，两个Grid面板也是。在最顶端的Grid面板中，第一列具有GridLength.Auto的宽度；第二列（有TextBox的列）的宽度为GridUnitType.Star式，即会占用所有剩余空间。所以当窗口变宽时，TextBox也会扩展宽度；当TextBox控件内文本超过其初始长度时，TextBox和窗口也会扩大。

运行结果：

第05个小程序：跨越单元格（SpanTheCells.cs）

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
namespace Chapter06
{
    public class SpanTheCells : Window
    {
        [STAThread]
        public static void Main()
        {
            Application app = new Application();
            app.Run(new SpanTheCells());
        }
        public SpanTheCells()
        {
            Title = "跨越单元格";
            MinWidth = 300;       //最小宽度 
            WindowStartupLocation = WindowStartupLocation.CenterScreen;
            SizeToContent = SizeToContent.WidthAndHeight;
            // 创建Grid 
            Grid grid = new Grid();
            grid.ShowGridLines = true;      //显示网格线 
            grid.Margin = new Thickness(5);
            Content = grid;
            // 定义行，6行 
            for (int i = 0; i < 6; i++)
            {
                RowDefinition rowdef = new RowDefinition();
                rowdef.Height = GridLength.Auto;
                grid.RowDefinitions.Add(rowdef);
            }
            // 定义列，4列 
            for (int i = 0; i < 4; i++)
            {
                ColumnDefinition coldef = new ColumnDefinition();
                // 第1列占据剩余空间，其余列自动排列 
                if (i == 1)
                    coldef.Width = new GridLength(100, GridUnitType.Star);
                else
                    coldef.Width = GridLength.Auto;
                grid.ColumnDefinitions.Add(coldef);
            }
            // 创建labels和text boxes 
            string[] strLabels = { "姓：", "名：",
                                   "身份证号码：",
                                   "信用卡号码：",
                                   "其它：" };
            for(int i = 0; i < strLabels.Length; i++)
            {
                Label lbl = new Label();
                lbl.Content = strLabels[i];
                lbl.VerticalContentAlignment = VerticalAlignment.Center;
                grid.Children.Add(lbl);
                Grid.SetRow(lbl, i);       //Label放在第i+1行 
                Grid.SetColumn(lbl, 0);    //Label放在第1列 
                TextBox txtbox = new TextBox();
                txtbox.Margin = new Thickness(5);
                grid.Children.Add(txtbox);
                Grid.SetRow(txtbox, i);        //TextBox放在第i+1行 
                Grid.SetColumn(txtbox, 1);     //TextBox放在第2列 
                Grid.SetColumnSpan(txtbox, 3); //TextBox跨越到最后一列(第4列) 
            }
            // 创建按钮 
            Button btn = new Button();
            btn.Content = "提交";
            btn.Margin = new Thickness(5);
            btn.IsDefault = true;
            btn.Click += delegate { Close(); };
            grid.Children.Add(btn);
            Grid.SetRow(btn, 5);     //"提交"按钮放在第6行 
            Grid.SetColumn(btn, 2);  //"提交"按钮放在第3列 
            btn = new Button();
            btn.Content = "取消";
            btn.Margin = new Thickness(5);
            btn.IsCancel = true;
            btn.Click += delegate { Close(); };
            grid.Children.Add(btn);
            Grid.SetRow(btn, 5);    //"取消"按钮放在第6行 
            Grid.SetColumn(btn, 3); //"取消"按钮放在第4列 
            // 为第一个TextBox设置焦点 
            grid.Children[1].Focus();
        }
    }
}

这个程序和上一个相像，不同的是只使用一个6行4列的Grid面板，编辑框（TextBox）跨越占用2、3、4列。

指定元素占用的列的个数是用Grid.SetColumnSpan(txtbox, 3)实现的，类似占用行个数的设置方法是Grid.SetRowSpan(ctrl, 2)。

运行结果如下，这里设置显示Grid网格线，很容易看出控件布局格式：

第06个小程序：分隔线（SplitNine.cs）

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
namespace Chapter06
{
    public class SplitNine : Window
    {
        [STAThread]
        public static void Main()
        {
            Application app = new Application();
            app.Run(new SplitNine());
        }
        public SplitNine()
        {
            Title = "分隔线";
            Grid grid = new Grid();
            Content = grid;
            // 定义行和列 
            for (int i = 0; i < 3; i++)
            {
                grid.ColumnDefinitions.Add(new ColumnDefinition());
                grid.RowDefinitions.Add(new RowDefinition());
            }
            // 创建9个按钮 
            for (int x = 0; x < 3; x++)
                for (int y = 0; y < 3; y++)
                {
                    Button btn = new Button();
                    btn.Content = "第" + (y + 1) + "行 第" + (x + 1) + "列";
                    btn.Margin = new Thickness(10);
                    grid.Children.Add(btn);
                    Grid.SetRow(btn, y);
                    Grid.SetColumn(btn, x);
                }
            // 创建splitter,指派其位置。此处位于第2行第2列处 
            GridSplitter split = new GridSplitter();
            split.Width = 2;
            split.Background = Brushes.Green;
            grid.Children.Add(split);
            Grid.SetRow(split, 1);
            Grid.SetColumn(split, 1);
        }
    }
}

运行后，在第2行第2列后会出现一条绿色的线，移动它时，不同行的列的宽度也会跟着改变。

运行结果如下：

第07个小程序：分隔客户区（SplitTheClient.cs）

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
namespace Chapter06
{
    class SplitTheClient : Window
    {
        [STAThread]
        public static void Main()
        {
            Application app = new Application();
            app.Run(new SplitTheClient());
        }
        public SplitTheClient()
        {
            Title = "分隔客户区";
            Height = 288;
            Width = 480;
            WindowStartupLocation = WindowStartupLocation.CenterScreen;
            // 具有垂直splitter的Grid 
            // 单行，无需设置row 
            // 3列：第1列放按钮1，第2列放垂直splitter，第3列放grid2 
            Grid grid1 = new Grid();
            grid1.ColumnDefinitions.Add(new ColumnDefinition());
            grid1.ColumnDefinitions.Add(new ColumnDefinition());
            grid1.ColumnDefinitions.Add(new ColumnDefinition());
            grid1.ColumnDefinitions[1].Width = GridLength.Auto;
            Content = grid1;
            // 垂直splitter左边的Button 
            Button btn = new Button();
            btn.Content = "按钮1";
            grid1.Children.Add(btn);
            Grid.SetRow(btn, 0);
            Grid.SetColumn(btn, 0);
            // 垂直splitter. 
            GridSplitter split = new GridSplitter();
            split.ShowsPreview = true;
            split.Background = Brushes.Blue;
            split.HorizontalAlignment = HorizontalAlignment.Center;
            split.VerticalAlignment = VerticalAlignment.Stretch;
            split.Width = 6;
            grid1.Children.Add(split);
            Grid.SetRow(split, 0);
            Grid.SetColumn(split, 1);
            // 具有水平splitter的Grid 
            // 3行：第1行放按钮2，第2行放水平splitter，第3行放按钮3 
            // 单列，无需设置column 
            Grid grid2 = new Grid();
            grid2.RowDefinitions.Add(new RowDefinition());
            grid2.RowDefinitions.Add(new RowDefinition());
            grid2.RowDefinitions.Add(new RowDefinition());
            grid2.RowDefinitions[1].Height = GridLength.Auto;
            grid1.Children.Add(grid2);
            Grid.SetRow(grid2, 0);
            Grid.SetColumn(grid2, 2);
            // 水平splitter上方的Button 
            btn = new Button();
            btn.Content = "按钮2";
            grid2.Children.Add(btn);
            Grid.SetRow(btn, 0);
            Grid.SetColumn(btn, 0);
            // 水平splitter. 
            split = new GridSplitter();
            split.ShowsPreview = true;
            split.Background = Brushes.Blue;
            split.HorizontalAlignment = HorizontalAlignment.Stretch;
            split.VerticalAlignment = VerticalAlignment.Center;
            split.Height = 6;
            grid2.Children.Add(split);
            Grid.SetRow(split, 1);
            Grid.SetColumn(split, 0);
            // 水平splitter底部的Button 
            btn = new Button();
            btn.Content = "按钮3";
            grid2.Children.Add(btn);
            Grid.SetRow(btn, 2);
            Grid.SetColumn(btn, 0);
        }
    }
}

运行结果：

第08个小程序：颜色卷轴（ColorScroll.cs）

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Media;
namespace Chapter06
{
    class ColorScroll : Window
    {
        ScrollBar[] scrolls = new ScrollBar[3];
        TextBlock[] txtValue = new TextBlock[3];
        Panel pnlColor;
        [STAThread]
        public static void Main()
        {
            Application app = new Application();
            app.Run(new ColorScroll());
        }
        public ColorScroll()
        {
            Title = "颜色卷轴";
            Width = 500;
            Height = 300;
            WindowStartupLocation = WindowStartupLocation.CenterScreen;
            // 包含垂直splitter的GridMain 
            Grid gridMain = new Grid();
            //gridMain.ShowGridLines = true; 
            Content = gridMain;
            // GridMain的列定义 
            // 3列：第1列放grid，第2列放垂直splitter，第3列放颜色面板pnlColor 
            ColumnDefinition coldef = new ColumnDefinition();
            coldef.Width = new GridLength(200, GridUnitType.Pixel);
            gridMain.ColumnDefinitions.Add(coldef);
            coldef = new ColumnDefinition();
            coldef.Width = GridLength.Auto;
            gridMain.ColumnDefinitions.Add(coldef);
            coldef = new ColumnDefinition();
            coldef.Width = new GridLength(100, GridUnitType.Star);
            gridMain.ColumnDefinitions.Add(coldef);
            // 垂直splitter 
            GridSplitter split = new GridSplitter();
            split.HorizontalAlignment = HorizontalAlignment.Center;
            split.VerticalAlignment = VerticalAlignment.Stretch;
            split.Width = 6;
            gridMain.Children.Add(split);
            Grid.SetRow(split, 0);
            Grid.SetColumn(split, 1);
            // splitter右边的面板，用来显示颜色 
            pnlColor = new StackPanel();
            pnlColor.Background = new SolidColorBrush(SystemColors.WindowColor);
            gridMain.Children.Add(pnlColor);
            Grid.SetRow(pnlColor, 0);
            Grid.SetColumn(pnlColor, 2);
            // 左边的第2个Grid，将其加入gridMain 
            Grid grid = new Grid();
            //grid.ShowGridLines = true; 
            gridMain.Children.Add(grid);
            Grid.SetRow(grid, 0);
            Grid.SetColumn(grid, 0);
            // 定义3行，分别放置label，scroll和label 
            RowDefinition rowdef = new RowDefinition();
            rowdef.Height = GridLength.Auto;
            grid.RowDefinitions.Add(rowdef);
            rowdef = new RowDefinition();
            rowdef.Height = new GridLength(100, GridUnitType.Star);
            grid.RowDefinitions.Add(rowdef);
            rowdef = new RowDefinition();
            rowdef.Height = GridLength.Auto;
            grid.RowDefinitions.Add(rowdef);
            // 3列：红、绿、蓝 
            for (int i = 0; i < 3; i++)
            {
                coldef = new ColumnDefinition();
                coldef.Width = new GridLength(33, GridUnitType.Star);
                grid.ColumnDefinitions.Add(coldef);
            }
            for (int i = 0; i < 3; i++)
            {
                Label lbl = new Label();
                lbl.Content = new string[] { "红", "绿", "蓝" }[i];
                lbl.HorizontalAlignment = HorizontalAlignment.Center;
                grid.Children.Add(lbl);
                Grid.SetRow(lbl, 0);
                Grid.SetColumn(lbl, i);
                scrolls[i] = new ScrollBar();
                scrolls[i].Focusable = true;
                scrolls[i].Orientation = Orientation.Vertical;
                scrolls[i].Minimum = 0;
                scrolls[i].Maximum = 255;
                scrolls[i].SmallChange = 1;
                scrolls[i].LargeChange = 16;
                scrolls[i].ValueChanged += ScrollOnValueChanged;
                grid.Children.Add(scrolls[i]);
                Grid.SetRow(scrolls[i], 1);
                Grid.SetColumn(scrolls[i], i);
                txtValue[i] = new TextBlock();
                txtValue[i].TextAlignment = TextAlignment.Center;
                txtValue[i].HorizontalAlignment = HorizontalAlignment.Center;
                txtValue[i].Margin = new Thickness(5);
                grid.Children.Add(txtValue[i]);
                Grid.SetRow(txtValue[i], 2);
                Grid.SetColumn(txtValue[i], i);
            }
            // 初始化卷轴 
            Color clr = (pnlColor.Background as SolidColorBrush).Color;
            scrolls[0].Value = clr.R;
            scrolls[1].Value = clr.G;
            scrolls[2].Value = clr.B;
            // 设置初始焦点 
            scrolls[0].Focus();
        }
        void ScrollOnValueChanged(object sender, RoutedEventArgs args)
        {
            ScrollBar scroll = sender as ScrollBar;
            Panel pnl = scroll.Parent as Panel;
            TextBlock txt = pnl.Children[1 +
                                    pnl.Children.IndexOf(scroll)] as TextBlock;
            txt.Text = String.Format("{0}/n0x{0:X2}", (int)scroll.Value);      //RGB和16进制显示 
            pnlColor.Background =
                new SolidColorBrush(
                    Color.FromRgb((byte)scrolls[0].Value,
                                  (byte)scrolls[1].Value, (byte)scrolls[2].Value));
        }
    }
}

ScrollOnValueChanged事件处理器负责将ScroolBar的值更新到TextBlock，然后根据这3个滚动条的值计算出一个新的Color，显示在Color面板。

运行效果：