Udostępnij za pośrednictwem

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

  • 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.

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 kontrolek w 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ć opakowana 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 podziałów przepływu

  • Rozmieszczanie kontrolek przy użyciu dopełnienia i marginesów

  • Wstawianie kontrolek przez dwukrotne kliknięcie ich w przyborniku

  • Wstawianie kontrolki przez rysowanie jej konturu

  • Wstawianie kontrolek przy użyciu karetki

  • 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 Projektant Formularze.

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 zmieniać rozmiar 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 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 Button kontrolek do momentu zawijania do następnego wiersza.

  5. Zmień wartość FlowLayoutPanel właściwości 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 przycięte.

  6. Zmień wartość FlowLayoutPanel właściwości 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ść FlowLayoutPanel właściwości kontrolki FlowDirection na TopDown. Należy pamiętać, że kontrolki podrzędne są zmieniane w co najmniej jedną kolumnę w zależności od wysokości kontrolki.

  2. Zmień rozmiar tak FlowLayoutPanel , aby jego wysokość jest krótsza niż kolumna Button kontrolek. Należy pamiętać, że FlowLayoutPanel kontrolki podrzędne są zmieniane tak, aby przepływał do następnej kolumny. Kontynuuj zmniejszanie wysokości i zwróć uwagę, że kontrolki podrzędne przepływają do kolejnych kolumn. Zmień wartość FlowLayoutPanel właściwości kontrolki FlowDirection na RightToLeft. Należy pamiętać, że pozycje kontrolek podrzędnych są odwrócone. Obserwuj układ, gdy zmieniasz wartość FlowDirection właściwości na BottomUp.

Wstawianie podziałów przepływu

Kontrolka FlowLayoutPanel udostępnia właściwość FlowBreak do kontrolek podrzędnych. Ustawienie wartości właściwości FlowBreak powoduje trueFlowLayoutPanel zatrzymanie układania kontrolek w bieżącym kierunku przepływu i zawijanie do następnego wiersza lub kolumny.

Aby wstawić podziały przepływu

  1. Zmień wartość FlowLayoutPanel właściwości 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 przepływem sterowania do następnej kolumny. Ustaw wartość Button właściwości FlowBreak kontrolki, aby false powrócić do oryginalnego zachowania.

Kontrolki pozycjonowania przy użyciu dokowania i zakotwiczenia

Zachowanie zadokowania i zakotwiczenia kontrolek podrzędnych różni się od zachowań innych kontrolek kontenera. Zarówno dokowanie, jak i zakotwiczenie są względne względem największej kontrolki w kierunku przepływu.

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

  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 rozmiar ma taką samą szerokość jak pierwsza Button kontrolka.

  5. Wybierz trzecią Button kontrolkę. Zmień wartość jej Dock właściwości na Fill. Należy pamiętać, że rozmiar ma taką samą szerokość jak pierwsza Button kontrolka.

Rozmieszczanie kontrolek przy użyciu dopełnienia i marginesów

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

Właściwość Padding umożliwia kontrolowanie umieszczania kontrolek w FlowLayoutPanel komórce kontrolki. 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 Dopełnienie i Margines

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

  2. Zmień wartość właściwości kontrolkiPadding, rozwijając wpis w oknie Właściwości i ustawiając PaddingAll właściwość na 20.FlowLayoutPanel 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 w kierunku środka kontrolki FlowLayoutPanel . Zwiększona wartość właściwości Padding przesuwa kontrolki podrzędne z dala od FlowLayoutPanel obramowań kontrolki.

  3. Zaznacz wszystkie kontrolki Button w obiekcie FlowLayoutPanel i ustaw wartość Margin właściwości na 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 zmianę rozmiaru FlowLayoutPanel kontrolki.

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ę kontrolkiButton. 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ę z przybornika do kontrolki FlowLayoutPanel i wskaż spację między dwoma Button kontrolkami.Button Zwróć uwagę, że narysowany jest pasek wstawiania wskazujący, gdzie Button zostanie umieszczony po upuszczaniu do kontrolki FlowLayoutPanel . Przed usunięciem 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 nieprzygotowane.

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

  3. Przesuń wskaźnik myszy w pobliżu trzech Button kontrolek. 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 Button kontrolek.

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

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

  • 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.

  • Visible Ustaw właściwość jednej z kontrolek na false i zanotuj, jak FlowLayoutPanel przepływy w odpowiedzi.

Zobacz też