[Tutorial] XAML od Podstaw - Lekcja 2

[`DrumZy]

Witam w kolejnej lekcji.

Lekcja nr. 2 - Poznajemy kontrolki, i ustawiamy właściwości okna (w tym zmiana nazwy pliku).

1. Ok zaczynamy, otwieramy Visual'a.

Tworzymy nowy projekt (WPF Application) z obojętnie jaką nazwą.

Przechodzimy do widoku XAML'a (jak nie wiesz jak to zrobić przeczytaj poprzednia lekcję).

Pomiędzy:

Kod: Zaznacz cały

<Grid>

</Grid>

Wpisujemy:

Kod: Zaznacz cały

<ListBox Width="120" Height="200" HorizontalAlignment="Left">
            <ListBoxItem Name="lstItem1" Content="Mój Itemek"/>
        </ListBox>
        <TextBox Name="txtAdd" Height="25" MaxLength="15" Margin="138,31,20,0" VerticalAlignment="Top" />
        <Button Name="btnAdd" Width="100" Height="25" Content="Dodaj Item" HorizontalAlignment="Right" Margin="0,70,30,0" VerticalAlignment="Top" />
        <Button Name="btnRemove" Width="100" Height="25" Content="Usuń Item" HorizontalAlignment="Right" Margin="0,0,30,31" VerticalAlignment="Bottom" />


Nie przejmujcie się jeżeli coś jest nie zrozumiałe, zaraz to wytłumaczę.

Tak powinno to wyglądać:



Po wpisaniu klikamy F5.

Tak wygląda nasza aplikacja, ale niestety jeszcze nic nie robi.

2. Wyjaśniam kod...

Kod: Zaznacz cały

<ListBox Name="lstListBox" Width="120" Height="200" HorizontalAlignment="Left">
            <ListBoxItem Name="lstItem1" Content="Mój Itemek"/>
        </ListBox>


Jest to implementacja kontroli ListBox, która przetrzymuje dowolne wartości w tablicy (zazwyczaj string).

Zaczynamy oczywiście od znaczników <ListBox></ListBox>.

Można też pisać <NazwaKontrolki />, ale to nie jest polecane do wszystkich kontrolek, ale dokładniej o tym w innym tutorial'u.

Następnie określamy własności kontrolki:

Name - czyli przestrzeń nazw używana w code-behind (plik Window1.xaml.cs).
Width - czyli szerokość.
Height - czyli wysokość.
HorizontalAlignment/VerticalAlignment - Czyli poziome/pionowe wyrównanie. (w tym przypadku jest poziomo to "do lewej")

Następnie kodem:

Kod: Zaznacz cały

<ListBoxItem Name="lstItem1" Content="Mój Itemek"/>

Dodajemy Item do ListBox'a.

UWAGA! W XAML'u wartość Item'u określamy własnością Content="" a nie jak to było w WinForms Text!

Następnie mamy TextBox i dwa Button'y:

Kod: Zaznacz cały

<TextBox Name="txtAdd" Height="25" MaxLength="15" Margin="138,31,20,0" VerticalAlignment="Top" />
        <Button Name="btnAdd" Width="100" Height="25" Content="Dodaj Item" HorizontalAlignment="Right" Margin="0,70,30,0" VerticalAlignment="Top" />
        <Button Name="btnRemove" Width="100" Height="25" Content="Usuń Item" HorizontalAlignment="Right" Margin="0,0,30,31" VerticalAlignment="Bottom" />


Określamy MaxLenght, czyli maksymalna ilość znaków które można wpisać.

Margin - czyli marginesy z każdej strony, stosowane do ustawiania kontrolki we właściwym dla nas miejscu.

A resztę już poznaliśmy

/------------------------------------------------/

3. Kontakt z użytkownikiem.

Teraz wypadałoby oprogramować przyciski. (czyli nadać im życie)

Najpierw musimy dodać zdarzenie kliknięcia.
Robimy to pisząc w XAML'u w kontrolce <Button> (btnAdd) własność Click="(Tutaj naciskamy enter)". Klikając Enter IDE samo utworzy nam zdarzenie w pliku Window1.xaml.cs.

Przechodzimy więc do tegoż pliku, gdzie widzimy:



Dodane zdarzenie btnAdd_Click.

Teraz w nim piszemy:

Kod: Zaznacz cały

lstListBox.Items.Add(txtAdd.Text);

Stary dobry C#. )
Chyba nie trzeba tłumaczyć co ten kod robi?
Trzeba? Ech...

Więc, dodaje on Item do lstListBox (własność Name kontrolki <ListBox>) o nazwie którą wpisaliśmy w TextBox'ie. (txtAdd)

Wracamy do Designer'a Window1.xaml i naciskamy F5, wpisujemy coś w TextBox'a i klikamy Dodaj Item.

Tak powinno to wyglądać:



OK! Teraz należy oprogramować przycisk usuwania Item'ów.

Robimy tak samo jak z przyciskiem dodający (również przy zdarzeniu Click="" wybieramy Add Event Handler).

W metode btnRemove_Click wpisujemy:

Kod: Zaznacz cały

lstListBox.Items.Remove(lstListBox.SelectedItem);

Kod ten usuwa zaznaczony Item z listy.

Zapisujemy projekt, wracamy do Designer'a i naciskamy F5.
Zaznaczamy podstawowy Item (Mój Itemek) i naciskamy Usuń Item.

Tak powinno to wyglądać po usunięciu:



A tak wygląda kod w pliku cs:



I to wszystko na dziś.

Możecie dodać różne funkcje np. sprawdzanie czy tekst który ma być dodany nie jest pusty.

/---------------------------/

4. Teraz zajmiemy się sprawą zmiany nazwy okna Window1.xaml.

Należy w Solution Explorer'ze kliknąć prawym przyciskiem myszy na Window1.xaml i wybrać Rename zmieniamy nazwę na OknoGlowne (bez polskich znaków i z rozszerzeniem .xaml ).

Teraz wchodzimy do XAML View'a (patrz Tutorial 1).

Szukamy kodu na początku <Window x:Class="NazwaProjektu.Window1" i zmieniamy Window1 na OknoGlowne.

Następnie przechodzimy do pliku OknoGlowne.xaml.cs.

Zmieniamy public partial class Window1 : Window na public partial class OknoGlowne : Window
Najeżdżamy na czerwone podkreślenie pod OknoGlowne i wybieramy Rename Window1 na OknoGlowne.

Następnie przechodzimy do pliku App.xaml (Solution Explorer) i szukamy linijki StartupUri="Window1.xaml" zmieniamy Window1 na OknoGlowne.

Zapisujemy projekt i naciskamy F5. Tak o to mamy zmienioną nazwę pliku.

Jest z tym trochę zachodu, może w Visual C# 2010 będzie lepiej.

/-------------------------/

To by było na tyle dzisiaj.

W następnej lekcji:

- Poznamy różne rodzaje paneli.

/----------------------------------/
Pozdrawiam i Polecam `DruMzY

[MaRCHeW]

Witam.

Z przyjemnością przeczytam kolejne lekcje.

Pozdrawiam
Karol Marchewka

[MaRCHeW]

Witam.

`DrumZy będą kolejne lekcje?

Pozdrawiam
Karol Marchewka

[`DrumZy]

Postaram się jak najszybciej dodać kolejne, ciekawsze lekcje