Dela via

Justering, marginal, utfyllnad

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 anger storleken på ett element under exekvering. Om flytande layouter växer eller minskar i storlek ändras 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 samtidigt som flexibel storleksändring tillåts.

  • 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 hela utrymmet som tilldelas dem i den överordnade containern. Realnummerhöjd och bredd upphäver ett Stretch-värde, som i stället fungerar 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.

  • Justering kan påverka urklipp i en layoutpanel. Till exempel, med HorizontalAlignment="Left" klipps den 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

Margin

Marginalen styr mängden tomt utrymme runt ett element. Margin lägger inte till bildpunkter i ActualHeight och ActualWidth och anses inte vara en del av elementet avseende träfftestning och inputhändelsehantering.

  • 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 likartad marginal på 10 bildpunkter och är intilliggande element i valfri orientering, är avståndet mellan dem 20 bildpunkter.
  • Negativa marginaler tillåts. Men att använda en negativ marginal kan ofta orsaka klippning eller överritningar av närliggande element, så det är inte en vanlig teknik att använda negativa marginaler.
  • Marginalvärdena begränsas sist, så tänk på marginaler eftersom containrar kan beskära eller begränsa element. Ett marginalvärde kan vara orsaken till att ett element inte verkar visas. Med en marginal som används kan ett elements dimension begränsas till 0.

Utfyllnad

Utfyllnad styr mängden utrymme mellan den inre kantlinjen på ett element 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, och var och en definierar sin egen Padding-egenskap.

I vart och ett av dessa fall har elementen också en margin-egenskap. Om både marginal och padding tillämpas läggs de ihop: det uppenbara avståndet mellan en yttre container och innehållet kommer att vara marginal plus padding.

Example

Låt oss titta på effekterna av Marginal och Padding på riktiga UI-kontroller. Här är en textruta i ett rutnät med standardvärdena Marginal och Utfyllnad på 0.

Textruta med marginal och inre avstånd satt till 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