Programmera avancerade Winforms i C #

I denna C # programmeringshandledning kommer jag att koncentrera mig på de avancerade kontrollerna som ComboBoxes, Grids och ListViews och visar hur du troligtvis använder dem. Jag berör inte data och binder förrän en senare handledning. Låt oss börja med en enkel kontroll, en ComboBox.

I hjärtat av en kombination finns en samling av artiklar och det enklaste sättet att fylla i detta är att släppa en kombination på skärmen, välj egenskaper (om du inte kan se egenskapsfönstren, klicka på Visa på översta menyn och sedan på Egenskapsfönstret), hitta objekt och klicka på ellipserna knapp. Du kan sedan skriva in strängarna, sammanställa programmet och dra kombinationsrutan ner för att se val.

Stoppa nu programmet och lägg till några fler nummer: fyra, fem.. upp till tio. När du kör det ser du bara 8 eftersom det är standardvärdet för MaxDropDownItems. Ställ in den till 20 eller 3 och kör sedan den för att se vad den gör.

Det är irriterande att när det öppnas står det comboBox1 och du kan redigera det. Det är inte det vi vill ha. Hitta egenskapen DropDownStyle och ändra DropDown till DropDownList. (Det är en kombination!). Nu finns det ingen text och den är inte redigerbar. Du kan välja ett av siffrorna men det öppnas alltid tomt. Hur väljer vi ett nummer till att börja med? Det är inte en egenskap som du kan ställa in vid designtid men att lägga till den här linjen kommer att göra det.

instagram viewer

Lägg till den raden i Form1 () -konstruktören. Du måste se koden för formuläret (högerklicka på From1.cs i Solution Explorer och klicka på Visa kod). Hitta InitializeComponent (); och lägg till den raden omedelbart efter detta.

Om du ställer in DropDownStyle-egenskapen för kombinationen till Simple och kör programmet får du ingenting. Den kommer inte att välja eller klicka eller svara. Varför? För vid designtid måste du ta tag i det nedre stretchhandtaget och göra hela kontrollen högre.

I exempel 2 har jag bytt namn på ComboBox till combo, ändrat combo DropDownStyle tillbaka till DropDown så att den kan redigeras och lägg till en Lägg till-knapp som heter btnAdd. Jag har dubbelklickat på knappen Lägg till för att skapa en händelse btnAdd_Click () händelsehanterare och lagt till denna händelselinje.

När du kör programmet skriver du in ett nytt nummer, säger Eleven och klickar på lägg till. Händelseshanteraren tar texten du skrev in (i kombination). Text) och lägger till den i Combo's artikelsamling. Klicka på Combo så har vi nu en ny post Elva. Det är så du lägger till en ny sträng till en kombinationsbok. Att ta bort en är lite mer komplicerad eftersom du måste hitta index för strängen du vill ta bort och ta bort den. Metoden RemoveAt som visas nedan är en insamlingsmetod för att göra detta. du måste bara ange vilket objekt i parametern Removeindex.

tar bort strängen i läget RemoveIndex. Om det finns n objekt i kombinationen är de giltiga värdena 0 till n-1. För 10 artiklar, värden 0..9.

Om detta inte hittar texten returnerar det -1 annars returnerar det 0-baserade index för strängen i kombinationslistan. Det finns också en överbelastad metod med FindStringExact som låter dig ange var du startar sökningen från, så att du kan hoppa över den första osv om du har duplikat. Detta kan vara praktiskt för att ta bort dubbletter i en lista.

Om du klickar på btnAddMany_Click () rensas texten från kombinationsrutan och rensar sedan innehållet i kombinationen Objektsamling och kallar sedan kombination. AddRange (för att lägga till strängarna från värdearrayen. Efter att ha gjort detta ställer den in kombinationens SelectedIndex till 0. Detta visar det första elementet i kombinationsrutan. Om du lägger till eller tar bort objekt i en ComboBox är det bäst att hålla reda på vilket objekt som är valt. Att ställa SelectedIndex till -1 döljer de markerade objekten.

Knappen Lägg till massor rensar listan och lägger till 10 000 nummer. Jag har lagt till combo. StartUpdate () och combo, EndUpdate () ringer runt loopen för att förhindra att flimmer från Windows försöker uppdatera kontrollen. På min tre år gamla dator tar det drygt en sekund att lägga till 100 000 nummer i kombinationen.

Detta är en praktisk kontroll för att visa tabelldata utan komplexiteten hos ett rutnät. Du kan visa objekt som stora eller små ikoner, som en lista med ikoner i en vertikal lista eller mest användbart som en lista över objekt och undertexter i ett rutnät och det är vad vi gör här.

När du har tappat en ListView på ett formulär klickar du på kolumnegenskapen och lägger till 4 kolumner. Dessa kommer att vara TownName, X, Y och Pop. Ställ in texten för varje ColumnHeader. Om du inte kan se rubrikerna på ListView (efter att du har lagt till alla 4), ställer du in ListViews View-egenskap till Detaljer. Om du visar koden för det här exemplet bläddrar du ner till den där det står Windows Form Designer-kod och utökar regionen du ser koden som skapar ListView. Det är användbart att se hur systemet fungerar och du kan kopiera den här koden och använda den själv.

Du kan ställa in bredden för varje kolumn manuellt genom att flytta markören över rubriken och dra den. Eller så kan du göra det i den synliga koden efter att du har utökat formulärdesignregionen. Du bör se kod som denna:

För befolkningskolumnen återspeglas förändringar i koden i designern och vice versa. Observera att även om du ställer in den låsta egenskapen till sann så påverkar det endast designern och vid körning kan du ändra storlek på kolumner.

ListViews har också ett antal dynamiska egenskaper. Klicka på (Dynamiska egenskaper) och markera önskad egenskap. När du ställer in en egenskap som dynamisk skapar den en XML .config-fil och lägger till den till Solution Explorer.

Att göra ändringar vid designtid är en sak men vi måste verkligen göra det när programmet körs. En ListView består av 0 eller fler objekt. Varje objekt (en ListViewItem) har en textegenskap och en SubItems-samling. Den första kolumnen visar artikeltexten, nästa kolumn visar SubItem [0] .text och sedan SubItem [1] .text och så vidare.

Jag har lagt till en knapp för att lägga till en rad och en redigeringsruta för stadens namn. Ange vilket namn som helst i rutan och klicka på Lägg till rad. Detta lägger till en ny rad i ListView med stadnamnet i den första kolumnen och de följande tre kolumnerna (SubItems [0..2]) fylls med slumpmässiga nummer (konverterade till strängar) genom att lägga till dessa strängar till dem.

Ställ nu ListView Multiselect-egenskapen till falsk. Vi vill bara välja ett objekt åt gången men om du vill ta bort mer på en gång är det liknande förutom att du måste slinga igenom. (Om du slingrar i normal ordning och tar bort objekt är de efterföljande artiklarna inte synkroniserade med de valda indexen).

Högerklick-menyn fungerar inte ännu eftersom vi inte har några menyalternativ att visa på den. Så högerklicka på PopupMenu (nedanför formuläret) så ser du Context Menu visas högst upp i formuläret där den normala menyredigeraren visas. Klicka på den och där står det Skriv här, skriv Ta bort objekt. Egenskapsfönstret kommer att visa ett MenuItem så byta namn på det till mniRemove. Dubbelklicka på det här menyalternativet och du bör få menuItem1_Klicka händelsehanterarens kodfunktion. Lägg till den här koden så att den ser ut så här.

Om du tappar bort borttagningen av objektet klickar du bara på PopupMenu-kontrollen på egen hand under formuläret i formen Designer. Det kommer att få det tillbaka i sikte.

Men om du kör det och inte lägger till ett objekt och väljer det, när du högerklickar och får menyn och klickar på Ta bort objekt, kommer det att göra ett undantag eftersom det inte finns något markerat objekt. Det är dålig programmering, så här fixar du det. Dubbelklicka på popup-händelsen och lägg till den här kodraden.

En DataGridView är både den mest komplexa och den mest användbara komponenten som tillhandahålls gratis med C #. Det fungerar med båda datakällorna (dvs. data från en databas) och utan (dvs. data som du lägger till programmatiskt). För resten av denna självstudie kommer jag att visa den utan datakällor. För enklare visningsbehov kanske du hittar en vanlig ListView som är mer lämplig.

Om du har använt en äldre DataGrid-kontroll så är detta bara en av de på steroider: det ger dig mer inbyggda kolumntyper, kan fungera med interna såväl som externa data, mer anpassning av skärm (och händelser) och ger mer kontroll över cellhantering med frysningsrader och kolumner.

När du utformar formulär med rutnätsdata är det vanligast att ange olika kolumntyper. Du kan ha kryssrutor i en kolumn, läsbar eller redigerbar text i en annan och med kursnummer. Dessa kolumntyper är också vanligtvis anpassade på olika sätt med siffror som generellt högerjusteras så att decimalkraven står i linje. På kolumnnivå kan du välja mellan Knapp, kryssruta, ComboBox, Bild, TextBox och Länkar. om det inte räcker kan du avfyra dina egna anpassade typer.

Det enklaste sättet att lägga till kolumner är genom att designa i IDE. Som vi har sett tidigare skriver detta bara kod för dig och när du har gjort det några gånger kanske du föredrar att lägga till koden själv. När du har gjort det några gånger ger det dig insikt i hur du gör det programmatiskt.

Låt oss börja med att lägga till några kolumner, släpp en DataGridView i formuläret och klicka på den lilla pilen i det övre högra hörnet. Klicka sedan på Lägg till kolumn. Gör detta tre gånger. Det dyker upp en dialogrutan Lägg till kolumn där du ställer in kolumnens namn, texten som ska visas längst upp i kolumnen och låter dig välja dess typ. Den första kolumnen är ditt namn och det är standardtexten TextBox (dataGridViewTextBoxColumn). Ställ också rubrikteksten på ditt namn. Gör den andra kolumnen Ålder och använd en ComboBox. Den tredje kolumnen är tillåten och är en CheckBox-kolumn.

När du har lagt till alla tre bör du se en rad med tre kolumner med en kombination i mitten (Ålder) och en kryssruta i den Tillåtna kolumnen. Om du klickar på DataGridView bör du hitta kolumner i egenskapsinspektören och klicka på (samling). Detta öppnar en dialogruta där du kan ställa in egenskaper för varje kolumn, till exempel enskilda cellfärger, verktygstips, bredd, minsta bredd etc. Om du sammanställer och kör märker du att du kan ändra kolumnbredd och körtid. I fastighetsinspektören för den huvudsakliga DataGridView kan du ställa in AllowUser att ändra storlek på kolumner till falsk för att förhindra det.

Vi kommer att lägga till rader i DataGridView-kontrollen i kod och ex3.cs i exemplen filen har den här koden. Börja med att lägga till en TextEdit-ruta, en ComboBox och en knapp till formuläret med DataGridView på. Ställ in egenskapen DataGridView AllowUserto AddRows till falsk. Jag använder också etiketter och kallade combobox cbAges, knappen btnAddRow och TextBox tbName. Jag har också lagt till en stängningsknapp för formuläret och dubbelklickat på det för att generera ett btnClose_Click-händelseskelett. Att lägga till ordet Stäng () där gör det fungerar.

Som standard är egenskapen Lägg till rad aktiverad falsk vid start. Vi vill inte lägga till några rader i DataGridView såvida det inte finns text i både Name TextEdit-rutan och ComboBox. Jag skapade metoden CheckAddButton och genererade sedan en Lämna händelsehanterare för redigeringsrutan Namntext genom att dubbelklicka bredvid ordet Lämna i Egenskaperna när det visade händelserna. Egenskapsrutan visar detta på bilden ovan. Som standard visar rutan Egenskaper egenskaper men du kan se händelseshanterare genom att klicka på blixtknappen.

Du kan ha använt TextChanged-händelsen istället, men detta kommer att ringa CheckAddButton () metod för varje knapptryck snarare än när kontrollen släpps, dvs. när en annan kontroll vinner fokus. I ålderns kombination använde jag händelsen TextChanged men valde händelseshanteraren tbName_Leave istället för att dubbelklicka för att skapa en ny händelseshanterare.

Inte alla händelser är kompatibla eftersom vissa händelser ger extra parametrar men om du kan se en tidigare genererad hanterare så kan du använda den. Det handlar mest om att föredra, du kan ha en separat händelsehanterare för varje kontroll du är använda eller dela händelseshanterare (som jag gjorde) när de har en gemensam händelsesignatur, dvs parametrarna är samma.

Jag bytte namn på DataGridView-komponenten till dGView för korthet och dubbelklickade på AddRow för att generera ett händelseshanteringsskelett. Den här koden nedan lägger till en ny tom rad, får det raderindex (det är RowCount-1 eftersom det just har lagts till och RowCount är 0 baserat) och öppnar sedan den raden via dess index och ställer in värdena i cellerna på den raden för kolumnerna YourName och Ålder.

När du utformar ett formulär bör du tänka på behållare och kontroller och vilka grupper av kontroller som ska hållas tillsammans. I västerländska kulturer läser människor ändå uppifrån till vänster till höger så gör det lättare att läsa på det sättet.

En behållare är någon av de kontroller som kan innehålla andra kontroller. De som finns i verktygslådan inkluderar panelen, FlowLayoutpanel, SplitContainer, TabControl och TableLayoutPanel. Om du inte kan se verktygslådan använder du Visa-menyn så hittar du den. Behållare håller kontrollerna tillsammans och om du flyttar eller ändrar storleken på behållaren kommer det att påverka kontrollernas placering. Flytta bara kontrollerna över behållaren i Form Designer och det kommer att inse att behållaren nu är ansvarig.

En panel liknar en GroupBox men en GroupBox kan inte bläddra men kan visa en bildtext och har en ram som standard. Paneler kan ha gränser men gör det som standard inte. Jag använder GroupBoxes eftersom de ser snyggare ut och det är viktigt eftersom:

Paneler är också praktiska för att gruppera containrar, så du kan ha två eller flera GroupBoxer på en panel.

Här är ett tips för att arbeta med containrar. Släpp en delad behållare på ett formulär. Klicka på den vänstra panelen och sedan på den högra. Försök nu ta bort SplitContainer från formuläret. Det är svårt tills du högerklickar på en av panelerna och sedan klickar på Välj SplitContainer1. När allt är valt kan du ta bort det. Ett annat sätt som gäller alla kontroller och containrar är tryck på Esc-tangenten för att välja förälder.

Behållare kan bo inuti varandra också. Dra bara en liten ovanpå en större så ser du en tunn vertikal linje kort för att visa att en nu är inne i den andra. När du drar i föräldrabehållaren flyttas barnet med det. Exempel 5 visar detta. Som standard är den ljusbruna panelen inte inne i behållaren, så när du klickar på flyttknappen flyttas GroupBox men panelen är det inte. Dra nu panelen över GroupBox så att den är helt inne i Groupbox. När du sammanställer och kör den här gången, klickar du på knappen Flytta flyttas båda tillsammans.

En TableLayoutpanel är en intressant behållare. Det är en tabellstruktur som är organiserad som ett 2D-rutnät med celler där varje cell innehåller bara en kontroll. Du kan inte ha mer än en kontroll i en cell. Du kan ange hur tabellen växer när fler kontroller läggs till eller även om den inte växer. Det verkar vara modellerat på en HTML-tabell eftersom celler kan spänna kolumner eller rader. Även förankringsbeteendet hos barnkontroller i behållaren beror på inställningarna för marginal och stoppning. Vi kommer att se mer om ankare på nästa sida.

I exempel Ex6.cs har jag börjat med en grundläggande tabell med två kolumner och anges via dialogrutan Kontroll och radstilar (välj kontrollen och klicka på den lilla höger pekande triangeln belägen nära uppe till höger för att se en lista med uppgifter och klicka på den sista) att vänster kolumn är 40% och den högra kolumnen 60% av bredd. Det låter dig ange kolumnbredder i absoluta pixeltermer, i procent eller så kan du bara låta det AutoSize. Ett snabbare sätt att komma till den här dialogrutan är att klicka på samlingen bredvid kolumner i Egenskapsfönstret.

Jag har lagt till en AddRow-knapp och lämnat egenskapen GrowStyle med dess standard AddRows-värde. När bordet blir fullt lägger det till en ny rad. Alternativt kan du ställa in dess värden på AddColumner och FixedSize så att de inte kan växa längre. När du klickar på knappen Lägg till kontroller i Ex6 kallar den metoden AddLabel () tre gånger och AddCheckBox () en gång. Varje metod skapar en instans av kontrollen och anropar sedan tblPanel. Kontroller. Lägg till () Efter att den andra kontrollen har lagts till får tredje kontrollerna att tabellen växer. Bilden visar det när knappen Lägg till kontroll har klickats en gång.

Om du undrar var standardvärdena kommer från metoderna AddCheckbox () och AddLabel () som jag kallar var kontrollen ursprungligen lagts manuellt till tabellen i designern och sedan koden för att skapa den och initiera den kopierades inifrån detta område. Du hittar initialiseringskoden i metodsamtalet InitializeComponent när du klickar på + till vänster om regionen nedan:

Du kan välja flera kontroller samtidigt genom att hålla nere skiftknappen när du väljer den andra och efterföljande kontroller, även kontroller av olika typer. Egenskapsfönstret visar bara de egenskaper som är gemensamma för båda, så att du kan ställa in dem alla till samma storlek, färg och textfält etc. Till och med samma evenemangshanterare kan tilldelas flera kontroller.

Beroende på användning kommer vissa former ofta att ändra storlek på användaren. Ingenting ser sämre ut än att ändra storlek på ett formulär och se kontrollerna förbli i samma position. Alla kontroller har förankringar som låter dig "fästa" dem på de fyra kanterna så att kontrollen rör sig eller sträcker sig när en fästkant flyttas. Detta leder till följande beteende när en form sträcks från höger kant:

För knappar som Stäng som traditionellt är längst ner till höger är beteende 3 vad som behövs. ListViews och DataGridViews är bäst med 2 om antalet kolumner är tillräckligt för att överfylla formen och behöver rullas). Topp- och vänsterankarna är standard. Egenskapsfönstret innehåller en fin liten redaktör som ser ut som England Flag. Klicka bara på någon av staplarna (två horisontella och två vertikala) för att ställa in eller rensa rätt ankare, som visas på bilden ovan.

En egenskap som inte får mycket omnämnande är Tag-egenskapen och ändå kan den vara oerhört användbar. I Egenskapsfönstret kan du bara tilldela text men i din kod kan du ha valfritt värde som kommer från Objekt.

Jag har använt Tag för att hålla ett helt objekt medan jag bara visar några av dess egenskaper i en ListView. Till exempel kanske du bara vill visa ett kundnamn och nummer i en kundöversiktlista. Men högerklicka på den valda kunden och öppna sedan ett formulär med alla kundens detaljer. Detta är lätt om du bygger upp kundlistan genom att läsa alla kundens detaljer i minnet och tilldela en referens till kundklassobjektet i taggen. Alla kontroller har en tagg.

En TabControl är ett praktiskt sätt att spara formutrymme genom att ha flera flikar. Varje flik kan ha en ikon eller text och du kan välja valfri flik och visa dess kontroller. TabControl är en behållare men den innehåller bara TabPages. Varje TabPage är också en behållare som kan läggas till normala kontroller.

I exempel x7.cs har jag skapat en sidopanel med två flikar med den första fliken som heter Kontroller med tre knappar och en kryssruta. Den andra flikssidan är märkt Loggar och används för att visa alla loggade åtgärder som inkluderar att klicka på en knapp eller växla en kryssruta. En metod som heter Log () kallas för att logga varje knappklick etc. Den lägger till den medföljande strängen till en ListBox.

Jag har också lagt till två popup-menyer med högerklick på TabControl på vanligt sätt. Lägg först till en ContextMenuStrip i formuläret och ställ den i egenskapen ContextStripMenu i TabControl. De två menyalternativen är Lägg till ny sida och Ta bort den här sidan. Men jag har begränsat borttagningen av sidor så att bara nyligen tillagda flikssidor kan tas bort och inte de ursprungliga två.

Detta är enkelt, bara skapa en ny flikssida, ge den en texttexter för fliken och lägg sedan till den i TabPages-samlingen på flikarna TabControl

Att ta bort en sida handlar bara om att ringa TabPages. Ta bortAt () med hjälp av flikarna. SelectedIndex för att få den nu valda fliken.

I denna handledning har vi sett hur några av de mer sofistikerade kontrollerna fungerar och hur man använder dem. I nästa handledning kommer jag att fortsätta med GUI-temat och titta på bakgrundsarbetartråden och visa hur man använder det.

instagram story viewer