Ćwiczenie — pisanie aplikacji WPF

  • 15 min

Screenshot that shows the UWP, WPF, and Windows Forms logo.

Program Windows Presentation Foundation (WPF) w programie Visual Studio udostępnia deweloperom interfejs API umożliwiający tworzenie aplikacji dla komputerów stacjonarnych, notatników i tabletów. Platforma WPF jest oparta na zaawansowanym systemie graficznym DirectX i oferuje wiele wspaniałych funkcji interfejsu użytkownika i efektów z niewielkim nakładem pracy programistycznej.

W tej lekcji:

  • Tworzenie projektu WPF przy użyciu programu Visual Studio.
  • Dodaj interfejs użytkownika i elementy kodu do projektu, aby utworzyć zabawną odmianę programu "hello world". Tekst "Hello there!" i obramowanie zmieniają kolor losowo za każdym razem, gdy wybierzesz przycisk Say hello .
  • Dowiedz się, jak ustawiać właściwości i tworzyć zdarzenia.

Uwaga

Zakładamy, że masz skonfigurowany komputer przy użyciu systemów Windows i Visual Studio, zgodnie z opisem w module Learn Introduction to Windows 10 development (Wprowadzenie do programowania w systemie Windows 10).

Samouczek "Say hello" WPF

Tworzenie projektu

  1. Otwórz program Visual Studio i wybierz pozycję Plik>nowy>projekt z menu. Wybierz język C# jako język projektu. Następnie wybierz typ projektu Aplikacja WPF, a w polu Nazwa wprowadź przyjazną nazwę, taką jak Say hello. Po zakończeniu wybierz pozycję Dalej .

    Screenshot that shows the Configure your new project window for a WPF App with the Next button selected.

  2. Wybierz wersję platformy .NET, a następnie wybierz pozycję Utwórz.

  3. Po otwarciu projektu warto upewnić się, że okienka Eksplorator rozwiązań i Właściwości są otwarte. Znajdują się one domyślnie po prawej stronie okna programu Visual Studio. Jeśli nie są widoczne, otwórz menu Widok i wybierz oba z nich.

  4. W Eksplorator rozwiązań upewnij się, że są widoczne nazwy dwóch plików, nad którymi pracujemy: MainWindow.xaml i jego kod za plikiem MainWindows.xaml.cs. Wybierz pozycję MainWindow.xaml , aby go otworzyć.

    Screenshot that shows the MainPage.xaml and MainPage.xaml.cs files in a red box in Solution Explorer.

Projektowanie interfejsu użytkownika

  1. Jeśli przybornik nie jest otwarty, wybierz menu Widok, a następnie wybierz pozycję Przybornik. W przyborniku wybierz pozycję Typowe kontrolki WPF.

    Screenshot that shows the Toolbox menu in Visual Studio with Button and TextBox in red boxes.

  2. Przeciągnij przycisk na dolną część układu projektanta. Następnie przeciągnij kontrolkę TextBox do górnej części układu i przeciągnij jego narożniki nieco tak, aby wyglądało to tak, jak widać tutaj:

    Screenshot that shows a button dragged onto the design layout.

    Uwaga

    Zwróć uwagę, jak przyciski i pozycje TextBox są dodawane do>< siatki w definicji XAML, która jest wyświetlana poniżej układu.

  3. Następnie chcemy zaktualizować tekst wyświetlany na pasku tytułu okna. Wybierz okno w układzie projektanta, aby jego właściwości są widoczne w okienku Właściwości, a następnie zmień tytuł na Say hello.

  4. Teraz chcemy ustawić niektóre właściwości dla nowych elementów interfejsu użytkownika. Wybierz przycisk, aby jego właściwości pojawiły się w okienku Właściwości . Zmień nazwę na prostą, taką jak SayHelloButton, a następnie zmień zawartość we wspólnych właściwościach na Say hello.

    Screenshot that shows the Name and Content properties set in the Properties window.

  5. Musimy dołączyć zdarzenie do przycisku. Możesz wybrać sam przycisk, ale działa to tylko wtedy, gdy układ projektanta jest w wymaganym stanie. Bardziej pewnym sposobem wprowadzenia zdarzenia jest otwarcie zdarzeń dostępnych dla tego elementu interfejsu użytkownika. Możesz to zrobić, wybierając ikonę błyskawicy pokazaną tutaj w okienku Właściwości , a następnie po prostu wybierając wpis dla zdarzenia Kliknij . Spowoduje to automatyczne utworzenie nazwanego zdarzenia SayHelloButton_Click, dodanie odpowiedniego wpisu kodu w pliku MainWindow.xaml.cs i otwarcie pliku.

    Screenshot that shows the Events pane selected in the Properties window, and the Click event in a red box.

  6. Nie wprowadzamy jeszcze żadnego kodu, dlatego wybierz pozycję MainWindow.xaml w widoku głównym. Na razie kontynuujemy pracę nad interfejsem użytkownika.

  7. Wybierz pole tekstowe utworzone w projektancie, aby wyświetlić jego właściwości. Wprowadzimy sporo zmian we właściwościach pola tekstowego. Jeśli zdarzenia są wyświetlane w okienku Właściwości , wybierz ikonę klucza obok nazwy, aby powrócić do nazwanych właściwości.

  8. Zmień wpis Nazwa na textBox1, a następnie we właściwościach Układu zmień odpowiednio wartość Width i Height na 360 i 80.

    Screenshot that shows the Layout properties of Width and Height set in the Properties window.

  9. Zwiń sekcję Układ .

  10. Na liście Rozmiar tekstu zmień rozmiar punktu na 36: coś miłego i widocznego!

    Screenshot that shows the Name set as textBox1 in the properties, and the Tex tab open with 36px selected as the text size.

  11. Karta czcionki oznaczona etykietą A jest domyślnie otwarta dla sekcji Tekst . Wybierz ikonę akapitu i zmień wyrównanie do środka.

    Screenshot that shows the paragraph tab under the Text menu selected, and Center selected as the paragraph justification.

  12. Zwiń sekcję Tekst i rozwiń węzeł Wygląd. Wybierz strzałkę w dół w dolnej części uwidocznionej listy właściwości wyglądu, aby uwidocznić pełną listę. Zmień grubość obramowania na 1 dla lewej i górnej krawędzi oraz na 8 dla prawych i dolnych obramowań. Teraz pole ma nieco efekt cienia kropli!

    Screenshot that shows the Appearance menu expanded in the Properties window, with the BorderThickness settings in a red box.

  13. Zwiń wygląd i rozwiń pozycję Wspólne. Wprowadź tekst pola tekstowego: coś przyjaznego, takiego jak Hello there!.

    Screenshot that shows the Common menu expanded in the Properties window, with Hello there entered in the Text property.

Prawie skończysz z elementami interfejsu użytkownika dla aplikacji. <Wpis Grid> w pliku XAML powinien wyglądać następująco:

Screenshot that shows an example of the the XAML file, with a Button and TextBox element inside the Grid element. All of the Button and Textbox properties are displayed.

Uwaga

Kod XAML można edytować bezpośrednio, zmieniając wartości liczbowe, a nawet dodając całe elementy interfejsu użytkownika. W tym samouczku nie zrobimy tego.

Pisanie kodu za

  1. Teraz możemy przejść z interfejsu użytkownika do kodu dla naszej aplikacji. Nadszedł czas, aby ponownie otworzyć plik MainWindow.xaml.cs. Wybierz plik z powyższego widoku głównego lub w Eksplorator rozwiązań. Klasa MainWindow powinna wyglądać następująco:

    public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void SayHelloButton_Click(object sender, RoutedEventArgs e)
    {

    }
}

  2. Upewnijmy się, że mamy wszystkie niezbędne instrukcje using . Upewnij się, że masz te pokazane tutaj i dodaj je, jeśli nie. Po zakończeniu edytowania pliku możesz opcjonalnie usunąć wszelkie niepotrzebne instrukcje zawarte w programie Visual Studio podczas tworzenia projektu. (Nieużywane przestrzenie nazw są wyświetlane w kolorze szarym).

    using System;
using System.Windows;
using System.Windows.Media;

  3. Aplikacja renderuje tekst hello w losowym kolorze za każdym razem, gdy przycisk jest zaznaczony. Dlatego musimy dodać obiekt losowy na poziomie klasy i metodę GetRandomBytes, która losowo wypełnia wartości, których używamy jako ustawień RGB. Skopiuj i wklej ten kod lub wpisz go samodzielnie, aby klasa MainWindow wyglądała następująco:

    public partial class MainWindow : Window
{
    private Random rand;

    public MainWindow()
    {
        InitializeComponent();
        rand = new Random();
    }

    private byte[] GetRandomBytes(int n)
    {
        // Fill an array of bytes of length "n" with random numbers.
        var randomBytes = new byte[n];
        rand.NextBytes(randomBytes);
        return randomBytes;
    }

    private void SayHelloButton_Click(object sender, RoutedEventArgs e)
    {

    }
}

  4. Na koniec musimy wywołać metodę GetRandomBytes ze zdarzenia kliknięcia przycisku, utworzyć losowy kolor z zwracanej tablicy bajtów, a następnie zmienić właściwości pola tekstowego na ten kolor. Ukończona metoda SayHelloButton_Click powinna wyglądać następująco:

        private void SayHelloButton_Click(object sender, RoutedEventArgs e)
    {
        byte[] rgb = GetRandomBytes(3);

        // Create a solid color brush using the three random numbers.
        var randomColorBrush = new SolidColorBrush(Color.FromArgb(255, rgb[0], rgb[1], rgb[2]));

        // Set both the text color and the text box border to the random color.
        textBox1.BorderBrush = randomColorBrush;
        textBox1.Foreground = randomColorBrush;
    }

  5. Zajmij sekundę lub dwie, aby sprawdzić kod. Jeśli coś jest podkreślone na czerwono, coś nie jest w porządku. Może to być błędnie napisany wyraz lub fragment kodu, w którym nie powinien być.

Uruchom

Skompilujmy i uruchomimy program!

  1. W programie Visual Studio w menu Debugowanie wybierz pozycję Rozpocznij bez debugowania (lub Rozpocznij debugowanie, choć nie przeprowadzamy żadnego debugowania w tym samouczku) lub po prostu wybierz klawisz F5. Jeśli wszystko zostało wprowadzone poprawnie, powinna zostać wyświetlona uruchomiona aplikacja podobna do następującej:

    Screenshot that shows the app running. Hello there displays with red text in a red box with the Say hello button below it.

  2. Wybierz przycisk Powiedz hello wielokrotnie, aby zobaczyć tekst Hello there! i obramowanie zmienia się na losowe kolory.

Jeśli to jest to, co widzisz, dobrze zrobione! Ten samouczek został ukończony. Jeśli nie, dokładnie przeanalizuj ustawienia kodu i właściwości interfejsu użytkownika dla czegoś, co nie było pośród.