C# - aplikacije z menuji

C# - aplikacije z menuji

Avtor: Petra Adamič

Učni cilji: Čim bolje pokazati, kako se naredi aplikacijo z menuji v okolju Visual Studio s pomočjo programskega jezika C#.

Predstavitev

Sodobne aplikacije brez menujev si danes težko predstavljamo. Poznamo več vrst menujev - navadni menu in kontekstni menu. V tej seminarski nalogi bom predstavila aplikacije z menuji v C#. Najprej se bomo spomnili gradnje menujev v pythonu. Potem sledijo menuji v C#, kjer je nekaj začetnih prosojnic namenjenih predstavitvi osnov aplikacij v C#. Nato sledi del, kjer opisujem aplikacije z menuji.

Primer aplikacije z menuji, prikazana v filmčku:

Menu Python

Aplikacije z menuji pa lahko ustvarimo s pomočjo različnih programskih jezikov in okolij. Tukaj je prikazan primer programa za ustvarjanje aplikacije z menuji v programskem jeziku python s pomočjo knjižnice tkinter.

(menuPy.PNG)
Koda v pythonu za aplikacijo z menuji

Menu Python

Tako izgleda program v pythonu po zagonu:

(menuPvForm.PNG)
Izgled aplikacije v pythonu

Programski jezik C# se piše s pomočjo okolja Visual studio, kjer imamo možnost izbire za program z aplikacijo. Tako se nam že na začetku prikaže forma, na katero nalagamo različne gradnike. Tako že sproti vidimo izgled programa. V pythonu pa s pomočjo knjižnice tkinter napišemo ustrezno kodo za ustvarjanje aplikacije z menuji in izgled pograma vidimo šele po zagonu programa. V pythonu metode z menuji povežemo že pri ustvarjanju menujev. V C# metode za posamezen menu ustvarimo naknadno, ko elemente že imamo.

Menuji v C#

Sedaj si bomo bolj podrobno pogledali gradnjo aplikacij z menuji v C#. Najprej pa je nekaj prosojnic namenjenih osnovam gradnje aplikacij v C#.

Tisti, ki poznajo osnove aplikacij v C#, lahko preskočijo začetne prosojnice:Aplikacije z menuji

Aplikacije v C#

Najprej moramo odpreti Visual Studio za C#, kjer nato ustvarimo nov projekt.

(prvaStran.PNG)
Začetna stran Visual studia

Aplikacije v C#

Za aplikacije izberemo možnost Windows Forms Application.

(drugaStran.PNG)
Druga stran Visual studia, kjer izberemo vrsto programa

Pojavi se stran z grafičnim prikazom osnovne forme, kamor nanašamo elemente.

(forma.PNG)
Videz prazne forme

Aplikacije v C#

V levem delu glavnega okna imamo Toolbox, kjer imamo na izbiro vse gradnike. Na formo gradnik dodamo tako, da kliknemo nanj in nato ga nanesemo na formo.

(toolbox.PNG)
Toolbox

Aplikacije v C#

Ko na formo nanesemo nek gradnik, mu lahko nastavimo tudi različne lastnosti. Najdemo jih v desnem delu glavnega okna, Properties.

(properties.PNG)
Properties, kjer nastavljamo lastnosti za posamezne gradnike

Aplikacije v C#

S tem, ko smo ustvarili aplikacijo, se ustvari izvorna koda z novim razredom. V razredu so metode, ki se vežejo na posamezne gradnike forme. Lahko pa ustvarimo tudi metode, ki niso direktno povezane z gradniki.Do izvorne kode pridemo z desnim klikom nad formo, kjer izberemo možnost View Code.

(viewCode.PNG)
Z desnim klikom na formo odpremo kodo programa

Aplikacije v C#

Za vsak gradnik forme lahko ustvarimo več različnih metod glede na tip dogodka (npr. desni klik, levi klik, premikanje miške,...). Dogodke za posamezen gradnik najdemo v Properties.

(dogodki.PNG)
Okno z različnimi dogodki za posamezen gradnik

Smiselno je že na začetku ustrezno preimenovati posamezne elemente. Visual studio pa ima tudi to prednost, da se nam sproti prikazuje, katere operacije oz lastnosti imamo pri določenem tipu gradnikov. Npr pri elementu Label(napis) je osnovna lastnost Text (napis.Text=nekNiz)

Delo z menuji

Pri aplikacijah poznamo različne vrste menujev. Najdemo jih v Toolbox pod zavihkom Menus & Toolbars.

(toolbox-1.PNG)
Zavihek v oknu Toolbox za menuje in orodne vrstice

Tukaj imamo možnost uzbire navadnih menujev ali kontekstnih menujev na desni klik:

  • ContextMenuStrip
  • MenuStrip

Znotraj zavihka imamo še nekaj elementov za ustvarjanje orodnih vrstic ali statusnih vrstic:

  • Toolstrip
  • StatusStrip
  • ToolStripContainer

Na kratko bom predstavila posamezno vrsto, bolj podrobno pa se bom osredotočila na navadne menuje in kontekstne menuje.

Delo z menuji - različni tipi

StatusStrip ali statusna vrstica se pojavi na dnu forme. Tukaj imamo lahko različne gradnike. Lahko dodamo napis, različne vrste gumbov ter kazalnik napredka.

(statusStrip.PNG)
gradnik StatusStrip
(statusStrip2.PNG)
Različni gradniki na statusni vrstici

Delo z menuji - različni tipi

Toolstrip ustvari vrstico na vrhu forme, ki lahko vsebuje različne gradnike. Tukaj imamo lahko napise, gumbe, separatorje, vnosna polja in še nekaj gradnikov.

(toolStrip.PNG)
gradnik ToolStrip

Včasih želimo imeti aplikacijo, ki vsebuje menuje ali orodne vrstice tudi na kakšnih drugih stranicah forme. Pri tem nam pomaga gradnik ToolStripContainer, ki menujem in orodnim vrsticam omogoča, da se lahko nahajajo na vseh stranicah forme.

(toolStripContainer.PNG)
gradnik ToolStripContainer

Delo z menuji - možnosti menujev

Ko ustvarimo navadni menu, imamo štiri različne možnosti nastavitve posamezne menujske postavke ali postavke v podmenuju:

  • MenuItem
  • Separator
  • ComboBox
  • TextBox

    (izbiraItemMenu.PNG)
    Izbire za gradnike v menuju

Delo z menuji - MenuItem

MenuItem je glavni gradnik menujev in se ga največkrat uporablja. S pomočjo tega gradnika v menujih ustvarimo posamezne izbire menuja. Pri tem imamo dve možnosti za vsako izbiro. Na izbire lahko vežemo ustrezne akcije oz. izvedbe nekega postopka ali pa odpiranje podmenuja. Posamezno izbiro menuja ustrezno poimenujemo tako, da v pravokotnik, kjer pri ustvarjanju programa vidimo Type here, vpišemo ustrezno ime izbire.

Pravokotniki z napisom Type Here so le orodje pri dodajanju menujev, ki nam ponudi možnost za gradnjo nove menujske izbire. Ko program zaženemo, teh pravokotnikov ne vidimo več.

(menu_kaskada.PNG)
Osnovna menujska vrstica
(menu_kaskada2.PNG)
Videz aplikacije

Delo z menuji - podmenuji

Če želimo narediti podmenuje, moramo najprej izbrati iz katere menujske izbire bo podmenu izhajal. Pritisnemo na ustrezno izbiro in v pravokotnik pod izbiro, kjer piše Type Here, vpišemo ustrezno ime izbire.

Ko se lotimo ustvarjanja podmenujev, moramo dobro premisliti kje želimo imeti posamezne stvari. Podmenujev ne moremo prestavljati v drug menu. Lahko pa izbire znotraj podmenuja med seboj menjamo.

(menu_dol.PNG)
Ustvarimo podmenu

Tudi izbire v podmenuju so lahko take, da se ob kliku nanje izvede neka akcija ali da odpre nov podmenu. Za podmenu izbire podmenuja moramo sedaj gledati pravokotnike desno od izbire. Podmenuje lahko dodajamo še naprej na enak način.

(menu_dolKaskada.PNG)
Tudi izbire podmenuja imajo lahko podmenuje

Podmenuje lahko dodajamo velikokrat in dobimo veliko različnih nivojev podmenujev. Na sliki je prikaz gradnje podmenujev podmenujev. Pri tem imamo zmeraj možnost dodajanja več izbir v podmenu, kar nam pri gradnji omogočajo pravokotniki, kjer piše Type Here. Tega seveda ob zagonu aplikacije ne vidimo.

(menu_dolKaskada2.PNG)
Podmenuji podmenujev

Seveda lahko znotraj podmenujev kot izbire dodamo tudi ostale možnosti gradnikov (combobox, textbox, separator), a iz njih nato ne moremo narediti naslednjega podmenuja.

Delo z menuji - Separator in Textbox

Separator je gradnik, ki z vodoravno črto loči posamezne izbire v podmenujih. Separatorja ne moremo dodati med menujske izbire v osnovni menujski vrstici, ampak le v podmenuje.

(separator2.PNG)
Videz separatorja v aplikaciji

Kot gradnik menuja pa lahko dodamo tudi vnosno polje, kamor lahko ob zagonu aplikacije vpišemo neko besedilo.

Tukaj gradnik reagira na drugačne dogodke kot menuItem. Tam je glavni dogodek klik, tukaj pa je bolj smiselen dogodek, ko znotraj nahajanja v vnosnem polju pritisnemo tipko enter. S tem namreč potrdimo besedo, ki smo jo vpisali in z njo ustrezno operiramo.

(menu-textbox.PNG)
Izbira za TextBox
(menu-textbox2.PNG)
Videz menuja z vnosnim poljem ob zagonu aplikacije

Delo z menuji - Combobox

Gradnik Combobox v menujih predstavlja možnost izbire različnih vpisanih možnosti. Pri tem lahko možnost sami vpišemo ali pa jo izberemo iz seznama vpisanih možnosti.

(comboBox2.PNG)
Izgled Comboboxa

S pomočjo lastnosti Collection nastavimo možne izbire.

(comboBox3.PNG)
Lastnosti za Combobox

Odpre se nam okno, kamor vpišemo posamezne možnosti. Vsako možnost vpišemo v novo vrstico.

(comboBox4.PNG)
Nastavitev možnosti

Ko zaženemo program, vidimo menu. Pri ComboBoxu pritisnemo na puščico in pokažejo se nam možnosti izbire.

(comboBox5.PNG)
Videz možnosti pri zagonu programa

Delo z menuji - koda

Če želimo, da s klikom na ustrezno izbiro menuja nekaj naredimo, moramo napisati ustrezno kodo. Pri izbirah tipa menuItem je glavni dogodek klik. Pri drugih tipih menujev je glavni dogodek lahko nekaj drugega. V delu okna Properties lahko izberemo kateri dogodek želimo uporabiti za posamezno možnost. Z izbiro dogodka se nam v kodi ustvari ogrodje metode nad tem gradnikom za izbrani dogodek, kamor vpišemo ustrezno kodo.

(koda-izgled.PNG)
Primer aplikacije
(koda.PNG)
Tako izgleda razred z metodami za klike na posamezne izbire menuja

Delo z menuji - kontekstni menu

Poznamo tudi menu na desni klik ali kontekstni menu. Ob zagonu programa se nam ta menu prikaže, če na okno ali nek element kliknemo z desno tipko. Gradniki kontekstnega menuja so enaki kot pri navadnem menuju. Tudi tukaj lahko imamo več podmenujev.

(contextMenu.PNG)
Gradnja kontekstnega menuja

V delu Properties moramo povezati formo z menujem. To pomeni, da moramo ustreznemu gradniku, na katerega se bo kontekstni menu vezal, spremeniti lastnost ContextMenuStrip. Isti kontekstni menu lahko uporabimo za različne gradnike.

(contextProperties.PNG)
Povežemo menu s formo

Ko zaženemo program, z desnim klikom na formo odpremo menu.

(contextForm.PNG)
Z desnim klikom odpremo kontekstni menu

Delo z menuji - lastnosti

S pomočjo dela okna Properties lahko nastavimo veliko različni lastnosti nad elementi tipa MenuItem:

  • lahko določimo poravnavo napisa,
  • velikost napisa,
  • barvo v ozadju,
  • nastavimo sliko za ozadje
  • lahko nastavimo lastnost checked na true
  • lahko je tudi brez besedila, samo slika
  • različne pisave
  • lahko nastavimo tudi tipke za bližnjico npr ctrl + c
  • ...
(primer.PNG)
Primer menuja z različnimi lastnostmi - obarvano ozadje, pisava, poravnava napisa

MenuStrip lastnosti

povezava do dokumentacije

Delo z menuji - bližnjice s tipkami

Nekateri uporabniki raje uporabljajo tipkovnico kot miško. Ob gradnji menujev imamo možnost dostopa do posamezne izbire v menuju s pomočjo kombinacije tipk na tipkovnici(ponavadi kombinacije dveh različnih tipk). To še posebej prav pride, če imamo veliko različnih nivojev podmenujev. V takem primeru smo s kombinacijo tipk veliko hitrejši kot pa z iskanjem ustrezne izbire v podmenujih.

Bližnjice s tipkami nastavimo med lastnostmi v Properties. Lastnost ShortcutKeys nastavimo na ustrezno kombinacijo tipk.

(bliznjica.PNG)
Lastnosti za bližnjice

Tako izgleda menu z bližnjicami. Na neko izbiro menuja se lahko sklicujemo preko bližnjice s tipkami ali s klikom na to izbiro.

(bliznjicaForm.PNG)
Videz menuja z bližnjico

Če damo več istih kombinacij tipk k različnim izbiram menuja, bo kombinacija tipk delovala le za zadnjo izbiro.

Delo z menuji - lastnost checked

Včasih želimo določiti neko lastnost, ki se bo nekaj časa pojavljala. Da nam ne bi bilo treba vsakič znova izbrati te lastnosti, lahko s klikom na ustrezno izbiro to lastnost potrdimo in od tam naprej se to upošteva. To v vrstici vidimo tako, da je ob robu napisa prisotna kljukica. Seveda pa lahko to lastnost tudi odkljukamo in potem ne velja več.

(checked.PNG)
Nastavimo lastnost Checked na True

Tako izgleda aplikacija z že privzeto obkljukano vrstico menuja.

(checkedForm.PNG)
Obkljukani vrstici menuja

Prikaz gradnje menuja - film

Prikaz gradnje nekega menuja.

Literatura

0%
0%