Preprost opomnik v C# WPF

Tako bo izgledal naš končni produkt.

Imeli bomo vnosno polje, v katerega bomo vnesli tekst (opomin). S klikom na gumb ga bomo shranili v beležko/opomnik.

Ko opomina ne bomo več potrebovali, ga bomo z gumbom (kljukico) izbrisali.

Najprej si pripravimo vizualno okolje.

V MainWindow.xaml datoteki spremenimo krepki del teksta, ki sem ga označil (saj imate ostal del že generiran).

<Window x:Class="Opomnik.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="Opomnik" Height="300" Width="300" ResizeMode="NoResize">

    <Grid>

    </Grid>

</Window>

 
V pregledu bi morala naša aplikacija imeti napis "Opomnik" in fiksno širino ter višino (Ne sme se raztezati -> ResizeMode="NoResize")

Okno naše aplikacije sedaj razdelimo z dvema lomilnima črtama (modre barve).
Ločiti jo hočemo zato, ker bomo na različne dele aplikacije postavili kontrole (vnos, gumbi, tekst...)

To lahko storimo na 2 načina.

-prvi: V vizalnem pregledu se z miško premaknemo po vertikalnem ali horizontalnem robu aplikacije, kjer se pojavi rumenkasto oranžna lomilna črta. Ko stisnemo levi miškin klik se ta rob (ki določa stolpec ali vrstico) uveljavi (koda se avtomatsko doda).

-drugi: Dodamo slednjo xaml kodo ZNOTRAJ <Grid></Grid> značke:

<Grid.ColumnDefinitions>

            <ColumnDefinition Width="250"/>

            <ColumnDefinition/>

        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>

            <RowDefinition Height="209"/>

            <RowDefinition />

        </Grid.RowDefinitions>

Ker smo dodali to kodo znotraj <Grid> značke, se bo Definicja Vrstic in Stolpcev sklicevala nanjo.

 Znotraj <Grid.ColumnDefinitions> a povemo število stolpcev in njihovo širino.

Ker smo aplikacijo naredili fiksno (300 x 300) si mere preprosto določimo.

Dodali smo 2 znački:

            <ColumnDefinition Width="250"/>

            <ColumnDefinition/>

Z 1. značko smo določili 250 enot širok stolpec. Kaj za preostalih 50 enot (300-250)? 
Dodamo še en stolpec <ColumnDefinition/>
Če mu ne določimo širine, se bo avtomatsko razširil do konca aplikacije.

Na enak princip kot smo določili stolpce določimo še vrstice.

Sedaj dodajmo vnosno polje in gumb, ki bo omogočal da opomnik dodamo na seznam (seznam bomo ustvarili v naslednjem koraku).

Pod kodo iz prejšnega koraka, a še vedno v <Grid> znački dodajmo slednje:

<TextBox Grid.Row="1" TextWrapping="Wrap" Name="NovOpomin" AcceptsReturn="True"></TextBox>

        <Button Grid.Row="1" Grid.Column="1" Click="dodaj_Click">!</Button>

<TextBox> kontrola nam omogoča vnos teksta. Dodamo ji par lastnosti:
-TextWrapping="Wrap" samodejni prehod v novo vrstico ko je le ta polna.
-AcceptsReturn="True" ob pritisku tipke enter, skok v novo vrstico

-Name="NovOpomin" globalno ime spremenljivke v C# kodi. (Iz kode bomo preko NovOpomin dostopali do te kontrole)

-Grid.Row="1" 
Vrstice in stolpce smo prej razdelili (indeksirajo se od 0 dalje)
Naš textbox hočemo postaviti levo spodaj. To je Vrstica št.1  in Stolpec št.0    

(Stolpca nismo nastavili na 0, saj sta privzeto vrstica in stolpec nastavljena na 0)

Gumb smo dodali desno spodaj, kjer smo vrstico in stolpec nastavili na 1.

Dodali smo mu metodo Click="dodaj_Click"

dodaj_Click bo metoda, ki se bo sprožila, ko bo uporabnik kliknil gumb. 

Pod kodo iz prejšnega koraka (še vedno smo v znački <Grid> ) dodajmo kontrolo, ki bo shranjevala naše opomnike, ter jo ovijmo v kontrolo ki bo omogočila "scrollanje" kadar bomo imeli veliko opomnikov!

<ScrollViewer VerticalScrollBarVisibility="Auto"  Grid.ColumnSpan="2">

     <StackPanel Name="Seznam" ></StackPanel>

</ScrollViewer>

ScrollViewer omogoča prikaz drsnika. Lastnost VerticalScrollBarVisibility="Auto" pove da se naj drsnik pokaže le takrat ko je potrebno.

Grid.ColumnSpan="2" Hočemo da se naša kontrola razteza čez oba stolpca.

StackPanel privzeto komponente dodaja vertikalno in jih vzdržuje. Vanj bomo nalagalni opomnike in jih tudi ven brisali. V kodi bo dostopen z imenom Seznam

Sedaj ko je uporabniški vmesnik pripravljen pojdimo na kodo. (MainWindow.xaml.cs)

Najprej napišimo metodo (V razredu MainWindow), ki sprejme text in bo ustvarila upomin ter ga vrnila v StackPanel-u.

StackPanel že poznamo iz prejšnega koraka.
TextBlock pa je podoben TextBoxu, le da ta ne omogoča uporabniškega vnosa.

Nastavimo mu napis: Text = text (ki je prišel v metodo UstvariOpomin)

Ter TextWrapping (Iz enakega razloga kot pri TextBoxu iz prejšnih korakov)

Nato ustvarimo gumb, to bo služil kot brisanje opomnika.

Content določa napis na gumbu. (Klukico kopiraj tu ✓)

Določimo mu še širino ter levo poravnavo.

Ker hočemo funcijo brisanja mu dodamo .Click metodo odstrani_Click (glej nasledni korak), katera se sproži ob kliku na gumb.

Ko imamo napis in gumb pripravljen, ju dodamo v StackPanel ustvarjen v tej metodi.

z ukazom Children.Add(element)

Sedaj ima stackpanel vertikalno zložena v sebi napis in gumb za odstranitev ter ga vrnemo iz metode!

 
---------------------------------------------
Namesto da pišemo sp.Children.Add(...)

lahko skrajšamo in return sp; zamenjamo z 

return new StackPanel()
{
  Children = { napis, odstrani }
};

//spremenljivke sp ne potrebujemo v tem primeru.

Dodajmo še zadni dve metodi.

Se še spomnite da smo dodali globalno ime za seznam opomnikov in textbox? Tukaj ju sedaj koristimo.

odstrani_Click se sproži ob kliku na gumb iz prejšnega koraka.

object sender je element, ki je prožil to metodo. V našem primeru je to gumb! Zato ga pretvorimo iz tipa object v gumb!
(sender as Button)


Ker hočemo zbrisati opomin (stackpanel, ki vsebuje gumb in tekst) hočemo do njega dostopati, da ga lahko zbrišemo.

Gumb, ki je prožil to metodo je v stackpanelu (je njegov sin). Do stackpanela pridemo tako, da zahtevamo njegovega starša (.Parent), ki ga pretvorimo v njegov tip: as StackPanel.

Seznam je globalno ime določeno v xaml.

sedaj ko imamo StackPanel katerega želimo zbrisati, preprosto uporabimo metodo Children.Remove(StackPanel) in element je izbrisan.
-----------------------------------------------------------


dodaj_Click se proži ko kliknemo gumb iz koraka 4.

Na 1. mesto seznama opomnikov dodamo nov opomnik.
(Seznam.Children.Insert(mesto, element))

NovOpomin je globalno ime za tekst ki ga vnašamo. Da pridobimo iz TextBoxa vsebino kličemo lastnost NovOpomin.Text

Ko smo dodali Opomin pa pobrišimo tekst iz vnosnega polja:

NovOpomin.Text = string.Empty
( ali NovOpomin.Text  = "")

Končali smo. Aplikacija bi morala delovati :)