วิธีการสร้างแถบความคืบหน้าราบรื่นใน Visual C#

สำหรับรุ่น Microsoft Visual Basic .NET ของบทความนี้ ดู323088

สรุป

บทความนี้สาธิตวิธีการสร้างตัวอย่างง่าย กำหนดเองUserControlเพื่อสร้างเป็น เลื่อนแบบราบรื่นProgressBarควบคุม

ในรุ่นก่อนหน้านี้ของตัวควบคุมProgressBarเช่นรุ่นที่มาพร้อมกับตัวควบคุม ActiveX ตัวควบคุมทั่วไปของ Windows Microsoft คุณสามารถดูความคืบหน้าในสองมุมมองที่แตกต่างกัน เมื่อต้องการควบคุมมุมมองเหล่านี้ คุณใช้Scrollingคุณสมบัติ ซึ่งรวมถึงการตั้งค่ามาตรฐาน และราบรื่น เลื่อนแบบเรียบสร้างบล็อกทึบของสีที่แสดงถึงความก้าวหน้า และเลื่อนมาตรฐานปรากฏขึ้นเป็นส่วน ๆ และประกอบขึ้นเป็นชุดของบล็อกขนาดเล็กหรือสี่เหลี่ยมผืนผ้า

ตัวควบคุมProgressBarที่ให้มากับ Microsoft Visual C# สนับสนุนเฉพาะการตั้งค่ามาตรฐาน

ตัวอย่างรหัสในบทความนี้อธิบายวิธีการสร้างตัวควบคุมที่สนับสนุนคุณสมบัติต่อไปนี้:

  • ค่าต่ำสุด คุณสมบัตินี้ได้รับ หรือตั้งค่าต่ำสำหรับช่วงของค่าที่ถูกต้องสำหรับความคืบหน้า ค่าเริ่มต้นของคุณสมบัตินี้เป็นศูนย์ (0); คุณไม่สามารถตั้งค่าคุณสมบัตินี้เป็นค่าลบ
  • สูงสุด คุณสมบัตินี้ได้รับ หรือตั้งค่าช่วงของค่าที่ถูกต้องสำหรับความคืบหน้าด้านบน ค่าเริ่มต้นของคุณสมบัตินี้คือ 100
  • ค่า คุณสมบัตินี้ได้รับ หรือตั้งค่าระดับของความคืบหน้าปัจจุบัน ค่าต้องอยู่ในช่วงที่กำหนดค่าต่ำสุดและสูงสุดคุณสมบัติ
  • ProgressBarColor คุณสมบัตินี้ได้รับ หรือตั้งค่าสีของแถบความคืบหน้า

สร้างตัวควบคุมแบบกำหนดเองของ ProgressBar

  1. ทำตามขั้นตอนเหล่านี้เพื่อสร้างไลบรารีตัวควบคุม Windows โครงการใหม่ใน Visual C#:
    1. เริ่มต้น Microsoft Visual Studio
    2. บนเมนูแฟ้มชี้ไปที่สร้างแล้ว คลิ กโครงการ
    3. ในกล่องโต้ตอบโครงการใหม่คลิกVisual C#ภายใต้ชนิดโครงการและจากนั้น คลิกไลบรารีตัวควบคุมฟอร์ม Windowsภายใต้แม่แบบ

      หมายเหตุ ใน Visual Studio .NET 2003 คลิกโครงการ Visual C#แทนVisual C#
    4. ในกล่องชื่อพิมพ์SmoothProgressBarและจากนั้น คลิกตกลง
    5. ในโครงการ Explorer เปลี่ยนชื่อเริ่มต้นคลาสโมดูจาก UserControl1.cs ถึง SmoothProgressBar.cs
    6. ในหน้าต่างคุณสมบัติสำหรับวัตถุUserControlเปลี่ยนคุณสมบัติชื่อจากUserControl1เป็นSmoothProgressBar
  2. ณจุดนี้ คุณจะสืบทอดมาจากคลาสของตัวควบคุมนั้น และเพิ่มฟังก์ชันการทำงานเพิ่มเติมเพื่อขยายตัวควบคุมที่มีอยู่แล้ว อย่างไรก็ตาม คลาสProgressBarถูกปิดผนึกไว้และไม่มีการสืบทอด ดังนั้น คุณต้องสร้างตัวควบคุมจากจุดเริ่มต้น

    เพิ่มรหัสต่อไปนี้ลงในแฟ้ม SmoothProgressBar.cs ในคลาสที่ได้รับมาจาก UserControl

    หมายเหตุ ใน Visual Studio .NET 2003 เพิ่มรหัสการคลาสโมดูลของคลา UserControl ที่สืบทอดมา หลังจากส่วน "ตัวออกแบบฟอร์ม Windows สร้างรหัส"
    int min = 0;// Minimum value for progress rangeint max = 100;// Maximum value for progress range
    int val = 0;// Current progress
    Color BarColor = Color.Blue;// Color of progress meter

    protected override void OnResize(EventArgs e)
    {
    // Invalidate the control to get a repaint.
    this.Invalidate();
    }

    protected override void OnPaint(PaintEventArgs e)
    {
    Graphics g = e.Graphics;
    SolidBrush brush = new SolidBrush(BarColor);
    float percent = (float)(val - min) / (float)(max - min);
    Rectangle rect = this.ClientRectangle;

    // Calculate area for drawing the progress.
    rect.Width = (int)((float)rect.Width * percent);

    // Draw the progress meter.
    g.FillRectangle(brush, rect);

    // Draw a three-dimensional border around the control.
    Draw3DBorder(g);

    // Clean up.
    brush.Dispose();
    g.Dispose();
    }

    public int Minimum
    {
    get
    {
    return min;
    }

    set
    {
    // Prevent a negative value.
    if (value < 0)
    {
    min = 0;
    }

    // Make sure that the minimum value is never set higher than the maximum value.
    if (value > max)
    {
    min = value;
    min = value;
    }

    // Ensure value is still in range
    if (val < min)
    {
    val = min;
    }

    // Invalidate the control to get a repaint.
    this.Invalidate();
    }
    }

    public int Maximum
    {
    get
    {
    return max;
    }

    set
    {
    // Make sure that the maximum value is never set lower than the minimum value.
    if (value < min)
    {
    min = value;
    }

    max = value;

    // Make sure that value is still in range.
    if (val > max)
    {
    val = max;
    }

    // Invalidate the control to get a repaint.
    this.Invalidate();
    }
    }

    public int Value
    {
    get
    {
    return val;
    }

    set
    {
    int oldValue = val;

    // Make sure that the value does not stray outside the valid range.
    if (value < min)
    {
    val = min;
    }
    else if (value > max)
    {
    val = max;
    }
    else
    {
    val = value;
    }

    // Invalidate only the changed area.
    float percent;

    Rectangle newValueRect = this.ClientRectangle;
    Rectangle oldValueRect = this.ClientRectangle;

    // Use a new value to calculate the rectangle for progress.
    percent = (float)(val - min) / (float)(max - min);
    newValueRect.Width = (int)((float)newValueRect.Width * percent);

    // Use an old value to calculate the rectangle for progress.
    percent = (float)(oldValue - min) / (float)(max - min);
    oldValueRect.Width = (int)((float)oldValueRect.Width * percent);

    Rectangle updateRect = new Rectangle();

    // Find only the part of the screen that must be updated.
    if (newValueRect.Width > oldValueRect.Width)
    {
    updateRect.X = oldValueRect.Size.Width;
    updateRect.Width = newValueRect.Width - oldValueRect.Width;
    }
    else
    {
    updateRect.X = newValueRect.Size.Width;
    updateRect.Width = oldValueRect.Width - newValueRect.Width;
    }

    updateRect.Height = this.Height;

    // Invalidate the intersection region only.
    this.Invalidate(updateRect);
    }
    }

    public Color ProgressBarColor
    {
    get
    {
    return BarColor;
    }

    set
    {
    BarColor = value;

    // Invalidate the control to get a repaint.
    this.Invalidate();
    }
    }

    private void Draw3DBorder(Graphics g)
    {
    int PenWidth = (int)Pens.White.Width;

    g.DrawLine(Pens.DarkGray,
    new Point(this.ClientRectangle.Left, this.ClientRectangle.Top),
    new Point(this.ClientRectangle.Width - PenWidth, this.ClientRectangle.Top));
    g.DrawLine(Pens.DarkGray,
    new Point(this.ClientRectangle.Left, this.ClientRectangle.Top),
    new Point(this.ClientRectangle.Left, this.ClientRectangle.Height - PenWidth));
    g.DrawLine(Pens.White,
    new Point(this.ClientRectangle.Left, this.ClientRectangle.Height - PenWidth),
    new Point(this.ClientRectangle.Width - PenWidth, this.ClientRectangle.Height - PenWidth));
    g.DrawLine(Pens.White,
    new Point(this.ClientRectangle.Width - PenWidth, this.ClientRectangle.Top),
    new Point(this.ClientRectangle.Width - PenWidth, this.ClientRectangle.Height - PenWidth));
    }

  3. บนเมนูสร้างคลิกสร้างโซลูชันในการคอมไพล์โครงการ

สร้างโปรแกรมประยุกต์ไคลเอ็นต์ตัวอย่าง

  1. บนเมนูแฟ้มชี้ไปที่สร้างแล้ว คลิ กโครงการ
  2. ในกล่องโต้ตอบเพิ่มโครงการใหม่คลิกVisual C#ภายใต้ชนิดโครงการคลิกแอพลิเคชันฟอร์ม Windowsภายใต้แม่แบบและจากนั้น คลิกตกลง

    หมายเหตุ ใน Visual Studio .NET 2003 คลิกโครงการ Visual C#แทนVisual C#
  3. ทำตามขั้นตอนเหล่านี้เพื่อเพิ่มอินสแตนซ์ที่สองของตัวควบคุมSmoothProgressBarไปยังแบบฟอร์ม:
    1. บนเมนูเครื่องมือคลิกเลือกสินค้ากล่องเครื่องมือ

      หมายเหตุ ใน Visual Studio .NET 2003 คลิกเครื่องมือกำหนดเองแทนที่จะเลือกสินค้ากล่องเครื่องมือ
    2. คลิกที่แท็บคอมโพเนนต์ของกรอบงาน.NET
    3. คลิกเรียกดูและหาตำแหน่งที่ตั้งแฟ้ม SmoothProgressBar.dll ซึ่งคุณสร้างไว้ในส่วน "สร้างตัวควบคุมแบบกำหนดเองของ ProgressBar" แล้ว
    4. คลิก ตกลง ขอให้สังเกตว่า ตัวควบคุมSmoothProgressBarถูกเพิ่มลงในกล่องเครื่องมือ
    5. ลากสองอินสแตนซ์ของตัวควบคุมSmoothProgressBarจากกล่องเครื่องมือไปยังแบบฟอร์มเริ่มต้นของโครงการแอพลิเคชันของ Windows
  4. ลากตัวจับเวลาควบคุมจากกล่องเครื่องมือไปยังแบบฟอร์ม
  5. เพิ่มรหัสต่อไปนี้ไปยังเหตุการณ์ขีดของตัวควบคุมตัวจับเวลา:
    if (this.smoothProgressBar1.Value > 0){
    this.smoothProgressBar1.Value--;
    this.smoothProgressBar2.Value++;
    }
    else
    {
    this.timer1.Enabled = false;
    }

  6. ลากตัวควบคุมปุ่มจากกล่องเครื่องมือไปยังแบบฟอร์ม
  7. เพิ่มรหัสต่อไปนี้ให้คลิกที่เหตุการณ์ของตัวควบคุมปุ่ม:
    this.smoothProgressBar1.Value = 100;this.smoothProgressBar2.Value = 0;

    this.timer1.Interval = 1;
    this.timer1.Enabled = true;

  8. บนเมนูการดีบักคลิกเริ่มเพื่อเรียกใช้โครงการตัวอย่าง
  9. คลิกปุ่ม ขอให้สังเกตว่า ตัวบ่งชี้ความคืบหน้าสองแสดงข้อความ "ระหว่างดำเนินการ" ตัวบ่งชี้ความคืบหน้าหนึ่งแสดงความคืบหน้าในลักษณะเพิ่มขึ้น และตัวบ่งชี้ความคืบหน้าอื่น ๆ แสดงความคืบหน้าในการลดหรือลักษณะเริ่มต้น
คุณสมบัติ

รหัสบทความ: 323116 - การตรวจสอบครั้งสุดท้าย: 24 ก.พ. 2017 - ฉบับแก้ไข: 1

คำติชม