Samouczek: dodawanie kodu do przeglądarki obrazów aplikacji Windows Forms App (.NET Framework)

W tej serii trzech samouczków utworzysz aplikację Windows Forms, która ładuje obraz i wyświetla go. Zintegrowane środowisko projektowe programu Visual Studio (IDE) udostępnia narzędzia potrzebne do utworzenia aplikacji.

Kontrolki używają kodu C# lub Visual Basic do podejmowania skojarzonych z nimi akcji.

Z tego trzeciego samouczka dowiesz się, jak wykonywać następujące działania:

• Dodaj procedury obsługi zdarzeń dla kontrolek
• Pisanie kodu w celu otwarcia okna dialogowego
• Pisanie kodu dla innych kontrolek
• Uruchamianie aplikacji

Aby utworzyć nową aplikację windows Forms za pomocą platformy .NET, wykonaj czynności opisane w samouczku Tworzenie aplikacji Windows Forms przy użyciu platformy .NET. Aby dowiedzieć się więcej, zapoznaj się z przewodnikiem Desktop na platformie .NET formularzy systemu Windows.

Warunki wstępne

• Ten samouczek opiera się na poprzednich samouczkach, Tworzenie aplikacji przeglądarki obrazów i Dodawanie kontrolek interfejsu użytkownika do przeglądarki obrazów. Ukończ je najpierw, a następnie rozpocznij pracę nad projektem, który utworzyłeś dla tych samouczków.

Dodaj procedury obsługi zdarzeń do swoich kontrolek

W tej sekcji dodaj procedury obsługi zdarzeń dla elementów sterujących dodanych w drugim samouczku, Dodawanie elementów sterujących do aplikacji przeglądarki obrazów. Aplikacja wywołuje procedurę obsługi zdarzeń, gdy wykonywana jest akcja, na przykład wybranie przycisku.

1. Otwórz program Visual Studio. Twój projekt Przeglądarki Obrazów znajduje się pod Otwórz ostatnie.

2. W projektancie Windows Forms kliknij dwukrotnie przycisk Pokaż obraz. Zamiast tego możesz wybrać przycisk Pokaż obraz w formularzu, a następnie nacisnąć Enter.

   Środowisko IDE Visual Studio otwiera kartę w oknie głównym. W języku C# karta nosi nazwę Form1.cs. Jeśli używasz języka Visual Basic, karta nosi nazwę Form1.vb.

   Na tej karcie wyświetlany jest plik kodu dla formularza.

   

   Nota

   Karta Form1.vb może wyświetlać showButton jako ShowButton.

3. Skoncentruj się na tej części kodu.

   C#

   private void showButton_Click(object sender, EventArgs e)
   {
   }
   

   VB

   Private Sub showButton_Click() Handles showButton.Click
   
   End Sub
   

4. Wybierz ponownie kartę Windows Forms Designer, a następnie kliknij dwukrotnie na przycisk Wyczyść obraz, aby otworzyć jego kod. Powtórz czynność dla pozostałych dwóch przycisków. Za każdym razem środowisko IDE programu Visual Studio dodaje nową metodę do pliku kodu formularza.

5. Kliknij dwukrotnie kontrolkę CheckBox w programie Windows Forms Designer, aby dodać metodę checkBox1_CheckedChanged(). Po zaznaczeniu lub wyczyszciu pola wyboru wywołuje ona tę metodę.

   Poniższy fragment kodu przedstawia nowy kod widoczny w edytorze kodu.

   C#

   private void clearButton_Click(object sender, EventArgs e)
   {
   }
   
   private void backgroundButton_Click(object sender, EventArgs e)
   {
   }
   
   private void closeButton_Click(object sender, EventArgs e)
   {
   }
   
   private void checkBox1_CheckedChanged(object sender, EventArgs e)
   {
   }
   

   VB

   Private Sub clearButton_Click() Handles clearButton.Click
   
   End Sub
   
   Private Sub backgroundButton_Click() Handles backgroundButton.Click
   
   End Sub
   
   Private Sub closeButton_Click() Handles closeButton.Click
   
   End Sub
   
   Private Sub CheckBox1_CheckedChanged() Handles CheckBox1.CheckedChanged
   
   End Sub
   

---

Metody, w tym programy obsługi zdarzeń, mogą mieć dowolną nazwę. Po dodaniu programu obsługi zdarzeń za pomocą środowiska IDE tworzy ona nazwę opartą na nazwie kontrolki i obsługiwanym zdarzeniu.

Na przykład zdarzenie Click dla przycisku o nazwie showButton jest nazywane showButton_Click() lub ShowButton_Click(). Jeśli chcesz zmienić nazwę zmiennej kodu, kliknij prawym przyciskiem myszy zmienną w kodzie, a następnie wybierz Refaktoryzacja>Zmień nazwę. Ta akcja zmienia nazwę wszystkich wystąpień tej zmiennej w kodzie. Aby uzyskać więcej informacji, zobacz temat Refaktoryzacja zmiany nazwy.

Pisanie kodu w celu otwarcia okna dialogowego

Przycisk Pokaż obraz używa składnika OpenFileDialog do wyświetlania pliku obrazu. Ta procedura dodaje kod używany do wywoływania tego składnika.

Środowisko IDE programu Visual Studio oferuje zaawansowane narzędzie o nazwie IntelliSense. Podczas wpisywania funkcja IntelliSense sugeruje możliwy kod.

1. W programie Windows Forms Designerkliknij dwukrotnie przycisk Pokaż obraz. Środowisko IDE przenosi kursor wewnątrz metody showButton_Click() lub ShowButton_Click().

2. Wpisz i w pustym wierszu między dwoma nawiasami klamrowymi { }lub między Private Sub... a End Sub. Zostanie otwarte okno IntelliSense.

   

3. Okno IntelliSense powinno wyróżnić wyraz if. Naciśnij dwukrotnie klawisz Tab , aby wstawić fragment if.

4. Wybierz true, a następnie wpisz op, aby zastąpić go dla języka C# lub Op dla języka Visual Basic.

   

   Funkcja IntelliSense wyświetla openFileDialog1.

5. Wybierz kartę , aby dodać openFileDialog1.

6. Wpisz kropkę (.) lub kropkę , bezpośrednio po openFileDialog1. Funkcja IntelliSense udostępnia wszystkie właściwości i metody składnika OpenFileDialog. Zacznij wpisywać ShowDialog i wybierz kartę . Metoda ShowDialog() zawiera okno dialogowe Otwórz plik.

7. Dodaj nawiasy () bezpośrednio po "g" w ShowDialog. Kod powinien być openFileDialog1.ShowDialog().

8. W języku C#dodaj spację, a następnie dodaj dwa znaki równości (==). W przypadku języka Visual Basic dodaj spację, a następnie użyj pojedynczego znaku równości (=).

9. Dodaj kolejne miejsce. Użyj funkcji IntelliSense, aby wprowadzić DialogResult.

10. Wpisz kropkę, aby otworzyć wartość DialogResult w oknie IntelliSense. Wprowadź literę O i wybierz klawisz Tab , aby wstawić OK.

    Notatka

    Pierwszy wiersz kodu powinien zostać ukończony. W przypadku języka C#powinien być podobny do poniższego.

    if (openFileDialog1.ShowDialog() == DialogResult.OK)

    W przypadku języka Visual Basic powinno to być następujące.

    If OpenFileDialog1.ShowDialog() = DialogResult.OK Then

11. Dodaj następujący wiersz kodu.

    C#

    pictureBox1.Load(openFileDialog1.FileName);  
    

    VB

    PictureBox1.Load(OpenFileDialog1.FileName)
    

    Możesz skopiować i wkleić lub użyć funkcji IntelliSense, aby ją dodać. Ostateczna metoda showButton_Click() powinna wyglądać podobnie do poniższego kodu.

    C#

    private void showButton_Click(object sender, EventArgs e)
    {
        if (openFileDialog1.ShowDialog() == DialogResult.OK)
        {
            pictureBox1.Load(openFileDialog1.FileName);  
        }
    }
    

    VB

    Private Sub showButton_Click() Handles showButton.Click
        If OpenFileDialog1.ShowDialog() = DialogResult.OK Then
            PictureBox1.Load(OpenFileDialog1.FileName)
        End If
    
    End Sub
    

---

1. Dodaj następujący komentarz do kodu.

   C#

   private void showButton_Click(object sender, EventArgs e)
   {
       // Show the Open File dialog. If the user clicks OK, load the
       // picture that the user chose.
       if (openFileDialog1.ShowDialog() == DialogResult.OK)
       {
           pictureBox1.Load(openFileDialog1.FileName);
       }
   }
   

   VB

   Private Sub showButton_Click() Handles showButton.Click
   
       ' Show the Open File dialog. If the user clicks OK, load the
       ' picture that the user chose.
       If OpenFileDialog1.ShowDialog() = DialogResult.OK Then
           PictureBox1.Load(OpenFileDialog1.FileName)
       End If
   
   End Sub
   

---

Najlepszym rozwiązaniem jest zawsze komentowanie kodu. Komentarze kodu ułatwiają zrozumienie i utrzymanie kodu w przyszłości.

Pisanie kodu dla innych kontrolek

Jeśli teraz uruchomisz aplikację, możesz wybrać pozycję Pokaż obraz. Przeglądarka obrazów otwiera okno dialogowe Otwórz plik, w którym można wybrać obraz do wyświetlenia.

W tej sekcji dodaj kod dla innych programów obsługi zdarzeń.

1. W projektancie formularzy Windows Forms Designerkliknij dwukrotnie przycisk Wyczyść obraz. W przypadku języka C# dodaj kod między nawiasami klamrowymi. W przypadku języka Visual Basic dodaj kod między Private Sub i End Sub.

   C#

   private void clearButton_Click(object sender, EventArgs e)
   {
       // Clear the picture.
       pictureBox1.Image = null;
   }
   

   VB

   Private Sub clearButton_Click() Handles clearButton.Click
       ' Clear the picture.
       PictureBox1.Image = Nothing
   End Sub   
   

2. Kliknij dwukrotnie przycisk Ustaw kolor tła i dodaj kod.

   C#

   private void backgroundButton_Click(object sender, EventArgs e)
   {
       // Show the color dialog box. If the user clicks OK, change the
       // PictureBox control's background to the color the user chose.
       if (colorDialog1.ShowDialog() == DialogResult.OK)
           pictureBox1.BackColor = colorDialog1.Color;
   }
   

   VB

   Private Sub backgroundButton_Click() Handles backgroundButton.Click
       ' Show the color dialog box. If the user clicks OK, change the
       ' PictureBox control's background to the color the user chose.
       If ColorDialog1.ShowDialog() = DialogResult.OK Then
           PictureBox1.BackColor = ColorDialog1.Color
       End If
   End Sub
   

3. Kliknij dwukrotnie przycisk Zamknij i dodaj kod.

   C#

   private void closeButton_Click(object sender, EventArgs e)
   {
       // Close the form.
       this.Close();
   }
   
   

   VB

   Private Sub closeButton_Click() Handles closeButton.Click
       ' Close the form.
       Close()
   End Sub  
   

4. Kliknij dwukrotnie pole wyboru Stretch i dodaj kod.

   C#

   private void checkBox1_CheckedChanged(object sender, EventArgs e)
   {
       // If the user selects the Stretch check box, 
       // change the PictureBox's
       // SizeMode property to "Stretch". If the user clears 
       // the check box, change it to "Normal".
       if (checkBox1.Checked)
           pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;
       else
           pictureBox1.SizeMode = PictureBoxSizeMode.Normal;
   }
   

   VB

   Private Sub CheckBox1_CheckedChanged() Handles CheckBox1.CheckedChanged
       ' If the user selects the Stretch check box, change 
       ' the PictureBox's SizeMode property to "Stretch". If the user 
       ' clears the check box, change it to "Normal".
       If CheckBox1.Checked Then
           PictureBox1.SizeMode = PictureBoxSizeMode.StretchImage
       Else
           PictureBox1.SizeMode = PictureBoxSizeMode.Normal
       End If
   End Sub   
   

Uruchamianie aplikacji

Aplikację można uruchamiać w dowolnym momencie podczas pisania. Po dodaniu kodu w poprzedniej sekcji przeglądarka obrazów zostanie ukończona. Podobnie jak w poprzednich samouczkach, użyj jednej z następujących metod, aby uruchomić aplikację:

• Wybierz klucz F5.
• Na pasku menu wybierz pozycję Debugowanie>Rozpocznij debugowanie.
• Na pasku narzędzi kliknij przycisk Start.

Zostanie wyświetlone okno z tytułem Picture Viewer. Przetestuj wszystkie kontrolki.

1. Wybierz przycisk Ustaw kolor tła. Zostanie otwarte okno dialogowe kolor .

   

2. Wybierz kolor, aby ustawić kolor tła.

3. Wybierz Pokaż obraz, aby wyświetlić obraz.

   

4. Wybierz i usuń zaznaczenie stretch.

5. Wybierz przycisk Wyczyść obraz, aby upewnić się, że wyświetlacz zostanie wyczyszczony.

6. Wybierz pozycję Zamknij, aby zamknąć aplikację.

Gratulacje! Ukończyłeś tę serię samouczków. Te zadania programistyczne i projektowe zostały wykonane w środowisku IDE programu Visual Studio:

• Utworzono projekt programu Visual Studio korzystający z formularzy Systemu Windows
• Dodano układ aplikacji do wyświetlania obrazów
• Dodano przyciski i pole wyboru
• Dodane okna dialogowe
• Dodano programy obsługi zdarzeń dla kontrolek
• Napisany kod w języku C# lub Visual Basic do obsługi zdarzeń

Następny krok

Kontynuuj naukę z inną serią samouczków, aby dowiedzieć się, jak utworzyć test matematyczny z czasem.

Samouczek 2: Stwórz quiz matematyczny z ograniczeniem czasowym