Skip to content

Instantly share code, notes, and snippets.

@pjastr
Last active February 4, 2018 20:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save pjastr/37926221b271cbbf123a42428e9cb77d to your computer and use it in GitHub Desktop.
Save pjastr/37926221b271cbbf123a42428e9cb77d to your computer and use it in GitHub Desktop.
  1. Stwórz nowy projekt o typie WPF Application – Visual C#.
  2. Przejrzyj pliki projektu z poziomu Visual Studio.
  • App.xaml i App.xaml.cs
  • MainPage.xaml i MainPage.xaml.cs

Otwórz projekt w Eksplorerze plików. Wejdź do folderu Obj/Debug. Sprawdź zawartość plików App.g.i.cs i MainWindow.g.i.cs.

  1. Przejdź do pliku MainPage.xaml w trybie Design. Otwórz okno Toolbox i przypnij je dziś do końca ćwiczeń na stałe do VS (View->Toolbox lub Ctrl+Alt+X).

  2. Metodą przeciągnij i upuść umieść Button na środku okna MainPage.xaml. Przejdź do zakładki XAML i sprawdź jaki kod został wygenerowany automatycznie.

  3. Zmień właściwość Content na "Hello World". Skompiluj i uruchom program.

  4. Za pomocą kursora myszy zmień położenie elementu Button. Potem ręcznie zmodyfikuje w kodzie XAML właściwość Margin. Co się stanie jak będą tylko dwa parametry? a co będzie jeśli tylko jeden?

  5. Naciśnij Button prawym klawiszem myszy. Wybierz opcję Layout i Reset Margin. Gdzie przemieści się przycisk?

  6. Teraz zmodyfikuj właściwość Margin z okna Properties, Layout.

  7. Dla elementu Button zmodyfikuj poćwicz zmianę parametru VerticalAlignment i HorizontalAlignment na 3 sposoby (Designer, kod XAML, okno Properties). Na koniec wyśrodkuj Button i wyzeruj marginesy.

  8. Dla elementu Button w oknie Properties w polu Name wpisz Przycisk. Co się zmieniło w kodzie?

  9. Na oknie Design kliknij dwa razy na Button. Powinna wygenerować Ci się metoda Przycisk_Click. W jej wnętrzu wpisz: MessageBox.Show("Witaj Świecie"); Potem skompiluj i uruchom program.

  10. Do aplikacji dodaj dwa elementy typu TextBox. Nazwij je Liczba1 i Liczba2. W właściwości Text ustaw odpowiedniej "Podaj pierwszą liczbę" i "Podaj drugą liczbę".

  11. Zmień właściwość Content elementu Button na Dodaj.

  12. Zmodyfikuj wnętrze metody Przycisk_Click następująco:

double liczba1=Convert.ToDouble(Liczba1.Text); 
double liczba2 = Convert.ToDouble(Liczba2.Text);
double wynik = liczba1 + liczba2;
MessageBox.Show(wynik.ToString());

Następnie skompiluj i uruchom program.

  1. Uzupełnione elementy TextBox nie są dobrym rozwiązaniem za każdym razem. Usuń z nich właściwość Text.

  2. Z lewej strony TextBox umieść odpowiednie dwa elementy Label. Content ustaw jako Pierwsza Liczba i Druga Liczba. Zadbaj o dobry wygląd aplikacji po kompilacji.

  3. Cały czas MessageBox nie wygląda za fajnie. Pod elementem Button Dodaj umieść Label. Usuń w niej Content a nazwę ustaw na Wynik.

  4. Zmodyfikuj wnętrze metody Przycisk_Click. Usuń linijkę z MessageBoxem. Zamiast tego wpisz: Wynik.Content = wynik.ToString();

  5. Z Toolboxa upuść nowy Button i nadaj mu nazwę PrzyciskCzas oraz Content jako Czas. Zaznacz go jako aktywny myszką. W Oknie Properties kliknij na "piorunik" i wyszukaj pole MouseEnter - kliknij w nie dwa razy. We wnętrzu wygenerowanej metody wrzuć:

PrzyciskCzas.Content = DateTime.Now.ToString("HH:mm:ss");

Następnie zrób podobnie z polem MouseLeave i tam we wnętrzu wpisz:

PrzyciskCzas.Content = "Czas";
  1. Stwórz nowy projekt dla WPF.

  2. Za pomocą designera lub ręcznie kodem usuń grid w MainWindow. Przydatne okno Document Outline (Ctrl+Alt+T).

  3. Na window za pomocą designera upuść StackPanel.

  4. Na StackPanel upuść 5 przycisków. Śledź zmiany w kodzie. Jakie parametry możesz pozmieniać w designer? jakie w Properties? a jakie ręcznie w kodzie? czy możesz w dowolny sposób umieścić buttony?

  5. Ręcznie w kodzie zmień StackPanel na WrapPanel. Co się zmieniło?

  6. Teraz WrapPanel zamień na DockPanel (naciskając prawym klawisz myszy na WrapPanel, potem Change Layout Type). Sprawdź zmiany.

  7. Zmień DockPanel na Grid.

  8. Za pomocą designera stwórz kilka rzędów i kolumn. Spójrz na kod.

  9. Za pomocą designera i bezpośrednio w kodzie zrób tak, aby każdy wcześniej dodany button był w oddzielnym elemencie w siatce.

  10. Upewnij się że w kodzie do każdego button jest przypisany rząd i kolumna. Następnie za pomocą designera zmień szerokość niektórych rzędów i kolumn.

  11. Stwórz kalkulator w WPF.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment