V tem gradivu si bomo ogledali izdelavo preprostega pregledovalnika slik. Ta omogoča izbiro slike in pa spreminjanje njene velikosti. Vmesnik bomo izdelali v okolju Visual Studio C# 2010 Express, ki je brezplačno dostopen na Microsoftovi uradni strani.

Za izdelavo vmesnika je sicer dovolj beležnica in prevajalnik kode, vendar pa v tem primeru to gradivo ne bo dovolj za izdelavo, saj okolje samo generira precejšen del kode.

Najprej se odločimo, kako bo naš vmesnik izgledal. Sam sem izbral preprosto okno z menijsko vrstico, ki omogoča izbiro slike s pomočjo privzetega okna za izbiro datotek v okolju Windows, spreminjanje velikosti slike s pomočjo dveh vnosnih vrstic in pa možnost zaprtja okna. Samo okno naj bi se prilagajalo velikosti slike, sicer pa ga ni mogoče raztegovati/skrčevati (s pomočjo miške). Vmesnik bi lahko naredili tudi tako, da bi se velikost slike samodejno prilagajala velikosti okna, ki bi ga raztegovali z miško, vendar se mi zdi, da je prvi način lepši, če že ne hitrejši.

Da ostanemo v nekih smiselnih mejah, sem se tudi odločil, da slike ne moremo zmanjšati pod 300 pikslov v x ali y smeri. V tem primeru se vnešena velikost v dodatnem okencu obarva rdeče.

Če želimo izdelati grafični vmesnik v Visual Studiu, ponavadi izberemo način Windows Form Application. To nam ustvari novo prazno okno, ki bo glavno okno našega vmesnika. Okno je zaenkrat prazno. Če z z desnim klikom izberemo zavihek v katerem se nahajamo, lahko izberemo View code, ki nam odpre še eno okno, v katerem se nahaja del kode našega programa, kasneje pa tudi metode, ki jih bomo vezali na to okno.

Sedaj lahko gradnike našega okna (gumbe, oznake, vnosna polja) enostavno izbiramo preko menija, in jih postavimo na naše glavno okno (Form). Tako lahko izberemo gradnik MenuStrip, ki ga postavimo na zgornji rob glavnega okna. Čez celotno okno (ali pa tudi ne, saj velikost tako ali tako določimo v kodi v konstruktorju okna) pa postavimo gradnik PictureBox. To bo 'platno', kjer bo pozneje naša slika. Za kasnejšo uporabo izberemo še gradnik OpenFileDialog, ki ga bomo pozneje uporabljali za izbiro slike. Za razliko od drugih se ta gradnik ne pokaže takoj, ampak šele, ko ga kličemo znotraj kakšne metode.

Takrat se nam odpre okno, ki je uporabnikom sistema Windows precej znano, saj se pojavi, ko shranjujemo in odpiramo datoteke v MS Word, Excel,...

Lahko naredimo tudi nekaj omejitev, namreč, da se nam ob izbiri slike pokažejo samo datoteke s končnico .JPG, .BMP ali .PNG. Vse to lahko nastavimo s pomočjo lastnosti gradnika, kar si lahko med drugim ogledamo na naslednjem filmčku.

Ko imamo glavno okno, nam pravzaprav manjka samo še okno za izbiro velikosti slike. To bo sestavljeno iz dveh vnosnih vrstic , dveh oznak in pa dveh gumbov. v vnosni vrstici vpišemo dimenziji slike, s prvi gumbom izbiro potrdimo, drugi gumb pa je gumb Prekliči, ki zapre okno za izbiro velikosti brez kakšršnihkoli sprememb. Isto dosežemo tudi s klikom na rdeži križec zgoraj desno.

Kakšne omejitve določimo Na tem okencu, torej, ali uporabnik sme spreminjati velikost, če slika še ni izbrana, kakšne so dovoljene vrednosti dimenzij, itd... Je odločitev posameznik. Sam sem se odločil, da sta najmanjša dovoljena širina in višina slike 300 pikslov. Če uporabnik vpiše manjšo vrednost in pritisne gumb V redu, se vpisani tekst obarva rdeče. Spodaj vidimo, kako izgleda moje okence za izbiro.

Okence za izbiro velikosti slike

Sedaj, ko imamo osnovno okno našega programa, napišemo še preostanek, kodo, ki se izvede ob določenih dogodkih. Ti dogodki bodo Klik na ukaz v meniju (Izbira slike, Velikost slike, Zapri) in pa klik na gumb V redu ali pa gumb Prekliči an dodatnem okencu. Nekaj dogodkov imamo sicer še povezanih z gradnikom OpenFileDialog, vendar pa imamo tam že določeno zaporedje, ki ga ne bomo spreminjali. Dovolj bo, da bomo ob kliku na gumb Odpri dobili vrnjeno ime datoteke.

Pa začnimo z ukazom Izberi sliko. Kot že povedano, ta uporablja gradnik OpenFileDialog. Glede tega ni kaj veliko razlagati, ime datoteke dobimo tako, da napišemo tale del kode:

Ko to dobimo, odpremo sliko, ki naj bi se nahajala na tej poti. Ker se lahko zgodi, da kljub končnici ta datoteka ni slika, je dobro, da ta del kode damo v varovalni blok, saj se nam program sicer sesuje.

Sliko (image) nato shranimo v pomnilnik z naslednjo vrstico:

Glede na velikost slike ali pa privzeti vrednosti popravimo dimenzije okna in platna. Če spreminjamo glede na privzeti vrednosti, potem moramo že tukaj narediti spremenjeno kopijo originalne slike z novimi dimenzijami. To dosežemo tako:

Kot vidimo, najprej ustvarimo nov, prazen objekt tipa Image žejene velikosti. Na tega nato s pomočjo interpolacije narišemo originalno sliko. Dobljeno nato nastavimo kot ozadje platna. Enako nato deluje tudi spreminjanje slike; naredimo novo kopijo z drugačnimi dimenzijami, spremenimo velikost okna in platna, ter novo sliko nastavimo za ozadje. Tako imamo precej enostaven pregledovalnik slik. Na naslednji prosojnici lahko vidimo še prikaz uporabe programa.

Uporabljena slika se nahaja na naslovu http://hdwpapers.com/charge_siberian_tiger_wallpaper-wallpapers.html