Samouczek: dodawanie kodu do aplikacji Windows Forms przeglądarki obrazów w programie Visual Studio

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. Aby dowiedzieć się więcej, zobacz Witamy w środowisku IDE programu Visual Studio.

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:

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

Wymagania 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. Jeśli nie wykonano tych samouczków, najpierw zapoznaj się z nimi.

Dodawanie procedur obsługi zdarzeń dla kontrolek

W tej sekcji dodaj programy obsługi zdarzeń dla kontrolek dodanych w drugim samouczku Dodawanie kontrolek 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. Projekt przeglądarki obrazów jest wyświetlany w obszarze Otwórz ostatnio używane.

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

   Środowisko IDE programu 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 jest wyświetlany plik kodu za formularzem.

   

   Uwaga

   Karta Form1.vb może wyświetlać wartość 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
   

   Ważne

   Użyj kontrolki języka programowania w prawym górnym rogu tej strony, aby wyświetlić fragment kodu języka C# lub fragment kodu języka Visual Basic.
   
   

4. Ponownie wybierz kartę Windows Forms Projektant, a następnie kliknij dwukrotnie przycisk Wyczyść obraz, aby otworzyć kod. Powtórz pozostałe dwa przyciski. Za każdym razem środowisko IDE programu Visual Studio dodaje nową metodę do pliku kodu formularza.

5. Kliknij dwukrotnie kontrolkę CheckBox w Projektant Windows Forms, 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 wywoływane showButton_Click() lub ShowButton_Click(). Jeśli chcesz zmienić nazwę zmiennej kodu, kliknij prawym przyciskiem myszy zmienną w kodzie, a następnie wybierz polecenie Refaktoryzacja>zmień nazwę. Nazwy wszystkich wystąpień tej zmiennej w kodzie są zmieniane. Aby uzyskać więcej informacji, zobacz 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 Projektant Windows Forms kliknij dwukrotnie przycisk Pokaż obraz. Środowisko IDE przenosi kursor wewnątrz showButton_Click() metody or ShowButton_Click() .

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

   

3. Okno funkcji IntelliSense powinno wyróżnić wyraz if. Wybierz klawisz Tab, aby wstawić ifelement .

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

   

   Funkcja IntelliSense wyświetla plik openFileDialog1.

5. Wybierz kartę , aby dodać plik 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 wybierać kartę. Metoda ShowDialog() wyświetli okno dialogowe Otwieranie pliku.

7. Dodaj nawiasy () bezpośrednio po ciągu "g" w pliku ShowDialog. Kod powinien mieć wartość 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ć wartość DialogResult.

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

    Uwaga

    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ć. showButton_Click() Ostateczna metoda 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 Otwieranie pliku , w którym można wybrać obraz do wyświetlenia.

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

1. W Projektant Windows Forms kliknij dwukrotnie przycisk Wyczyść obraz. Dodaj kod w nawiasach klamrowych.

   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 w nawiasach klamrowych.

   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 w nawiasach klamrowych.

   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 w nawiasach klamrowych.

   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 uruchomić w dowolnym momencie, pisząc ją. 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 klawisz F5.
• Na pasku menu wybierz pozycję Debuguj>Rozpocznij debugowanie.
• Na pasku narzędzi wybierz przycisk Uruchom .

Zostanie wyświetlone okno z tytułem Przeglądarka obrazów. 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 pozycję Pokaż obraz , aby wyświetlić obraz.

   

4. Wybierz i usuń zaznaczenie pozycji Stretch.

5. Wybierz przycisk Wyczyść obraz, aby upewnić się, że ekran jest czyszczy.

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

Następne kroki

Gratulacje! Ta seria samouczków została ukończona. Wykonano te zadania programistyczne i projektowe 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ń

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

Samouczek 2. Tworzenie testu matematycznego z czasem