Wskazówki: rozmieszczanie formantów w aplikacji formularzy systemu Windows za pomocą TableLayoutPanel

  • Artykuł

Niektóre aplikacje wymagają formularza z układem, który rozmieści się odpowiednio, ponieważ rozmiar formularza jest zmieniany lub zmienia rozmiar zawartości. Jeśli potrzebujesz układu dynamicznego i nie chcesz jawnie obsługiwać Layout zdarzeń w kodzie, rozważ użycie panelu układu.

Kontrolka i kontrolka FlowLayoutPanelTableLayoutPanel zapewniają intuicyjne sposoby rozmieszczania kontrolek w formularzu. Obie zapewniają automatyczną, konfigurowalną możliwość kontrolowania względnych pozycji kontrolek podrzędnych zawartych w nich, a oba zapewniają dynamiczne funkcje układu w czasie wykonywania, dzięki czemu mogą zmieniać rozmiar i zmieniać położenie kontrolek podrzędnych w miarę zmiany wymiarów formularza nadrzędnego. Panele układów można zagnieżdżać w panelach układu, aby umożliwić realizację zaawansowanych interfejsów użytkownika.

Element FlowLayoutPanel rozmieści jego zawartość w określonym kierunku przepływu: poziomym lub pionowym. Jego zawartość może być opakowana z jednego wiersza do następnego lub z jednej kolumny do następnej. Alternatywnie jego zawartość może być obcięta zamiast opakowana. Aby uzyskać więcej informacji, zobacz Przewodnik: rozmieszczanie kontrolek w formularzach systemu Windows przy użyciu kontrolki FlowLayoutPanel.

Obiekt TableLayoutPanel rozmieści jego zawartość w siatce, zapewniając funkcjonalność podobną do elementu tabeli> HTML<. Kontrolka TableLayoutPanel umożliwia umieszczanie kontrolek w układzie siatki bez konieczności dokładnego określania położenia poszczególnych kontrolek. Jego komórki są rozmieszczone w wierszach i kolumnach, a mogą mieć różne rozmiary. Komórki można scalić między wierszami i kolumnami. Komórki mogą zawierać dowolny formularz i zachowywać się w większości innych względów jako kontenery.

Kontrolka TableLayoutPanel zapewnia również proporcjonalną możliwość zmiany rozmiaru w czasie wykonywania, dzięki czemu układ może się płynnie zmieniać w miarę zmieniania rozmiaru formularza. Dzięki temu kontrolka TableLayoutPanel jest odpowiednia do celów, takich jak formularze wprowadzania danych i zlokalizowane aplikacje. Aby uzyskać więcej informacji, zobacz Przewodnik: tworzenie formularza systemu Windows z możliwością zmiany rozmiaru na potrzeby wprowadzania danych i przewodnik: tworzenie lokalizowalnego formularza systemu Windows.

Ogólnie rzecz biorąc, nie należy używać TableLayoutPanel kontrolki jako kontenera dla całego układu. Użyj TableLayoutPanel kontrolek, aby zapewnić proporcjonalne możliwości zmiany rozmiaru części układu.

Zadania przedstawione w tym przewodniku obejmują:

  • Tworzenie projektu formularzy systemu Windows

  • Rozmieszczanie kontrolek w wierszach i kolumnach

  • Ustawianie właściwości wierszy i kolumn

  • Obejmujące wiersze i kolumny za pomocą kontrolki

  • Automatyczna obsługa przepełnienia

  • Wstawianie kontrolek przez dwukrotne kliknięcie ich w przyborniku

  • Wstawianie kontrolki przez rysowanie jej konturu

  • Ponowne przypisywanie istniejących kontrolek do innego elementu nadrzędnego

Po zakończeniu będziesz mieć wiedzę na temat roli odgrywanej przez te ważne funkcje układu.

Tworzenie projektu

Pierwszym krokiem jest utworzenie projektu i skonfigurowanie formularza.

Aby utworzyć projekt

  1. Utwórz projekt aplikacji systemu Windows o nazwie "TableLayoutPanelExample". Aby uzyskać więcej informacji, zobacz How to: Create a Windows Forms application project (Jak utworzyć projekt aplikacji Windows Forms).

  2. Wybierz formularz w Projektant formularzy systemu Windows.

Rozmieszczanie kontrolek w wierszach i kolumnach

Kontrolka TableLayoutPanel umożliwia łatwe rozmieszczanie kontrolek w wierszach i kolumnach.

Aby rozmieścić kontrolki w wierszach i kolumnach przy użyciu kontrolki TableLayoutPanel

  1. Przeciągnij kontrolkę TableLayoutPanel z przybornika na formularz. Należy pamiętać, że domyślnie kontrolka TableLayoutPanel ma cztery komórki.

  2. Przeciągnij kontrolkę Button z Przybornika do kontrolki TableLayoutPanel i upuść ją w jedną z komórek. Pamiętaj, że kontrolka Button jest tworzona w wybranej komórce.

  3. Przeciągnij trzy kolejne Button kontrolki z Przybornika do kontrolki TableLayoutPanel , aby każda komórka zawierała przycisk.

  4. Pobierz pionowy uchwyt ustalania rozmiaru między dwiema kolumnami i przenieś go do lewej strony. Należy pamiętać, że rozmiar Button kontrolek w pierwszej kolumnie jest zmieniany na mniejszą szerokość, a rozmiar Button kontrolek w drugiej kolumnie jest niezmieniony.

  5. Pobierz pionowy uchwyt określania rozmiaru między dwiema kolumnami i przenieś go po prawej stronie. Należy pamiętać, że kontrolki Button w pierwszej kolumnie zwracają się do oryginalnego rozmiaru, a Button kontrolki w drugiej kolumnie są przenoszone po prawej stronie.

  6. Przenieś uchwyt rozmiaru w poziomie w górę i w dół, aby zobaczyć wpływ na kontrolki w panelu.

Pozycjonowanie kontrolek w komórkach przy użyciu dokowania i zakotwiczenia

Zachowanie zakotwiczenia kontrolek podrzędnych różni TableLayoutPanel się od zachowania innych kontrolek kontenera. Zachowanie dokowania kontrolek podrzędnych jest takie samo jak inne kontrolki kontenera.

Kontrolki pozycjonowania w komórkach

  1. Wybierz pierwszą Button kontrolkę. Zmień wartość jej Dock właściwości na Fill. Pamiętaj, że kontrolka Button rozszerza się, aby wypełnić komórkę.

  2. Wybierz jedną z pozostałych Button kontrolek. Zmień wartość jej Anchor właściwości na Right. Należy pamiętać, że jest przenoszona tak, aby jej prawa krawędź była zbliżona do prawej krawędzi komórki. Odległość między obramowaniami to suma Button właściwości kontrolki Margin i właściwości panelu Padding .

  3. Zmień wartość Button właściwości kontrolki Anchor na Right i Left. Należy pamiętać, że kontrolka ma rozmiar do szerokości komórki, z Margin uwzględnieniem wartości i Padding .

  4. Powtórz kroki 2 i 3 za Top pomocą stylów i Bottom .

Ustawianie właściwości wierszy i kolumn

Poszczególne właściwości wierszy i kolumn można ustawić przy użyciu RowStyles kolekcji i ColumnStyles .

Aby ustawić właściwości wiersza i kolumny

  1. Wybierz kontrolkę TableLayoutPanel w Projektant formularzy systemu Windows.

  2. W oknach Właściwości otwórz kolekcję, klikając przycisk wielokropka (The Ellipsis button (...) in the Properties window of Visual Studio.) obok pozycji Kolumny.ColumnStyles

  3. Wybierz pierwszą kolumnę i zmień wartość jej SizeType właściwości na AutoSize. Kliknij przycisk OK , aby zaakceptować zmianę. Należy pamiętać, że szerokość pierwszej kolumny jest ograniczona, aby dopasować kontrolkę Button . Należy również zauważyć, że szerokość kolumny nie może być zmieniana.

  4. W oknie Właściwości otwórz ColumnStyles kolekcję i wybierz pierwszą kolumnę. Zmień wartość jej SizeType właściwości na Percent. Kliknij przycisk OK , aby zaakceptować zmianę. Zmień rozmiar kontrolki TableLayoutPanel na większą szerokość i zwróć uwagę, że szerokość pierwszej kolumny jest rozszerzana. Zmień rozmiar kontrolki TableLayoutPanel na mniejszą szerokość i zwróć uwagę, że przyciski w pierwszej kolumnie mają rozmiar pasujący do komórki. Należy również pamiętać, że szerokość kolumny może być zmieniana.

  5. W oknie Właściwości otwórz ColumnStyles kolekcję i wybierz wszystkie wymienione kolumny. Ustaw wartość każdej SizeType właściwości na Percent. Kliknij przycisk OK , aby zaakceptować zmianę. Powtórz z kolekcją RowStyles .

  6. Pobierz jeden z uchwytów zmiany rozmiaru rogu i zmień rozmiar zarówno szerokości, jak i wysokości kontrolki TableLayoutPanel . Pamiętaj, że rozmiar wierszy i kolumn jest zmieniany w miarę zmiany rozmiaru TableLayoutPanel kontrolki. Należy również pamiętać, że wiersze i kolumny można zmieniać rozmiar za pomocą uchwytów rozmiaru poziomego i pionowego.

Obejmujące wiersze i kolumny za pomocą kontrolki

Kontrolka TableLayoutPanel dodaje kilka nowych właściwości do kontrolek w czasie projektowania. Dwie z tych właściwości to RowSpan i ColumnSpan. Tych właściwości można użyć, aby kontrolka obejmowała więcej niż jeden wiersz lub kolumnę.

Aby obejmować wiersze i kolumny za pomocą kontrolki

  1. Wybierz kontrolkę Button w pierwszym wierszu i pierwszej kolumnie.

  2. W oknach Właściwości zmień wartość ColumnSpan właściwości na 2. Należy pamiętać, że kontrolka Button wypełnia pierwszą kolumnę i drugą kolumnę. Należy również pamiętać, że dodano dodatkowy wiersz, aby uwzględnić tę zmianę.

  3. Powtórz krok 2 dla RowSpan właściwości .

Wstawianie kontrolek przez dwukrotne kliknięcie ich w przyborniku

Kontrolkę TableLayoutPanel można wypełnić, klikając dwukrotnie kontrolki w przyborniku.

Aby wstawić kontrolki, klikając dwukrotnie w przyborniku

  1. Przeciągnij kontrolkę TableLayoutPanel z przybornika na formularz.

  2. Kliknij dwukrotnie ikonę kontrolki Button w przyborniku. Pamiętaj, że nowa kontrolka przycisku jest wyświetlana w TableLayoutPanel pierwszej komórce kontrolki.

  3. Kliknij dwukrotnie kilka kontrolek w przyborniku. Należy pamiętać, że nowe kontrolki są wyświetlane kolejno w TableLayoutPanel nieuprzyjanych komórkach kontrolki. Należy również pamiętać, że kontrolka TableLayoutPanel rozszerza się, aby pomieścić nowe kontrolki, jeśli nie są dostępne otwarte komórki.

Automatyczna obsługa przepełnienia

Podczas wstawiania kontrolek do kontrolki TableLayoutPanel może zabrakło pustych komórek dla nowych kontrolek. Kontrolka TableLayoutPanel automatycznie obsługuje tę sytuację, zwiększając liczbę komórek.

Aby obserwować automatyczną obsługę przepełnienia

  1. Jeśli w kontrolce TableLayoutPanel nadal znajdują się puste komórki, kontynuuj wstawianie nowych Button kontrolek do momentu zapełnienia kontrolki TableLayoutPanel .

  2. Gdy kontrolka TableLayoutPanel jest pełna, kliknij dwukrotnie ikonę Button w przyborniku, aby wstawić inną Button kontrolkę. Należy pamiętać, że kontrolka TableLayoutPanel tworzy nowe komórki, aby pomieścić nową kontrolkę. Wstaw kilka kolejnych kontrolek i obserwuj zachowanie zmiany rozmiaru.

  3. Zmień wartość TableLayoutPanel właściwości kontrolki GrowStyle na FixedSize. Kliknij dwukrotnie ikonę Button w przyborniku, aby wstawić kontrolki do momentu zapełnienia Button kontrolkiTableLayoutPanel. Ponownie kliknij dwukrotnie ikonę Button w przyborniku. Zwróć uwagę, że w formularzach systemu Windows zostanie wyświetlony komunikat o błędzie Projektant informujący o tym, że nie można utworzyć dodatkowych wierszy i kolumn.

Wstawianie kontrolki przez rysowanie jej konturu

Kontrolkę można wstawić do kontrolki TableLayoutPanel i określić jej rozmiar, rysując jego kontur w komórce.

Aby wstawić kontrolkę, rysując jej kontur

  1. Przeciągnij kontrolkę TableLayoutPanel z przybornika na formularz.

  2. W przyborniku kliknij ikonę kontrolkiButton. Nie przeciągaj go na formularz.

  3. Przesuń wskaźnik myszy nad kontrolką TableLayoutPanel . Zwróć uwagę, że wskaźnik zmienia się na krzyżyk z dołączoną ikoną kontrolki Button .

  4. Kliknij i przytrzymaj przycisk myszy.

  5. Przeciągnij wskaźnik myszy, aby narysować kontur kontrolki Button . Jeśli rozmiar jest zadowalający, zwolnij przycisk myszy. Należy pamiętać, że kontrolka Button jest tworzona w komórce, w której został wyświetlony konspekt kontrolki.

Wiele kontrolek w komórkach nie jest dozwolonych

Kontrolka TableLayoutPanel może zawierać tylko jedną kontrolkę podrzędną na komórkę.

Aby zademonstrować, że wiele kontrolek w komórkach nie jest dozwolonych

  • Przeciągnij kontrolkę Button z Przybornika do kontrolki TableLayoutPanel i upuść ją w jedną z zajmowanych komórek. Należy pamiętać, że kontrolka TableLayoutPanel nie umożliwia porzucania kontrolki Button do zajętej komórki.

Zamienianie kontrolek

Kontrolka TableLayoutPanel umożliwia zamianę kontrolek zajmujących dwie różne komórki.

Aby zamienić kontrolki

  • Przeciągnij jeden z Button kontrolek z zajętej komórki i upuść na inną zajętą komórkę. Należy pamiętać, że dwie kontrolki są przenoszone z jednej komórki do drugiej.

Następne kroki

Można osiągnąć złożony układ przy użyciu kombinacji paneli i kontrolek układu. Sugestie dotyczące większej liczby eksploracji obejmują:

  • Spróbuj zmienić rozmiar jednego z Button kontrolek na większy rozmiar i zanotuj wpływ na układ.

  • Wklej zaznaczenie wielu kontrolek do kontrolki i zwróć uwagę na TableLayoutPanel sposób wstawiania kontrolek.

  • Panele układu mogą zawierać inne panele układu. Poeksperymentuj z usunięciem TableLayoutPanel kontrolki do istniejącej kontrolki.

  • Zadokuj kontrolkę TableLayoutPanel do formularza nadrzędnego. Zmień rozmiar formularza i zanotuj wpływ na układ.

Zobacz też