[Tutorial] XAML od Podstaw - Lekcja 2

Ciekawe artykuły dotyczące C#

Moderator: xxSlayeRxx

[Tutorial] XAML od Podstaw - Lekcja 2

Sponsor

Sponsor
 

[Tutorial] XAML od Podstaw - Lekcja 2

Postprzez `DrumZy » Pt lut 26, 2010 11:08 am

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ć:

Obrazek

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:

Obrazek

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ć:

Obrazek

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:

Obrazek

A tak wygląda kod w pliku cs:

Obrazek

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
`DrumZy
Member
 
Posty: 93
Dołączył(a): Pt maja 22, 2009 6:56 pm
Lokalizacja: Piotrków Trybunalski

Re: [Tutorial] XAML od Podstaw - Lekcja 2

Postprzez MaRCHeW » N mar 14, 2010 11:30 am

Witam.

Z przyjemnością przeczytam kolejne lekcje.

Pozdrawiam
Karol Marchewka
MaRCHeW
Member
 
Posty: 34
Dołączył(a): Śr wrz 12, 2007 6:07 pm

Re: [Tutorial] XAML od Podstaw - Lekcja 2

Postprzez MaRCHeW » So maja 01, 2010 8:39 am

Witam.

`DrumZy będą kolejne lekcje?

Pozdrawiam
Karol Marchewka
MaRCHeW
Member
 
Posty: 34
Dołączył(a): Śr wrz 12, 2007 6:07 pm

Re: [Tutorial] XAML od Podstaw - Lekcja 2

Postprzez `DrumZy » Śr lip 14, 2010 12:16 pm

Postaram się jak najszybciej dodać kolejne, ciekawsze lekcje :)
`DrumZy
Member
 
Posty: 93
Dołączył(a): Pt maja 22, 2009 6:56 pm
Lokalizacja: Piotrków Trybunalski

Re: [Tutorial] XAML od Podstaw - Lekcja 2

Sponsors

Sponsor
 


Powrót do Artykuły

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 2 gości