C#WinForm控件实战：Panel与单选框动态创建

------------------RadioButton单选框与Panel容器控件------------------

一、知识点简介

本节课主要学习两个控件：Panel面板容器控件、RadioButton单选框控件。

1、Panel：容器控件，作用是用来收纳、分组其他控件，统一管理区域样式，隔离不同区域的单选框。

2、RadioButton：单选按钮控件，同一容器里面的所有单选框，同一时间只能选中一个，不能多选。一般用于性别、身份、单一选项场景。

案例功能：手写代码动态创建面板，在面板里面添加【男、女】两个单选框，监听单选框选中变化，选中选项自动弹出弹窗。

二、完整源代码

复制代码

namespace _4RadioButton
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();

            //1.动态创建Panel面板容器
            Panel p = new Panel()
            {
                Location = new Point(400, 30),//面板在窗体的坐标
                Size = new Size(200, 200),    //面板宽高大小
                BackColor = Color.Red         //设置面板背景颜色
            };

            //2.动态创建单选框控件
            RadioButton btn1 = new RadioButton()
            {
                Text = "男",//单选框文字
                Checked = true,//默认当前单选框为选中状态
                Location = new Point(30, 10)//单选框在面板里面的坐标
            };

            RadioButton btn2 = new RadioButton()
            {
                Text = "女",
                Location = new Point(30, 40)
            };

            //3.给两个单选框绑定同一个选中改变事件
            btn1.CheckedChanged += Btn1_CheckedChanged;
            btn2.CheckedChanged += Btn1_CheckedChanged;

            //4.把控件添加到面板容器内部
            p.Controls.Add(btn1);
            p.Controls.Add(btn2);

            //5.把面板添加到窗体上显示
            this.Controls.Add(p);
        }

        //单选框选中状态改变事件
        private void Btn1_CheckedChanged(object sender, EventArgs e)
        {
            //as强制类型转换，把sender转为RadioButton
            RadioButton radio = sender as RadioButton;
            //判断当前单选框是否处于选中状态
            if (radio.Checked)
            {
                //弹出提示框，显示当前选中的内容
                MessageBox.Show(radio.Text);
            }
        }
    }
}

三、动态创建控件步骤

1、new 创建容器Panel对象，并设置大小、坐标、背景色；

2、new 创建RadioButton单选框，设置Text、位置、是否默认选中；

3、绑定CheckedChanged选中改变事件；

4、单选框添加到Panel里面；

5、Panel添加到窗体，完成显示。

四、逐行代码详细解析

1、Panel 面板容器

Panel属于容器控件，可以存放任意控件（单选框、按钮、文本框）。

Location：设置面板在窗体上的XY坐标。

Size：设置面板的宽度和高度。

BackColor：设置面板背景颜色，方便肉眼区分区域。

作用：可以给控件分组，不同Panel里面的单选框互不影响，可以各自单独选中。

2、RadioButton 单选框属性

Text：单选框展示的文字内容。

Checked：布尔类型，true默认选中，false默认未选中。

Location：单选框的坐标，注意：此时坐标是相对于Panel面板，不是相对于窗体。

3、CheckedChanged 核心事件

触发时机：单选框选中、取消选中的时候都会触发该事件。

本案例将两个单选框共用同一个事件方法，减少重复代码。

4、控件添加层级关系

p.Controls.Add(控件)：将单选框放入Panel面板内部；

this.Controls.Add(p)：将面板放入窗体；

层级：窗体 > 面板Panel > 单选框RadioButton。

5、事件方法详解

复制代码

RadioButton radio = sender as RadioButton;

sender：代表当前触发事件的单选框控件。

as：安全强制类型转换，把object类型转为RadioButton类型。

if (radio.Checked)：只在单选框被选中的时候弹出弹窗，取消选中不弹窗。

五、RadioButton单选框核心特点（必考）

1、在同一个容器内，RadioButton只能单选，互斥；

2、不同容器（不同Panel）里面的单选框互不干扰，可以各自选一个；

3、Checked属性控制是否选中；

4、CheckedChanged：选中状态改变自动触发；

5、适合：性别、学历、状态、单一选项。

六、总结

1、Panel是容器控件，用来收纳控件、区域分组；

2、RadioButton单选框同一容器内互斥，只能选一个；

3、Checked设置默认选中，CheckedChanged监听选中变化；

4、控件坐标：放在Panel里，坐标以面板为参照物；

5、多个单选框可以共用同一个CheckedChanged事件，简化代码。

七、易错点

1、忘记把控件添加到Panel或者窗体，页面看不见控件；

2、单选框没有放入同一个Panel，会导致所有单选框全局互斥；

3、事件里面不判断Checked，切换选中和取消都会弹窗；

4、放在Panel内部的控件坐标原点是面板左上角，不是窗体。

------------------CheckBox多选框控件------------------

一、知识点简介

本节课主要学习 CheckBox 多选框控件。

CheckBox叫做复选框/多选框，和单选框RadioButton最大区别：多选框没有互斥效果，可以同时选中多个选项。

常用来做：兴趣爱好、课程选择、权限勾选、同意协议等多项选择场景。

本案例实现功能：动态手写代码创建多选框、设置多选框属性、多个复选框共用同一个选中改变事件，勾选指定选项弹出提示框。

二、完整源代码

复制代码

namespace _5checkbox
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();

            //1.动态创建CheckBox多选框控件
            CheckBox c1 = new CheckBox()
            {
                Text = "new出来的多选框",  //多选框显示文字
                Location = new Point(280, 100), //控件坐标
                Checked = true //默认设置为勾选状态
            };

            //2.把控件添加到窗体上显示
            Controls.Add(c1);

            //3.给多个多选框绑定同一个选中改变事件
            c1.CheckedChanged += checkBox1_CheckedChanged;
            checkBox5.CheckedChanged += checkBox1_CheckedChanged;
            checkBox6.CheckedChanged += checkBox1_CheckedChanged;
        }

        //多选框选中状态改变的共用事件
        public void checkBox1_CheckedChanged(object sender, EventArgs e)
        {
            //判断指定多选框是否被勾选
            if (checkBox5.Checked)
            {
                //sender强转为CheckBox，弹出当前操作多选框的文本
                MessageBox.Show(((CheckBox)sender).Text);
            }
        }
    }
}

三、动态创建多选框固定步骤

所有WinForm控件创建步骤通用：

1、new 实例化 CheckBox 多选框对象；

2、设置属性：Text文字、Location坐标、Checked选中状态；

3、绑定 CheckedChanged 选中改变事件；

4、Controls.Add() 添加到窗体，界面才能显示。

四、逐行代码详细解析

1、InitializeComponent()

初始化窗体，加载所有拖拽创建的控件，固定代码，不能删除。

2、动态创建多选框

复制代码

CheckBox c1 = new CheckBox()
{
    Text = "new出来的多选框",
    Location = new Point(280, 100),
    Checked = true
};

Text：设置多选框上面显示的文字内容；
Location：设置控件在窗体的XY坐标，原点在窗体左上角；
Checked：布尔类型，true默认勾选，false默认未勾选。

3、Controls.Add(c1)

把控件添加到窗体集合里面。

重点：动态创建的控件，不写Add，页面永远看不见。

4、CheckedChanged 选中改变事件

触发时机：只要多选框勾选或者取消勾选，都会触发这个事件。

优势：项目中所有多选框可以共用同一个事件方法，减少重复冗余代码。

绑定语法：控件.CheckedChanged += 事件方法名;

5、事件方法内部代码解析

复制代码

if (checkBox5.Checked)
{
    MessageBox.Show(((CheckBox)sender).Text);
}

if (checkBox5.Checked)：判断指定多选框是否处于勾选状态；
sender：代表当前触发事件的那个多选框；
强制类型转换：sender默认是object类型，必须强转为CheckBox才能获取Text；
MessageBox.Show：弹出弹窗，展示当前操作多选框的文字。

五、CheckBox与RadioButton区别（必考简答题）

1、CheckBox 多选框

支持多选、没有互斥机制；
同一页面可以同时勾选任意多个选项；
适用场景：爱好、特长、批量选择。

2、RadioButton 单选框

同一容器内互斥，只能单选；
同一时间只能选择一个；
适用场景：性别、状态、唯一选项。

六、本节课知识点总结

1、CheckBox是多选框，无互斥约束，可以多选；
2、Checked属性：控制多选框是否勾选；
3、CheckedChanged事件：勾选/取消勾选都会触发；
4、多个多选框可以共享同一个事件方法；
5、sender指代触发事件的控件，需要强制转换类型；
6、动态控件必须使用Add添加到窗体才能显示。

七、易错点

1、忘记Add添加控件，页面空白看不到多选框；
2、CheckBox没有容器限制，默认全部可以多选；
3、sender未强转直接调用Text，程序报错；
4、CheckedChanged勾选和取消都会触发，需要做if判断。

------------------ListBox列表框控件------------------------

一、课程知识点

ListBox叫做列表框控件，用来展示多条数据选项。该控件支持单选和多选，常用于角色列表、数据列表、选项选择等功能。本节课我们学习动态创建ListBox、添加列表数据、设置多选模式、获取选中内容、选中项改变事件。

二、完整源代码

复制代码

namespace _6listBox
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            //定义数组，用来批量添加数据
            string[] strs = {"提莫" ,"亚瑟"};

            //动态创建ListBox列表框
            ListBox box = new ListBox();
            box.Location = new Point(300, 0);

            //单个添加列表项
            box.Items.Add("矮人直升机");
            box.Items.Add("影魔");
            box.Items.Add("猎魂者");
            box.Items.Add("幽鬼");

            //批量添加数组数据
            box.Items.AddRange(strs);

            //设置列表框为多选模式
            box.SelectionMode = SelectionMode.MultiSimple;

            //绑定选中项改变事件
            box.SelectedIndexChanged += Box_SelectedIndexChanged;

            //把控件添加到窗体
            this.Controls.Add(box);
        }

        //选中项改变事件
        private void Box_SelectedIndexChanged(object sender, EventArgs e)
        {
            //强制类型转换
            ListBox b = (ListBox)sender;
            string s = string.Empty;
            //遍历所有选中的选项
            foreach (var item in b.SelectedItems)
            {
                s += item.ToString();
            }
            MessageBox.Show(s);
        }
    }
}

三、动态创建ListBox步骤

1、new 创建ListBox控件对象；

2、设置Location坐标；

3、通过Items集合添加数据（Add单个添加、AddRange批量添加）；

4、设置SelectionMode选择模式；

5、绑定SelectedIndexChanged选中改变事件；

6、Controls.Add()添加到窗体显示。

四、代码详细解析

1、Items集合：ListBox所有选项全部存放在Items集合里面。

Add()：添加单个数据；AddRange()：直接添加数组，实现批量添加。

2、SelectionMode 选择模式

One：默认单选；MultiSimple：多选，直接点击即可多选；MultiExtended：配合Ctrl、Shift进行多选。本案例使用MultiSimple简易多选。

3、SelectedIndexChanged事件

当列表框里面的选项选中、取消选中、切换选项时，自动触发该事件。

4、sender参数：代表当前操作的ListBox控件，需要强制转换类型才能调用属性。

5、SelectedItems：存储所有被用户选中的选项，专门用于多选模式，通过foreach循环遍历所有选中内容，最后弹窗展示。

五、ListBox常用属性

1、Items：所有列表项集合；

2、SelectedIndex：获取选中项下标；

3、SelectedItem：单选时获取选中内容；

4、SelectedItems：多选时获取所有选中内容；

5、SelectionMode：设置单选或多选；

6、SelectedIndexChanged：选中改变事件。

六、总结

ListBox是存放多条数据的列表控件，可以单个添加数据也可以批量添加数组数据。控件分为单选和多选两种模式，单选使用SelectedItem，多选遍历SelectedItems。只要选中状态发生变化，就会触发SelectedIndexChanged事件。动态创建控件必须添加到窗体才能显示。

------------------ComboBox下拉框控件------------------

一、知识点简介

本节课学习ComboBox下拉框控件。ComboBox俗称下拉列表框，和ListBox列表框功能相似，用来存放多条选项，但是下拉框默认隐藏所有选项，点击之后才展开列表，界面更加简洁。

下拉框只能单选，不支持多选，一般用于地区选择、分类选择、身份选择、年级选择等场景。

二、完整源代码

复制代码

namespace _7comboBox
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();

            //1.动态创建下拉框控件
            ComboBox com = new ComboBox()
            {
                Text = "请选择"//设置默认显示文字
            };

            //2.批量给下拉框添加选项
            com.Items.AddRange(new string[] { "郑州", "开封", "洛阳" });

            //com.SelectedIndex = 2; 设置默认选中项（索引从0开始）

            //3.绑定选中项改变事件
            com.SelectedIndexChanged += Com_SelectedIndexChanged;

            //4.把控件添加到窗体显示
            this.Controls.Add(com);
        }

        //下拉框选中改变事件
        private void Com_SelectedIndexChanged(object sender, EventArgs e)
        {
            //将sender强制转为ComboBox类型
            ComboBox c1 = (ComboBox)sender;
            //获取当前选中的选项并弹窗展示
            MessageBox.Show(c1.SelectedItem.ToString());
        }
    }
}

三、动态创建ComboBox步骤

1、new 实例化 ComboBox 下拉框对象；

2、设置Text默认提示文字；

3、通过Items集合添加数据（Add单项、AddRange批量添加）；

4、绑定SelectedIndexChanged选中改变事件；

5、Controls.Add()添加到窗体，控件才能显示。

四、逐行代码详细解析

1、创建下拉框对象

ComboBox com = new ComboBox()：在内存中创建下拉框控件。

Text = "请选择"：下拉框初始状态显示的提示文字，提示用户进行选择。

2、AddRange批量添加数据

利用匿名字符串数组，一次性将郑州、开封、洛阳三个城市添加到下拉选项集合中。

所有下拉选项全部存储在Items集合 当中。

3、SelectedIndex 默认选中项

SelectedIndex代表选项索引，下标从0开始；0代表郑州、1代表开封、2代表洛阳。

本案例代码注释，未设置默认选中项。

4、SelectedIndexChanged 事件

当下拉框切换选项、选中内容发生改变时，自动触发该事件。

5、事件方法解析

sender：代表当前触发事件的下拉框控件，初始类型为object，必须强制转换成ComboBox才能使用控件属性。

SelectedItem：获取当前用户选中的下拉选项内容，ToString()转为字符串，弹窗展示。

五、ComboBox与ListBox区别

1、ListBox：列表框，页面直接展示所有选项，支持单选和多选；

2、ComboBox：下拉框，默认收起选项，点击展开，只能单选；

3、下拉框占用页面空间更小，界面更加美观简洁。

六、常用属性总结

1、Text：设置下拉框顶部默认显示文字；

2、Items：所有下拉选项集合；

3、Add()：添加单个选项；

4、AddRange()：批量添加数组数据；

5、SelectedIndex：获取/设置选中项下标；

6、SelectedItem：获取当前选中的选项内容；

7、SelectedIndexChanged：选项改变触发事件。

七、总结

ComboBox下拉框是单项选择控件，页面简洁、占用空间小。我们可以通过Add和AddRange两种方式给下拉框添加数据。通过SelectedIndex可以设置默认选项，通过SelectedIndexChanged监听用户切换选项。动态创建控件必须添加到窗体控件集合中，否则页面无法显示。

八、易错点

1、ComboBox不支持多选；

2、动态控件忘记Add添加，页面看不到控件；

3、sender没有强制转换类型，程序直接报错。

---------------------PictureBox图片控件------------------------

一、知识点简介

本节课学习 PictureBox图片框控件，该控件专门用来展示图片，是WinForm展示图像的专用控件。

本节课掌握内容：动态创建PictureBox控件、加载本地图片、加载网络图片、SizeMode五种图片适配模式、鼠标移入、鼠标移出、鼠标点击事件、配合ImageList图片集合实现切换图片功能。

二、功能介绍

1、代码动态创建图片框，直接加载互联网图片资源；

2、设置SizeMode让图片自适应控件大小；

3、绑定鼠标三个常用事件：点击、移入、移出；

4、结合ImageList图片列表，实现按钮切换多张图片。

三、完整源代码

复制代码

namespace _8pictureBox
{
    public partial class Form1 : Form
    {
        //定义计数器，记录当前图片索引
        int count = 0;
        public Form1()
        {
            InitializeComponent();

            //1.动态创建图片框控件
            PictureBox pic = new PictureBox()
            {
                Size = new Size(400, 400),//设置图片框大小
            };

            //2.绑定鼠标相关事件
            pic.Click += Pic_Click;         //鼠标点击事件
            pic.MouseEnter += Pic_MouseEnter;//鼠标移入事件
            pic.MouseLeave += Pic_MouseLeave;//鼠标移出事件

            //3.设置图片适配模式，图片铺满控件
            pic.SizeMode = PictureBoxSizeMode.StretchImage;

            //4.加载网络图片资源（直接访问网址图片）
            pic.ImageLocation = @"https://miaobi-lite.cdn.bcebos.com/miaobi/5mao/b%2754Gr5bim5Zyf5aOB57q46LaF5riF5Y6f5Zu%2BNGtfMTczNDU0NDA5MS4wNzI3MTUz%27/0.png";

            //5.把控件添加到窗体
            this.Controls.Add(pic);
        }

        //鼠标移出事件
        private void Pic_MouseLeave(object sender, EventArgs e)
        {
            Console.WriteLine("鼠标离开事件");
        }

        //鼠标移入事件
        private void Pic_MouseEnter(object sender, EventArgs e)
        {
            Console.WriteLine("鼠标移入事件");
        }

        //鼠标点击事件
        private void Pic_Click(object sender, EventArgs e)
        {
            Console.WriteLine("鼠标点击事件");
        }

        //切换图片按钮
        private void button1_Click(object sender, EventArgs e)
        {
            //索引自增
            count++;
            //从ImageList集合中根据索引赋值图片
            pictureBox1.Image = imageList1.Images[count];

            //判断索引越界，重置循环
            if (count >= 2)
            {
                count = -1;
            }
        }
    }
}

四、动态创建PictureBox步骤

1、new 创建PictureBox图片框对象；

2、设置Size控件大小；

3、设置SizeMode图片适配模式；

4、加载图片（本地路径 / 网络地址）；

5、绑定鼠标各类事件；

6、Controls.Add()添加到窗体显示。

五、图片两种加载方式

1、加载本地图片

pic.Image = Image.FromFile(@"本地完整路径");

适合加载电脑内部存好的图片文件。

2、加载网络图片（本案例使用）

pic.ImageLocation = "图片网络URL地址";

直接通过网址加载互联网图片，无需保存到本地。

六、SizeMode五大模式（必考）

1、Normal（默认）：图片左上角对齐控件，图片超出控件部分直接裁剪，不会缩放。

2、StretchImage：拉伸图片，完全铺满PictureBox控件，图片可能变形失真（本案例使用）。

3、Zoom：等比例缩放图片，完整显示图片，图片不会变形，最推荐使用。

4、AutoSize：图片框自动根据图片大小改变控件尺寸，适配图片。

5、CenterImage：图片居中显示，超出部分裁剪，不缩放。

七、三大鼠标事件详解

1、Click：鼠标单击图片框时触发；

2、MouseEnter：鼠标移动进入控件范围内触发；

3、MouseLeave：鼠标移出控件范围的时候触发。

本案例使用控制台Console.WriteLine打印提示信息。

八、图片切换功能解析（ImageList）

1、ImageList：专门用来批量存放多张图片的图片集合控件；

2、定义count变量当做图片索引；

3、每点击一次按钮count++，切换下一张图片；

4、if判断防止索引越界，到达最后一张重置下标，实现循环切换。

九、知识点总结

1、PictureBox是专门展示图片的控件；

2、加载图片分为本地FromFile和网络ImageLocation两种方式；

3、SizeMode五种模式用来控制图片适配方式；

4、图片框支持移入、移出、点击多种鼠标事件；

5、搭配ImageList可以轻松实现图片轮播、图片切换功能。

十、易错点

1、未设置SizeMode，图片显示不全或者比例错乱；

2、加载本地图片路径写错，出现找不到文件报错；

3、切换图片不做边界判断，索引越界程序崩溃；

4、动态创建控件忘记Add，页面看不到图片框。

------------------NumericUpDown数值微调控件------------------

一、知识点简介

NumericUpDown是WinForm专用数值微调控件，控件自带上下加减按钮，用户只能输入数字或者点击上下箭头修改数值，禁止输入文字。常用来设置年龄、数量、分数、页码、商品个数等只能填写数字的场景。

本节课学习：动态创建NumericUpDown控件、设置初始值、最大值、最小值、每次增减步长、值改变事件。

二、完整源代码

复制代码

namespace _9NumericUpDown
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();

            //动态创建数值微调控件
            NumericUpDown num = new NumericUpDown()
            {
                Value = 20,      //设置控件默认初始值
                Increment = 2,   //每次点击加减按钮变化的值
                Maximum = 100,   //设置允许的最大值
                Minimum = 0      //设置允许的最小值
            };

            //绑定数值改变事件
            num.ValueChanged += Num_ValueChanged;

            //把控件添加到窗体显示
            this.Controls.Add(num);
        }

        //数值发生改变触发的事件
        private void Num_ValueChanged(object sender, EventArgs e)
        {
            //强制转换类型，获取当前最新数值并弹窗展示
            NumericUpDown nud = (NumericUpDown)sender;
            MessageBox.Show(nud.Value.ToString());
        }
    }
}

三、动态创建控件步骤

1、new 实例化 NumericUpDown 数值控件；

2、配置核心属性：默认值、增量、最大值、最小值；

3、绑定 ValueChanged 数值改变事件；

4、Controls.Add() 添加到窗体，界面才能显示控件。

四、核心属性详解

1、Value：控件当前显示的默认数值，程序运行初始值。

2、Increment：递增量（步长），点击上下箭头一次，数值增加/减少多少，本案例每次变化2。

3、Maximum：数值允许的最大值，用户无法超过该数值。本案例最大为100。

4、Minimum：数值允许的最小值，用户无法低于该数值。本案例最小为0。

五、事件解析（ValueChanged）

事件名称：ValueChanged ------ 数值改变事件

触发时机：点击上下箭头、手动输入数字、删除数字，只要控件数值发生变化，就会自动触发该事件。

sender：代表当前数值微调控件，需要强制转换为 NumericUpDown 类型；

Value：获取控件当前最新的数字，转为字符串后弹窗提示。

六、控件特点

1、自带上下加减按钮，操作简单；
2、只能输入数字，自动屏蔽汉字、字母、特殊符号；
3、可以限制数值区间，防止用户输入非法数据；
4、支持手动输入和按钮调节两种方式；
5、适合数量、年龄、价格、等级等纯数字场景。

七、整体运行流程

1、程序运行，自动创建NumericUpDown控件；

2、控件默认值为20，范围0~100，每次加减2；

3、修改数值（点击箭头或手动输入）；

4、触发ValueChanged事件；

5、弹出弹窗，显示当前最新数值。

八、总结

NumericUpDown是专用数字输入控件，相比TextBox更加安全，能限制最大值、最小值，并且只能输入数字。Increment控制每次变化步长，Value设置默认值。当数值发生任何改变时，触发ValueChanged事件。动态创建控件必须添加到窗体才能正常显示。

九、易错点

1、Value初始值不能小于最小值、不能大于最大值，否则程序报错；

2、该控件Value是decimal类型，本身就是数字，不需要额外转换数字格式；

3、动态控件忘记Add添加，页面看不到控件；

4、sender使用前必须强制类型转换。