Samouczek: dodawanie kontrolek interfejsu użytkownika 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.

Ten program ma pole wyboru, pole wyboru i kilka przycisków, których można użyć do sterowania aplikacją. W tym samouczku pokazano, jak dodać te kontrolki.

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

• Dodawanie kontrolek do aplikacji
• Dodawanie przycisków w panelu układu
• Zmienianie nazw kontrolek i lokalizacji
• Dodawanie składników okna dialogowego

Wymagania wstępne

Ten samouczek opiera się na poprzednim samouczku: Tworzenie aplikacji przeglądarki obrazów. Jeśli nie zrobiono tego samouczka, najpierw zapoznaj się z tym samouczkiem.

Dodawanie kontrolek do aplikacji

Aplikacja Picture Viewer używa kontrolki PictureBox do wyświetlania obrazu. Używa pola wyboru i kilku przycisków do zarządzania obrazem i tłem oraz zamykania aplikacji. Dodasz pole wyboru PictureBox i pole wyboru z przybornika w środowisku IDE programu Visual Studio.

1. Otwórz program Visual Studio. Projekt przeglądarki obrazów jest wyświetlany w obszarze Otwórz ostatnio używane.

2. W Projektant formularzy systemu Windows wybierz kontrolkę TableLayoutPanel, którą dodano w poprzednim samouczku. Sprawdź, czy tableLayoutPanel1 jest wyświetlana w oknie Właściwości .

3. Po lewej stronie środowiska IDE programu Visual Studio wybierz kartę Przybornik. Jeśli go nie widzisz, wybierz pozycję Wyświetl>przybornik na pasku menu lub Ctrl+Alt+X. W przyborniku rozwiń pozycję Typowe kontrolki.

4. Kliknij dwukrotnie pozycję PictureBox , aby dodać kontrolkę PictureBox do formularza. Środowisko IDE programu Visual Studio dodaje kontrolkę PictureBox do pierwszej pustej komórki tableLayoutPanel.

5. Wybierz nową kontrolkę PictureBox , aby ją zaznaczyć, a następnie wybierz czarny trójkąt w nowej kontrolce PictureBox, aby wyświetlić listę zadań.

   

6. Wybierz pozycję Dock w kontenerze nadrzędnym, który ustawia właściwość PictureBox Dock na Wypełnienie. Ta wartość jest widoczna w oknie Właściwości .

7. W oknie Właściwości pola PictureBox ustaw właściwość ColumnSpan na 2. Pole PictureBox wypełnia teraz obie kolumny.

8. Ustaw właściwość BorderStyle na Fixed3D.

9. W Projektant formularzy systemu Windows wybierz pozycję TableLayoutPanel. Następnie w przyborniku kliknij dwukrotnie element CheckBox, aby dodać nową kontrolkę CheckBox. Pole PictureBox zajmuje pierwsze dwie komórki w tableLayoutPanel, więc kontrolka CheckBox jest dodawana do komórki w lewym dolnym rogu.

10. Wybierz właściwość Text i wprowadź ciąg Stretch.

    

Dodawanie przycisków w panelu układu

Kontrolki do tej pory zostały dodane do tableLayoutPanel. Te kroki pokazują, jak dodać cztery przyciski do nowego panelu układu w tableLayoutPanel.

1. Wybierz kontrolkę TableLayoutPanel w formularzu. Otwórz przybornik, wybierz pozycję Kontenery. Kliknij dwukrotnie element FlowLayoutPanel , aby dodać nową kontrolkę do ostatniej komórki tableLayoutPanel.

2. Ustaw właściwość Dock elementu FlowLayoutPanel na Fill. Tę właściwość można ustawić, wybierając czarny trójkąt, a następnie wybierając pozycję Dock w kontenerze nadrzędnym.

   A FlowLayoutPanel to kontener, który rozmieszcza inne kontrolki w wierszu, po drugim.

3. Wybierz nową kontrolkę FlowLayoutPanel, a następnie otwórz przybornik i wybierz pozycję Typowe kontrolki. Kliknij dwukrotnie element Przycisk, aby dodać kontrolkę przycisku o nazwie button1.

4. Kliknij dwukrotnie przycisk, aby dodać kolejny przycisk. Środowisko IDE wywołuje następny przycisk2.

5. Dodaj dwa kolejne przyciski w ten sposób. Inną opcją jest wybranie przycisku2, a następnie wybranie pozycji Edytuj>kopię lub naciśnięcie klawisza Ctrl+C. Następnie wybierz pozycję Edytuj>wklej na pasku menu lub naciśnij klawisze Ctrl+V. Aby wkleić kopię przycisku. Teraz wklej go ponownie. Zwróć uwagę, że środowisko IDE dodaje przycisk3 i przycisk4 do kontrolki FlowLayoutPanel.

6. Wybierz pierwszy przycisk i ustaw jego właściwość Text na Pokaż obraz.

7. Ustaw właściwości Text następnych trzech przycisków na Wyczyść obraz, Ustaw kolor tła i Zamknij.

8. Aby rozmieścić przyciski i rozmieścić je, wybierz panel FlowLayoutPanel. Ustaw właściwość FlowDirection na RightToLeft.

   Przyciski powinny wyrównać się do prawej strony komórki i odwrócić kolejność, tak aby przycisk Pokaż obraz był po prawej stronie. Możesz przeciągnąć przyciski wokół kontrolki FlowLayoutPanel, aby rozmieścić je w dowolnej kolejności.

9. Wybierz przycisk Zamknij, aby go wybrać. Następnie, aby wybrać resztę przycisków w tym samym czasie, naciśnij i przytrzymaj klawisz Ctrl , a następnie wybierz je.

10. W oknie Właściwości ustaw właściwość AutoSize na true. Rozmiar przycisków zmienia się tak, aby pasował do tekstu.

    

Możesz uruchomić program, aby zobaczyć, jak wyglądają kontrolki. Wybierz klawisz F5, wybierz pozycję Debuguj> rozpocznij debugowanie lub wybierz przycisk Uruchom. Dodane przyciski jeszcze nic nie robią.

Zmienianie nazw kontrolek

W formularzu znajdują się cztery przyciski o nazwie button1, button2, button3 i button4 w języku C#. W języku Visual Basic domyślna pierwsza litera dowolnej nazwy kontrolki jest wielkich liter, więc przyciski mają nazwę Button1, Button2, Button3 i Button4. Wykonaj te kroki, aby nadać im więcej informacji.

1. W formularzu wybierz przycisk Zamknij . Jeśli nadal masz wybrane wszystkie przyciski, wybierz klawisz Esc , aby anulować zaznaczenie.

2. W oknie Właściwości wyszukaj ciąg (Nazwa). Zmień nazwę na closeButton.

   

   Środowisko IDE nie akceptuje nazw zawierających spacje.

3. Zmień nazwy pozostałych trzech przycisków na backgroundButton, clearButton i showButton. Nazwy można zweryfikować, wybierając listę rozwijaną selektora kontrolek w oknie Właściwości . Pojawią się nowe nazwy przycisków.

Możesz zmienić nazwę dowolnej kontrolki, na przykład TableLayoutPanel lub pole wyboru.

Dodawanie składników okna dialogowego

Aplikacja może otwierać pliki obrazów i wybierać kolor tła przy użyciu składników. Składnik jest jak kontrolka. Przybornik służy do dodawania składnika do formularza. Właściwości można ustawić przy użyciu okna Właściwości .

W przeciwieństwie do kontrolki dodanie składnika do formularza nie powoduje dodania widocznego elementu. Zamiast tego zapewnia pewne zachowania, które można wyzwolić za pomocą kodu. Na przykład jest to składnik, który otwiera okno dialogowe Otwieranie pliku .

W tej sekcji dodasz OpenFileDialog składnik i ColorDialog składnik do formularza.

1. Wybierz Projektant formularzy systemu Windows (Form1.cs [Projekt]). Następnie otwórz przybornik i wybierz grupę Okna dialogowe.

2. Kliknij dwukrotnie plik OpenFileDialog , aby dodać składnik o nazwie openFileDialog1 do formularza.

3. Kliknij dwukrotnie pozycję ColorDialog, aby dodać składnik o nazwie colorDialog1. Składniki są wyświetlane w dolnej części okna Windows Forms Projektant jako ikony.

   

4. Wybierz ikonę openFileDialog1 i ustaw dwie właściwości:

   • Ustaw właściwość Filter na następujące wartości:

     JPEG Files (*.jpg)|*.jpg|PNG Files (*.png)|*.png|BMP Files (*.bmp)|*.bmp|All files (*.*)|*.*
     

   • Ustaw właściwość Title na następującą wartość: Wybierz plik obrazu

   Ustawienia właściwości Filtr określają typy wyświetlane w oknie dialogowym Wybieranie obrazu .

Następne kroki

Przejdź do następnego samouczka, aby dowiedzieć się, jak dodać kod do aplikacji.

Samouczek, część 3. Dodawanie kodu do przeglądarki obrazów