Vlastné progressbar v C #

V tomto tutoriále si popíšeme ako jednoducho vytvoriť progressbar (ďalej len PB) s vlastným vzhľadom. Vo svojej podstate sa už potom nejde o PB ako taký, ale urobíme si k nemu metódy, aby fungoval rovnako ako normálne. Využijeme na to panely, pretože majú tú výhodu, že sa u nich dá nastaviť Tile (opakovanie) obrázka v pozadí.

Najprv si vytvoríme nejaké pozadie pre náš PB, dávam prednosť šírke 1px a výšku si môžeme nastaviť ľubovoľnú.

(Obrázok je 16x zväčšený)

Odporúčam si pre jednoduchšie umiestňovanie vytvoriť panel, ktorý bude slúžiť ako "krabice" pre ostatné súčasti nášho PB. Zjednoduší nám to neskoršiu prácu s naším PB, napríklad pri premiestňovaní. Tento panel môže mať ľubovoľnú veľkosť, ja pre názornosť použijem o 1px na šírku väčšia ako samotný PB, teda 152px a výšku si dám treba 30px.

Do tohto hlavného panela si potom umiestnime ďalší panel, ktorý už bude mať však, jasnejšie veľkosť, Výšku si nastavíme rovnakú ako u vytvoreného pozadie, a šírku však môžeme mať ľubovoľnú, ja som použil šírku 150px.

Ďalej je potrebné si vytvoriť ešte popredia nášho PB, to by malo mať rovnakú veľkosť ako pozadie.

Tomuto panelu nastavíme ako pozadie náš druhý obrazok, ktorý chceme mať v popredí. Dôležité je, aby bol náš panel popredia nad panelom pozadí, keď to tak nie je tak stačí dať tlačidlo BringToFront, alebo si do kódu pod InitializeComponent (); umiestniť: [názov panelu] .BringToFront (); Potom čo vieme ako náš panel popredí vyzerá tak mu nastavíme šírku na 0px.

Teraz by mal náš PB vyzerať zhruba takto:

Takto bude náš PB vyzerať na konci, teraz je čas dať mu dákou funkčnosť.

Prvý si vytvoríme Metódu na určenie hodnoty, v tomto príklade budem mať napríklad maximálnu hodnotu 100 a minimálne 0.

private void Set_PB_Value(int Value)
{
    PB_Foreground.Width = (int)(Value * (PB_Background.Width / 100F));
}

kde:

• PB_Foreground je panel popredí (v tomto prípade červený),
• PB_Background je panel pozadie (v tomto prípade šedý),
• Value je vstupná hodnota v percentách od 0 do 100

Tým by sme mali základ nášho PB. Výhodou je, keď mu dáme možnosť vrátiť aj nejakú hodnotu tým, že na neho klikneme myšou. K tomu si napíšemem metódu.

private void PB_MouseClick(object sender, MouseEventArgs e)
        {
            if (e.Button == System.Windows.Forms.MouseButtons.Left)
            {
                double mouse_x = (Control.MousePosition.X - this.Location.X - 3 - (CPB_Container.Location.X + PB_Background.Location.X));
                double Value = ((mouse_x / PB_Background.Width) * 100);

                // Vrácená hodnota určí hodnotu PB
                Set_PB_Value((int)Value);

                // Kontrola vrácené hodnoty
                numericUpDown1.Value = (decimal)Value;
            }
        }

kde:

• -3 je použité iba ak nemáme nastavený form bez okrajov, inak to vynecháme,
• CPB_Container je panel našej "krabice" ktorý obsahuje ostatné časti nášho PB,
• PB_Background pozri vyššie,
• PB_Foreground pozri vyššie,

Ešte by som dodal, že túto metódu si nastavíme ako MouseClickEvent u oboch panelov (popredia i pozadia).

To by bolo všetko k vlastnému progressbar. Dúfam, že som to opísal dosť zrozumiteľne aj pre tých, ktorí sa s tým ešte nestretli.