Wyrównanie, margines, wypełnienie

W aplikacjach XAML większość elementów interfejsu użytkownika dziedziczy z klasy FrameworkElement . Każdy element FrameworkElement ma właściwości wymiarów, wyrównania, marginesów i wypełnienia, które wpływają na zachowanie układu. Poniższe wskazówki zawierają omówienie sposobu używania tych właściwości układu, aby upewnić się, że interfejs użytkownika aplikacji jest czytelny i łatwy w użyciu w dowolnym kontekście.

Wymiary (wysokość, szerokość)

Prawidłowe ustalanie rozmiaru gwarantuje, że cała zawartość jest jasna i czytelna. Użytkownicy nie powinni przewijać ani powiększać, aby rozszyfrować zawartość podstawową.

• Wysokość i szerokość określają rozmiar elementu. Wartości domyślne to matematycznie NaN (Nie liczba). Możesz ustawić stałe wartości mierzone w efektywnych pikselach, lub użyć Auto lub proporcjonalnego skalowania dla płynnego działania.

• ActualHeight i ActualWidth są właściwościami tylko do odczytu, które zapewniają rozmiar elementu w czasie wykonywania. Jeśli układy płynne rosną lub kurczą się, wartości zmieniają się w zdarzeniu SizeChanged. Należy pamiętać, że funkcja RenderTransform nie zmieni wartości ActualHeight i ActualWidth.

• MinWidth/MaxWidth i MinHeight/MaxHeight określają wartości, które ograniczają rozmiar elementu, umożliwiając płynne zmiany rozmiaru.

• FontSize i inne właściwości tekstu kontrolują rozmiar układu dla elementów tekstowych. Chociaż elementy tekstowe nie mają jawnie zadeklarowanych wymiarów, mają obliczone wartości ActualWidth i ActualHeight.

Wyrównanie

Wyrównanie sprawia, że interfejs użytkownika wygląda starannie, zorganizowany i zrównoważony, a także może służyć do ustanawiania hierarchii wizualnej i relacji.

• HorizontalAlignment i VerticalAlignment określają, jak element powinien być umieszczony w kontenerze nadrzędnym.

  • Wartości parametru HorizontalAlignment to Left, Center, Right i Stretch.
  • Wartości dla VerticalAlignment to Góra, Środek, Dół i Rozciągnięcie.

• Stretch jest wartością domyślną dla obu właściwości, a elementy wypełniają całą przestrzeń przydzieloną w kontenerze nadrzędnym. Wartości rzeczywiste wysokości i szerokości znoszą wartość rozciągania, która zamiast tego będzie działać jako wartość centralna. Niektóre kontrolki, takie jak Button, w domyślnym stylu zastępują domyślną wartość rozciągania.

• HorizontalContentAlignment i VerticalContentAlignment określają sposób umieszczania elementów podrzędnych w kontenerze.

• Wyrównanie może mieć wpływ na przycinanie w panelu rozmieszczenia. Na przykład w przypadku HorizontalAlignment="Left" prawa strona elementu zostanie przycięta, jeśli zawartość jest większa niż 'ActualWidth'.

• Elementy tekstowe używają właściwości TextAlignment . Ogólnie rzecz biorąc, zalecamy użycie wyrównania po lewej stronie, wartości domyślnej. Aby uzyskać więcej informacji na temat tekstu stylizowanego, zobacz Typografia.

Margines i odstępy

Właściwości marginesu i wypełnienia uniemożliwiają, aby interfejs użytkownika wyglądał zbyt chaotycznie lub zbyt pusto, a także ułatwiają użytkownikom korzystanie z niektórych wejść, takich jak pióro i dotyk. Oto ilustracja przedstawiająca marginesy i wypełnienie dla kontenera i jego zawartości.

Margin

Margines kontroluje ilość pustego miejsca wokół elementu. Margines nie dodaje pikseli do wartości ActualHeight i ActualWidth i nie jest uważany za część elementu do testowania trafień i określania źródła zdarzeń wejściowych.

• Wartości marginesu mogą być jednolite lub odrębne. W przypadku Margin="20", jednolity margines 20 pikseli zostanie zastosowany do elementu z lewej, z góry, z prawej i z dołu. Za pomocą Margin="0,10,5,25" wartości są stosowane do lewej strony, górnej strony, prawej strony i dolnej strony (w tej kolejności).
• Marginesy są addytywne. Jeśli oba elementy określają jednolity margines 10 pikseli i sąsiadują elementami równorzędnymi w dowolnej orientacji, odległość między nimi wynosi 20 pikseli.
• Marginesy ujemne są dozwolone. Jednak użycie marginesu ujemnego często może spowodować obcinanie lub nadrysowywanie elementów równorzędnych, dlatego nie jest to powszechnie stosowana technika.
• Wartości marginesów są ograniczone jako ostatnie, z tego powodu należy zachować ostrożność przy ich używaniu, ponieważ kontenery mogą wyciąć lub ograniczyć elementy. Wartość marginesu może być przyczyną, że element nie jest wyświetlany do renderowania; przy zastosowaniu marginesu można ograniczyć wymiar elementu do 0.

Dopełnienie

Padding steruje ilością miejsca między wewnętrzną krawędzią elementu a jego zawartością lub elementami podrzędnymi. Dodatnia wartość wypełnienia zmniejsza obszar zawartości elementu.

W przeciwieństwie do marginesu, wypełnienie nie jest właściwością FrameworkElement. Jest kilka klas, które definiują własną właściwość Padding:

• Control.Padding: jest dziedziczony przez wszystkie klasy pochodne Control. Nie wszystkie kontrolki mają zawartość, więc dla tych kontrolek ustawienie właściwości nic nie robi. Jeśli kontrolka ma obramowanie, wypełnienie ma zastosowanie wewnątrz tego obramowania.
• Border.Padding: definiuje spację między linią prostokąta utworzoną przez element BorderThickness/BorderBrush i Element podrzędny .
• ItemsPresenter.Padding: przyczynia się do pojawienia się elementów w kontrolkach elementów, umieszczając określone wypełnienie wokół każdego elementu.
• TextBlock.Padding i RichTextBlock.Padding: rozwiń ramkę ograniczającą wokół tekstu elementu tekstowego. Te elementy tekstowe nie mają tła, więc wizualne wyświetlanie może być trudne. Z tego powodu zamiast tego użyj ustawień marginesu w obszarze Blokuj kontenery.

W każdym z tych przypadków elementy mają również właściwość Margin. Jeśli zastosowano zarówno margines, jak i wypełnienie, są one addytywne: widoczna odległość między kontenerem zewnętrznym a dowolną zawartością wewnętrzną będzie margines plus wypełnienie.

Example

Przyjrzyjmy się skutkom właściwości Margin i Padding w przypadku rzeczywistych kontrolek. Oto pole tekstowe wewnątrz siatki z domyślnymi wartościami Margin i Padding 0.

Oto ten sam TextBox i Grid z wartościami Margin i Padding w polu tekstowym, jak przedstawiono w tym XAML.

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

Zasoby stylu

Nie trzeba ustawiać poszczególnych wartości właściwości indywidualnie w kontrolce. Zazwyczaj bardziej wydajne jest grupowanie wartości właściwości w zasobie Styl i stosowanie stylu do kontrolki. Jest to szczególnie istotne, gdy trzeba zastosować te same wartości właściwości do wielu kontrolek. Aby uzyskać więcej informacji na temat używania stylów, zobacz Style XAML.

Zalecenia ogólne

• Zastosuj wartości pomiarów tylko do niektórych kluczowych elementów i użyj zachowania układu płynów dla innych elementów. Zapewnia to dynamiczny interfejs użytkownika , gdy zmienia się szerokość okna.
• Jeśli używasz wartości pomiarowych, wszystkie wymiary, marginesy i wypełnienie powinny być w wielokrotnościach 4 epx. Gdy język XAML używa efektywnych pikseli i skalowania , aby aplikacja była czytelna na wszystkich urządzeniach i rozmiarach ekranu, skaluje elementy interfejsu użytkownika przez wielokrotność 4. Użycie wartości w przyrostach co 4 powoduje najlepsze renderowanie przez wyrównanie do całych pikseli.
• Dla małych szerokości okien (mniej niż 640 pikseli) zalecamy marginesy 12 epx, a dla większych szerokości okien zalecamy marginesy 24 epx.

Tematy pokrewne

• FrameworkElement.Height
• FrameworkElement.Width
• FrameworkElement.HorizontalAlignment
• FrameworkElement.VerticalAlignment
• FrameworkElement.Margin
• Control.Padding