1.4  导航菜单界面

对于一些应用工具软件，界面不但要求人性化、漂亮，还要突出界面功能、使用方便，这样才能吸引用户使用。本节主要介绍了常用的几种菜单界面。

实例014  OutLook界面

实例说明

程序主界面包括菜单栏、工具栏、状态栏和树状视图。OutLook界面美观、友好，是一个很实用的程序主界面，并且菜单栏和工具栏是可移动的。运行本例效果如图1.14所示。

图1.14  Out Look界面

技术要点

一般程序的菜单栏和工具栏是不可移动的，但是只要将MenuStrip和ToolStrip控件的AllowItemRecorder属性设为True就可以移动。在本例中使用MenuStrip控件制作菜单栏，使用ToolStrip制作工具栏，使用StatusStrip控件制作状态栏。下面详细介绍一下这几个控件的属性。

1．ToolStrip. AllowItemReorder属性

获取或设置一个值，该值指示是否由ToolStrip类私自处理拖放和项重新排序。其结构如下：

public bool AllowItemReorder { get; set; }

l     属性值：如果让ToolStrip类自动处理拖放和项重新排序，为True；否则为False。默认值为False。

2．MenuStrip. AllowItemReorder属性

获取或设置一个值，该值指示是否由ToolStrip类私自处理拖放和项重新排序。其结构如下：

public bool AllowItemReorder { get; set; }

l     属性值：如果让 MenuStrip类自动处理拖放和项重新排序，为True；否则为False。默认值为False。

3．ToolStripItem.DisplayStyle属性

获取或设置是否在ToolStripItem上显示文本和图像。

public virtual ToolStripItemDisplayStyle DisplayStyle { get; set; }

l     属性值：ToolStripItemDisplayStyle值之一。默认为ImageAndText。

 注意：在移动菜单栏和工具栏时，需要按住“Alt”键，同时用鼠标进行拖动。

实现过程

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

（2）在Form1窗体上添加MenuStrip控件，用来设计主菜单；添加ToolStrip控件，用来设计工具栏；添加StatusStrip控件，用来设计状态栏；添加ImageList控件和TreeVew控件，用来设计树结构。

（3）分别为MenuStrip控件、ToolStrip控件、ImageList控件和TreeVew控件添加子项，将MenuStrip控件和ToolStrip控件的AllowItemRecorder属性设为True，并将ToolStrip控件的每个子项的DisplayStyle属性设置为“ImageAndText”。下面详细介绍这几个属性。

举一反三

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

  制作一个系统菜单。

  制作一个导航界面。

实例015  带带导航菜单的主界面

实例说明

在窗体界面中，菜单栏是不可缺少的重要组成部分。本实例是用其他的控件来制作一个摸拟菜单栏。运行程序，单击窗体上面的按钮，将会在按钮的下面显示一个下拉列表。如图1.15所示。

技术要点

该实例中主要使用Button控件和ListView控件制作导航菜单界面。在对ListView控件添加菜单信息时，必需在前面写入添加语句，如Listview.Items.Add，否则添加的菜单信息将替换前一条信息。单击相应的按钮时，应首先对ListView控件进行清空，否则在ListView控件中将继续上一次的添加菜单信息。

实现过程

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

（2）在Form1窗体上添加MenuStrip控件设计菜单栏；添加ToolStrip控件设计工具栏；添加SplitContainer控件、ImageList控件、3个Button控件和ListView控件用来制作左侧的导航栏。

（3）分别为MenuStrip控件、ToolStrip控件添加子项，将3个Button按钮和ListView控件加入SqlitContainer1.panel的左侧部分中。

（4）主要程序代码。

加载窗体时，设置左侧导航栏内容的实现代码如下：

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

           

        }

添加打开按钮的ListView控件显示内容的实现代码如下：

        private void button2_Click_1(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);

            listView1.Items.Add("近期工作计划", "近期工作计划", 4);

        }

添加编辑按钮的ListView控件显示内容的实现代码如下：

        private void button3_Click_1(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);

            listView1.Items.Add("编辑项目设计图", "编辑项目设计图", 6);

        }

添加设置按钮的ListView控件显示内容的实现代码如下：

        private void button1_Click_1(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);

        }

举一反三

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

  制作一个系统菜单。

  制作大型系统的导航界面。

实例016  图形化的导航界面

实例说明

如果以按钮来代替菜单的功能，会使界面更具有个性化。使操作者更易于操作。下面介绍按钮显示菜单的设计方法。运行本例，效果如图1.16所示。

图1.16  图形化的导航界面

技术要点

本实例主要通过设置Button控件的相应属性，确定其按钮的位置、文字、显示样式和要显示的图片等。下面对Button控件相应属性进行详细介绍。

1．Button. BackColor属性

获取或设置控件的背景色，其方法结构如下：

public override Color BackColor { get; set; }

l     属性值：一个表示背景色的Color值。

2．Button. FlatStyle属性

获取或设置按钮控件的平面样式外观。其代码如下：

public FlatStyle FlatStyle { get; set; }

l     属性值：FlatStyle 值之一。默认值为Standard。

3．Button. TextImageRelation属性

获取或设置文本和图像相互之间的相对位置。其代码如下：

public TextImageRelation TextImageRelation { get; set; }

l     属性值：TextImageRelation 的值之一。默认为Overlay。

实现过程

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

（2）在Form1窗体上添加MenuStrip控件用来设计菜单栏，添加ToolStrip控件用来设计工具栏，添加Panel控件、Button控件用来设计图形化的导航按钮。

（3）分别为MenuStrip控件、ToolStrip控件添加子项，并为Panel控件选择背景图片。

（4）将Button控件的BackColor属性设为“Transparent”、FlatStyle属性设置为“Flat”、TextImageRelation属性设置为“ImageBeforeText”。

（5）主要程序代码。

        private void button1_Click(object sender, EventArgs e)

        {

            //使子项可见

            button5.Visible = true;

            button6.Visible = true;

            button7.Visible = true;

        }

        private void button2_Click(object sender, EventArgs e)

        {

            //使子项可见

            button8.Visible = true;

            button9.Visible = true;

            button10.Visible = true;

        }

        private void button3_Click(object sender, EventArgs e)

        {

            //使子项可见

            button11.Visible = true;

            button12.Visible = true;

            button13.Visible = true;

        }

举一反三

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

  制作动态的按钮界面。

  制作动态的图片界面。