Grafični uporabniški vmesnik z več okni v C# - GUI

Grafični uporabniški vmesnik z več okni v C# - GUI

Avtor: Poboljšaj Nina

Grafični uporabniški vmesnik

  • Grafični uporabniški vmesnik skrajšano GUI je program, ki izkorišča prednosti sodobne računalniške grafične tehnologije in omogoča uporabniku lažjo uporabo. GUI je grafični in ne zgolj tekstovni uporabniški vmesnik. Vmesnik je prijazen zaradi njegove funkcionalnosti ker je kot prvi interaktivni računalniški vmesnik vpeljal grafične ukaze in ne klasičnih tekstovnih ukazov. Uporabnik s pomočjo miške izbira menijske ukaze. V programu imamo ikone in okna, kot so meniji, vnosno obrazci, sporočila o napakah itd.

Zagon programa

  • V C# Express izberemo New Project. S klikom na Windows Forms Application se ustvari novo okno z imenom Form1.
(seminarska1.png)
Novo okno - Form1

Načrtovanje uporabniškega vmesnika

  • V menijski vrstici kliknemo View in potem izberemo Toolbox. Na levi strani dobimo zavihek s komponentami.
  • Najbolj tipične komponente so Button, GroupBox, Label, TextBox, Timer itd.
(seminarska2.png)
ToolBox

Lastnosti komponenet

  • Na desni strani se nahajajo lastnosti(Properties), s pomočjo katerih oblikujemo komponente. Lahko jih poimenujemo, spremenimo pisavo in njeno velikost, spremenimo velikost komponente, nastavimo vrednosti(True/False) itd.
(seminarska3.png)
Properties

Najbolj tipične komponente

  • Label(oznaka): pojasnjuje druge komponente, izpiše rezultate
  • TextBox(vnosno polje): vanj vnesemo podatke
  • Button(gumb): s klikom nanj se sproži neki dogodek
  • GruopBox(vsebnik): združuje druge gradnike
  • Timer(merilec časa): z njim lahko merimo različne čase
  • CheckBox(potrditveno polje): izberemo dane možnosti

  • DateTimePicker(datum, čas): prikazuje datum in čas

    (seminarska4.png)
    Prikaz najbolj tipičnih komponent

Primer

Napiši program z uporabniškim vmesnikom, ki ob kliku na gumb izpiše Živjo in tvoje ime.

  • Najprej dodamo label1 in mu spremenimo napis v Vnesi ime:
  • Nato dodamo TextBox, kamor bomo vnesli ime, name spremenimo v vnosnoPolje zaradi preglednosti v programu
  • Dodamo Button, ki mu spremenimo text v Potrdi

  • Na koncu dodamo še label2, kjer se bo izpisalo ime, text label2 pustimo prazno, name spremenimo v izpis

    (seminarska5.png)
    Dodajanje in preimenovanje komponent

Program

namespace izpiseIme
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }


        private void button1_Click(object sender, EventArgs e)
        {
            {
                izpis.Text = "Živjo " + vnosnoPolje.Text + "!";
            }
        }

        private void Form1_Load(object sender, EventArgs e)
        {

                izpis.Text = "";

        }
    }
}

Rezultat

  • Vnesemo ime, kliknemo gumb potrdi in dobimo rezultat, ki ga prikazuje slika.
(seminarska6.png)
Končni rezultat

Zapiranje okna

Pri zapiranju oken, naredimo program, ki nam omogoča, da se okno pri kliku na rdeči x(desno zgoraj) ne bo kar zaprlo. Najprej bo od nas zahteval potrditev, da to res želim.

Uporabimo dogodek FormClosing, ki se zgodi preden se okno zapre, zato lahko zapiranje preprečimo.

(seminarska7.png)
Zapiranje okna

Program

Program za zapiranje okna

  private void Form1_FormClosing(object sender, FormClosingEventArgs e)
        {
            DialogResult DaNe = MessageBox.Show
                ("Ali res želiš končati program?", "POTRDITEV",
                MessageBoxButtons.YesNo, MessageBoxIcon.Question);
            if (DaNe == DialogResult.No)
            {
                e.Cancel = true;
            }
        }

Meni

V oknu lahko dodamo Meni. Med komponentami v ToolBox-u poiščemo MenuStrip. Ikona se pojavi levo spodaj.

(seminarska8.png)
Dodajanje meni-ja

Meni

Dodamo lahko tudi dogodke na meniju. Ko vnašamo imena se nam avtomatsko dodajajo nove možnosti. Dodala sem odpri, shrani, natisni in zapri. Če želimo zapreti, se nam pojavi dodatno okno, ki od nas zahteva potrditev, da to res želimo.

POZOR: Pri shrani in natisni sem določila samo ime datoteke, kot primer kako ustvarimo meni. V celoti deluje samo možnost zapri.

(seminarska9.png)
Dodajanje imen v meni-ju

Meni

Ko v meni-ju kliknemo odpri, se nam pojavi novo okno, kjer lahko izberemo datoteko, ki jo želimo odpreti.

Program:

 private void odpriNovoOknoToolStripMenuItem_Click(object sender, EventArgs e)
        {
            openFileDialog1.ShowDialog();
        }
(seminarska10.png)
Odpiranje

GUI z več okni

Naredimo lahko tudi več Form, tako, da so odvisne ena od druge. Kako odpremo novo formo?

  • V menuju kliknemo Project, nato pa Add Windows Form
  • Odpre se nam novo okno, kjer izberemo windows form
  • s klikom na Add dobimo Form2
(seminarska11.png)
Dodajanje nove forme

GUI z več okni

Ukaz, ki ga napišemo v Form1.

 private void button1_Click(object sender, EventArgs e)
        {
            Form2 novoOkno2 = new Form2();
            novoOkno2.Show();
        }

Novo okno se bo odprlo, ko na Form1 pritisnemo gumb odpri novo okno.

(seminarska12.png)
Odpre se novo okno

GUI z več okni

Vzamemo lahko program od prej, ki s klikom na gumb odpre novo okno. Sedaj program nadgradimo tako, da lahko na Form2 rišemo. Rišemo tako, da držimo miško in se z njo premikamo po površini.

(seminarska13.png)
Risanje v novem oknu

GUI z več okni

Program za Form1

public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, EventArgs e)
        {
            Form2 novoOkno = new Form2();
            novoOkno.Show();
        }
    }

GUI z več okni

Program za Form2

public partial class Form2 : Form
    {
        bool aliRisem = false;
        public Form2()
        {
            InitializeComponent();
        }
        private void Form2_MouseDown(object sender, MouseEventArgs e)
        {
            aliRisem = true;
        }
        private void Form2_MouseUp(object sender, MouseEventArgs e)
        {
            aliRisem = false;
        }
        private void Form2_MouseMove(object sender, MouseEventArgs e)
        {
            if (aliRisem)
            {
                Graphics platno = this.CreateGraphics();
                SolidBrush svincnik = new SolidBrush(Color.Black);
                platno.FillEllipse(svincnik, e.X, e.Y, 10, 10);
            }
        }
    }

GUI z več okni

Forme so lahko odvisne ena od druge. Naredila sem program, kjer v Form1 vpišemo neko poljubno besedo in potrdimo. Potem se odpre Form2, kjer lahko izberemo ali bo ta beseda napisana z malimi ali velikmi črkami. Ko to označimo in potrdimo se v Form1 ta beseda ustrezno spremeni.

(seminarska14.png)
Form1 odvisna od Form2

GUI z več okni

Program za Form1

 public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        public static TextBox tb = new TextBox();

        private void button1_Click(object sender, EventArgs e)
        {

            Form2 novoOkno = new Form2();
            novoOkno.Show();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            tb = vnosnoPolje;
        }
    }

GUI z več okni

Program za Form2

public partial class Form2 : Form
    {
        public Form2()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, EventArgs e)
        {

            string zamenjaj = Form1.tb.Text;
            if (radioButton1.Checked == true)
            {
                zamenjaj = zamenjaj.ToUpper();
            }
            else if (radioButton2.Checked == true)
            {
                zamenjaj = zamenjaj.ToLower();
            }
            Form1.tb.Text = zamenjaj;
            this.DialogResult = DialogResult.OK;
        }

Viri

0%
0%