用图片框覆盖进度条 [英] Overlaying a Progress bar with a Picture Box

问题描述

大家好，



i想知道是否可以用图片框覆盖进度条。

我使用了教程对于初始屏幕 [ ^ ]然后想到一个不错的设计我的进度条。



我想到了这个想法，用图片框（有些部分是透明的）覆盖它会是一个好主意设计很容易。不幸的是，从那以后我无法显示进度条。



我试图将两者都放在表单上，​​后台进度条。将图片框设置为透明（backColor）只是让我显示我的表单的backColor。



将进度条放入图片框（通过代码）并设置它进入后台显示进度条在顶部（没什么神奇的）。



将图片框放入进度条显示与之前相同的结果，只是翻转。图片覆盖而不是透明。



我实际上不知道要发布哪个代码，因为我尝试使用设计师来解决这个问题但现在得到了卡住了。



如果您需要更多信息，请随时询问。



问候并感谢

Hi guys,

i wanted to know if it possible to overlay a progress bar with a picture box.
I used the Tutorial for a Splash Screen[^] and then thought about a nice design for my progress bar.

I came to the idea, that overlaying it with a picture box (where some parts are transparent) would be good idea to make a "design" quite easy. Unfortunately i could not manage to display the progress bar since then.

I tried to put both on a form, progress bar in the background. Setting the picture box to transparent (backColor) just leaves me with showing the backColor of my form.

Putting the progress bar into the picture box (via code) and setting it into background shows the progress bar on top (nothing magical).

Putting the picture box into the progress bar shows the same result like the one before, just flipped. The pic is overlaying and not "transparent".

I actually don't know which code to post since i tried using the designer to cope with that problem but now got stuck.

Please feel free to ask if you need more information.

Regards and thanks

推荐答案

创建一个UserControl。

我采用的方式是使用彩色图像和同一图片的单色版本，然后绘制每个部分的相应部分，以便在完成进度时将最初的单色图像更改为全彩色，但只绘制单个图像并使用透明背景进行其余操作非常简单。

这可能会有所帮助：

Create a UserControl.
The way I did mine was to have a "coloured"image and a "monochrome" version of the same picture, and then paint the appropriate parts of each so that the initially monochrome image changed to full colour as the progress completed, but it would be pretty simple to just draw a single image and use a transparent background for the rest.
This may help:

using System;
using System.ComponentModel;
using System.Drawing;
using System.Windows.Forms;

namespace UtilityControls
    {
    /// <summary>
    /// Draw a progress image from two images.
    /// </summary>
    /// <remarks>
    /// To use this control, add it to your form.
    /// Set the Max and Min properties to a sensible value for your task
    /// Set the ImageCompleted and ImageUncompleted images to the appropriate
    /// pictures. For example, set the Completed image to a full colour picture,
    /// and the Uncompleted image to a monochrome version.
    /// As your task progesses, set the Value proprty to the new status.
    /// Assuming Max is 100, Min is 0, and teh images are set as above, a
    /// gradual change of Value from 0 to 100 will convert the Monochrome 
    /// picture to full colour, showing the progress.
    /// </remarks>
    public partial class ProgressImage : UserControl
        {
        #region Constants
        #endregion
        #region Fields
        #region Internal Fields
        /// <summary>
        /// Internal, completed image at the size of the whole control.
        /// This saves having to re-size it in the paint event.
        /// </summary>
        private Bitmap bComp;
        /// <summary>
        /// Internal, uncompleted image at the size of the whole control.
        /// This saves having to re-size it in the paint event.
        /// </summary>
        private Bitmap bUncomp;
        #endregion
        #region Property Bases
        /// <summary>
        /// Internal, minimum value for progress
        /// </summary>
        private int min = 0;
        /// <summary>
        /// Internal, current value of progress
        /// </summary>
        private int value = 50;
        /// <summary>
        /// Internal, maximum value for progress
        /// </summary>
        private int max = 100;
        /// <summary>
        /// Internal, image to display in completed part of display
        /// </summary>
        private Image imageCompleted = null;
        /// <summary>
        /// Internal, image to display in completed part of display
        /// </summary>
        private Image imageUncompleted = null;
        #endregion
        #endregion
        #region Properties
        #region Visible Properties
        /// <summary>
        /// Minimum value for progress
        /// </summary>
        [Browsable(true),
        EditorBrowsable(EditorBrowsableState.Always),
        Description("Minimum value for progress"),
        Category("Progress")]
        public int Min
            {
            get { return min; }
            set
                {
                min = value;
                Invalidate();
                }
            }
        /// <summary>
        /// Current value of progress
        /// </summary>
        [Browsable(true),
        EditorBrowsable(EditorBrowsableState.Always),
        Description("Current value of progress"),
        Category("Progress")]
        public int Value
            {
            get { return this.value; }
            set
                {
                this.value = value;
                Invalidate();
                }
            }
        /// <summary>
        /// Maximum value for progress
        /// </summary>
        [Browsable(true),
        EditorBrowsable(EditorBrowsableState.Always),
        Description("Maximum value for progress"),
        Category("Progress")]
        public int Max
            {
            get { return max; }
            set
                {
                max = value;
                Invalidate();
                }
            }
        /// <summary>
        /// Image to display in completed part of display
        /// </summary>
        [Browsable(true),
        EditorBrowsable(EditorBrowsableState.Always),
        Description("Image to display in completed part of progress"),
        Category("Display")]
        public Image ImageCompleted
            {
            get { return imageCompleted; }
            set
                {
                imageCompleted = value;
                BuildImages();
                Invalidate();
                }
            }
        /// <summary>
        /// Image to display in uncompleted part of display
        /// </summary>
        [Browsable(true),
        EditorBrowsable(EditorBrowsableState.Always),
        Description("Image to display in uncompleted part of progress"),
        Category("Display")]
        public Image ImageUncompleted
            {
            get { return imageUncompleted; }
            set
                {
                imageUncompleted = value;
                BuildImages();
                Invalidate();
                }
            }
        #endregion
        #region Hide these properties
        /// <summary>
        /// Hidden property, inherited from UserControl but irrelevant
        /// </summary>
        [Browsable(false), EditorBrowsable(EditorBrowsableState.Never)]
        public override bool AllowDrop { get; set; }
        /// <summary>
        /// Hidden property, inherited from UserControl but irrelevant
        /// </summary>
        [Browsable(false), EditorBrowsable(EditorBrowsableState.Never)]
        public new AutoScaleMode AutoScaleMode { get; set; }
        /// <summary>
        /// Hidden property, inherited from UserControl but irrelevant
        /// </summary>
        [Browsable(false), EditorBrowsable(EditorBrowsableState.Never)]
        public override bool AutoScroll { get; set; }
        /// <summary>
        /// Hidden property, inherited from UserControl but irrelevant
        /// </summary>
        [Browsable(false), EditorBrowsable(EditorBrowsableState.Never)]
        public new Size AutoScrollMargin { get; set; }
        /// <summary>
        /// Hidden property, inherited from UserControl but irrelevant
        /// </summary>
        [Browsable(false), EditorBrowsable(EditorBrowsableState.Never)]
        public new Size AutoScrollMinSize { get; set; }
        /// <summary>
        /// Hidden property, inherited from UserControl but irrelevant
        /// </summary>
        [Browsable(false), EditorBrowsable(EditorBrowsableState.Never)]
        public override bool AutoSize { get; set; }
        /// <summary>
        /// Hidden property, inherited from UserControl but irrelevant
        /// </summary>
        [Browsable(false), EditorBrowsable(EditorBrowsableState.Never)]
        public new AutoSizeMode AutoSizeMode { get; set; }
        /// <summary>
        /// Hidden property, inherited from UserControl but irrelevant
        /// </summary>
        [Browsable(false), EditorBrowsable(EditorBrowsableState.Never)]
        public override AutoValidate AutoValidate { get; set; }
        /// <summary>
        /// Hidden property, inherited from UserControl but irrelevant
        /// </summary>
        [Browsable(false), EditorBrowsable(EditorBrowsableState.Never)]
        public override ImageLayout BackgroundImageLayout { get; set; }
        /// <summary>
        /// Hidden property, inherited from UserControl but irrelevant
        /// </summary>
        [Browsable(false), EditorBrowsable(EditorBrowsableState.Never)]
        public override ContextMenuStrip ContextMenuStrip { get; set; }
        /// <summary>
        /// Hidden property, inherited from UserControl but irrelevant
        /// </summary>
        [Browsable(false), EditorBrowsable(EditorBrowsableState.Never)]
        public override RightToLeft RightToLeft { get; set; }
        #endregion
        #endregion
        #region Regular Expressions
        #endregion
        #region Enums
        #endregion
        #region Constructors
        /// <summary>
        /// Construct a ProgressImage instance
        /// </summary>
        public ProgressImage()
            {
            InitializeComponent();
            SetStyle(ControlStyles.SupportsTransparentBackColor, true);
            BuildImages();
            }
        #endregion
        #region Events
        #region Event Constructors
        #endregion
        #region Event Handlers
        /// <summary>
        /// Draw the progress bar images.
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void ProgressImage_Paint(object sender, PaintEventArgs e)
            {
            Graphics graphics = e.Graphics;
            DoHorizontalImageReveal(graphics);
            }
        /// <summary>
        /// Resize control: rebuild the base images
        /// This saves time in the paint event.
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void ProgressImage_Resize(object sender, EventArgs e)
            {
            BuildImages();
            }
        #endregion
        #endregion

        #region Public Methods
        #endregion

        #region Private Methods
        /// <summary>
        /// Draw an image as the bar component
        /// Reveal an image with the current value.
        /// I.e. If the uncompleted image is a monochrome version of the 
        /// completed image, then as the value increases, the progress bar 
        /// would fill with colour, but the images would not appear to move.
        /// </summary>
        /// <param name="graphics"></param>
        private void DoHorizontalImageReveal(Graphics graphics)
            {
            int border = (Width * value) / (max - min);
            int remain = Width - border;
            if (bComp != null)
                {
                // Completed part
                // Can use unscaled and clipped - it is quicker.
                graphics.DrawImageUnscaledAndClipped(bComp, new Rectangle(0, 0, border, Height));
                }
            if (bUncomp != null)
                {
                // Uncompleted part
                // Can't use unscaled as need to offset into image.
                graphics.DrawImage(bUncomp, new Rectangle(border, 0, remain, Height), new Rectangle(border, 0, remain, Height), GraphicsUnit.Pixel);
                }
            }
        /// <summary>
        /// Build the complete and incomplete images
        /// </summary>
        private void BuildImages()
            {
            bComp = BuildImage(imageCompleted, Width, Height);
            bUncomp = BuildImage(imageUncompleted, Width, Height);
            }
        /// <summary>
        /// Build an image at the correct size
        /// </summary>
        /// <param name="image"></param>
        /// <param name="width"></param>
        /// <param name="height"></param>
        /// <returns></returns>
        private Bitmap BuildImage(Image image, int width, int height)
            {
            if (image == null)
                {
                return null;
                }
            return new Bitmap(image, width, height);
            }
        #endregion
        }
    }

[edit]I HATE F***ING MARKDOWN! Leave my code alone you stupid pile of cr@p![/edit]

[edit]I HATE F***ING MARKDOWN! Leave my code alone you stupid pile of cr@p![/edit]

这篇关于用图片框覆盖进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！