1.5  特色程序界面

现在有很多开发人员都将界面制作成不同类型的样式，这样可以使界面更加形象化。本节主要介绍了如何对程序界面进行特色化设计，如类似QQ、Windows XP的界面等。

实例017  菜类QQ的程序界面

实例说明

一般程序都是以菜单栏和工具栏的形式调用其他功能模块，如果以动态的类似QQ的程序界面来调用其他功能模块，将会给用户一种新鲜的感觉，使用户对软件更感兴趣。实例运行结果如图1.17所示。

技术要点

本例主要使用Button控件来完成布局，使用ListView控件来显示有图标的功能菜单。ListView控件的常用属性及说明如下。

1．ListView.Items属性

使用该属性可直接访问表示列表中项目的ListItem对象。其结构如下：

public ListViewItemCollection Items { get; }

l     属性值： ListView.ListViewItemCollection包含ListView控件中所有的项。

2．ListView.Dock属性

获取或设置哪些控件边框停靠到其父控件并确定控件如何随其父级一起调整大小。其结构如下：

public virtual DockStyle Dock { get; set; }

l     属性值：DockStyle值之一。默认为None。

实现过程

（1）创建一个项目，将其命名为Ex01_17，默认窗体为Form1。

（2）在窗体上添加Button控件、ListView控件和ImageList控件。设置ListView控件的ImageList属性为ImageList控件。

（3）主要程序代码。

添加“我的好友”选项内容的实现代码如下：

        private void button1_Click(object sender, EventArgs e)

        {

            listView1.Dock = DockStyle.None;

            button1.Dock = DockStyle.Top;

            button2.Dock = DockStyle.Bottom;

            button3.SendToBack();

            button3.Dock = DockStyle.Bottom;

            listView1.BringToFront();

            listView1.Dock = DockStyle.Bottom;

            listView1.Clear();

            listView1.Items.Add("小猪", "小猪", 0);

            listView1.Items.Add("小狗", "小狗", 1);

            listView1.Items.Add("娇娇", "娇娇", 2);

        }

添加默认时选项内容的实现代码如下：

        private void Form1_Load(object sender, EventArgs e)

        {

            listView1.Clear();

            listView1.LargeImageList = imageList1;

            listView1.Items.Add("小猪", "小猪", 0);

            listView1.Items.Add("小狗", "小狗", 1);

            listView1.Items.Add("娇娇", "娇娇", 2);

           

        }

添加“陌生人”选项内容的实现代码如下：

        private void button2_Click(object sender, EventArgs e)

        {

            listView1.Dock = DockStyle.None;

            button2.Dock = DockStyle.Top;

            button1.SendToBack();

            button1.Dock = DockStyle.Top;

            button3.Dock = DockStyle.Bottom;

            listView1.Dock = DockStyle.Bottom;

            listView1.Clear();

            listView1.Items.Add("北风", "北风", 3);

         

        }

添加“黑名单”选项内容的实现代码如下：

        private void button3_Click(object sender, EventArgs e)

        {

            listView1.Dock = DockStyle.None;

            button3.SendToBack();

            button3.Dock = DockStyle.Top;

            button2.SendToBack();

            button2.Dock = DockStyle.Top;

            button1.SendToBack();

            button1.Dock = DockStyle.Top;

            listView1.Dock = DockStyle.Bottom;

            listView1.Clear();

            listView1.Items.Add("冰雨", "冰雨", 5);

        }

举一反三

根据本实例，读者可以实现以下功能。

  根据数据库信息形成相应的功能列表。

  制作聊天界面。

实例018  类似windows xp的程序界面

实例说明

在Windows XP环境下打开控制面板，会发现左侧的导航界面很实用。双击展开按钮，导航栏功能显示出来，双击收缩按钮，导航按钮收缩。下面通过实例介绍此种主窗体的设计方法。运行本例，效果如图1.18所示。

技术要点

PictureBox控件是一个图像显示控件，该控件主要以其中的Image属性存储图像数据。其详细介绍如下。

PictureBox.Image属性用来获取或设置 PictureBox 显示的图像，其语法格式如下：

public Image Image { get; set; }

图1.18  类似windows xp的程序界面

l     属性值：要显示的Image。

实现过程

（1）创建一个项目，将其命名为Ex01_18，默认窗体为Form1。

（2）在Form1窗体上添加Button控件、PictureBox控件和label控件，布局如图1.18所示。

（3）主要程序代码。

双击“向下箭头”的实现代码如下：

        private void pictureBox5_Click(object sender, EventArgs e)

        {

            //使子项收缩

            int i ;

            i=80;

            pictureBox5.Visible = false;

            pictureBox4.Visible = false;

            label2.Visible = false;

            label3.Visible = false;

            pictureBox6.Top -= i;

            pictureBox8.Top -= i;

            label4.Top -= i;

            label5.Top -= i;

            label6.Top -= i;

            label10.Top -= i;

            label7.Top -= i;

            label8.Top -= i;

            label9.Top -= i;

            pictureBox9.Top -= i;

            pictureBox11.Top -= i;

        }

双击“向上箭头”的实现代码如下：

        private void pictureBox2_Click(object sender, EventArgs e)

        {

            //展开子项

            if (pictureBox5.Visible == false)

            {

                int i;

                i = 80;

                pictureBox5.Visible = true;

                pictureBox4.Visible = true;

                label2.Visible = true;

                label3.Visible = true;

                pictureBox6.Top += i;

                pictureBox8.Top += i;

                label4.Top += i;

                label5.Top += i;

                label6.Top += i;

                label10.Top += i;

                label7.Top += i;

                label8.Top += i;

                label9.Top += i;

                pictureBox9.Top += i;

                pictureBox11.Top += i;

            }

        }

        private void Form1_Load(object sender, EventArgs e)

        {

            SetStyle(ControlStyles.SupportsTransparentBackColor,true);

        }

 注意：在对控件的高度进行递增或递减的时候，数值不要太小。

举一反三

根据本实例，读者可以实现以下功能。

  制作Windows XP控制面板。

  制作Windows XP开始导航菜单。

实例019  以图形按钮显示的界面

实例说明

菜单和工具栏虽然能方便用户操作程序的相应功能，但各有缺点。如果采用按钮式功能菜单，不但美观大方，而且操作灵活。当单击按钮时，用户区将显示相应的操作按钮组。下面介绍图形界面式菜单的设计方法。运行本例，效果如图1.19所示。

图1.19  以图形按钮显示的界面

技术要点

本例中用到了Image.FromFile方法和PictureBox.Image属性，下面详细介绍一下。

（1）Image.FromFile方法：从指定的文件创建Image。该函数的结构为：

public static Image FromFile (string filename)

参数说明如下。

l     filename：当前目录的指定路径字符串，包含要从中创建Image的文件的名称。

l     返回值：此方法创建的Image。

（2）PictureBox.Image属性：获取或设置PictureBox显示的图像。其属性结构为：

public Image Image { get; set; }

l     属性值：要显示的Image。

 注意：在本例中不易使窗体最大化。如最大化，会使Label控件不在正确的位置上。

实现过程

（1）创建一个项目，将其命名为Ex01_19，默认窗体为Form1。

（2）在Form1窗体上添加MenuStrip控件用来设计菜单；添加Picture控件、Panel控件用来设计图形显示的界面。

（3）将panel的背景图片设置为图1.19所示，并在图片上添加Label控件，同时将Label控件的BackColor属性设置为transparency。

（4）主要程序代码。

        private void label1_Click(object sender, EventArgs e)

        {

           pictureBox3.Image= Image.FromFile("3.jpg");//为控件加载图像

        }

举一反三

根据本实例，读者可以实现以下功能。

  制作图片的动态更新。

  制作一个图片浏览器。

实例020  以树形显示的程序界面

实例说明

以树形来显示程序的菜单，可以更直观更快捷的对软件进行操作。树形菜单比菜单栏更加美观实用。下面介绍树形界面菜单的设计方法。运行本例效果如图1.20所示。

图1.20  以树形显示的程序界面

技术要点

在对TreeView控件输入记录时，双击Nodes属性就可以对TreeView的节点进行设置。

可以在窗体的Load事件中输入下面的一条命令：

treeView1.ExpandAll();

功能：展开TreeView控件中所有的下级菜单。

实现过程

（1）创建一个项目，将其命名为Ex01_20，默认窗体为Form1。

（2）在窗体上添加MenuStrip控件用来设计菜单栏，添加PictureBox控件用来显示图片，添加TreevVew控件用来设计左侧树形导航界面。

（3）为PictureBox添加背景图片，给MenuStrip控件和TreevVew控件添加子项。

（4）主要程序代码。

        private void Form1_Load(object sender, EventArgs e)

        {

            treeView1.ExpandAll();

        }

举一反三

根据本实例，读者可以实现以下功能。

  制作一个动态的从数据库中读取数据的树型界面。

  制作一个带图标的树型界面。

实例021  动态按钮的窗体界面

实例说明

在窗体界面中，通常以按钮来代替菜单栏的功能，这种形式虽然给用户一种直观，界面风格各异的感党，但通常按钮都是以静止的形式显示，如果使光标移到按钮时，可以使按钮上的图片和文字说明动态化，使用户快捷地找到所选按钮。这样就需要一个动态的按钮显示界面。运行本例效果如图1.21所示。

图1.21  动态按钮的窗体界面

技术要点

在编辑过程中，首先在Button控件中的Image属性中添加图片，然后将Button控件的ImageAlign属性设置为MiddleCenter，使图片居中。在设置Button控件的动态图片时，必须在相应控件的MouseMove事件中设置。

1．Button.Image属性

获取或设置显示在按钮控件上的图像，其语法格式如下：

public Image Image { get; set; }

l     属性值：按钮控件上显示的Image。默认值为空引用。

2．Button. ImageAlign属性

获取或设置按钮控件上的图像对齐方式，其语法格式如下：

public ContentAlignment ImageAlign { get; set; }

l     属性值：ContentAlignment值之一。默认值为MiddleCenter。

 注意：当鼠标移开Button控件时，图片与字应及时恢复原位。

实现过程

（1）创建一个项目，将其命名为Ex01_21，默认窗体为Form1。

（2）在Form1窗体上添加PictureBox用来显示图片，添加Button、Lable控件用来设计动态按钮。

（3）为PictureBox控件设置背景图片，将Lable控件的Text属性设置为“明日科技有限公司”，并为每个Button控件设置图片和文字。

（4）主要程序代码。

        private void button1_MouseMove(object sender, MouseEventArgs e)

        { 

              //鼠标移动时改变图片位置

            button1.ImageAlign = ContentAlignment.MiddleLeft;

        }

        private void button2_MouseMove(object sender, MouseEventArgs e)

        {

            button2.ImageAlign = ContentAlignment.MiddleLeft;

        }

        private void button3_MouseMove(object sender, MouseEventArgs e)

        {

            button3.ImageAlign = ContentAlignment.MiddleLeft;

        }

        private void button4_MouseMove(object sender, MouseEventArgs e)

        {

            button4.ImageAlign = ContentAlignment.MiddleLeft;

        }

        private void button5_MouseMove(object sender, MouseEventArgs e)

        {

            button5.ImageAlign = ContentAlignment.MiddleLeft;

        }

        private void button1_MouseLeave(object sender, EventArgs e)

        {

            button1.ImageAlign = ContentAlignment.MiddleCenter;

        }

        //鼠标离开时改变图片位置

        private void button2_MouseLeave(object sender, EventArgs e)

        {

            button2.ImageAlign = ContentAlignment.MiddleCenter;

        }

        private void button3_MouseLeave(object sender, EventArgs e)

        {

            button3.ImageAlign = ContentAlignment.MiddleCenter;

        }

        private void button4_MouseLeave(object sender, EventArgs e)

        {

            button4.ImageAlign = ContentAlignment.MiddleCenter;

        }

        private void button5_MouseLeave(object sender, EventArgs e)

        {

            button5.ImageAlign = ContentAlignment.MiddleCenter;

        }

        private void button6_MouseMove(object sender, MouseEventArgs e)

        {

            button6.ImageAlign = ContentAlignment.MiddleLeft;

        }

        private void button6_MouseLeave(object sender, EventArgs e)

        {

            button6.ImageAlign = ContentAlignment.MiddleCenter;

        }

举一反三

根据本实例，读者可以实现以下功能。

  根据所给图片制作相应的窗体界面。

  用图片代替控件制作相应的窗体界面。