目录
一、涉及到的知识点
1、BackColor属性
2、FlatStyle属性
3、TextlmageRelation属性
4、其它共性设计
二、设计实例
1、 Resources.Designer.cs
2、Form1.Designer.cs
3、Form1.cs
4、运行结果
图形化导航用于代替文字导航，比如对Button控件 进行图形化导航：“图片+文本”。
一、涉及到的知识点
对Button控件 进行图形化导航会用到Button控件的BackColor、FlatStyle和TextlmageRelation属性。
1、BackColor属性
该属性主要用来获取或设置控件的背景色。语法格式如下：
public override Color BackColor {get;set;}
参数说明
属性值：一个表示背景色的Color值。2、FlatStyle属性
该属性主要用来获取或设置按钮控件的平面样式外观。语法格式如下：
public FlatStyle FlatStyle{get;set;}
参数说明
属性值：FlatStyle值之一。默认值为Standard。3、TextlmageRelation属性
该属性主要用来获取或设置文本和图像相互之间的相对位置。语法格式如下：
public TextlmageRelation TextImageRelation{get;set;}
参数说明
属性值：TextlmageRelation的值之一。默认值为Overlay。4、其它共性设计
方法中会使用共性设计：Resources.Designer.cs图片资源管理器的设计及资源的加载方法；详见本文作者写的其他文章：C#手动改变自制窗体的大小-CSDN博客 https://wenchm.blog.csdn.net/article/details/137027140
MenuStrip控件、SplitContainer控件、ImageList组件、toolStrip1控件的设计参考本文作者写的其他文章：C#设计一个带导航菜单的主界面的应用案例-CSDN博客 https://wenchm.blog.csdn.net/article/details/137610195
对Button控件图形化导航，本文使用了2种方法加载图片：其一，采用图片资源管理器加载图片；其二，采用ImageList组件的图片集合加载图片。
//
// button1~3采用资源管理器加载导航图片
//
button1.BackColor = Color.Transparent;
button1.FlatStyle = FlatStyle.Flat;
button1.Image = Properties.Resources._6;
button1.ImageAlign = ContentAlignment.MiddleLeft;
button1.Location = new Point(65, 94);
button1.Name = "button1";
button1.Size = new Size(100, 48);
button1.TabIndex = 0;
button1.Text = "基本信息";
button1.TextImageRelation = TextImageRelation.ImageBeforeText;
button1.UseVisualStyleBackColor = false;
button1.Click += Button1_Click;//
// button4~12采用ImageList控件图片集合加载导航图片
//
button4.BackColor = Color.Transparent;
button4.FlatStyle = FlatStyle.Flat;
button4.ImageAlign = ContentAlignment.MiddleLeft;
button4.ImageIndex = 5;
button4.ImageList = imageList1;
button4.Location = new Point(50, 94);
button4.Name = "button4";
button4.Size = new Size(100, 48);
button4.TabIndex = 0;
button4.Text = "供应商信息";
button4.TextImageRelation = TextImageRelation.ImageBeforeText;
button4.UseVisualStyleBackColor = false;
button4.Visible = false;二、设计实例
1、 Resources.Designer.cs
//------------------------------------------------------------------------------
// <auto-generated>
// 此代码由工具生成。
// 运行时版本:4.0.30319.42000
//
// 对此文件的更改可能会导致不正确的行为，并且如果
// 重新生成代码，这些更改将会丢失。
// </auto-generated>
//------------------------------------------------------------------------------namespace _177.Properties
{using System;/// <summary>/// 一个强类型的资源类，用于查找本地化的字符串等。/// </summary>// 此类是由 StronglyTypedResourceBuilder// 类通过类似于 ResGen 或 Visual Studio 的工具自动生成的。// 若要添加或移除成员，请编辑 .ResX 文件，然后重新运行 ResGen// (以 /str 作为命令选项)，或重新生成 VS 项目。[global::System.CodeDom.Compiler.GeneratedCodeAttribute("System.Resources.Tools.StronglyTypedResourceBuilder", "17.0.0.0")][global::System.Diagnostics.DebuggerNonUserCodeAttribute()][global::System.Runtime.CompilerServices.CompilerGeneratedAttribute()]internal class Resources{private static global::System.Resources.ResourceManager resourceMan;private static global::System.Globalization.CultureInfo resourceCulture;[global::System.Diagnostics.CodeAnalysis.SuppressMessageAttribute("Microsoft.Performance", "CA1811:AvoidUncalledPrivateCode")]internal Resources(){}/// <summary>/// 返回此类使用的缓存的 ResourceManager 实例。/// </summary>[global::System.ComponentModel.EditorBrowsableAttribute(global::System.ComponentModel.EditorBrowsableState.Advanced)]internal static global::System.Resources.ResourceManager ResourceManager{get{if (object.ReferenceEquals(resourceMan, null)){global::System.Resources.ResourceManager temp = new global::System.Resources.ResourceManager("_177.Properties.Resources", typeof(Resources).Assembly);resourceMan = temp;}return resourceMan;}}/// <summary>/// 重写当前线程的 CurrentUICulture 属性，对/// 使用此强类型资源类的所有资源查找执行重写。/// </summary>[global::System.ComponentModel.EditorBrowsableAttribute(global::System.ComponentModel.EditorBrowsableState.Advanced)]internal static global::System.Globalization.CultureInfo Culture{get{return resourceCulture;}set{resourceCulture = value;}}/// <summary>/// 查找 System.Drawing.Bitmap 类型的本地化资源。/// </summary>internal static System.Drawing.Bitmap _03{get{object obj = ResourceManager.GetObject("_03", resourceCulture);return ((System.Drawing.Bitmap)(obj));}}/// <summary>/// 查找 System.Drawing.Bitmap 类型的本地化资源。/// </summary>internal static System.Drawing.Bitmap _031{get{object obj = ResourceManager.GetObject("_031", resourceCulture);return ((System.Drawing.Bitmap)(obj));}}/// <summary>/// 查找 System.Drawing.Bitmap 类型的本地化资源。/// </summary>internal static System.Drawing.Bitmap _09{get{object obj = ResourceManager.GetObject("_09", resourceCulture);return ((System.Drawing.Bitmap)(obj));}}/// <summary>/// 查找 System.Drawing.Bitmap 类型的本地化资源。/// </summary>internal static System.Drawing.Bitmap _18{get{object obj = ResourceManager.GetObject("_18", resourceCulture);return ((System.Drawing.Bitmap)(obj));}}/// <summary>/// 查找 System.Drawing.Bitmap 类型的本地化资源。/// </summary>internal static System.Drawing.Bitmap _24{get{object obj = ResourceManager.GetObject("_24", resourceCulture);return ((System.Drawing.Bitmap)(obj));}}/// <summary>/// 查找 System.Drawing.Bitmap 类型的本地化资源。/// </summary>internal static System.Drawing.Bitmap _6{get{object obj = ResourceManager.GetObject("_6", resourceCulture);return ((System.Drawing.Bitmap)(obj));}}/// <summary>/// 查找 System.Drawing.Bitmap 类型的本地化资源。/// </summary>internal static System.Drawing.Bitmap _8{get{object obj = ResourceManager.GetObject("_8", resourceCulture);return ((System.Drawing.Bitmap)(obj));}}/// <summary>/// 查找 System.Drawing.Bitmap 类型的本地化资源。/// </summary>internal static System.Drawing.Bitmap C_编程词典{get{object obj = ResourceManager.GetObject("C_编程词典", resourceCulture);return ((System.Drawing.Bitmap)(obj));}}internal static Bitmap GetObject(string v){return v switch{"C_编程词典" => C_编程词典,"_09" => _09,"_8" => _8,"_18" => _18,"_6" => _6,"_03" => _03,"_24" => _24,"_031" => _031,_ => null};}}
}
2、Form1.Designer.cs
namespace _177
{partial class Form1{/// <summary>/// Required designer variable./// </summary>private System.ComponentModel.IContainer components = null;/// <summary>/// Clean up any resources being used./// </summary>/// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>protected override void Dispose(bool disposing){if (disposing && (components != null)){components.Dispose();}base.Dispose(disposing);}#region Windows Form Designer generated code/// <summary>/// Required method for Designer support - do not modify/// the contents of this method with the code editor./// </summary>private void InitializeComponent(){components = new System.ComponentModel.Container();System.ComponentModel.ComponentResourceManager resources = new System.ComponentModel.ComponentResourceManager(typeof(Form1));menuStrip1 = new MenuStrip();toolStripMenuItem1 = new ToolStripMenuItem();toolStripMenuItem2 = new ToolStripMenuItem();toolStripMenuItem3 = new ToolStripMenuItem();toolStripMenuItem4 = new ToolStripMenuItem();toolStripMenuItem5 = new ToolStripMenuItem();toolStrip1 = new ToolStrip();toolStripButton1 = new ToolStripButton();toolStripButton2 = new ToolStripButton();toolStripButton3 = new ToolStripButton();splitContainer1 = new SplitContainer();imageList1 = new ImageList(components);button1 = new Button();button2 = new Button();button3 = new Button();button4 = new Button();button5 = new Button();button6 = new Button();button7 = new Button();button8 = new Button();button9 = new Button();button10 = new Button();button11 = new Button();button12 = new Button();menuStrip1.SuspendLayout();toolStrip1.SuspendLayout();((System.ComponentModel.ISupportInitialize)splitContainer1).BeginInit();splitContainer1.Panel1.SuspendLayout();splitContainer1.Panel2.SuspendLayout();splitContainer1.SuspendLayout();SuspendLayout();// // menuStrip1// menuStrip1.Items.AddRange(new ToolStripItem[] { toolStripMenuItem1, toolStripMenuItem2, toolStripMenuItem3, toolStripMenuItem4, toolStripMenuItem5 });menuStrip1.Location = new Point(0, 0);menuStrip1.Name = "menuStrip1";menuStrip1.Size = new Size(644, 25);menuStrip1.TabIndex = 0;menuStrip1.Text = "menuStrip1";// // toolStripMenuItem1// toolStripMenuItem1.Name = "toolStripMenuItem1";toolStripMenuItem1.Size = new Size(68, 21);toolStripMenuItem1.Text = "系统设置";// // toolStripMenuItem2// toolStripMenuItem2.Name = "toolStripMenuItem2";toolStripMenuItem2.Size = new Size(92, 21);toolStripMenuItem2.Text = "基本信息管理";// // toolStripMenuItem3// toolStripMenuItem3.Name = "toolStripMenuItem3";toolStripMenuItem3.Size = new Size(92, 21);toolStripMenuItem3.Text = "登记信息管理";// // toolStripMenuItem4// toolStripMenuItem4.Name = "toolStripMenuItem4";toolStripMenuItem4.Size = new Size(68, 21);toolStripMenuItem4.Text = "信息查询";// // toolStripMenuItem5// toolStripMenuItem5.Name = "toolStripMenuItem5";toolStripMenuItem5.Size = new Size(68, 21);toolStripMenuItem5.Text = "日志管理";// // toolStrip1// toolStrip1.Items.AddRange(new ToolStripItem[] { toolStripButton1, toolStripButton2, toolStripButton3 });toolStrip1.Location = new Point(0, 25);toolStrip1.Name = "toolStrip1";toolStrip1.RenderMode = ToolStripRenderMode.Professional;toolStrip1.Size = new Size(644, 25);toolStrip1.TabIndex = 1;toolStrip1.Text = "toolStrip1";// // toolStripButton1// toolStripButton1.Image = Properties.Resources._03;toolStripButton1.ImageTransparentColor = Color.Magenta;toolStripButton1.Name = "toolStripButton1";toolStripButton1.Size = new Size(76, 22);toolStripButton1.Text = "系统登录";// // toolStripButton2// toolStripButton2.Image = Properties.Resources._8;toolStripButton2.ImageTransparentColor = Color.Magenta;toolStripButton2.Name = "toolStripButton2";toolStripButton2.Size = new Size(76, 22);toolStripButton2.Text = "零件入库";// // toolStripButton3// toolStripButton3.Image = Properties.Resources._18;toolStripButton3.ImageTransparentColor = Color.Magenta;toolStripButton3.Name = "toolStripButton3";toolStripButton3.Size = new Size(76, 22);toolStripButton3.Text = "零件出库";// // splitContainer1// splitContainer1.Dock = DockStyle.Fill;splitContainer1.Location = new Point(0, 50);splitContainer1.Name = "splitContainer1";// // splitContainer1.Panel1// splitContainer1.Panel1.BackgroundImage = Properties.Resources.C_编程词典;splitContainer1.Panel1.Controls.Add(button3);splitContainer1.Panel1.Controls.Add(button2);splitContainer1.Panel1.Controls.Add(button1);// // splitContainer1.Panel2// splitContainer1.Panel2.BackgroundImage = Properties.Resources.C_编程词典;splitContainer1.Panel2.BackgroundImageLayout = ImageLayout.Stretch;splitContainer1.Panel2.Controls.Add(button12);splitContainer1.Panel2.Controls.Add(button11);splitContainer1.Panel2.Controls.Add(button10);splitContainer1.Panel2.Controls.Add(button9);splitContainer1.Panel2.Controls.Add(button8);splitContainer1.Panel2.Controls.Add(button7);splitContainer1.Panel2.Controls.Add(button6);splitContainer1.Panel2.Controls.Add(button5);splitContainer1.Panel2.Controls.Add(button4);splitContainer1.Size = new Size(644, 396);splitContainer1.SplitterDistance = 214;splitContainer1.TabIndex = 0;// // imageList1// imageList1.ColorDepth = ColorDepth.Depth32Bit;imageList1.ImageStream = (ImageListStreamer)resources.GetObject("imageList1.ImageStream");imageList1.Tag = "";imageList1.TransparentColor = Color.Transparent;imageList1.Images.SetKeyName(0, "03.gif");imageList1.Images.SetKeyName(1, "6.gif");imageList1.Images.SetKeyName(2, "8.gif");imageList1.Images.SetKeyName(3, "09.gif");imageList1.Images.SetKeyName(4, "18.gif");imageList1.Images.SetKeyName(5, "24.gif");imageList1.Images.SetKeyName(6, "031.gif");// // button1// button1.BackColor = Color.Transparent;button1.FlatStyle = FlatStyle.Flat;button1.Image = Properties.Resources._6;button1.ImageAlign = ContentAlignment.MiddleLeft;button1.Location = new Point(65, 94);button1.Name = "button1";button1.Size = new Size(100, 48);button1.TabIndex = 0;button1.Text = "基本信息";button1.TextImageRelation = TextImageRelation.ImageBeforeText;button1.UseVisualStyleBackColor = false;button1.Click += Button1_Click;// // button2// button2.BackColor = Color.Transparent;button2.FlatStyle = FlatStyle.Flat;button2.Image = Properties.Resources._18;button2.Location = new Point(65, 166);button2.Name = "button2";button2.Size = new Size(100, 48);button2.TabIndex = 1;button2.Text = "信息查询";button2.TextImageRelation = TextImageRelation.ImageBeforeText;button2.UseVisualStyleBackColor = false;button2.Click += Button2_Click;// // button3// button3.BackColor = Color.Transparent;button3.FlatStyle = FlatStyle.Flat;button3.Image = Properties.Resources._6;button3.ImageAlign = ContentAlignment.MiddleLeft;button3.Location = new Point(65, 238);button3.Name = "button3";button3.Size = new Size(100, 48);button3.TabIndex = 2;button3.Text = "票号冲抵";button3.TextImageRelation = TextImageRelation.ImageBeforeText;button3.UseVisualStyleBackColor = false;button3.Click += Button3_Click;// // button4// button4.BackColor = Color.Transparent;button4.FlatStyle = FlatStyle.Flat;button4.ImageAlign = ContentAlignment.MiddleLeft;button4.ImageIndex = 5;button4.ImageList = imageList1;button4.Location = new Point(50, 94);button4.Name = "button4";button4.Size = new Size(100, 48);button4.TabIndex = 0;button4.Text = "供应商信息";button4.TextImageRelation = TextImageRelation.ImageBeforeText;button4.UseVisualStyleBackColor = false;button4.Visible = false;// // button5// button5.BackColor = Color.Transparent;button5.FlatStyle = FlatStyle.Flat;button5.ImageAlign = ContentAlignment.MiddleLeft;button5.ImageIndex = 2;button5.ImageList = imageList1;button5.Location = new Point(162, 94);button5.Name = "button5";button5.Size = new Size(100, 48);button5.TabIndex = 1;button5.Text = "零件信息";button5.TextImageRelation = TextImageRelation.ImageBeforeText;button5.UseVisualStyleBackColor = false;button5.Visible = false;// // button6// button6.BackColor = Color.Transparent;button6.FlatStyle = FlatStyle.Flat;button6.ImageIndex = 3;button6.ImageList = imageList1;button6.Location = new Point(274, 94);button6.Name = "button6";button6.Size = new Size(100, 48);button6.TabIndex = 2;button6.Text = "职务信息";button6.TextImageRelation = TextImageRelation.ImageBeforeText;button6.UseVisualStyleBackColor = false;button6.Visible = false;// // button7// button7.BackColor = Color.Transparent;button7.FlatStyle = FlatStyle.Flat;button7.ImageAlign = ContentAlignment.MiddleLeft;button7.ImageIndex = 5;button7.ImageList = imageList1;button7.Location = new Point(50, 166);button7.Name = "button7";button7.Size = new Size(100, 48);button7.TabIndex = 3;button7.Text = "结款查询";button7.TextImageRelation = TextImageRelation.ImageBeforeText;button7.UseVisualStyleBackColor = false;button7.Visible = false;// // button8// button8.BackColor = Color.Transparent;button8.FlatStyle = FlatStyle.Flat;button8.ImageAlign = ContentAlignment.MiddleLeft;button8.ImageIndex = 2;button8.ImageList = imageList1;button8.Location = new Point(162, 166);button8.Name = "button8";button8.Size = new Size(100, 48);button8.TabIndex = 4;button8.Text = "库存查询";button8.UseVisualStyleBackColor = false;button8.Visible = false;// // button9// button9.BackColor = Color.Transparent;button9.FlatStyle = FlatStyle.Flat;button9.ImageAlign = ContentAlignment.MiddleLeft;button9.Location = new Point(274, 166);button9.Name = "button9";button9.Size = new Size(100, 48);button9.TabIndex = 5;button9.Text = "报损查询";button9.TextImageRelation = TextImageRelation.ImageBeforeText;button9.UseVisualStyleBackColor = false;button9.Visible = false;// // button10// button10.BackColor = Color.Transparent;button10.FlatStyle = FlatStyle.Flat;button10.ImageIndex = 5;button10.ImageList = imageList1;button10.Location = new Point(50, 238);button10.Name = "button10";button10.Size = new Size(100, 48);button10.TabIndex = 6;button10.Text = "入库冲销";button10.TextImageRelation = TextImageRelation.ImageBeforeText;button10.UseVisualStyleBackColor = false;button10.Visible = false;// // button11// button11.BackColor = Color.Transparent;button11.FlatStyle = FlatStyle.Flat;button11.ImageAlign = ContentAlignment.MiddleLeft;button11.ImageIndex = 2;button11.ImageList = imageList1;button11.Location = new Point(162, 239);button11.Name = "button11";button11.Size = new Size(100, 48);button11.TabIndex = 7;button11.Text = "出库冲抵";button11.TextImageRelation = TextImageRelation.ImageBeforeText;button11.UseVisualStyleBackColor = false;button11.Visible = false;// // button12// button12.BackColor = Color.Transparent;button12.FlatStyle = FlatStyle.Flat;button12.ImageIndex = 3;button12.ImageList = imageList1;button12.Location = new Point(274, 239);button12.Name = "button12";button12.Size = new Size(100, 48);button12.TabIndex = 8;button12.Text = "报损冲抵";button12.TextImageRelation = TextImageRelation.ImageBeforeText;button12.UseVisualStyleBackColor = false;button12.Visible = false;// // Form1// AutoScaleDimensions = new SizeF(7F, 17F);AutoScaleMode = AutoScaleMode.Font;ClientSize = new Size(644, 446);Controls.Add(splitContainer1);Controls.Add(toolStrip1);Controls.Add(menuStrip1);Name = "Form1";StartPosition = FormStartPosition.CenterScreen;Text = "图形化的导航界面";menuStrip1.ResumeLayout(false);menuStrip1.PerformLayout();toolStrip1.ResumeLayout(false);toolStrip1.PerformLayout();splitContainer1.Panel1.ResumeLayout(false);splitContainer1.Panel2.ResumeLayout(false);((System.ComponentModel.ISupportInitialize)splitContainer1).EndInit();splitContainer1.ResumeLayout(false);ResumeLayout(false);PerformLayout();}#endregionprivate MenuStrip menuStrip1;private ToolStripMenuItem toolStripMenuItem1;private ToolStripMenuItem toolStripMenuItem2;private ToolStripMenuItem toolStripMenuItem3;private ToolStripMenuItem toolStripMenuItem4;private ToolStripMenuItem toolStripMenuItem5;private ToolStrip toolStrip1;private ToolStripButton toolStripButton1;private ToolStripButton toolStripButton2;private ToolStripButton toolStripButton3;private SplitContainer splitContainer1;private ImageList imageList1;private Button button3;private Button button2;private Button button1;private Button button12;private Button button11;private Button button10;private Button button9;private Button button8;private Button button7;private Button button6;private Button button5;private Button button4;}
}
3、Form1.cs
namespace _177
{public partial class Form1 : Form{public Form1(){InitializeComponent();}/// <summary>/// 基本信息/// </summary>private void Button1_Click(object sender, EventArgs e){button4.Visible = true;//设置button4控件可见button5.Visible = true;//设置button5控件可见button6.Visible = true;//设置button6控件可见}/// <summary>/// 信息查询/// </summary>private void Button2_Click(object sender, EventArgs e){button7.Visible = true;//设置button7控件可见button8.Visible = true;//设置button8控件可见button9.Visible = true;//设置button9控件可见}/// <summary>/// 票号冲抵/// </summary>private void Button3_Click(object sender, EventArgs e){button10.Visible = true;//设置button10控件可见button11.Visible = true;//设置button11控件可见button12.Visible = true;//设置button12控件可见}}
}
4、运行结果
