Samouczek: rozpoczynanie pracy z programem Windows Forms Designer

Narzędzie Windows Forms Designer udostępnia wiele narzędzi do tworzenia aplikacji Windows Forms. W tym artykule pokazano, jak utworzyć aplikację przy użyciu różnych narzędzi dostarczonych przez projektanta, w tym następujących zadań:

• Rozmieść kontrolki przy użyciu linii przyciągania.
• Wykonywanie zadań projektanta przy użyciu tagów inteligentnych.
• Ustaw marginesy i wypełnienie dla kontrolek.
• Rozmieść kontrolki przy użyciu kontrolki TableLayoutPanel.
• Podziel układ kontrolki na partycje przy użyciu kontrolki SplitContainer.
• Nawiguj po układzie za pomocą okna Konspekt dokumentu.
• Kontrolki położenia z wyświetlanymi informacjami o rozmiarze i lokalizacji.
• Ustaw wartości właściwości przy użyciu okna Właściwości.

Po zakończeniu będziesz mieć niestandardową kontrolkę, która została zmontowana przy użyciu wielu funkcji układu dostępnych w programie Windows Forms Designer. Ta kontrolka implementuje interfejs użytkownika dla prostego kalkulatora. Na poniższej ilustracji przedstawiono ogólny układ kontrolki kalkulatora:

Napiwek

Jeśli jesteś deweloperem języka C++ i szukasz samouczka ułatwiającego tworzenie aplikacji systemu Windows zawierającej formularze i kontrolki, zobacz Tworzenie aplikacji MFC opartej na formularzach. Aby uzyskać bardziej uogólnione informacje, zobacz Omówienie programowania systemu Windows w języku C++.

Tworzenie niestandardowego projektu kontrolki

Pierwszym krokiem jest utworzenie projektu kontrolki DemoCalculator.

1. Otwórz program Visual Studio i utwórz nowy projekt biblioteki kontrolek formularzy systemu Windows przy użyciu szablonu .NET Framework dla języka C# lub Visual Basic. Nadaj projektowi nazwę DemoCalculatorLib.

   

2. Aby zmienić nazwę pliku, w eksploratorze rozwiązań kliknij prawym przyciskiem myszy UserControl1.vb lub UserControl1.cswybierz pozycję Zmień nazwęi zmień nazwę pliku na DemoCalculator.vb lub DemoCalculator.cs. Wybierz pozycję Tak, gdy zostaniesz zapytany, czy chcesz zmienić nazwę wszystkich odwołań do elementu kodu "UserControl1".

Projektant formularzy Windows pokazuje powierzchnię projektowania dla kontrolki DemoCalculator. W tym widoku można graficznie zaprojektować wygląd elementu sterującego, wybierając kontrolki i składniki z przybornika (Toolbox) i umieszczając je na powierzchni projektowej. Aby uzyskać więcej informacji na temat kontrolek niestandardowych, zobacz Odmiany kontrolek niestandardowych.

Projektowanie układu kontrolki

Kontrolka DemoCalculator zawiera kilka kontrolek Windows Forms. W tej procedurze rozmieścisz kontrolki przy użyciu narzędzia Windows Forms Designer.

1. W programie Windows Forms Designer zmień kontrolkę DemoCalculator na większy rozmiar, wybierając uchwyt rozmiaru w prawym dolnym rogu i przeciągając go w celu zmiany rozmiaru. W prawym dolnym rogu programu Visual Studio znajdź informacje o rozmiarze i lokalizacji kontrolek. Ustaw rozmiar kontrolki na szerokość 1000 i wysokość 800, obserwując informacje o rozmiarze podczas zmiany rozmiaru kontrolki. Możesz również przewinąć do dołu okna właściwości , które zazwyczaj jest zadokowane w prawym dolnym rogu, i ręcznie wprowadzić wartości we właściwości Size.

2. Otwórz węzeł Containers w Toolbox, aby go otworzyć. Wybierz kontrolkę SplitContainer i przeciągnij ją na powierzchnię projektanta.

   SplitContainer jest umieszczane na powierzchni projektowej kontrolki DemoCalculator.

   Napiwek

   Rozmiary kontrolki SplitContainer dopasowują się do rozmiaru kontrolki DemoCalculator. Zapoznaj się z oknem właściwości, aby wyświetlić ustawienia właściwości kontrolki SplitContainer. Znajdź właściwość Dock. Jego wartość to DockStyle.Fill, co oznacza, że kontrolka SplitContainer zawsze dopasuje się do granic kontrolki o nazwie DemoCalculator. Zmień rozmiar kontrolki DemoCalculator, aby zweryfikować to zachowanie.

3. W oknie właściwości zmień wartość właściwości Dock na None.

   Kontrolka SplitContainer zmniejsza się do rozmiaru domyślnego i nie jest już zgodna z rozmiarem kontrolki DemoCalculator.

4. Wybierz glyph inteligentnego tagu () w prawym górnym rogu kontrolki SplitContainer. Wybierz pozycję Dock w kontenera nadrzędnego, aby ustawić właściwość Dock na wartość Fill.

   Kontrolka SplitContainer dokuje do granic kontrolki DemoCalculator.

   Notatka

   Kilka kontrolek oferuje tagi inteligentne ułatwiające projektowanie. Aby uzyskać więcej informacji, zobacz Przewodnik: wykonywanie typowych zadań przy użyciu tagów inteligentnych w kontrolkach formularzy systemu Windows.

5. Wybierz pionową krawędź między panelami i przeciągnij ją w prawo, aby lewy panel zajmuje większość miejsca.

   SplitContainer dzieli kontrolkę DemoCalculator na dwa panele z ruchomym obramowaniem oddzielającym je. Panel po lewej stronie zawiera przyciski kalkulatora i wyświetlanie, a panel po prawej stronie przedstawia rekord operacji arytmetycznych wykonywanych przez użytkownika.

6. W oknie właściwości zmień wartość właściwości BorderStyle na Fixed3D.

7. W przyborniku wybierz węzeł Common Controls, aby go otworzyć. Wybierz kontrolkę ListView i przeciągnij ją do prawego panelu kontrolki SplitContainer.

8. Wybierz symbol inteligentnej etykiety kontrolki ListView. Na panelu tagów inteligentnych zmień ustawienie View na Details.

9. Na panelu tagów inteligentnych wybierz pozycję Edytuj kolumny.

   Zostanie otwarte okno dialogowe ColumnHeader Collection Editor.

10. W oknie dialogowym edytora kolekcji kolumn wybierz pozycję Dodaj, aby dodać kolumnę do kontrolki ListView. Zmień wartość właściwości Text kolumny na Historia. Wybierz pozycję OK, aby utworzyć kolumnę.

11. Na panelu tagów inteligentnych wybierz pozycję Dock w kontenerze nadrzędnym, a następnie wybierz glyph tagu inteligentnego, aby zamknąć panel tagów inteligentnych.

12. Z węzła Kontenery w przyborniku przeciągnij kontrolkę TableLayoutPanel na lewy panel kontrolki SplitContainer.

    Kontrolka TableLayoutPanel jest wyświetlana na powierzchni projektanta z otwartym panelem tagów inteligentnych. Kontrolka TableLayoutPanel rozmieszcza kontrolki podrzędne w siatce. Kontrolka TableLayoutPanel zawiera wyświetlacz i przyciski kontrolki DemoCalculator. Aby uzyskać więcej informacji, zobacz Przewodnik: rozmieszczanie kontrolek za pomocą kontrolki TableLayoutPanel.

13. Wybierz pozycję Edytuj wiersze i kolumny na panelu tagów inteligentnych.

    Zostanie otwarte okno dialogowe Style kolumny i wierszów.

14. Wybierz przycisk Dodaj do momentu wyświetlenia pięciu kolumn. Zaznacz wszystkie pięć kolumn, a następnie wybierz opcję Procent w polu Typ rozmiaru. Ustaw wartość Percent na 20. Ta akcja powoduje ustawienie każdej kolumny na taką samą szerokość.

15. W obszarze Pokażwybierz pozycję Wiersze.

16. Wybierz pozycję Dodaj do momentu wyświetlenia pięciu wierszy. Zaznacz wszystkie pięć wierszy, a następnie wybierz Percent w polu typu rozmiaru . Ustaw wartość Percent na 20. Czynność ta ustawia wysokość każdego wiersza na taką samą.

17. Wybierz pozycję OK, aby zaakceptować zmiany, a następnie wybierz ikonę tagu inteligentnego, aby zamknąć panel tagów inteligentnych.

18. W oknie właściwości zmień wartość właściwości Dock na Fill.

Wypełnianie kontrolki

Po skonfigurowaniu układu kontrolki możesz wypełnić kontrolkę DemoCalculator przyciskami i wyświetlaczem.

1. W przyborniku wybierz ikonę kontrolki TextBox.

   Kontrolka TextBox jest umieszczana w pierwszej komórce kontrolki TableLayoutPanel.

2. W oknie właściwości zmień wartość właściwości ColumnSpan kontrolki TextBox na 5.

   Kontrolka TextBox przechodzi do pozycji wyśrodkowanej w wierszu.

3. Zmień wartość właściwości Anchor kontrolki TextBox na Left, Right.

   Kontrolka TextBox rozszerza się w poziomie, aby obejmować wszystkie pięć kolumn.

4. Zmień wartość właściwości TextAlign kontrolki TextBox na Right.

5. W oknie właściwości rozwiń węzeł właściwości Font. Ustaw Size na 14i ustaw Bold na true dla kontrolki TextBox.

6. Wybierz kontrolkę TableLayoutPanel.

7. W przybornikawybierz ikonę Button.

   Kontrolka Button jest umieszczana w następnej otwartej komórce kontrolki TableLayoutPanel.

8. W Przybornikuwybierz ikonę Button cztery razy więcej, aby wypełnić drugi wiersz kontrolki TableLayoutPanel.

9. Zaznacz wszystkie pięć kontrolek Button, przytrzymując klawisz Shift. Naciśnij Ctrl+C, aby skopiować kontrolki Button do schowka.

10. Naciśnij ctrl+V trzy razy, aby wkleić kopie kontrolek Button do pozostałych wierszy kontrolki TableLayoutPanel.

11. Zaznacz wszystkie 20 kontrolek Button, trzymając wciśnięty klawisz Shift.

12. W oknie właściwości zmień wartość właściwości Dock na Fill.

    Wszystkie kontrolki Button są dokowane, aby wypełnić swoje komórki zawierające.

13. W oknie właściwości rozwiń węzeł właściwości Margin. Ustaw wartość All na 5.

    Wszystkie kontrolki Button mają mniejszy rozmiar, aby utworzyć większy margines między nimi.

14. Wybierz przycisk 10 i przycisk 20, a następnie naciśnij Usuń, aby usunąć je z układu.

15. Wybierz przycisk 5 i przycisk 15, a następnie zmień wartość właściwości RowSpan na 2. Te przyciski reprezentują przyciski Clear i = dla kontrolki DemoCalculator.

Korzystanie z okna Konspektu dokumentu

Po wypełnieniu kontrolki lub formularza kilkoma kontrolkami możesz łatwiej nawigować po układzie za pomocą okna Konspektu dokumentu.

1. W pasku menu wybierz pozycję Widok>Inne okna>Zarys dokumentu. Lub na klawiaturze naciśnij Ctrl+Alt+T.

   W oknie Struktury dokumentu wyświetlany jest widok drzewa kontrolki DemoCalculator oraz jej składowych elementów. Kontrolki kontenera, takie jak SplitContainer, pokazują swoje kontrolki podrzędne jako węzły podrzędne w drzewie. Możesz również zmienić nazwy kontrolek, używając okna Konspektu dokumentu.

2. W oknie Konspekt dokumentu kliknij prawym przyciskiem myszy przycisk button1, a następnie wybierz pozycję Zmień nazwę (klawiatura: F2). Zmień nazwę na sevenButton.

3. Za pomocą okna Konspektu dokumentu zmień nazwę kontrolek Button z nazwy wygenerowanej przez projektanta na nazwę produkcyjną zgodnie z następującą listą:

   • przycisk1 do sevenButton

   • przycisk2 do ośmiuButton

   • przycisk3 do przyciskDziewięć

   • przycisk4 do divisionButton

   • przycisk5 do clearButton

   • przycisk6 do czteryPrzycisk

   • przycisk7 do przyciskPięć

   • przycisk8 do sixButton

   • przycisk9 do przyciskMnożenia

   • przycisk11 do oneButton

   • przycisk12, aby dwóchbutton

   • przycisk13 do trzyPrzycisk

   • przycisk14 do przyciskOdejmowania

   • przycisk15 do equalsButton

   • przycisk16 do zeroButton

   • button17 do changeSignButton

   • przycisk18 do przyciskDziesiętny

   • przycisk19 do dodawanieButton

4. Używając okna konspektu dokumentu i właściwości, zmień wartość właściwości Text dla każdej nazwy kontrolki Button zgodnie z następującą listą:

   • Zmień właściwość tekstu kontrolki sevenButton na 7

   • Zmień właściwość tekstu kontrolki eightButton na 8

   • Zmień właściwość tekstu kontrolki nineButton na 9

   • Zmień właściwość tekstu kontrolki divisionButton na / (ukośnik do przodu)

   • Zmień właściwość tekstu kontrolki clearButton na Clear

   • Zmień właściwość tekstu kontrolki fourButton na 4

   • Zmień właściwość tekstu kontrolki FiveButton na 5

   • Zmień właściwość tekstu kontrolki sixButton na 6

   • Zmień właściwość tekstu kontrolki przycisku mnożenia na * (gwiazdka)

   • Zmień właściwość tekstu kontrolki oneButton na 1

   • Zmień właściwość tekstu kontrolki TwoButton na 2

   • Zmień właściwość tekstu kontrolki ThreeButton na 3

   • Zmień właściwość tekstu kontrolki subtractionButton na - (łącznik)

   • Zmień właściwość tekstu kontrolki equalsButton na = (znak równości)

   • Zmień właściwość tekstu kontrolki zeroButton na 0

   • Zmień właściwość tekstu kontrolki ChangeSignButton na +/-

   • Zmień właściwość tekstu kontrolki DecimalButton na . (okres)

   • Zmień właściwość tekstu kontrolki additionButton na + (znak plus)

5. Na powierzchni projektanta zaznacz wszystkie kontrolki Button, zaznaczając je przytrzymując klawisz Shift.

6. W oknie właściwości rozwiń węzeł właściwości Font. Ustaw Size na 14i ustaw Bold na wartość true dla wszystkich kontrolek Button.

Ten zestaw instrukcji kończy projektowanie kontrolki DemoCalculator. Wszystko, co pozostało, to zapewnienie logiki kalkulatora.

Implementowanie programów obsługi zdarzeń

Przyciski w kontrolce DemoCalculator mają programy obsługi zdarzeń, które można wykorzystać do zaimplementowania większości logiki kalkulatora. Windows Forms Designer umożliwia zaimplementowanie szablonów wszystkich procedur obsługi zdarzeń dla wszystkich przycisków za pomocą jednego wyboru.

1. Na powierzchni projektanta, przytrzymując klawisz Shift, zaznacz wszystkie kontrolki Button.

2. Wybierz jedną z kontrolek Button.

   Edytor kodu otwiera programy obsługi zdarzeń wygenerowane przez projektanta.

Ponieważ ten samouczek koncentruje się na projektancie, pomijamy szczegóły implementacji funkcji kalkulatora.

Testowanie kontrolki

Ponieważ kontrolka DemoCalculator dziedziczy z klasy UserControl, można przetestować jej zachowanie za pomocą UserControl Test Container. Aby uzyskać więcej informacji, zobacz Jak przetestować zachowanie UserControl podczas działania.

1. Naciśnij F5, aby skompilować i uruchomić kontrolkę DemoCalculator w kontenerze testowym UserControl .

2. Wybierz obramowanie między panelami SplitContainer i przeciągnij je w lewo i w prawo. TableLayoutPanel i wszystkie jego kontrolki podrzędne automatycznie zmieniają rozmiar, aby dopasować się do dostępnej przestrzeni.

3. Po zakończeniu testowania kontrolki wybierz pozycję Zamknij.

Używanie kontrolki w formularzu

Kontrolkę DemoCalculator można używać w innych złożonych kontrolkach lub w formularzu. W poniższej procedurze opisano sposób jej używania.

Tworzenie projektu

Pierwszym krokiem jest utworzenie projektu aplikacji. Użyjesz tego projektu do skompilowania aplikacji, która będzie wyświetlać kontrolkę niestandardową.

1. Dodaj nowy projekt Windows Forms App (.NET Framework) do istniejącego rozwiązania i nadaj mu nazwę DemoCalculatorTest.

2. W Eksplorator rozwiązańkliknij prawym przyciskiem myszy projekt DemoCalculatorTest, a następnie wybierz pozycję Dodaj>odwołanie, aby otworzyć okno dialogowe Menedżer odwołań.

3. Przejdź do karty projekty, a następnie wybierz projekt DemoCalculatorLib, aby dodać odwołanie do projektu testowego.

4. W eksploratorze rozwiązań kliknij prawym przyciskiem myszy DemoCalculatorTest, a następnie wybierz Ustaw jako projekt startowy.

5. W programie Windows Forms Designer zwiększ rozmiar formularza do około 1400 x 1000.

Używanie kontrolki w układzie formularza

Aby użyć kontrolki DemoCalculator w aplikacji, należy umieścić ją w formularzu.

1. W Przybornikrozwiń węzeł DemoCalculatorLib Components.

2. Przeciągnij kontrolkę DemoCalculator z przybornika na swoim formularzu. Przenieś kontrolkę do lewego górnego rogu formularza. Gdy kontrolka znajduje się blisko obramowań formularza, pojawiają się linie przylegania. Linie przyciągania wskazują na odległość pomiędzy właściwością Padding formularza a właściwością Margin kontrolki. Umieść kontrolkę w lokalizacji wskazanej przez linie przyciągania.

   Aby uzyskać więcej informacji, zobacz Przewodnik: Rozmieszczanie kontrolek za pomocą linii przyciągania.

3. Przeciągnij kontrolkę Button z przybornika i upuść ją na formularz.

4. Przenieś kontrolkę Button wokół kontrolki DemoCalculator i sprawdź, gdzie pojawiają się linie przyciągania. Za pomocą tej funkcji można precyzyjnie i łatwo dopasować kontrolki. Usuń kontrolkę Button po zakończeniu.

5. Kliknij prawym przyciskiem myszy kontrolkę DemoCalculator, a następnie wybierz Właściwości.

6. Zmień wartość właściwości Dock na Fill.

7. Wybierz formularz, a następnie rozwiń węzeł właściwości Padding. Zmień wartość All na 20.

   Rozmiar kontrolki DemoCalculator jest zmniejszany w celu uwzględnienia nowej wartości Padding formularza.

8. Zmień rozmiar formularza, przeciągając różne uchwyty rozmiaru do różnych pozycji. Obserwuj, jak rozmiar kontrolki DemoCalculator jest dostosowywany, aby pasowała.

Następne kroki

W tym artykule pokazano, jak utworzyć interfejs użytkownika dla prostego kalkulatora. Aby kontynuować, możesz rozszerzyć jego funkcjonalność, implementując logikę kalkulatora, a następnie opublikować aplikację przy użyciu technologii ClickOnce. Możesz też przejść do innego samouczka, w którym utworzyć przeglądarkę obrazów przy użyciu programu Windows Forms.

Zobacz też

• kontrolki Windows Forms
• Dostępność dla kontrolek formularzy systemu Windows
• publikowanie przy użyciu ClickOnce