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, marginesu i wypełnienia, które mają wpływ 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 wartości matematyczne NaN (Nie liczba). Można ustawić stałe wartości mierzone w efektywnych pikselilub użyć automatycznego albo proporcjonalnego rozmiaru dla płynnego zachowania.

• ActualHeight i ActualWidth są właściwościami tylko do odczytu, które określają 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 jego płynne zmienianie rozmiaru.

• Rozmiar czcionki i inne właściwości tekstu kontrolują wielkość 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 wizualizacji i relacji.

diagram

• WyrównaniePoziome i WyrównaniePionowe określają, w jaki sposób element powinien być umieszczony w kontenerze nadrzędnym.

  • Wartości dla wyrównania w poziomie to Lewo, Środek, Prawoi Rozciągnięcie.
  • 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ń, która jest podana w kontenerze nadrzędnym. Wysokość i szerokość liczby rzeczywistej anulują działanie wartości rozciągniętej, która zamiast tego pełni rolę wartości środka. Niektóre kontrolki, takie jak przycisk, zastępują domyślną wartość Stretch w domyślnym stylu.

• HorizontalContentAlignment i VerticalContentAlignment określają, jak elementy podrzędne są umieszczone w kontenerze.

• Wyrównanie może mieć wpływ na przycinanie w obrębie panelu układu. Na przykład, w przypadku HorizontalAlignment="Left"prawa część elementu zostanie obcięta, jeśli zawartość jest większa niż faktyczna szerokość (ActualWidth).

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

Margines i wypełnienie

Właściwości marginesu i wypełnienia zapobiegają temu, aby interfejs użytkownika wyglądał na zbyt zaśmiecony lub zbyt rozrzedzony, a także ułatwiają korzystanie z niektórych metod wprowadzania, takich jak pióro i dotyk. Oto ilustracja przedstawiająca marginesy i wypełnienie dla kontenera i jego zawartości.

Marża

Margines kontroluje ilość wolnej przestrzeni 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"parametru jednolity margines 20 pikseli zostanie zastosowany do elementu po lewej, górnej, prawej i dolnej stronie. W przypadku Margin="0,10,5,25"wartości są stosowane kolejno do strony lewej, górnej, prawej i dolnej.
• Marginesy są addytywne. Jeśli dwa elementy mają określony jednolity margines 10 pikseli i są 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 prowadzić do przycinania lub przerysowań sąsiadujących elementów, dlatego nie jest to powszechna technika.
• Wartości marginesów są ograniczane na końcu, dlatego należy zachować ostrożność przy korzystaniu z marginesów, ponieważ kontenery mogą przyciąć 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

dopełnienie kontroluje ilość miejsca między wewnętrznym obramowaniem elementu a jego zawartością podrzędną lub elementami. Dodatnia wartość wypełnienia zmniejsza obszar zawartości elementu.

W przeciwieństwie do marginesu, wypełnienie nie jest właściwością FrameworkElement. Istnieje 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 element sterujący ma obramowanie, wewnętrzny margines stosuje się 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 wyglądu elementów w kontrolkach elementów, umieszczając określony margines wokół każdego elementu.
• TextBlock.Padding i RichTextBlock.Padding: powiększ ramkę wokół tekstu elementu tekstowego. Te elementy tekstowe nie mają Tła , więc może być trudno je zobaczyć wizualnie. Z tego powodu użyj ustawień Margin w kontenerach Blok.

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.

Przykład

Przyjrzyjmy się wpływowi właściwości Margin i Padding na rzeczywiste kontrolki. Oto pole tekstowe wewnątrz siatki z domyślnymi wartościami Margin i Padding 0.

Oto TextBox i Grid z wartościami Margin i Padding na TextBoxie, jak pokazano 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 Style i stosowanie Style do elementu sterującego. 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 responsywny interfejs użytkownika, gdy szerokość okna ulegnie zmianie.
• Jeśli używasz wartości pomiarów, wszystkie wymiary, marginesy i wypełnienie powinny mieć przyrosty równe 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 skutkuje najlepszym wyrównaniem renderowania poprzez dopasowanie do całych pikseli.
• W przypadku małych szerokości okien (mniej niż 640 pikseli) zalecamy marginesy o szerokości 12 epx, a dla większych szerokości okien zalecamy marginesy o szerokości 24 epx.

Tematy pokrewne

• FrameworkElement.Wysokość
• Element FrameworkElement.Width
• FrameworkElement.HorizontalAlignment
• FrameworkElement.VerticalAlignment
• Element ramowy.Margines
• Control.Padding