Vlastní ProgressBar v C#

V tomto tutoriálu si popíšeme jak jednoduše vytvořit progressBar (dále jen PB) s vlastním vzhledem. Ve své podstatě se již potom nejedná o PB jako takový, ale uděláme si k němu metody, aby fungoval stejně jako normální. Využijeme k tomu panely, protože mají tu výhodu, že se u nich dá nastavit Tile(opakování) obrázku v pozadí.

Nejprve si vytvoříme nějaké pozadí pro náš PB, dávám přednost šířce 1px a výšku si můžeme nastavit libovolnou.

(obrázek je 16x zvětšený)

Doporučuji si pro jednodušší umisťování vytvořit panel, který bude sloužit jako "krabice" pro ostatní součásti našeho PB. Zjednoduší nám to pozdější práci s naším PB, například při přemisťování. Tento panel může mít libovolnou velikost, já pro názornost použiji o 1px na šířku větší než samotný PB, tedy 152px a výšku si dám třeba 30px.

Do tohoto hlavního panelu si potom umístíme další panel, který už bude mít však určitější velikost, Výšku si nastavíme stejnou jako u vytvořeného pozadí, a šířku však můžeme mít libovolnou, já jsem použil šířku 150px.

Dále je třeba si vytvořit ještě popředí našeho PB, to by mělo mít stejnou velikost jako pozadí.

Tomuto panelu nastavíme jako pozadí náš druhý obrazek, který chceme mít v popředí. Důležité je, aby byl náš panel popředí nad panelem pozadí, když tomu tak není tak stačí dát tlačítko BringToFront, nebo si do kódu pod InitializeCom­ponent(); umístit: [název panelu].BringTo­Front(); Poté co víme jak náš panel popředí vypadá tak mu nastavíme šířku na 0px.

Nyní by měl náš PB vypadat zhruba takto:

Takhle bude náš PB vypadat na konci, teď je čas dát mu nějákou funkčnost.

První si vytvoříme Metodu na určení hodnoty, v tomto příkladu budu mít například maximální hodnotu 100 a minimální 0.

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

kde:

• PB_Foreground je panel popředí (v tomto případě červený),
• PB_Background je panel pozadí (v tomto případě šedý),
• Value je vstupní hodnota v procentech od 0 do 100

Tím by jsme měli základ našeho PB. Výhodou je, když mu dáme možnost vrátit také nějakou hodnotu tím, že na něj klikneme myší. K tomu si napíšemem metodu.

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žito pouze pokud nemáme nastavený form bez okrajů, jinak to vynecháme,
• CPB_Container je panel naší "krabice" který obsahuje ostatní části našeho PB,
• PB_Background viz výše,
• PB_Foreground viz výše,

Ještě bych dodal, že tuto metodu si nastavíme jako MouseClickEvent u obou panelů (popředí i pozadí).

To by bylo vše k vlastnímu progressBaru. Doufám, že jsem to popsal dost srozumitelně i pro ty, kteří se s tím ještě nesetkali.