Tvorba vlastného formulárového prvku (WPF)

V minulej lekcii, Animácie v C # .NET WPF - Path animácie, definície a spúšťanie , sme si predstavili animácie založené na definícii cesty a ukázali si rôzne definície animácií v XAML aj Code Behind a ich spúšťanie.

V tomto tutoriále si skúsime naprogramovať MaskedTextBox pre WPF. Uvidíte ako prvok zaradiť do aplikácie pomocou kódu aj pomocou XAML.

Tvorba formulárového prvku

Náš MaskedTextBox bude fungovať podobne, ako funguje vo Windows Forms. Teda bude mať vlastnosť mask, do ktorej sa bude vkladať overovaný formát. Naša verzia bude osekanie, pre ukážku bude podporovať iba čísla, písmená a desatinnú čiarku (bodku). Budeme ich kontrolovať podľa ich ASCII kódu, ten nájdete v ASCII tabuľke a tú nájdete napríklad tu. Vypísal som kódy našich znakov, ktoré budeme potrebovať:

Pre potreby tohto článku si vytvorte novú WPF aplikáciu. V okne Solution explorer pravým tlačidlom myši kliknite na projekt aplikácie, z kontextovej ponuky vyberte Add> Add New Item. Presuňte sa do skupiny WPF a vyberte User Control. Pomenujte ho MaskedTextBox.

znak	ASCII
az	97-122
AZ	65-90
. (Bodka)	46
, (Čiarka)	44

Teraz sa vám vytvorí ovládací prvok, ten bude zaradený do toolbox. Všimnite si, že prvok má príponu XAML a jeho kód sk (vb). Otvorte designer formulárového prvku a pridajte doň obyčajný TextBox. Tento TextBox pomenujte generalTextBox. Hlavnému gridu ešte nastavte výšku na 20 a šírku na 200. Teraz už máte hotové UI nášho vlastného formulárového prvku.

Presuňte sa do editora kódu nášho ovládacieho prvku, pridajte tam nasledujúce vlastnosti:

private BadValueHandler _valueHandler;
public BadValueHandler valueHandler {
    get {
        return _valueHandler;
    }
    set {
        _valueHandler = value;
    }
}
private string _mask;
public string mask {
    get {
        return _mask;
    }
    set {
        System.Collections.Generic.List<string> poleZnaku = new     System.Collections.Generic.List<string>();
        for (int i = 0; i < value.Length; i++)
        {
            poleZnaku.Add(value.Substring(i, 1));
        }
        foreach (var znak in poleZnaku)
        {
            switch (znak)
            {
                case "0":
                    break;
                case "a":
                    break;
                case ".":
                    break;
                default:
                    throw new FormatException("Neplatný znak v masce");
            }
        }
        _mask = value;
    }
}
public string Text {
    get
    {
        return generalTextBox.Text;
    }
    set
    {
        generalTextBox.Text = value;
    }
}

Máme tam vlastnosť mask, kde validuje zadanú hodnotu. Ďalej tam máme vlastnosť valueHandler typu BadValueHandler, ten pridáme za chvíľu.

Do kódu pridajte novú enumeraci BadValueHandler:

public enum BadValueHandler
{
    RedBox,
    MessageBox
}

Toto tam nie je len tak. Hodnota bude určovať, ako sa program zachová, keď používateľ zadá zlý text, teda text ktorý nie je vo formáte masky. Chované pri jednotlivých hodnôt, je v tabuľke nižšie:

hodnota	správanie
RedBox	Textové pole začervenia.
MessageBox	Používateľovi sa zobrazí dialógové okno so správou.

V kóde XAML u prvku generalTextBox vytvorte obsluhu udalosti TextChanged. Presuňte sa do editora kódu. Vytvorte v ňom súkromnú funkcii Validate (), ktorá bude vracať hodnotu typu bool (boolean). Do tejto funkcie vložte nasledujúci kód:

string writedText = generalTextBox.Text;
string maska = this.mask;
if (writedText.Length != maska.Length)
{
    return false;
}
for (int i = 0; i < maska.Length; i++)
{
    string znakMasky = maska.Substring(i, 1);
    string znakVRetezci = writedText.Substring(i, 1);
    switch (znakMasky)
    {
        case "0":
            try
            {
                Int testValue = int.Parse(znakVRetezci) / 2;
            }
            catch (Exception)
            {
                return false;
            }
            break;
        case "a":
            int asc = (int)char.Parse(znakVRetezci);
            if (!((asc >= 65 && asc <= 90) || (asc >= 97 && asc <= 122)))
            {
                return false;
            }
            break;
        case ".":
            int dotAsc = (int)char.Parse(znakVRetezci);
            if (!(dotAsc == 46 || dotAsc == 44))
            {
                return false;
            }
            break;
        default:
            throw new FormatException("Naplatný formát masky");
    }
}
return true;

Táto funkcia prejde podľa masky všetky znaky z masky. Hneď na úvod kontroluje, či má zadaný text rovnakú dĺžku ako maska. Ak nie, tak logicky text nemôže mať správny formát, pretože má buď znaky navyše, alebo naopak niektoré chýbajú. Potom sa prejdú jednotlivé znaky v maske, podľa nich sa overuje, či je to číslo s skúša sa deliť. Ak to nejde, vyhodí to výnimku a zadaný text je nevalidný. Keď sa jedná o písmeno, overuje sa ASCII, rovnako tak desatinná bodka a čiarka. Pokiaľ je v maske iný ako podporovaný znak (v tomto momente by už byť nemal, ale istota je istota) vyhodí sa výnimka FormatException a ako správa sa ju odovzdá text "Nesprávny formát masky". Teraz späť k obsluhe udalosti TextChanged, vložte do nej nasledujúci kód:

if (validate())
{
    generalTextBox.Background = Brushes.White;
}
else
{
    switch (valueHandler)
    {
        case BadValueHandler.RedBox:
            generalTextBox.Background = Brushes.OrangeRed;
            break;
        case BadValueHandler.MessageBox:
            if (mask.Length == generalTextBox.Text.Length)
            {
                MessageBox.Show("Zadali jste neplatnou hodnotu, zadejte hodnotu ve formátu: " + mask, "Neplatná hodnota", MessageBoxButton.OK, MessageBoxImage.Warning);
            }
            break;
    }
}

Ako vidíte, tu overujeme, či je validný. Ak áno tak nastavíme farbu pozadia na bielu, je to z toho dôvodu, že keď používateľ zadá zlú hodnotu (červená) a až potom správnu, tak aby sa farba vrátila na bielu. Ak zadaný text nie je validný, overí sa hodnota vo ValueHandler (typ tejto hodnoty je enumerace BadValueHandler). Ak hodnota RedBox tak sa pole začervenia (červená je moc výrazná, tak som zvolil oranžovočervená). Ak je hodnota MessageBox, tak sa zobrazí dialógové okno s varovaním, to sa ale zobrazí až v okamihu, keď je rovnaký počet znakov v maske aj v poli. Je to z toho dôvodu, že okno sa nemá zobrazovať v priebehu zadávania, ale až po jeho skončení. Takto by sa dialógové okno zobrazovalo po zadaní každého znaku.

Implementácia formulárového prvku

V predchádzajúcej časti sme prvok vytvorili, ale ako ho implementovať do formulárové aplikácie?

Výhodou vlastných formulárových prvkov je tiež to, že môžeme ovplyvniť, ako sa zobrazí. Ovládacie prvky môžeme do formulára pridať dvoma (ma známymi) variantmi. Ak poznáte ďalšie, napíšte mi to do diskusie pod článkom.

Pridanie pomocou XAML

Najprv kliknite na BUILD> Build Solution, tým skompiluje riešenie. Občas sú s pridávaním nezkompilovaných prvkov problémy. Otvorte si designer okna aplikácie. Zobrazte si toolbox, uvidíte tam novú skupinu prvkov "<názov projektu> Control". V tej je aj ovládací prvok MaskedTextBox (<názov projektu>). Tento prvok pretiahnite na formulár. Umiestnite si ho kam chcete a nastavte mu nejakú rozumnú veľkosť.

Ďalej mu nastavte vlastnosti, ktoré bude potrebovať na vlastné účely (tj. Vlastnosť mask a valueHandler). Vlastnosť Mask nastavte napríklad na: "0000.aaaa". Vlastnosť valueHandler na RedBox. Aplikáciu skompilujte a spustite.

Skúste do textového poľa zadávať rôzne hodnoty. Uvidíte, že kým nezadáte hodnotu v správnom formáte, bude textové pole červené.

Pridanie v kóde

Po načítaní formulára, pridáme druhý ovládací prvok, vyskúšame ho z ošetrovanie hodnoty pomocou dialógového okna so správou.

Nastavte vlastnosť Name jediného prvku grid na: "hlavniMriz", do tohto prvku budeme pridávať MaskedTextBoxi. Vytvorte formulári obsluhu udalosti Load. Do tej zadajte nasledujúci kód, prípadne si pridajte vlastnosti pre veľkosť a umiestnenie:

textb.mask = "aaaa.0000";
textb.Width = 150;
textb.valueHandler = MaskedTextBox.BadValueHandler.MessageBox;
hlavniMriz.Children.Add(textb);

Teraz spustite aplikáciu, skúste si zadávanie hodnôt, akonáhle zadáte správny počet znakov, overí sa, či sú správne. Ak áno, nič sa nestane. Ak nie tak sa zobrazí varovné dialógové okno.