Dela via

Justering, marginal, mellanrum

I XAML-appar ärver de flesta användargränssnittselement (UI) från klassen FrameworkElement . Varje FrameworkElement har egenskaper för dimensioner, justering, marginal och utfyllnad, vilket påverkar layoutbeteendet. Följande vägledning ger en översikt över hur du använder de här layoutegenskaperna för att se till att appens användargränssnitt är läsbart och enkelt att använda i alla sammanhang.

Dimensioner (höjd, bredd)

Korrekt storleksändring säkerställer att allt innehåll är tydligt och läsbart. Användare ska inte behöva bläddra eller zooma för att dechiffrera primärt innehåll.

diagram som visar dimensioner

  • Höjd och bredd anger storleken på ett element. Standardvärdena är matematiskt NaN (inte ett tal). Du kan ange fasta värden som mäts i effektiva pixlar, eller så kan du använda automatisk eller proportionell storleksändring för vätskebeteende.

  • ActualHeight och ActualWidth är skrivskyddade egenskaper som ger storleken på ett element vid körning. Om flytande layouter växer eller krymper, uppdateras värdena i en SizeChanged-händelse. Observera att en RenderTransform inte ändrar värdena ActualHeight och ActualWidth.

  • MinWidth/MaxWidth och MinHeight/MaxHeight anger värden som begränsar storleken på ett element medan det fortfarande tillåts att storleken kan ändras flexibelt.

  • FontSize och andra textegenskaper styr layoutstorleken för textelement. Även om textelement inte uttryckligen har deklarerat dimensioner har de beräknat ActualWidth och ActualHeight.

Justering

Justeringen gör att användargränssnittet ser snyggt, organiserat och balanserat ut och kan även användas för att upprätta visuell hierarki och relationer.

diagram som visar justering

  • HorizontalAlignment och VerticalAlignment anger hur ett element ska placeras i den överordnade containern.

    • Värdena för HorizontalAlignment är Left, Center, Right och Stretch.
    • Värdena för VerticalAlignment är Top, Center, Bottom och Stretch.

  • Stretch är standard för båda egenskaperna, och elementen fyller allt utrymme som tillhandahålls i den överordnade containern. Reella tal för höjd och bredd upphäver ett Stretch-värde, som istället kommer att fungera som ett centervärde. Vissa kontroller, till exempel Button, åsidosätter standardvärdet Stretch i standardformatet.

  • HorizontalContentAlignment och VerticalContentAlignment anger hur underordnade element placeras i en container.

  • Justeringen kan påverka klippning inom en layoutpanel. Till exempel, med HorizontalAlignment="Left" klipps högra sidan av elementet bort om innehållet är större än ActualWidth.

  • Textelement använder egenskapen TextAlignment . I allmänhet rekommenderar vi att du använder vänsterjustering, standardvärdet. Mer information om formateringstext finns i Typografi.

Marginal och utfyllnad

Egenskaper för marginal och utfyllnad gör att användargränssnittet inte ser för rörigt ut eller för glest, och de kan också göra det enklare att använda vissa indata som penna och touch. Här är en bild som visar marginaler och utfyllnad för en container och dess innehåll.

xaml-marginaler och utfyllnadsdiagram

Marginal

Marginalen styr mängden tomt utrymme runt ett element. Marginalen lägger inte till pixlar i ActualHeight och ActualWidth och anses inte vara en del av elementet för träfftest- och indatahändelser.

  • Marginalvärden kan vara enhetliga eller distinkta. Med Margin="20"tillämpas en enhetlig marginal på 20 bildpunkter på elementet till vänster, överkant, höger och nederkant. Med Margin="0,10,5,25"används värdena till vänster, överkant, höger och nederkant (i den ordningen).
  • Marginaler är additiva. Om två element båda anger en enhetlig marginal på 10 px och ligger intill varandra i någon riktning, är avståndet mellan dem 20 px.
  • Negativa marginaler tillåts. Men att använda en negativ marginal kan ofta orsaka förvrängning eller överlappningar av element, så det är inte en vanlig teknik att använda negativa marginaler.
  • Marginalvärdena begränsas sist, så var försiktig med marginalerna eftersom containrar kan beskära eller begränsa element. En marginal kan vara orsaken till att ett element inte verkar återges. Med en marginal tillämpad kan elementets dimensioner begränsas till noll.

Utfyllnad

Utfyllnad styr mängden utrymme mellan ett elements inre kantlinje och dess underordnade innehåll eller element. Ett positivt utfyllnadsvärde minskar elementets innehållsområde.

Till skillnad från Margin är utfyllnad inte en egenskap för FrameworkElement. Det finns flera klasser som var och en definierar sin egen marginal-egenskap.

I vart och ett av dessa fall har elementen också en margin-egenskap. Om både marginal och fyllning tillämpas är de additiva: det uppenbara avståndet mellan en yttre behållare och innehållet kommer att vara marginal plus fyllning.

Exempel

Nu ska vi titta på effekterna av Margin och Padding på verkliga kontroller. Här är en textruta i ett rutnät med standardvärdena Marginal och Utfyllnad på 0.

Textruta med marginal och utfyllnad av 0

Här är samma textruta och rutnät med marginal- och utfyllnadsvärden i textrutan som visas i denna XAML.

<Grid BorderBrush="Blue" BorderThickness="4" Width="200">
    <TextBox Text="This is text in a TextBox." Margin="20" Padding="16,24"/>
</Grid>

Textruta med positiva marginal- och utfyllnadsvärden

Formatresurser

Du behöver inte ange varje egenskapsvärde individuellt på en kontroll. Det är vanligtvis mer effektivt att gruppera egenskapsvärden i en formatresurs och tillämpa formatmallen på en kontroll. Detta gäller särskilt när du behöver tillämpa samma egenskapsvärden på många kontroller. Mer information om hur du använder format finns i XAML-format.

Allmänna rekommendationer

  • Använd endast måttvärden för vissa nyckelelement och använd flytande layoutbeteende för de andra elementen. Detta ger ett dynamiskt användargränssnitt när fönsterbredden ändras.
  • Om du använder måttvärden bör alla dimensioner, marginaler och utfyllnad ske i steg om 4 epx. När XAML använder effektiva pixlar och skalning för att göra appen läsbar på alla enheter och skärmstorlekar skalar den användargränssnittselement med multiplar av 4. Att använda värden i steg om 4 resulterar i den bästa återgivningen genom att linjera med hela bildpunkter.
  • För små fönsterbredder (mindre än 640 bildpunkter) rekommenderar vi 12 epx-rännor och för större fönsterbredder rekommenderar vi 24 epx-rännor.

rekommenderade rännor

  • Last updated on