Programowanie zaawansowanych form WinF w C #

W tym samouczku programowania w C # skoncentruję się na zaawansowanych kontrolkach, takich jak ComboBox, Grids i ListViews, i pokażę ci sposób, w jaki najprawdopodobniej z nich będziesz korzystać. Nie dotykam danych i nie wiążę do późniejszego samouczka. Zacznijmy od prostej kontroli, ComboBox.

Sercem Combo jest kolekcja przedmiotów, a najprostszym sposobem na wypełnienie tego jest upuszczenie zestawu na ekranie, wybierz właściwości (jeśli nie widzisz okien właściwości, kliknij Widok w górnym menu, a następnie Okno właściwości), znajdź elementy i kliknij elipsy przycisk. Następnie możesz wpisać ciągi, skompilować program i pociągnąć kombinację w dół, aby zobaczyć dostępne opcje.

Teraz zatrzymaj program i dodaj jeszcze kilka liczb: cztery, pięć.. do dziesięciu. Po uruchomieniu zobaczysz tylko 8, ponieważ jest to domyślna wartość MaxDropDownItems. Możesz ustawić go na 20 lub 3, a następnie uruchomić, aby zobaczyć, co robi.

To denerwujące, że gdy się otworzy, mówi comboBox1 i można go edytować. Nie tego chcemy. Znajdź właściwość DropDownStyle i zmień DropDown na DropDownList. (To kombinacja!). Teraz nie ma tekstu i nie można go edytować. Możesz wybrać jeden z numerów, ale zawsze otwiera się pusty. Jak wybrać numer, od którego zacząć? Cóż, nie jest to właściwość, którą można ustawić w czasie projektowania, ale dodanie tego wiersza wystarczy.

instagram viewer

Dodaj tę linię do konstruktora Form1 (). Musisz wyświetlić kod formularza (w Eksploratorze rozwiązań kliknij prawym przyciskiem myszy From1.cs i kliknij Wyświetl kod. Znajdź InitializeComponent (); i dodaj tę linię natychmiast po tym.

Jeśli ustawisz właściwość DropDownStyle dla zestawu na Simple i uruchomisz program, nic nie dostaniesz. Nie wybierze, nie kliknie ani nie zareaguje. Dlaczego? Ponieważ w czasie projektowania musisz chwycić dolny elastyczny uchwyt i sprawić, by cała kontrola była wyższa.

W przykładzie 2 zmieniłem nazwę ComboBox na combo, zmieniłem kombi DropDownStyle z powrotem na DropDown, aby można go było edytować i dodałem przycisk Dodaj o nazwie btnAdd. Dwukrotnie kliknąłem przycisk dodawania, aby utworzyć moduł obsługi zdarzeń btnAdd_Click () i dodałem tę linię zdarzeń.

Teraz po uruchomieniu programu wpisz nowy numer, powiedz Jedenaście i kliknij dodaj. Program obsługi zdarzeń pobiera wpisany tekst (w kombinacji. Tekst) i dodaje go do kolekcji elementów zestawu. Kliknij na Combo, a teraz mamy nowy wpis Jedenaście. W ten sposób dodajesz nowy ciąg do kombinacji. Usunięcie jednego jest nieco bardziej skomplikowane, ponieważ musisz znaleźć indeks ciągu, który chcesz usunąć, a następnie go usunąć. Metoda RemoveAt pokazana poniżej jest metodą kolekcji, aby to zrobić. po prostu musisz określić, który element w parametrze Removeindex.

usunie ciąg w pozycji RemoveIndex. Jeśli w zestawie znajduje się n elementów, prawidłowe wartości wynoszą od 0 do n-1. Dla 10 pozycji, wartości 0..9.

Jeśli to nie znajdzie tekstu, zwraca -1, w przeciwnym razie zwraca indeks ciągu 0 na liście kombinacji. Istnieje również przeciążona metoda FindStringExact, która pozwala określić miejsce rozpoczęcia wyszukiwania, dzięki czemu możesz pominąć pierwszą itd., Jeśli masz duplikaty. Może to być przydatne do usuwania duplikatów z listy.

Kliknięcie btnAddMany_Click () usuwa tekst z kombinacji, a następnie usuwa zawartość kolekcji Elementy, a następnie wywołuje kombinację. AddRange (aby dodać ciągi z tablicy wartości. Po wykonaniu tej czynności ustawia SelectedIndex zestawu na 0. To pokazuje pierwszy element w kombinacji. Jeśli dodajesz lub usuwasz elementy w ComboBox, najlepiej śledzić, który element jest wybrany. Ustawienie SelectedIndex na -1 ukrywa wybrane elementy.

Przycisk Dodaj partie usuwa listę i dodaje 10 000 liczb. Dodałem kombinację. BeginUpdate () i combo, EndUpdate () wywołuje pętlę, aby zapobiec migotaniu z systemu Windows przy próbie aktualizacji kontrolki. Na moim trzyletnim komputerze dodawanie 100 000 liczb do kombinacji zajmuje nieco ponad sekundę.

Jest to przydatna kontrola do wyświetlania danych tabelarycznych bez złożoności siatki. Możesz wyświetlać elementy jako duże lub małe ikony, jako listę ikon na liście pionowej lub najkorzystniej jako listę elementów i podelementów w siatce i to właśnie tutaj zrobimy.

Po upuszczeniu ListView do formularza kliknij właściwość kolumny i dodaj 4 kolumny. Będą to TownName, X, Y i Pop. Ustaw tekst dla każdego ColumnHeader. Jeśli nie widzisz nagłówków w ListView (po dodaniu wszystkich 4), ustaw Właściwość widoku ListView na Szczegóły. Jeśli zobaczysz kod dla tego przykładu, przejdź do miejsca, w którym jest napisany kod Windows Form Designer i rozwiń region, w którym widzisz kod tworzący ListView. Warto zobaczyć, jak działa system, możesz skopiować ten kod i użyć go samodzielnie.

Możesz ustawić szerokość każdej kolumny ręcznie, przesuwając kursor nad nagłówek i przeciągając go. Możesz to zrobić w kodzie widocznym po rozwinięciu regionu projektanta formularzy. Powinieneś zobaczyć taki kod:

W kolumnie populacji zmiany w kodzie są odzwierciedlane w projektancie i odwrotnie. Pamiętaj, że nawet jeśli ustawisz właściwość Locked na true, wpływa to tylko na projektanta, aw czasie wykonywania możesz zmienić rozmiar kolumn.

ListViews mają również szereg właściwości dynamicznych. Kliknij (Właściwości dynamiczne) i zaznacz odpowiednią właściwość. Ustawienie właściwości jako dynamicznej powoduje utworzenie pliku XML .config i dodanie go do Eksploratora rozwiązań.

Wprowadzanie zmian w czasie projektowania to jedno, ale naprawdę musimy to zrobić, gdy program jest uruchomiony. ListView składa się z 0 lub więcej elementów. Każdy element (ListViewItem) ma właściwość text i kolekcję SubItems. Pierwsza kolumna wyświetla tekst pozycji, następna kolumna wyświetla SubItem [0] .text, a następnie SubItem [1] .text i tak dalej.

Dodałem przycisk, aby dodać wiersz i pole edycji dla nazwy miasta. Wpisz dowolną nazwę w polu i kliknij Dodaj wiersz. Spowoduje to dodanie nowego wiersza do ListView z nazwą miejscowości umieszczoną w pierwszej kolumnie i kolejnych trzech kolumnach (Podelementy [0..2]) są wypełniane liczbami losowymi (konwertowanymi na ciągi) przez dodanie tych ciągów do im.

Teraz ustaw właściwość ListView Multiselect na wartość false. Chcemy wybierać tylko jeden element na raz, ale jeśli chcesz usunąć więcej za jednym razem, jest to podobne, z tym wyjątkiem, że musisz przewijać w odwrotnej kolejności. (Jeśli zapętlisz się w normalnej kolejności i usuniesz elementy, kolejne elementy nie będą zsynchronizowane z wybranymi indeksami).

Menu prawego kliknięcia jeszcze nie działa, ponieważ nie mamy w nim żadnych elementów menu. Kliknij prawym przyciskiem myszy PopupMenu (pod formularzem), a zobaczysz menu kontekstowe u góry formularza, w którym pojawia się normalny edytor menu. Kliknij go i tam, gdzie jest napisane Wpisz tutaj, wpisz Usuń element. Okno właściwości pokaże MenuItem, więc zmień nazwę na mniRemove. Kliknij dwukrotnie ten element menu, a powinieneś uzyskać funkcję kodu obsługi menuItem1_Click. Dodaj ten kod, aby wyglądał tak.

Jeśli stracisz z oczu pozycję Usuń element, po prostu kliknij kontrolkę PopupMenu samodzielnie w formularzu w formularzu Projektant formularzy. To przywróci to do widoku.

Jeśli jednak uruchomisz go i nie dodasz elementu, a następnie go zaznaczysz, po kliknięciu prawym przyciskiem myszy i przejściu do menu i kliknięciu opcji Usuń element, nastąpi wyjątek, ponieważ nie ma zaznaczonego elementu. To złe programowanie, więc oto jak to naprawić. Kliknij dwukrotnie zdarzenie wyskakujące i dodaj ten wiersz kodu.

DataGridView jest zarówno najbardziej złożonym, jak i najbardziej użytecznym składnikiem udostępnianym bezpłatnie w języku C #. Działa z obydwoma źródłami danych (tj. Danymi z bazy danych) i bez (tj. Danymi, które dodajesz programowo). W dalszej części tego samouczka pokażę korzystanie z niego bez źródeł danych. Dla prostszych potrzeb wyświetlania może okazać się bardziej odpowiedni zwykły ListView.

Jeśli użyłeś starszej kontrolki DataGrid, jest to tylko jedna ze sterydów: daje więcej wbudowanych typów kolumn, może współpracować z dane wewnętrzne i zewnętrzne, większa personalizacja wyświetlania (i zdarzeń) oraz większa kontrola nad obsługą komórek dzięki blokowaniu wierszy i kolumny.

Podczas projektowania formularzy z danymi siatki najczęściej określa się różne typy kolumn. Możesz mieć pola wyboru w jednej kolumnie, tekst tylko do odczytu lub edytowalny w innej oraz numery kursów. Te typy kolumn są również zwykle wyrównane w różny sposób, przy czym liczby są zazwyczaj wyrównane do prawej, tak aby punkty dziesiętne były wyrównane. Na poziomie kolumny możesz wybrać przycisk, pole wyboru, ComboBox, obraz, TextBox i łącza. jeśli to nie wystarczy, możesz zdefiniować własne typy niestandardowe.

Najłatwiejszym sposobem dodania kolumn jest zaprojektowanie w IDE. Jak widzieliśmy wcześniej, po prostu pisze kod dla ciebie, a kiedy zrobiłeś to kilka razy, możesz dodać kod samodzielnie. Po wykonaniu tej czynności kilka razy uzyskasz wgląd w to, jak to zrobić programowo.

Zacznijmy od dodania kilku kolumn, upuść DataGridView na formularz i kliknij małą strzałkę w prawym górnym rogu. Następnie kliknij Dodaj kolumnę. Zrób to trzy razy. Pojawi się okno dialogowe Dodaj kolumnę, w którym ustawiasz nazwę kolumny, tekst wyświetlany na górze kolumny i pozwala wybrać jej typ. Pierwsza kolumna to YourName i jest to domyślny TextBox (dataGridViewTextBoxColumn). Ustaw także tekst nagłówka na swoją nazwę. Ustaw drugą kolumnę Wiek i użyj ComboBox. Trzecia kolumna jest dozwolona i jest kolumną CheckBox.

Po dodaniu wszystkich trzech powinieneś zobaczyć rząd trzech kolumn z kombinacją w środkowej (Wiek) i pole wyboru w kolumnie Dozwolone. Po kliknięciu DataGridView w inspektorze właściwości należy zlokalizować kolumny i kliknąć (kolekcja). Pojawi się okno dialogowe, w którym możesz ustawić właściwości dla każdej kolumny, takie jak kolory poszczególnych komórek, tekst podpowiedzi, szerokość, minimalna szerokość itp. Jeśli skompilujesz i uruchomisz, zauważysz, że możesz zmienić szerokość kolumn i czas wykonywania. W inspektorze właściwości głównego DataGridView można ustawić dla AllowUser resizeColumns na false, aby temu zapobiec.

Dodamy wiersze do kontrolki DataGridView w kodzie, a plik ex3.cs w pliku przykładów ma ten kod. Zaczynając od dodania pola TextEdit, ComboBox i przycisku do formularza z DataGridView. Ustaw właściwość DataGridView AllowUserto AddRows na wartość false. Używam również etykiet i nazywam combobox cbAges, przycisk btnAddRow i TextBox tbName. Dodałem również przycisk zamykania formularza i dwukrotnie go kliknąłem, aby wygenerować szkielet obsługi zdarzeń btnClose_Click. Dodanie tam słowa Close () powoduje, że to działa.

Domyślnie właściwość Włącz przycisk dodawania wiersza jest ustawiona na fałsz przy uruchomieniu. Nie chcemy dodawać żadnych wierszy do DataGridView, chyba że w polu Name TextEdit i ComboBox znajduje się tekst. Stworzyłem metodę CheckAddButton, a następnie wygenerowałem moduł obsługi zdarzenia Leave dla pola edycji Tekst nazwy, klikając dwukrotnie obok słowa Leave we właściwościach podczas wyświetlania zdarzeń. Pole Właściwości pokazuje to na powyższym obrazku. Domyślnie w oknie Właściwości wyświetlane są właściwości, ale można wyświetlić procedury obsługi zdarzeń, klikając przycisk błyskawicy.

Można użyć zamiast tego zdarzenia TextChanged, ale spowoduje to wywołanie CheckAddButton () metoda dla każdego naciśnięcia klawisza, a nie po opuszczeniu kontroli, tj. gdy zyskuje inna kontrola skupiać. W kombinacji wieków użyłem zdarzenia TextChanged, ale wybrałem moduł obsługi zdarzeń tbName_Leave zamiast podwójnego kliknięcia, aby utworzyć nowy moduł obsługi zdarzeń.

Nie wszystkie zdarzenia są kompatybilne, ponieważ niektóre zdarzenia zapewniają dodatkowe parametry, ale jeśli widzisz wcześniej wygenerowany moduł obsługi, to tak, możesz go użyć. Jest to głównie kwestia preferencji, możesz mieć osobny moduł obsługi zdarzeń dla każdej kontroli, którą jesteś używanie lub udostępnianie procedur obsługi zdarzeń (tak jak ja), gdy mają one wspólną sygnaturę zdarzenia, tj. parametry to podobnie.

Dla zwięzłości zmieniłem nazwę komponentu DataGridView na dGView i dwukrotnie kliknąłem AddRow, aby wygenerować szkielet procedury obsługi zdarzeń. Poniższy kod dodaje nowy pusty wiersz, uzyskuje indeks wierszy (jest to RowCount-1, ponieważ został właśnie dodany, a RowCount ma wartość 0 na podstawie), a następnie uzyskuje dostęp do tego wiersza za pomocą indeksu i ustawia wartości w komórkach tego wiersza dla kolumn YourName i Wiek.

Projektując formularz, powinieneś pomyśleć o kontenerach i kontrolkach oraz o tym, które grupy kontroli powinny być trzymane razem. W kulturach zachodnich ludzie czytają od lewej do prawej, więc odczytaj w ten sposób.

Kontener to dowolny element sterujący, który może zawierać inne elementy sterujące. Te znalezione w Zestawie narzędzi obejmują Panel, FlowLayoutpanel, SplitContainer, TabControl i TableLayoutPanel. Jeśli nie widzisz przybornika, skorzystaj z menu Widok, a znajdziesz go. Kontenery trzymają elementy sterujące razem, a jeśli przesuniesz lub zmienisz rozmiar kontenera, wpłynie to na położenie elementów sterujących. Wystarczy przesunąć kontrolę nad kontenerem w Projektancie formularzy, a on rozpozna, że ​​Kontener jest teraz odpowiedzialny.

Panel jest podobny do GroupBox, ale GroupBox nie może przewijać, ale może wyświetlać podpis i ma domyślnie ramkę. Panele mogą mieć ramki, ale domyślnie nie. Korzystam z GroupBox, ponieważ wyglądają ładniej, a to ważne, ponieważ:

Panele są również przydatne do grupowania kontenerów, więc możesz mieć dwa lub więcej GroupBox w panelu.

Tutaj jest wskazówka do pracy z pojemnikami. Upuść podzielony pojemnik na formularz. Kliknij lewy panel, a następnie prawy. Teraz spróbuj usunąć SplitContainer z formularza. Jest to trudne, dopóki nie klikniesz prawym przyciskiem myszy na jednym z paneli, a następnie klikniesz Wybierz SplitContainer1. Po zaznaczeniu możesz go usunąć. Innym sposobem, który dotyczy wszystkich elementów sterujących i kontenerów, jest naciśnij klawisz Esc wybrać rodzica.

Pojemniki mogą się również zagnieżdżać. Po prostu przeciągnij małą na większą, a zobaczysz cienką pionową linię na krótko, aby pokazać, że jedna jest teraz w drugiej. Podczas przeciągania kontenera nadrzędnego dziecko jest wraz z nim przenoszone. Przykład 5 pokazuje to. Domyślnie jasnobrązowy panel nie znajduje się w pojemniku, więc po kliknięciu przycisku przenoszenia GroupBox jest przenoszony, ale panel nie jest. Teraz przeciągnij panel nad GroupBox, aby znalazł się całkowicie w Groupbox. Podczas kompilacji i uruchomienia tym razem kliknięcie przycisku Przenieś przesuwa oba razem.

TableLayoutpanel to ciekawy pojemnik. Jest to struktura tabeli zorganizowana jak siatka 2D komórek, w której każda komórka zawiera tylko jedną kontrolkę. W komórce nie można mieć więcej niż jednej kontroli. Możesz określić, jak rośnie tabela, gdy dodaje się więcej elementów sterujących, a nawet jeśli się nie powiększa. Wygląda na modelowaną na tabeli HTML, ponieważ komórki mogą rozciągać się na kolumny lub wiersze. Nawet zakotwiczenie kontroli dzieci w pojemniku zależy od ustawień marginesu i wypełnienia. Więcej o kotwicach zobaczymy na następnej stronie.

W przykładzie Ex6.cs zacząłem od podstawowej tabeli dwukolumnowej i określiłem ją w oknie dialogowym Style kontroli i Styl wierszy (wybierz element sterujący i kliknij mały trójkąt skierowany w prawo znajduje się w pobliżu prawego górnego rogu, aby wyświetlić listę zadań i kliknij ostatni), że lewa kolumna to 40%, a prawa kolumna 60% szerokość. Pozwala określić szerokość kolumn w wartościach bezwzględnych w pikselach, w procentach, lub możesz po prostu pozwolić AutoSize. Szybszym sposobem na przejście do tego okna dialogowego jest po prostu kliknięcie kolekcji obok kolumn w oknie właściwości.

Dodałem przycisk AddRow i opuściłem właściwość GrowStyle z domyślną wartością AddRows. Gdy stół się zapełni, dodaje kolejny wiersz. Alternatywnie możesz ustawić jego wartości na AddColumns i FixedSize, aby nie mógł już rosnąć. W Ex6 kliknięcie przycisku Dodaj formanty wywołuje metodę AddLabel () trzy razy, a AddCheckBox () jeden raz. Każda metoda tworzy instancję formantu, a następnie wywołuje tblPanel. Sterownica. Add () Po dodaniu drugiej kontrolki trzecia kontrolka powoduje wzrost tabeli. Zdjęcie pokazuje to po jednokrotnym kliknięciu przycisku Dodaj kontrolę.

Jeśli zastanawiasz się, skąd pochodzą wartości domyślne w metodach AddCheckbox () i AddLabel (), które wywołuję, formant był pierwotnie ręcznie dodany do tabeli w projektancie, a następnie kod do jej utworzenia i zainicjowania został skopiowany z tego region. Kod inicjalizacji znajdziesz w wywołaniu metody InitializeComponent po kliknięciu + po lewej stronie regionu poniżej:

Możesz wybrać wiele kontrolek jednocześnie, przytrzymując klawisz Shift podczas wybierania drugiej i kolejnych kontrolek, nawet kontroli różnych typów. Okno Właściwości pokazuje tylko te właściwości wspólne dla obu, dzięki czemu można ustawić je wszystkie na taki sam rozmiar, kolor i pola tekstowe itp. Nawet te same procedury obsługi zdarzeń można przypisać do wielu elementów sterujących.

W zależności od zastosowania, niektóre formularze często będą zmieniać rozmiar przez użytkownika. Nie ma nic gorszego niż zmiana rozmiaru formularza i obserwowanie elementów sterujących w tej samej pozycji. Wszystkie elementy sterujące mają zakotwiczenia, które pozwalają „przymocować” je do 4 krawędzi, dzięki czemu element sterujący przesuwa się lub rozciąga, gdy dołączona krawędź zostanie przesunięta. Prowadzi to do następującego zachowania, gdy formularz jest rozciągany od prawej krawędzi:

W przypadku przycisków typu Zamknij, które tradycyjnie znajdują się w prawym dolnym rogu, potrzebne jest zachowanie 3. ListViews i DataGridViews najlepiej nadają się do 2, jeśli liczba kolumn wystarcza do przepełnienia formularza i wymaga przewijania). Górne i lewe kotwice są domyślne. Okno właściwości zawiera sprytny mały edytor, który wygląda jak Flaga Anglii. Wystarczy kliknąć dowolny pasek (dwa poziome i dwa pionowe), aby ustawić lub usunąć odpowiednią kotwicę, jak pokazano na powyższym obrazku.

Jedną z właściwości, o której niewiele się mówi, jest właściwość Tag, a jednak może być niezwykle przydatna. W oknie właściwości możesz przypisywać tylko tekst, ale w kodzie możesz mieć dowolną wartość pochodzącą od Object.

Użyłem Tag do przechowywania całego obiektu, pokazując tylko kilka jego właściwości w ListView. Na przykład możesz chcieć wyświetlać tylko Nazwę klienta i numer na liście Podsumowanie klienta. Ale kliknij prawym przyciskiem myszy wybranego klienta, a następnie otwórz formularz ze wszystkimi szczegółami klienta. Jest to łatwe, jeśli tworzysz listę klientów, czytając wszystkie dane klienta w pamięci i przypisując odwołanie do obiektu klasy klienta w znaczniku. Wszystkie elementy sterujące mają znacznik.

TabControl to wygodny sposób na zaoszczędzenie miejsca na formularzu dzięki wielu kartom. Każda karta może zawierać ikonę lub tekst. Możesz wybrać dowolną kartę i wyświetlić jej elementy sterujące. TabControl jest kontenerem, ale zawiera tylko TabPages. Każda strona TabPage jest również kontenerem, do którego można dodać normalne kontrolki.

W przykładzie x7.cs utworzyłem panel strony z dwiema zakładkami i pierwszą zakładką o nazwie Sterowanie, zawierającą trzy przyciski i pole wyboru. Strona drugiej karty jest oznaczona jako Dzienniki i służy do wyświetlania wszystkich zarejestrowanych działań, w tym klikania przycisku lub przełączania pola wyboru. Wywoływana jest metoda Log () w celu rejestrowania każdego kliknięcia przycisku itp. Dodaje dostarczony ciąg do ListBox.

Dodałem również dwa elementy menu podręcznego kliknięcia prawym przyciskiem myszy do TabControl w zwykły sposób. Najpierw dodaj ContextMenuStrip do formularza i ustaw go we właściwości ContextStripMenu TabControl. Dwie opcje menu to Dodaj nową stronę i Usuń tę stronę. Jednak ograniczyłem usuwanie stron, aby można było usunąć tylko nowo dodane strony kart, a nie dwie oryginalne.

Jest to łatwe, wystarczy utworzyć nową stronę karty, nadać jej podpis tekstowy dla karty, a następnie dodać go do kolekcji TabPages TabControl

Usunięcie strony to tylko kwestia wywołania TabPages. RemoveAt (), używając Tabs. SelectedIndex, aby uzyskać aktualnie wybraną kartę.

W tym samouczku widzieliśmy, jak działają niektóre z bardziej wyrafinowanych elementów sterujących i jak z nich korzystać. W następnym samouczku zamierzam kontynuować temat GUI, przyjrzeć się wątkowi pracownika w tle i pokazać, jak go używać.