Udostępnij przez

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

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.

Obiekt TableLayoutPanel rozmieści jego zawartość w siatce, zapewniając funkcjonalność podobną do elementu tabeli< HTML>. Jego komórki są rozmieszczone w wierszach i kolumnach, a mogą mieć różne rozmiary. Aby uzyskać więcej informacji, zobacz Przewodnik: Rozmieszczanie elementów sterujących na formularzach systemu Windows przy użyciu TableLayoutPanel.

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. Zadania przedstawione w tym przewodniku obejmują:

  • Tworzenie projektu formularzy systemu Windows

  • Rozmieszczanie kontrolek w poziomie i w pionie

  • Zmiana kierunku przepływu

  • Wstawianie przerwań przepływu

  • Rozmieszczanie elementów sterujących przy użyciu wypełnień i marginesów

  • Wstawianie kontrolek przez dwukrotne kliknięcie ich w przyborniku

  • Wstawianie kontrolki przez rysowanie jej konturu

  • Wstawianie kontrolek przy użyciu kursora

  • 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

  1. W programie Visual Studio utwórz projekt aplikacji oparty na systemie Windows o nazwie "FlowLayoutPanelExample" (File>New>Project>Visual C# or Visual Basic>Classic Desktop>Windows Forms Application).

  2. Wybierz formularz w projektancie formularzy.

Rozmieszczanie kontrolek w poziomie i w pionie

Kontrolka FlowLayoutPanel umożliwia umieszczanie kontrolek wzdłuż wierszy lub kolumn bez konieczności dokładnego określania położenia każdej kontrolki.

Kontrolka FlowLayoutPanel może zmieniać rozmiar lub układ kontrolek podrzędnych w miarę zmiany wymiarów formularza nadrzędnego.

Aby rozmieścić kontrolki w poziomie i w pionie przy użyciu kontrolki FlowLayoutPanel

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

  2. Przeciągnij kontrolkę Button z przybornika do elementu FlowLayoutPanel. Należy pamiętać, że jest on automatycznie przenoszony do lewego górnego rogu kontrolki FlowLayoutPanel .

  3. Przeciągnij kolejną Button kontrolkę z przybornika do elementu FlowLayoutPanel. Należy pamiętać, że kontrolka Button jest automatycznie przenoszona do pozycji obok pierwszej Button kontrolki. Jeśli kontrolka FlowLayoutPanel jest zbyt zawężona, aby zmieścić te dwie kontrolki w tym samym wierszu, nowa Button kontrolka zostanie automatycznie przeniesiona do następnego wiersza.

  4. Przeciągnij kilka kolejnych Button kontrolek z przybornika do elementu FlowLayoutPanel. Kontynuuj umieszczanie kontrolek Button aż jedna przejdzie do następnego wiersza.

  5. Zmień wartość właściwości FlowLayoutPanel kontrolki WrapContents na false. Należy pamiętać, że kontrolki podrzędne nie będą już przepływać do następnego wiersza. Zamiast tego są przenoszone do pierwszego wiersza i przycinane.

  6. Zmień wartość właściwości FlowLayoutPanel kontrolki WrapContents na true. Należy pamiętać, że kontrolki podrzędne ponownie zawijają się do następnego wiersza.

  7. Zmniejsz szerokość kontrolki FlowLayoutPanel , aż wszystkie kontrolki Button zostaną przeniesione do pierwszej kolumny.

  8. Zwiększ szerokość kontrolki FlowLayoutPanel , aż wszystkie kontrolki Button zostaną przeniesione do pierwszego wiersza. Może być konieczne zmianę rozmiaru formularza, aby dopasować go do większej szerokości.

Zmiana kierunku przepływu

Właściwość FlowDirection umożliwia zmianę kierunku rozmieszczania kontrolek. Kontrolki podrzędne można rozmieścić od lewej do prawej, od prawej do lewej, od góry do dołu lub od dołu do góry.

Aby zmienić kierunek przepływu w elemecie FlowLayoutPanel

  1. Zmień wartość właściwości FlowLayoutPanel kontrolki FlowDirection na TopDown. Należy pamiętać, że kontrolki podrzędne są rozmieszczane w jedną lub więcej kolumn, w zależności od wysokości kontrolki.

  2. Zmodyfikuj rozmiar FlowLayoutPanel, aby jego wysokość była niższa niż wysokość kolumny kontrolek Button. Należy pamiętać, że FlowLayoutPanel przestawia kontrolki podrzędne tak, aby płynnie przechodziły do następnej kolumny. Kontynuuj zmniejszanie wysokości i zwróć uwagę, że kontrolki podrzędne przepływają do kolejnych kolumn. Zmień wartość właściwości FlowLayoutPanel kontrolki FlowDirection na RightToLeft. Należy pamiętać, że pozycje kontrolek podrzędnych są zamienione miejscami. Obserwuj układ, gdy zmieniasz wartość FlowDirection właściwości na BottomUp.

Wstawianie przerwań przepływu

Kontrolka FlowLayoutPanel udostępnia właściwość FlowBreak dla kontrolek podrzędnych. Ustawienie wartości właściwości FlowBreak na true powoduje, że kontrolka FlowLayoutPanel zatrzymuje układanie kontrolek w bieżącym kierunku przepływu i przechodzi do następnego wiersza lub kolumny.

Aby wstawić podziały przepływu

  1. Zmień wartość właściwości FlowLayoutPanel kontrolki FlowDirection na TopDown.

  2. Wybierz jedną z Button kontrolek w środkowej kolumnie po lewej stronie.

  3. Ustaw wartość Button właściwości FlowBreak kontrolki na true. Należy pamiętać, że kolumna jest uszkodzona, a kontrolki podążające za wybranym Button zostają przeniesione do następnej kolumny. Ustaw wartość właściwości FlowBreak kontrolki Button na false, aby przywrócić oryginalne zachowanie.

Elementy sterujące pozycjonowaniem przy użyciu dokowania i kotwiczenia

Zachowanie zadokowania i zakotwiczenia kontrolek podrzędnych różni się od zachowań innych kontrolek kontenera. Zarówno dokowanie, jak i zakotwiczenie odnoszą się do największego elementu sterującego w kierunku przepływu.

Aby umieścić kontrolki przy użyciu dokowania i kotwiczenia

  1. Zwiększ rozmiar kontrolki FlowLayoutPanel , aż wszystkie kontrolki Button zostaną rozmieszczone w kolumnie.

  2. Wybierz górną Button kontrolkę. Zwiększ szerokość, aby była o około dwa razy większa niż pozostałe Button kontrolki.

  3. Wybierz drugą Button kontrolkę. Zmień wartość jej Anchor właściwości na Right. Należy pamiętać, że jest on przenoszony tak, aby jego prawe obramowanie było wyrównane do prawego obramowania pierwszej Button kontrolki.

  4. Zmień wartość jej Anchor właściwości na Right i Left. Należy pamiętać, że ma to tę samą szerokość, co pierwszy element sterujący Button.

  5. Wybierz trzecią Button kontrolkę. Zmień wartość jej Dock właściwości na Fill. Należy pamiętać, że ma to tę samą szerokość, co pierwszy element sterujący Button.

Rozmieszczanie elementów sterujących przy użyciu wypełnień i marginesów

Kontrolki można również rozmieścić w kontrolce FlowLayoutPanel, zmieniając właściwości Padding i Margin.

Właściwość Padding pozwala na kontrolowanie rozmieszczenia elementów sterujących wewnątrz komórki kontrolki FlowLayoutPanel. Określa odstęp między kontrolkami podrzędnymi a FlowLayoutPanel obramowaniem kontrolki.

Właściwość Margin umożliwia kontrolowanie odstępów między kontrolkami.

Aby rozmieścić kontrolki przy użyciu właściwości Padding i Margin

  1. Zmień wartość właściwości FlowLayoutPanel kontrolki Dock na Fill. Jeśli formularz jest wystarczająco duży, kontrolki Button zostaną przeniesione do pierwszej kolumny w obrębie kontrolki FlowLayoutPanel.

  2. Zmień wartość właściwości FlowLayoutPanel kontrolki Padding, rozwijając wpis Padding w oknie Właściwości i ustawiając właściwość All na 20. Aby uzyskać więcej informacji, zobacz Przewodnik: układanie kontrolek formularzy systemu Windows z wypełnieniem, marginesami i właściwością AutoSize. Należy pamiętać, że kontrolki podrzędne są przenoszone bliżej środka kontrolki FlowLayoutPanel. Zwiększona wartość właściwości Padding odsuwa kontrolki podrzędne od granic kontrolki FlowLayoutPanel.

  3. Zaznacz wszystkie kontrolki Button w FlowLayoutPanel i ustaw właściwość Margin na wartość 20. Należy pamiętać, że odstęp między Button kontrolkami zwiększa się, więc są one przenoszone dalej. Aby wyświetlić wszystkie kontrolki podrzędne, może być konieczne zmienienie rozmiaru kontrolki FlowLayoutPanel na większy.

Wstawianie kontrolek przez dwukrotne kliknięcie ich w przyborniku

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

Aby wstawić kontrolki, klikając dwukrotnie w przyborniku

  1. Kliknij dwukrotnie ikonę kontrolki Button w przyborniku . Pamiętaj, że nowa Button kontrolka jest wyświetlana w kontrolce FlowLayoutPanel .

  2. Kliknij dwukrotnie kilka kontrolek w przyborniku. Należy pamiętać, że nowe kontrolki są wyświetlane kolejno w kontrolce FlowLayoutPanel .

Wstawianie kontrolki przez rysowanie jej konturu

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

Aby wstawić kontrolkę, rysując jej kontur

  1. W przyborniku kliknij ikonę kontrolki Button. Nie przeciągaj go na formularz.

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

  3. Kliknij i przytrzymaj przycisk myszy.

  4. Przeciągnij wskaźnik myszy, aby narysować kontur kontrolki Button. Jeśli rozmiar jest zadowalający, zwolnij przycisk myszy. Pamiętaj, że kontrolka Button jest tworzona w następnej otwartej lokalizacji kontrolki FlowLayoutPanel .

Wstawianie kontrolek przy użyciu paska wstawiania

Kontrolki można wstawić w określonej pozycji w kontrolce FlowLayoutPanel . Po przeciągnięciu kontrolki do FlowLayoutPanel obszaru klienta kontrolki zostanie wyświetlony pasek wstawiania wskazujący, gdzie zostanie wstawiona kontrolka.

Aby wstawić kontrolkę przy użyciu karetki

  1. Przeciągnij kontrolkę Button z przybornika do kontrolki FlowLayoutPanel i wskaż spację między dwoma Button kontrolkami. Zwróć uwagę, że narysowany jest pasek wstawiania wskazujący, gdzie Button zostanie umieszczony po upuszczaniu do kontrolki FlowLayoutPanel . Przed wstawieniem nowej Button kontrolki do kontrolki FlowLayoutPanel przesuń wskaźnik myszy, aby zobaczyć, jak przesuwa się pasek wstawiania.

  2. Upuść nową Button kontrolkę do kontrolki FlowLayoutPanel . Należy pamiętać, że nowa Button kontrolka nie jest zgodna z innymi, ponieważ jej Margin właściwość ma inną wartość.

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

Możesz przypisać kontrolki istniejące w formularzu do nowej FlowLayoutPanel kontrolki.

Aby ponownie przejąć istniejące kontrolki

  1. Przeciągnij trzy Button kontrolki z przybornika na formularz. Umieść je w pobliżu siebie, ale pozostaw je niewyrównane.

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

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

  4. Kliknij i przytrzymaj przycisk myszy.

  5. Przeciągnij wskaźnik myszy, aby narysować kontur kontrolki FlowLayoutPanel. Rysuj kontur wokół trzech kontrolek Button.

  6. Zwolnij przycisk myszy. Należy pamiętać, że trzy Button kontrolki są wstawione do kontrolki FlowLayoutPanel .

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ą:

  • Zmień rozmiar jednej z Button kontrolek na większy rozmiar i zanotuj wpływ na układ.

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

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

  • Ustaw właściwość jednej z kontrolek na Visible i zanotuj, jak false zmienia się w odpowiedzi.

Zobacz także

  • Last updated on