目录
一、涉及到的知识点
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();
}
#endregion
private 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、运行结果
