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