Przewodnik: rozmieszczanie kontrolek w formularzach systemu Windows przy użyciu kontrolki TableLayoutPanel

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

Kontrolka FlowLayoutPanel i kontrolka TableLayoutPanel oferują intuicyjne sposoby rozmieszczania elementów w formularzu. Oba zapewniają automatyczną, konfigurowalną możliwość kontrolowania względnych pozycji umieszczonych w nich kontrolek podrzędnych oraz dynamiczne funkcje układu w czasie działania, co pozwala na dostosowywanie rozmiaru i położenia kontrolek podrzędnych w miarę zmieniających się wymiarów formularza nadrzędnego. Panele układów można zagnieżdżać w panelach układów, aby umożliwić opracowanie 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ć przenoszona 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 swoją 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 oraz mogą mieć różne rozmiary. Komórki można scalić w poprzek wierszy i kolumn. Komórki mogą zawierać wszystko, co może zawierać formularz, i pod względem większości innych cech zachowują się jak kontenery.

Kontrolka TableLayoutPanel zapewnia również proporcjonalną funkcjonalność zmiany rozmiaru w czasie rzeczywistym, dzięki czemu układ może się płynnie dostosowywać przy zmianie 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

  • Rozszerzanie wierszy i kolumn za pomocą kontroli

  • Automatyczna obsługa przepełnień

  • Wstawianie kontrolek przez dwukrotne kliknięcie ich na pasku narzędzi

  • 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 projektancie formularzy systemu Windows.

Rozmieszczanie kontrolek w wierszach i kolumnach

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

Aby ustawić kontrolki w wierszach i kolumnach za pomocą TableLayoutPanel

  1. Przeciągnij kontrolkę TableLayoutPanel z przybornika na twój 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 kontrolki Button z Przybornika do kontrolki TableLayoutPanel, aby każda komórka zawierała przycisk.

  4. Złap pionowy uchwyt do zmiany rozmiaru między dwiema kolumnami i przesuń go w lewo. 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. Chwyć pionowy uchwyt zmiany rozmiaru między dwiema kolumnami i przesuń go w prawo. 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. Przesuń uchwyt zmiany rozmiaru do góry i na dół, aby zobaczyć, jak wpływa to na kontrolki w panelu.

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

Zachowanie zakotwiczenia kontrolek podrzędnych w TableLayoutPanel różni się w porównaniu do zachowania w innych kontenerach. Zachowanie dokowania kontrolek podrzędnych jest takie samo jak w przypadku innych kontrolek kontenerowych.

Pozycjonowanie elementów sterujących w komórkach

  1. Wybierz pierwszą kontrolkę Button. 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 przesunięty tak, aby jego prawa krawędź znajdowała się blisko 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 dostosowany do szerokości komórki, uwzględniając wartości Margin i Padding.

  4. Powtórz kroki 2 i 3 z użyciem stylów Top 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 kolekcji RowStyles i ColumnStyles.

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

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

  2. W oknie Właściwości otwórz kolekcję, klikając przycisk wielokropka (Przycisk wielokropka (...) w oknie Właściwości programu Visual Studio.) obok wpisu Kolumny.

  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 operację dla kolekcji 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 zmiany rozmiaru poziomych i pionowych.

Rozszerzanie wierszy i kolumn za pomocą kontroli

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 właściwości RowSpan.

Wstawianie kontrolek przez dwukrotne kliknięcie ich na pasku narzędzi

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

Aby wstawić kontrolki, kliknij dwukrotnie w Narzędziowniku

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

  2. Kliknij dwukrotnie ikonę kontrolki Button w przyborniku . Pamiętaj, że nowa kontrolka przycisku pojawia się w pierwszej komórce kontrolki TableLayoutPanel.

  3. Kliknij dwukrotnie kilka kontrolek w przyborniku. Należy pamiętać, że nowe elementy sterujące są wyświetlane kolejno w niezajętych komórkach w kontrolce TableLayoutPanel. 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łnień

Podczas wstawiania kontrolek do kontrolki TableLayoutPanel może zabraknąć 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łnień

  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ść właściwości TableLayoutPanel 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 programie Windows Forms Designer zostanie wyświetlony komunikat o błędzie informujący, ż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 twój formularz.

  2. W przyborniku kliknij ikonę kontrolki Button. 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 nakreśliłeś zarys kontrolki.

Wiele kontrolek w komórkach jest niedozwolonych

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

Aby zademonstrować, że nie jest dozwolone używanie wielu kontrolek wewnątrz komórek

  • Przeciągnij kontrolkę Button z Przybornika do kontrolki TableLayoutPanel i upuść ją w jedną z zajętych 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 jedną z Button kontrolki z zajętej komórki i upuść ją na inną zajętą komórkę. Należy pamiętać, że dwie kontrolki są przenoszone z jednej komórki do drugiej.

Dalsze 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 umieszczeniem TableLayoutPanel kontrolki w istniejącej kontrolce.

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

Zobacz także

  • Last updated on