界面设计制作教程一

作者： /

设计效果图如：

需要准备好的设计图素材，作背景图使用：

使用visual studio，新建一个窗体，放上背景图和控件：

设计和样式程序详解：

首先配置当前窗口按钮全局样式效果：

/*把Test1窗体界面的按钮都加上边框阴影*/
#Test1 .Form button {
    border: solid 1px #c3c3c3;
    box-shadow: 0px 2px 1px 1px #c3c3c3,inset 0px -1px 1px 1px #cccccc;
    font-weight: 900;
    color: #555555;
    border-radius: 5px;
    background-clip: border-box;
}

[1]form背景图，可以用以下样式，或直接配置背景BackgroundImage = (Image)resources.GetObject(“$this.BackgroundImage”);

#Test1 .Form {
    background-color: rgb(255,228,192);
    background-image: url("Test1/Test1_bgimage.png");
    background-position: left top;
    background-repeat: no-repeat;
}

[2] 帮助按钮、打印按钮，设置属性button.TextAlign = ContentAlignment.MiddleRight，让文字居中靠右

/* 帮助图标*/
#Test1 #button16 {
    background-image: url("Test1/auth-sim-missing-symbolic.symbolic.png");
    background-position: 10% center;
    background-repeat: no-repeat;
    border: solid 1px #c3c3c3;
    box-shadow: 0px 2px 1px 1px #c3c3c3,inset 0px -1px 2px 1px #cccccc;
    padding: 1px 20px;
}
/* 打印图标*/
#Test1 #button17 {
    background-image: url("Test1/printer-printing.png");
    background-position: 10% center;
    background-repeat: no-repeat;
    border: solid 1px #c3c3c3;
    box-shadow: 0px 2px 1px 1px #c3c3c3,inset 0px -1px 2px 1px #cccccc;
    padding: 1px 20px;
}
/* 鼠标悬停背景色*/
#Test1 #button16:hover, #Test1 #button17:hover {
    background-color:rgb(40,128,192);
}

[3]工作流程指引按钮，用radioButton即可以达到单选效果，设置属性Appearance = Appearance.Button、TextAlign = ContentAlignment.MiddleCenter

/* 流程按钮效果*/
/*中间几个按钮设置背景图，全显示*/
#Test1 #radioButton2, #Test1 #radioButton3, #Test1 #radioButton4, #Test1 #radioButton5 {
    background-image: url("Test1/flowbutton.png");
    background-size: 100% 100%;
    border: none;
    box-shadow: none;
    color: #666666;
}
/*设置第一个按钮背景图*/
#Test1 #radioButton1 {
    background-image: url("Test1/flowbutton.png");
    background-size: auto 100%;
    background-position:right center;
    border: none;
    box-shadow: none;
    color: #666666;
}
/*设置最后一个按钮背景图*/
#Test1 #radioButton6 {
    background-image: url("Test1/flowbutton.png");
    background-size: auto 100%;
    background-position: left center;
    border: none;
    box-shadow: none;
    color: #666666;
}
/*鼠标悬停效果*/
#Test1 #radioButton1:hover, #Test1 #radioButton2:hover, #Test1 #radioButton3:hover, #Test1 #radioButton4:hover, #Test1 #radioButton5:hover, #Test1 #radioButton6:hover {
        color: blue;
    }
/*按钮选中后效果*/
#Test1 #radioButton1:checked, #Test1 #radioButton2:checked, #Test1 #radioButton3:checked, #Test1 #radioButton4:checked, #Test1 #radioButton5:checked, #Test1 #radioButton6:checked {
        background-image: url("Test1/flowbutton_checked.png");
        color: white;
    }

[4]表格容器， 使用tableLayoutPanel布局四方格，在方格放置panel容器，然后再每个方格容器里放置两个picturebox，设置BackColor = Color.White、BorderStyle = BorderStyle.FixedSingle，

[5]数据表格使用dataGridView，设置AlternatingRowsDefaultCellStyle和RowsDefaultCellStyle背景色，形成灰白间隔行，设置表头背景色ColumnHeadersDefaultCellStyle，文字居中

/*让表格标题头缩小到最小，同时设置背景色*/
#Test1 #dataGridView1 header * {
    margin: 0px;
    padding: 0px;
    background-color: rgb(40,128,192);
    color: #ffffff;
}

[6] 中间项目分析圆形图表，默认设置，使用picturebox绘制，Paint事件绘制

paint示例程序 
     /*示例程序*/
        private void Timer_Tick(object? sender, EventArgs e)
        {
        //用定时器刷新
            pictureBox_chart.Refresh();
        }
     private void pictureBox_chart_Paint(object sender, PaintEventArgs e)
     {
         Graphics g = e.Graphics;
         int radius = 30;
         int radiusdiff = 35;
         int angle = 20;
         int size = pictureBox_chart.Width;
         int val_chart1 = volatility(360,3.6, ref val_chart);

         g.FillEllipse(new SolidBrush(Color.AliceBlue), radius, radius, size - radius*2, size - radius * 2);
         //扇形
         radius = 30;
         //紫
         g.FillPie(new SolidBrush(Color.Lavender), radius, radius, size - radius * 2, size - radius * 2, -90+ val_chart1, angle);
         radius += radiusdiff;
         //黄
         g.FillPie(new SolidBrush(Color.LightGoldenrodYellow), radius, radius, size - radius * 2, size - radius * 2, -90 + val_chart1, angle);
         radius += radiusdiff;
         //蓝
         g.FillPie(new SolidBrush(Color.CadetBlue), radius, radius, size - radius * 2, size - radius * 2, -90 + val_chart1, angle);

         radius = 30;
         g.DrawEllipse(new Pen(new SolidBrush(Color.DeepSkyBlue),2), radius, radius, size - radius * 2, size - radius * 2);
         radius += radiusdiff;
         g.DrawEllipse(new Pen(new SolidBrush(Color.DeepSkyBlue), 2), radius, radius, size - radius * 2, size - radius * 2);
         radius += radiusdiff;
         g.DrawEllipse(new Pen(new SolidBrush(Color.DeepSkyBlue), 2), radius, radius, size - radius * 2, size - radius * 2);
         radius += radiusdiff;
         g.DrawEllipse(new Pen(new SolidBrush(Color.DeepSkyBlue), 2), radius, radius, size - radius * 2, size - radius * 2);


         radius = 30;
         for (int i = 1; i < 19; i++)
         {    
             g.DrawPie(new Pen(new SolidBrush(Color.DeepSkyBlue),2), radius, radius, size - radius * 2, size - radius * 2, -90, i* angle);
         }

         g.TranslateTransform(size / 2, size / 2);
         g.RotateTransform(-15f);
         for (int i = 1; i < 19; i++)
         {
             g.RotateTransform(20f);
             g.DrawString(i.ToString(), new Font(FontFamily.GenericSerif, 12), new SolidBrush(Color.Black), 12, 0 - (size / 2 - 10));
         }
         g.TranslateTransform(-size / 2, -size / 2);
         radius += 105;
         g.FillEllipse(new SolidBrush(Color.AliceBlue), radius, radius, size - radius * 2, size - radius * 2);
     }

[7]数据量指标，使用pictruebox显示，Paint事件绘制

paint示例程序 
/*示例程序*/
        private void Timer_Tick(object? sender, EventArgs e)
        {
        //用定时器刷新
            string format = DateTime.Now.ToString("yyyy-MM-dd (dddd) HH:mm:ss");
            if (timetext != format)
            {
                timetext = format;
                label16.Text = format; 
            }
            pictureBox_CC1.Refresh();
        }
        private void pictureBox_CC1_Paint(object sender, PaintEventArgs e)
        {
            int _val_cc1 = volatility(pictureBox_CC1.Height, 2.2, ref val_pc1);
            //根据数据量比例绘制颜色
            e.Graphics.FillRectangle(new SolidBrush(Color.LightSkyBlue), 0, _val_cc1, pictureBox_CC1.Width, pictureBox_CC1.Height);
        }

[8]图标按钮，设置TextAlign = ContentAlignment.BottomCenter文字居中靠下

/*设置各按钮的图标和边框阴影效果*/
#Test1 #button9 {
    background-image: url("Test1/dialog-error.png");
    background-position: center 30%;
    background-repeat: no-repeat;
    border: solid 1px #c3c3c3;
    box-shadow: 0px 2px 1px 1px #c3c3c3,inset 0px -1px 2px 1px #cccccc;
    background-clip: padding-box;
}

#Test1 #button10 {
    background-image: url("Test1/edit-undo-rtl.png");
    background-position: center 30%;
    background-repeat: no-repeat;
    border: solid 1px #c3c3c3;
    box-shadow: 0px 2px 1px 1px #c3c3c3,inset 0px -1px 2px 1px #cccccc;
}

#Test1 #button11 {
    background-image: url("Test1/emblem-urgent.png");
    background-position: center 30%;
    background-repeat: no-repeat;
    border: solid 1px #c3c3c3;
    box-shadow: 0px 2px 1px 1px #c3c3c3,inset 0px -1px 2px 1px #cccccc;
}

#Test1 #button12 {
    background-image: url("Test1/emblem-important.png");
    background-position: center 30%;
    background-repeat: no-repeat;
    border: solid 1px #c3c3c3;
    box-shadow: 0px 2px 1px 1px #c3c3c3,inset 0px -1px 2px 1px #cccccc;
}

#Test1 #button13 {
    background-image: url("Test1/dialog-warning.png");
    background-position: center 30%;
    background-repeat: no-repeat;
    border: solid 1px #c3c3c3;
    box-shadow: 0px 2px 1px 1px #c3c3c3,inset 0px -1px 2px 1px #cccccc;
}

#Test1 #button14 {
    background-image: url("Test1/document-print.png");
    background-position: center 30%;
    background-repeat: no-repeat;
    border: solid 1px #c3c3c3;
    box-shadow: 0px 2px 1px 1px #c3c3c3,inset 0px -1px 2px 1px #cccccc;
}

#Test1 #button15 {
    background-image: url("Test1/emblem-default.png");
    background-position: center 30%;
    background-repeat: no-repeat;
    border: solid 1px #c3c3c3;
    box-shadow: 0px 2px 1px 1px #c3c3c3,inset 0px -1px 2px 1px #cccccc;
}
/*鼠标悬停效果*/
#Test1 #button9:hover, #Test1 #button10:hover, #Test1 #button11:hover, #Test1 #button12:hover, #Test1 #button13:hover, #Test1 #button14:hover, #Test1 #button15:hover {
        background-color: rgb(40,128,192);
        border: solid 1px rgb(40,128,192);
        box-shadow: none;
        color: #ffffff;
        border-radius: 5px;
        background-clip: border-box;
        background-blend-mode:color;
    }

[9] 底部按钮，默认设置

相关文章

滚动至顶部