请问这个油罐液位监控的界面怎麽实现

Question

C# winform实现图片里的效果，油罐那个肯定是一张图片，关键是油高和水位高度，油高永远大于水位高度

想到用两个panel一个panel是蓝色代表水位 一个panel黄色代表油 然后控制panel 的高度

但是发现实现不了 考虑用GDI+但是功力不够

目前我使用下面的控件能完成的，中间那个是镂空的效果，我控制label 的Y坐标向下移动向上移动

但是连那个油罐也一起移动了，想用WPF但是对WPF不熟悉

---

给我写信： QQ我：

Answer 1

代码：

namespace WindowsFormsApplication1
{
    public partial class Form3 : Form
    {
        public Form3()
        {
            InitializeComponent();
            shapeContainer1.Dock = DockStyle.Fill;
            //rectangleShape3.Size = shapeContainer3.Size;
            //shapeContainer3.Location = new Point(0, 0);
            label1.Size = new Size(rectangleShape1.Width - 8, rectangleShape1.Height);
            label1.Location = new Point(rectangleShape1.Location.X + 5, rectangleShape1.Location.Y);
        }

  

        private void button1_Click(object sender, EventArgs e)
        {
      
            int dd = label1.Location.Y;
            label1.Location = new Point(rectangleShape1.Location.X + 5, dd + 5);
        }

    }
}

---

给我写信： QQ我：

Answer 2

---

给我写信： QQ我：

Answer 3

你好，

请问你是如何放置你的油罐图片的呢？用的panel？还是rectangleShape1？

对于你的描述，我有几个不明白的地方，希望你可以详细解释一下：

1.在一楼， 你说需要两个panel代表水位和油位，可是你的代码中并没有panel出现。为什么？

2.据我猜测，你是用的label来代表的水位，控制其坐标来实现上下移动。你到底是想用label还是panel呢？

3.油位和水位有什么关系吗？会同时出现在油罐中吗？

4.rectangleShape1是用来控制什么的？

我只是用的普通图片测试一下，所以如果设置panel背景图片为油罐的话，水位是可以上下移动，且油罐不会移动。如果不对的话，可否提供你的油罐图片呢？

谢谢。

---

Lisa Zhu [MSFT]
MSDN Community Support | Feedback to us
Develop and promote your apps in Windows Store
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 4

您好， 

你的那个镂空效果怎么做的？ 

理论上说，你可以通过shapeContainer的paint事件来做，如果你以上方案不行的话。

如果你能提供一个测试工程，我将非常乐意帮忙看看。

---

Mike Feng
MSDN Community Support | Feedback to us
Develop and promote your apps in Windows Store
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 5

楼主，

我根据你提供的信息， 做了个模型， 你瞧瞧：

    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            this.ovalShape1.BringToFront();
        }

        private void ovalShape1_Paint(object sender, PaintEventArgs e)
        {
            Graphics g = e.Graphics;
            OvalShape osh = (OvalShape)sender;

            // Create a GraphicsPath object.
            GraphicsPath myPath = new GraphicsPath();

            // Set up and call AddArc, and close the figure.
            Rectangle rect = new Rectangle(osh.Location.X,
                osh.Location.Y,
                osh.DisplayRectangle.Width,
                osh.DisplayRectangle.Height);
            myPath.StartFigure();
            myPath.AddArc(rect, 270 + Offset, 360 - 2 * Offset);
            myPath.CloseFigure();

            g.FillRegion(Brushes.Green, new Region(myPath));
        }
        private int Offset = 0;
        private void button1_Click(object sender, EventArgs e)
        {
            Offset += 10;
            if (Offset <= 180)
            {
                this.label1.Text = "Offset: " + Offset;
                ovalShape1.Invalidate();
            }
        }
    }

效果图：

Best regards,

---

Mike Feng
MSDN Community Support | Feedback to us
Develop and promote your apps in Windows Store
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 6

现在改了，发现镂空无法完成，而且不够3D经理说

.油位和水位有什么关系吗？会同时出现在油罐中吗？

油位肯定大于水位的，因为油密度比水小，所以肯定在水的上面，而油的高度是从水面开始计算的

不是从油罐的底部开始计算的，因为油是浮于水上面

油罐里面可能同时存在油和水，或者两者都没有，或者只有油没有水，或者只有水没有油

这4种可能性

现在用另外一种方法做了

---

给我写信： QQ我：

Answer 7

---

给我写信： QQ我：

Answer 8

嗯，看着 挺漂亮。

能共享下你怎么做的吗？谢谢

---

Mike Feng
MSDN Community Support | Feedback to us
Develop and promote your apps in Windows Store
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 9

---

给我写信： QQ我：

OK， 我猜想你是不同的pictureBox里面放置不同的图片显示不同的效果，现在你应该是想移动黄色区域来显示不同的油量水位吧，而你的黄色区域块也是在一个picturebox里面的，然后你现在的做法是移动这个picturebox的位置即 location属性，而且你已经实现了，对吧？？

---

Mike Feng
MSDN Community Support | Feedback to us
Develop and promote your apps in Windows Store
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 10

现在经理要的是下图这种效果，现在我叫美工把图片切换为两部分一部分为下图的第一个框的部分那个圆形

第二部分是第二个框的部分，那个长方形，圆形部分控制在5个像素高，两个部分都用pictureobox来装载

这两个picturebox都在一个panel里 panel装载的图片部分如第二张图片 像油罐的剖切面

不过具体要星期日才能看出效果因为明天我们休息一天

---

给我写信： QQ我：

Answer 11

好 等你好消息咯

---

Mike Feng
MSDN Community Support | Feedback to us
Develop and promote your apps in Windows Store
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 12

我先设置这4个picturebox的dock为bottom，这4个pic都附着在同一个panel里，我是控制这4个pic

的高度不是location，因为设置为bottom的话那么同时只能有一个在底部，其他的只能在另一个的

上面，panel的图片就是我昨晚贴出来的第二张图片，灰色的那张

明天看一下效果吧，谢谢你们的答复

为什么要4个pic，因为两个pic先装载油 另外两个pic装载水 为什麽要使用两个我昨晚已经说了

---

给我写信： QQ我：

Answer 13

谢谢你的update。

从你的回复来看，其实你一直都知道应该怎么做的，而且一直在分享着你的思路。非常感谢！

---

Mike Feng
MSDN Community Support | Feedback to us
Develop and promote your apps in Windows Store
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 14

主要是因为做不来那个效果，所以经理又改了 现在的效果如下图

---

给我写信： QQ我：

Answer 15

之前使用的是VB POWER PACK的控件

现在的排版

---

给我写信： QQ我：

Answer 16

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Drawing;
using System.Data;
using System.Drawing.Drawing2D;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace MonitorLevelMeter.LevelMeterUserControl
{
    public partial class OilCan : UserControl
    {
        #region 全局变量

        /// <summary>
        /// 控件油罐高度
        /// </summary>
        private int _oilCanControlHeight;

        /// <summary>
        /// 控件油高
        /// </summary>
        private int _oilControlHeight;

        /// <summary>
        /// 控件水高
        /// </summary>
        private int _waterControlHeight;


        /// <summary>
        /// 油罐号
        /// </summary>
        private int _oilCanNO;

        /// <summary>
        /// 油品
        /// </summary>
        private string _oilType;


        /// <summary>
        /// 倾斜校正
        /// </summary>
        private int _emendation;

        /// <summary>
        /// 最小容积
        /// </summary>
        private int _leastCubage;


        /// <summary>
        /// 最大容积
        /// </summary>
        private int _mostCubage;

        /// <summary>
        /// 报警水位
        /// </summary>
        private int _warningPostion;

        /// <summary>
        /// 最低液位
        /// </summary>
        private int _lowestPostion;

        /// <summary>
        /// 最高液位
        /// </summary>
        private int _highestPostion;

        /// <summary>
        /// 油罐高度
        /// </summary>
        private double _oilCanHeight;

        /// <summary>
        /// 油罐温度
        /// </summary>
        private string _oilCanTemperature;

        /// <summary>
        /// 油高
        /// </summary>
        private double _oilHeight;

        /// <summary>
        /// 水高
        /// </summary>
        private double _waterHeight;

        #endregion

        public OilCan()
        {
            InitializeComponent();
        }

        #region 公有属性

        #endregion

        /// <summary>
        /// 油罐号
        /// </summary>
        public int OilCanNo
        {
            get { return _oilCanNO; }
            set { _oilCanNO = value; }
        }

        /// <summary>
        /// 油品
        /// </summary>
        public string OilType
        {
            get { return _oilType; }
            set { _oilType = value; }
        }

        /// <summary>
        /// 油罐高度
        /// </summary>
        public double OilCanHeight
        {
            get { return _oilCanHeight; }
            set { _oilCanHeight = value; }
        }

        /// <summary>
        /// 倾斜校正
        /// </summary>
        public int Emendation
        {
            get { return _emendation; }
            set { _emendation = value; }
        }

        /// <summary>
        /// 最小容积
        /// </summary>
        public int LeastCubage
        {
            get { return _leastCubage; }
            set { _leastCubage = value; }
        }

        /// <summary>
        /// 最大容积
        /// </summary>
        public int MostCubage
        {
            get { return _mostCubage; }
            set { _mostCubage = value; }
        }

        /// <summary>
        /// 报警水位
        /// </summary>
        public int WarningPostion
        {
            get { return _warningPostion; }
            set { _warningPostion = value; }
        }

        /// <summary>
        /// 最低液位
        /// </summary>
        public int LowestPostion
        {
            get { return _lowestPostion; }
            set { _lowestPostion = value; }
        }

        /// <summary>
        /// 最高液位
        /// </summary>
        public int HighestPostion
        {
            get { return _highestPostion; }
            set { _highestPostion = value; }
        }

        /// <summary>
        /// 油高
        /// </summary>
        public double OilHeight
        {
            get { return _oilHeight; }
            set
            {
                _oilHeight = value;

                double liquidHeigth = _oilHeight + _waterHeight;
                if (liquidHeigth > _oilCanHeight)
                {
                    return;
                }
                if (_oilHeight < _oilCanHeight*0.01)
                {
                    OilControlHeight = 0;
                    return;
                }
                else
                {
                    decimal result = Convert.ToDecimal(Math.Round(_oilHeight/_oilCanHeight, 2));
                    int st = Convert.ToInt32(result*_oilCanControlHeight);
                    OilControlHeight = st;
                }
            }
        }

        /// <summary>
        /// 水高
        /// </summary>
        public double WaterHeight
        {
            get { return _waterHeight; }
            set
            {
                _waterHeight = value;
                double liquidHeigth = _oilHeight + _waterHeight;

                if (liquidHeigth > _oilCanHeight)
                {
                    return;
                }
                if (_waterHeight < _oilCanHeight*0.01)
                {
                    WaterControlHeight = 0;
                    return;
                }
                else
                {
                    decimal result = Convert.ToDecimal(Math.Round(_waterHeight/_oilCanHeight, 2));
                    int st = Convert.ToInt32(result*_oilCanControlHeight);
                    WaterControlHeight = st;
                }
            }
        }

        /// <summary>
        /// 控件油罐高度
        /// </summary>
        public int OilCanControlHeight
        {
            get { return _oilCanControlHeight; }
            set { _oilCanControlHeight = value; }
        }

        /// <summary>
        /// 控件油高
        /// </summary>
        public int OilControlHeight
        {
            get { return _oilControlHeight; }
            set
            {
                _oilControlHeight = value;
                int liquidHeigth = _oilControlHeight + _waterControlHeight;

                if (liquidHeigth > _oilCanControlHeight)
                {
                    return;
                }

                if (_oilControlHeight == 0 && _waterControlHeight == 0)
                {
                    pictureBox1.BackgroundImage = null;
                    pictureBox2.BackgroundImage = null;
                    pictureBox3.BackgroundImage = null;
                    pictureBox4.BackgroundImage = null;
                    pic_OilCanTail.BackgroundImage =
                        Image.FromFile(Application.StartupPath + @"\images\bottomandair.png");
                }
                else if (_oilControlHeight > 0 && _waterControlHeight > 0)
                {
                    pictureBox4.Height = 15;
                    pictureBox2.Height = 15;
                    pictureBox4.BackgroundImage = Image.FromFile(Application.StartupPath + @"\images\oilandair.png");
                    pictureBox2.BackgroundImage = Image.FromFile(Application.StartupPath + @"\images\border.png");
                    pic_OilCanTail.BackgroundImage =
                        Image.FromFile(Application.StartupPath + @"\images\bottomandwater.png");
                    pictureBox3.Height = _oilControlHeight;
                    pictureBox1.Height = _waterControlHeight;

                    pictureBox3.BackgroundImage = Image.FromFile(Application.StartupPath + @"\images\oil.png");
                    pictureBox1.BackgroundImage = Image.FromFile(Application.StartupPath + @"\images\water.png");
                }
                else if (_oilControlHeight > 0 && _waterControlHeight == 0)
                {
                    pictureBox3.BackgroundImage = null;
                    pictureBox4.BackgroundImage = null;
                    pictureBox2.Height = 15;
                    pictureBox1.Height = _oilControlHeight;
                    pictureBox2.BackgroundImage = Image.FromFile(Application.StartupPath + @"\images\oilandair.png");
                    pictureBox1.BackgroundImage = Image.FromFile(Application.StartupPath + @"\images\oil.png");
                    pic_OilCanTail.BackgroundImage =
                        Image.FromFile(Application.StartupPath + @"\images\bottomandoil.png");
                }
                else if (_oilControlHeight == 0 && _waterControlHeight > 0)
                {
                    pictureBox3.BackgroundImage = null;
                    pictureBox4.BackgroundImage = null;
                    pictureBox2.Height = 15;
                    pictureBox1.Height = _waterControlHeight;
                    pictureBox2.BackgroundImage = Image.FromFile(Application.StartupPath + @"\images\waterandair.png");
                    pictureBox1.BackgroundImage = Image.FromFile(Application.StartupPath + @"\images\water.png");
                    pic_OilCanTail.BackgroundImage =
                        Image.FromFile(Application.StartupPath + @"\images\bottomandwater.png");
                }
            }
        }

        /// <summary>
        /// 控件水高
        /// </summary>
        public int WaterControlHeight
        {
            get { return _waterControlHeight; }
            set
            {
                _waterControlHeight = value;
                int liquidHeigth = _oilControlHeight + _waterControlHeight;

                if (liquidHeigth > _oilCanControlHeight)
                {
                    return;
                }
                if (_oilControlHeight == 0 && _waterControlHeight == 0)
                {
                    pictureBox1.BackgroundImage = null;
                    pictureBox2.BackgroundImage = null;
                    pictureBox3.BackgroundImage = null;
                    pictureBox4.BackgroundImage = null;
                    pic_OilCanTail.BackgroundImage =
                        Image.FromFile(Application.StartupPath + @"\images\bottomandair.png");
                }
                else if (_oilControlHeight > 0 && _waterControlHeight > 0)
                {
                    pictureBox4.Height = 15;
                    pictureBox2.Height = 15;
                    pictureBox4.BackgroundImage = Image.FromFile(Application.StartupPath + @"\images\oilandair.png");
                    pictureBox2.BackgroundImage = Image.FromFile(Application.StartupPath + @"\images\border.png");
                    pic_OilCanTail.BackgroundImage =
                        Image.FromFile(Application.StartupPath + @"\images\bottomandwater.png");
                    pictureBox3.Height = _oilControlHeight;
                    pictureBox1.Height = _waterControlHeight;

                    pictureBox3.BackgroundImage = Image.FromFile(Application.StartupPath + @"\images\oil.png");
                    pictureBox1.BackgroundImage = Image.FromFile(Application.StartupPath + @"\images\water.png");
                }
                else if (_oilControlHeight > 0 && _waterControlHeight == 0)
                {
                    pictureBox3.BackgroundImage = null;
                    pictureBox4.BackgroundImage = null;
                    pictureBox2.Height = 15;
                    pictureBox1.Height = _oilControlHeight;
                    pictureBox2.BackgroundImage = Image.FromFile(Application.StartupPath + @"\images\oilandair.png");
                    pictureBox1.BackgroundImage = Image.FromFile(Application.StartupPath + @"\images\oil.png");
                    pic_OilCanTail.BackgroundImage =
                        Image.FromFile(Application.StartupPath + @"\images\bottomandoil.png");
                }
                else if (_oilControlHeight == 0 && _waterControlHeight > 0)
                {
                    pictureBox3.BackgroundImage = null;
                    pictureBox4.BackgroundImage = null;
                    pictureBox2.Height = 15;
                    pictureBox1.Height = _waterControlHeight;
                    pictureBox2.BackgroundImage = Image.FromFile(Application.StartupPath + @"\images\waterandair.png");
                    pictureBox1.BackgroundImage = Image.FromFile(Application.StartupPath + @"\images\water.png");
                    pic_OilCanTail.BackgroundImage =
                        Image.FromFile(Application.StartupPath + @"\images\bottomandwater.png");
                }
            }
        }

        /// <summary>
        /// 油罐温度
        /// </summary>
        public string OilCanTemperature
        {
            get { return _oilCanTemperature; }
            set { _oilCanTemperature = value; }
        }

        /// <summary>
        /// 油罐控件装载
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void OilCan_Load(object sender, EventArgs e)
        {
            //预留10个像素 来装载空隙，比如椭圆
            this.Size = new Size(210, 410);
            sc_Bottom.SplitterDistance = 380;

            pictureBox4.Height = 15;
            pictureBox2.Height = 15;
            pictureBox4.BackgroundImage = null;
            pictureBox2.BackgroundImage = null;

            //设置油罐的头部 底部 和中间的高度
            tlp_OilCan.RowStyles[0].SizeType = SizeType.Absolute;
            tlp_OilCan.RowStyles[1].SizeType = SizeType.Percent;
            tlp_OilCan.RowStyles[2].SizeType = SizeType.Absolute;
            tlp_OilCan.RowStyles[0].Height = 30;
            tlp_OilCan.RowStyles[2].Height = 20;

            pic_OilCanHead.BackgroundImage = Image.FromFile(Application.StartupPath + @"\images\head.png");
            pic_OilCanTail.BackgroundImage = Image.FromFile(Application.StartupPath + @"\images\bottomandair.png");
            pl_OilCanMiddle.BackgroundImage = Image.FromFile(Application.StartupPath + @"\images\middle.png");

            sc_Bottom.IsSplitterFixed = true;
            this._oilCanControlHeight = pl_OilCanMiddle.Height - 30;

            #region 把控件里的所有事件重定向到油罐控件本身

            //MouseEnter事件
            this.pl_OilCanMiddle.MouseEnter += new EventHandler(sc_Bottom_MouseEnter);
            tlp_OilCan.MouseEnter += new EventHandler(sc_Bottom_MouseEnter);
            pic_OilCanHead.MouseEnter += new EventHandler(sc_Bottom_MouseEnter);
            pic_OilCanTail.MouseEnter += new EventHandler(sc_Bottom_MouseEnter);
            //pictureBox1.MouseEnter += new EventHandler(sc_Bottom_MouseEnter);
            //pictureBox2.MouseEnter += new EventHandler(sc_Bottom_MouseEnter);
            //pictureBox3.MouseEnter += new EventHandler(sc_Bottom_MouseEnter);
            //pictureBox4.MouseEnter += new EventHandler(sc_Bottom_MouseEnter);
            //lbl_OilCanNO.MouseEnter += new EventHandler(sc_Bottom_MouseEnter);
            //lbl_OilType.MouseEnter += new EventHandler(sc_Bottom_MouseEnter);
            //labelX1.MouseEnter += new EventHandler(sc_Bottom_MouseEnter);
            //labelX3.MouseEnter += new EventHandler(sc_Bottom_MouseEnter);

            //MouseLeave事件
            this.pl_OilCanMiddle.MouseLeave += new EventHandler(sc_Bottom_MouseLeave);
            tlp_OilCan.MouseLeave += new EventHandler(sc_Bottom_MouseLeave);
            pic_OilCanHead.MouseLeave += new EventHandler(sc_Bottom_MouseLeave);
            pic_OilCanTail.MouseLeave += new EventHandler(sc_Bottom_MouseLeave);
            //pictureBox1.MouseLeave += new EventHandler(sc_Bottom_MouseLeave);
            //pictureBox2.MouseLeave += new EventHandler(sc_Bottom_MouseLeave);
            //pictureBox3.MouseLeave += new EventHandler(sc_Bottom_MouseLeave);
            //pictureBox4.MouseLeave += new EventHandler(sc_Bottom_MouseLeave);
            //lbl_OilCanNO.MouseLeave += new EventHandler(sc_Bottom_MouseLeave);
            //lbl_OilType.MouseLeave += new EventHandler(sc_Bottom_MouseLeave);
            //labelX1.MouseLeave += new EventHandler(sc_Bottom_MouseLeave);
            //labelX3.MouseLeave += new EventHandler(sc_Bottom_MouseLeave);

            //MouseHover事件
            this.pl_OilCanMiddle.MouseHover += new EventHandler(sc_Bottom_MouseHover);
            tlp_OilCan.MouseHover += new EventHandler(sc_Bottom_MouseHover);
            pic_OilCanHead.MouseHover += new EventHandler(sc_Bottom_MouseHover);
            pic_OilCanTail.MouseHover += new EventHandler(sc_Bottom_MouseHover);
            pictureBox1.MouseHover += new EventHandler(sc_Bottom_MouseHover);
            pictureBox2.MouseHover += new EventHandler(sc_Bottom_MouseHover);
            pictureBox3.MouseHover += new EventHandler(sc_Bottom_MouseHover);
            pictureBox4.MouseHover += new EventHandler(sc_Bottom_MouseHover);
            lbl_OilCanNO.MouseHover += new EventHandler(sc_Bottom_MouseHover);
            lbl_OilType.MouseHover += new EventHandler(sc_Bottom_MouseHover);
            labelX1.MouseHover += new EventHandler(sc_Bottom_MouseHover);
            labelX3.MouseHover += new EventHandler(sc_Bottom_MouseHover);

            #endregion
        }

        #region 重写事件

        public new event EventHandler MouseEnter;
        public new event EventHandler MouseLeave;
        public new event EventHandler MouseHover;

        #endregion

        private void sc_Bottom_MouseEnter(object sender, EventArgs e)
        {
            if (MouseEnter != null)
            {
                MouseEnter(this, e);
            }
        }

        private void sc_Bottom_MouseLeave(object sender, EventArgs e)
        {
            if (MouseLeave != null)
            {
                MouseLeave(this, e);
            }
        }

        private void sc_Bottom_MouseHover(object sender, EventArgs e)
        {
            if (MouseHover != null)
            {
                MouseHover(this, e);
            }
        }
    }
}

---

给我写信： QQ我：