Dela via

Genomgång: Ordna kontroller i Windows-formulär med hjälp av snaplines

  • Artikel

Exakt placering av kontroller i formuläret är en hög prioritet för många program. Windows Forms Designer ger dig många layoutverktyg för att åstadkomma detta. En av de viktigaste är funktionen SnapLine.

Snaplines visar exakt var du ska rada upp kontroller med andra kontroller. De visar också de rekommenderade avstånden för marginaler mellan kontroller enligt riktlinjer för Windows-användargränssnittet.

Snaplines gör det enkelt att justera dina kontroller, för skarpt, professionellt utseende och beteende (utseende och känsla).

Skapa projektet

  1. I Visual Studio skapar du ett Windows-baserat programprojekt med namnet "SnaplineExample".

  2. Välj formuläret i Formulärdesignern.

Placera och justera kontroller

Med snaplines får du ett korrekt och intuitivt sätt att justera kontrollerna i formuläret. De visas när du flyttar en markerad kontroll eller kontroller nära en position som överensstämmer med en annan kontroll eller uppsättning kontroller. Ditt val "snäpper till" det föreslagna läget när du flyttar det förbi de andra kontrollerna.

Ordna kontroller med hjälp av snaplines

  1. Dra en Button kontroll från Toolbox- till formuläret.

  2. Flytta kontrollen Button till formulärets nedre högra hörn. Observera de snaplinjer som visas när Button kontroll närmar sig formulärets nedre och högra kantlinjer. Dessa fästlinjer visar det rekommenderade avståndet mellan kontrollens kantlinjer och formuläret.

  3. Flytta Button kontrollen runt formulärets kantlinjer och notera var snaplinerna visas. När du är klar flyttar du kontrollen Button nära mitten av formuläret.

  4. Dra ett annat Button-kontrollelement från Toolbox till ditt formulär.

  5. Flytta den andra Button kontrollen tills den nästan är i nivå med den första. Observera den snapline som visas vid textbaslinjen för båda knapparna och observera att kontrollen du flyttar fäster till en position som är exakt i nivå med den andra kontrollen.

  6. Flytta den andra Button kontrollen tills den placeras direkt ovanför den första. Notera de fästlinjer som visas längs vänstra och högra kanten av båda knapparna och notera att kontrollen du flyttar snäpper till en position som är exakt anpassad till den andra kontrollen.

  7. Välj en av de Button kontrollerna och flytta den nära den andra tills de nästan rör vid varandra. Observera den snapline som visas mellan dem. Det här avståndet är det rekommenderade avståndet mellan kontrollernas kantlinjer. Observera också att kontrollen du flyttar fästen till den här positionen.

  8. Dra två Panel-kontroller från Verktygslåda till ditt formulär.

  9. Flytta en av de Panel kontrollerna tills den nästan är i nivå med den första. Observera de fästlinjer som visas längs de övre och nedre kanterna på båda kontrollerna, och notera att den kontroll du flyttar snäpper till en position som är exakt i nivå med den andra kontrollen.

Justera mot form- och containermarginaler

Med snaplines kan du justera dina kontroller i linje med formens och behållarens marginaler på ett konsekvent sätt.

  1. Välj en av de Button kontrollerna och flytta den nära formulärets högra kantlinje tills en snapline visas. Snapline-avståndet från den högra kantlinjen är summan av kontrollens Margin-egenskap och formulärets Padding-egenskapsvärde.

    Observera

    Om formulärets egenskap Padding är inställd på 0,0,0,0, ger Windows Forms Designer formuläret ett skuggat Padding värde på 9,9,9,9. Om du vill åsidosätta det här beteendet tilldelar du ett annat värde än 0,0,0,0.

  2. Ändra värdet för Button-kontrollens egenskap Margin genom att expandera posten Margin i fönstret Egenskaper och ange egenskapen All till 0. För mer information, se genomgång: Lägga ut Windows Forms-kontroller med utfyllnad, marginaler och egenskapen AutoSize.

  3. Flytta kontrollen Button nära formulärets högra kantlinje tills en snapline visas. Det här avståndet anges nu av värdet för formulärets Padding egenskap.

  4. Dra en GroupBox kontroll från Toolbox- till formuläret.

  5. Ändra värdet för GroupBox-kontrollens Padding-egenskap genom att expandera posten Padding i fönstret Egenskaper och ange egenskapen All till 10.

  6. Dra en Button-kontroll från -verktygslådan till GroupBox-kontrollen.

  7. Flytta Button-kontrollen nära den högra kantlinjen för den GroupBox kontrollen tills en snapline visas. Flytta Button kontrollen inom GroupBox-kontrollen och notera var snaplinerna visas.

Justera mot grupperade kontroller

Du kan använda snaplines för att justera grupperade kontroller samt kontroller inom en GroupBox kontroll.

  1. Välj två av kontrollerna i formuläret. Flytta runt markeringen och notera de fästlinjer som visas mellan ditt val och de andra kontrollerna.

  2. Dra en GroupBox kontroll från Toolbox till ditt formulär.

  3. Dra en Button-kontroll från Toolbox in i GroupBox-kontrollen.

  4. Välj en av de Button kontrollerna och flytta den runt GroupBox kontrollen. Observera de fästlinjer som visas vid kanterna på GroupBox kontrollen. Observera även de fästlinjer som visas vid kanterna på kontrollen Button som finns i kontrollen GroupBox. Kontroller som är underordnade till en containerkontroll stöder också snaplines.

Använd fästlinjer för att placera en kontroll genom att ange dess storlek

  1. I Toolboxklickar du på kontrollikonen Button. Dra den inte till formuläret.

  2. Flytta muspekaren över formulärets designyta. Observera att pekaren ändras till ett hårkors med Button kontrollikon bifogad. Observera även fästlinjerna som verkar föreslå inriktade positioner för kontroll Button.

  3. Klicka och håll musknappen.

  4. Dra muspekaren runt formuläret. Observera att en disposition ritas, som anger kontrollens position och storlek.

  5. Dra pekaren tills den linjerar med en annan kontroll på formuläret. Observera att en snapline verkar indikera justering.

  6. Släpp musknappen. Kontrollen skapas på den position och storlek som anges av konturen.

Använd snaplines när du drar en kontroll från verktygslådan

  1. Dra en Button-kontroll från Toolbox- till formuläret, men släpp inte musknappen.

  2. Flytta muspekaren över formulärets designyta. Observera att pekaren ändras för att ange den position där den nya Button kontrollen ska skapas.

  3. Dra muspekaren runt formuläret. Observera snaplinjerna som visas för att föreslå rätt positioner för kontrollen Button. Hitta en position som är i linje med andra kontroller.

  4. Släpp musknappen. Kontrollen skapas på den position som anges av fästlinjerna.

Ändra storlek på en kontroll med hjälp av snaplines

  1. Dra en Button kontroll från Toolbox till ditt formulär.

  2. Ändra storlek på Button genom att ta tag i ett av hörnens storlekshandtag och dra. Mer information finns i How to: Resize Controls on Windows Forms.

  3. Dra i storlekshandtaget tills en av kantlinjerna på Button-kontrollen är justerad mot en annan kontroll. Observera att en snapline visas. Observera också att storlekshandtaget fäster på det läge som anges av fästlinjen.

  4. Ändra storlek på Button-kontrollen i olika riktningar och justera storlekshandtaget på olika kontroller. Observera hur fästlinjerna visas i olika orienteringar för att indikera justering.

Justera en etikett i förhållande till kontrollens text.

  1. Dra ett TextBox kontrollelement från Verktygslåda till ditt formulär. När du släpper kontrollen TextBox på formuläret, klickar du på smarttaggsymbolen och väljer alternativet Ange text i textBox1. Mer information finns i Genomgång: Att utföra vanliga uppgifter med hjälp av designeråtgärder.

  2. Dra och släpp ett Label kontrollelement från Toolbox till ditt formulär.

  3. Ändra värdet för Label-kontrollens egenskap AutoSize till true. Observera att kontrollens kantlinjer justeras för att passa visningstexten.

  4. Flytta kontrollen Label till vänster om den TextBox kontrollen, så att den är justerad mot TextBox kontrolls nederkant. Observera den snapline som visas längs de nedre kanterna av de två kontrollerna.

  5. Flytta Label kontrollen något uppåt tills Label text och TextBox text är justerade. Observera den annorlunda utformade snapline som visas, vilket indikerar när textfälten i båda kontrollerna justeras.

Använd fästlinjer med tangentbordsnavigering

  1. Dra ett Button kontrollobjekt från Toolbox till formuläret. Placera den i formulärets övre vänstra hörn.

  2. Tryck på Ctrl+nedåtpilen. Observera att kontrollen flyttar ned formuläret till den första tillgängliga vågräta justeringspositionen.

  3. Tryck på Ctrl+nedåtpilen tills kontrollen når formulärets nederkant. Observera de positioner som den upptar när den flyttas nedåt i formuläret.

  4. Tryck på Ctrl+högerpil. Observera att kontrollen flyttas över formuläret till den första tillgängliga lodräta justeringspositionen.

  5. Tryck på Ctrl+högerpil tills kontrollen når sidan av formuläret. Observera de positioner som den upptar när den flyttas över formuläret.

  6. Flytta kontrollen runt formuläret med en kombination av piltangenterna. Observera de positioner som kontrollen upptar och de fästlinjer som medföljer dem.

  7. Tryck på Skift+piltangenterna för att ändra storlek på Button kontrollen med steg om en bildpunkt.

  8. Tryck på Ctrl+Skift+piltangenterna för att ändra storlek på Button kontrollelementet i snaplinjesteg.

Inaktivera snaplines selektivt

  1. Dra en TableLayoutPanel-kontroll från Toolbox till ditt formulär.

  2. Dubbelklicka på Button-kontrollikonen i Toolbox-. Observera att en ny knappkontroll visas i den TableLayoutPanel kontrollens första cell.

  3. Dubbelklicka på Button-kontrollikonen i Toolbox två gånger till. Detta lämnar en tom cell i kontrollen TableLayoutPanel.

  4. Dra en Button-kontroll från -verktygslådan till den tomma cellen i TableLayoutPanel-kontrollen. Observera att inga snaplines visas.

  5. Dra Button kontrollen från TableLayoutPanel kontrollen och flytta den runt TableLayoutPanel kontrollen. Observera att snaplines visas igen.

Inaktivera snaplines

Tryck på Alt--tangenten och samtidigt flytta ett användargränssnittselement runt formuläret.

Inga fästlinjer visas och kontrollen fäster inte till eventuella justeringspositioner.

Så här inaktiverar du snaplines i designmiljön

  1. Öppna dialogrutan Alternativ i menyn Verktyg. Välj Windows Forms Designer.

  2. Välj noden Allmänt. I avsnittet layoutläge ändrar du markeringen från SnapLines till SnapToGrid.

  3. Välj OK för att tillämpa inställningen.

  4. Välj en kontroll i formuläret och flytta den runt de andra kontrollerna. Observera att fästlinjer inte visas.

Nästa steg

Snaplines erbjuder ett intuitivt sätt att justera kontroller i formuläret. Förslag på mer utforskning är:

  • Försök att kapsla en GroupBox-kontrollenhet i en annan GroupBox-kontrollenhet. Placera en Button kontroll i den underordnade GroupBox kontrollen och en annan i den överordnade GroupBox kontrollen. Flytta runt Button kontroller för att se hur snaplinerna korsar containergränserna.

  • Skapa en kolumn med TextBox kontroller och en motsvarande kolumn med Label kontroller. Ange värdet av egenskapen AutoSize för Label-kontrollerna till true. Använd snaplines för att flytta kontrollerna i Label så att den visade texten justeras med texten i kontrollerna i TextBox.

Se även