Zarovnání, okraj, odsazení

Většina prvků uživatelského rozhraní (UI) v aplikacích XAML dědí z třídy FrameworkElement . Každý FrameworkElement má vlastnosti rozměrů, zarovnání, okraje a odsazení, které ovlivňují chování rozložení. Následující doprovodné materiály poskytují přehled o tom, jak tyto vlastnosti rozložení používat, abyste měli jistotu, že je uživatelské rozhraní vaší aplikace čitelné a snadno použitelné v jakémkoli kontextu.

Rozměry (výška, šířka)

Správné nastavení velikosti zajišťuje, že veškerý obsah je jasný a čitelný. Uživatelé by se neměli muset posouvat ani přibližovat k dešifrování primárního obsahu.

• Výška a šířka určují velikost prvku. Výchozí hodnoty jsou matematicky NaN (ne číslo). Pevné hodnoty měřené v efektivních pixelech můžete nastavit nebo můžete použít automatické nebo proporcionální nastavení pro chování tekutin.

• ActualHeight a ActualWidth jsou vlastnosti jen pro čtení, které poskytují velikost elementu za běhu. Pokud se rozložení tekutin zvětší nebo zmenší, změní se hodnoty v události SizeChanged . Všimněte si, že RenderTransform nezmění hodnoty ActualHeight a ActualWidth.

• Minwidth/MaxWidth a MinHeight/MaxHeight určují hodnoty, které omezují velikost prvku při povolování změny velikosti tekutin.

• FontSize a další vlastnosti textu určují velikost rozložení textových prvků. I když textové prvky nemají explicitně deklarované dimenze, mají počítané ActualWidth a ActualHeight.

Zarovnání

Zarovnání usnadňuje vzhled uživatelského rozhraní, je uspořádaný a vyvážený a dá se také použít k vytvoření vizuální hierarchie a vztahů.

• HorizontalAlignment a VerticalAlignment určují, jak má být prvek umístěn v nadřazeném kontejneru.

  • Hodnoty pro HorizontalAlignment jsou Left, Center, Right a Stretch.
  • Hodnoty pro VerticalAlignment jsou Top, Center, Bottom a Stretch.

• Stretch je výchozí nastavení pro obě vlastnosti a prvky vyplní veškerý prostor, který je zadaný v nadřazeném kontejneru. Výška a šířka reálného čísla zruší hodnotu Roztažení, která místo toho bude fungovat jako středová hodnota. Některé ovládací prvky, jako je Button, přepíší výchozí hodnotu Stretch ve výchozím stylu.

• HorizontalContentAlignment a VerticalContentAlignment určují, jak jsou podřízené elementy umístěny v rámci kontejneru.

• Zarovnání může ovlivnit oříznutí v rámci panelu rozložení. Například s HorizontalAlignment="Left" dojde k oříznutí pravé strany prvku, pokud je obsah větší než skutečná šířka.

• Textové prvky používají TextAlignment vlastnost. Obecně doporučujeme použít zarovnání doleva, výchozí hodnotu. Další informace o stylu textu naleznete v tématu Typografie.

Okraje a odsazení

Vlastnosti okrajů a odsazení udržují uživatelské rozhraní před tím, aby bylo příliš přeplněné nebo příliš řídké, a mohou také usnadnit používání určitých vstupů, jako je pero a dotykové ovládání. Tady je obrázek znázorňující okraje a odsazení pro kontejner a jeho obsah.

Margin

Okraje řídí velikost prázdného místa kolem prvku. Margin nepřidává pixely k hodnotám ActualHeight a ActualWidth a není považován za součást prvku při zpracování testů přesahy a při zpracování vstupních událostí.

• Hodnoty okrajů můžou být jednotné nebo odlišné. U prvku Margin="20" by byl na levé, horní, pravé a dolní straně použit jednotný okraj 20 pixelů. Pomocí Margin="0,10,5,25" se hodnoty použijí vlevo, nahoře, vpravo a dole (v daném pořadí).
• Okraje jsou doplňkové. Pokud oba prvky specifikují shodný okraj 10 pixelů a jsou sousední prvky, bez ohledu na orientaci, vzdálenost mezi nimi je 20 pixelů.
• Jsou povoleny záporné okraje. Použití záporného okraje může často způsobit ořez nebo překrytí prvků, což není běžná technika.
• Hodnoty okrajů jsou omezeny jako poslední, takže buďte opatrní s okraji, protože kontejnery mohou prvky oříznout nebo omezit. Hodnota okraje může být příčinou toho, že se prvek nezobrazuje; při aplikaci okraje mohou být jeho rozměry omezeny na 0.

Polstrování

Odsazení určuje velikost místa mezi vnitřním okrajem prvku a jeho podřízeným obsahem nebo prvky. Kladná hodnota vnitřního okraje snižuje oblast obsahu prvku.

Na rozdíl od Margin není Padding vlastností FrameworkElement. Existuje několik tříd, které definují vlastní vlastnost Odsazení:

• Control.Padding: je děděno všemi třídami odvozenými od Control. Ne všechny ovládací prvky mají obsah, takže pro tyto ovládací prvky nastavení vlastnosti nic nedělá. Pokud má ovládací prvek ohraničení, odsazení se použije uvnitř daného ohraničení.
• Border.Padding: definuje mezeru mezi obdélníkovou čárou vytvořenou BorderThickness/BorderBrush a Child element.
• ItemsPresenter.Padding: přispívá k vzhledu položek v ovládacích prvcích položek a umístění zadaného odsazení kolem každé položky.
• TextBlock.Padding a RichTextBlock.Padding: Rozbalte ohraničující pole kolem textu prvku textu. Tyto textové prvky nemají pozadí, takže může být vizuálně obtížné je vidět. Z tohoto důvodu místo toho použijte nastavení okrajů u kontejnerů bloku .

V každém z těchto případů mají prvky také vlastnost Margin. Pokud jsou použity jak okraje, tak i odsazení, počítají se dohromady: zjevná vzdálenost mezi vnějším kontejnerem a jakýmkoli vnitřním obsahem bude součtem okrajů a odsazení.

Example

Pojďme se podívat na účinky okrajů a odsazení na skutečné ovládací prvky. Toto je textové pole uvnitř mřížky s výchozími hodnotami okrajů a odsazení 0.

Tady je stejný textbox a mřížka s hodnotami okrajů a odsazení v textovém poli, jak je znázorněno v tomto XAML.

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

Prostředky stylů

U ovládacího prvku nemusíte nastavovat každou hodnotu vlastnosti jednotlivě. Obvykle je efektivnější seskupit hodnoty vlastností do prostředku Style a použít styl na ovládací prvek. To platí zejména v případě, že potřebujete použít stejné hodnoty vlastností pro mnoho ovládacích prvků. Další informace o používání stylů najdete v tématu Styly XAML.

Obecná doporučení

• U určitých klíčových prvků použijte pouze hodnoty měření a pro ostatní prvky používejte chování rozložení tekutin. To poskytuje responzivní uživatelské rozhraní při změně šířky okna.
• Pokud používáte hodnoty měření, všechny rozměry, okraje a odsazení by měly být v násobcích 4 epx. Když XAML používá efektivní pixely a škálování , aby vaše aplikace byla čitelná na všech zařízeních a velikostech obrazovky, škáluje prvky uživatelského rozhraní o násobcích 4. Použitím hodnot v přírůstcích po 4 dosáhnete nejlepšího vykreslování zarovnáním s celými pixely.
• Pro malé šířky oken (méně než 640 pixelů) doporučujeme 12 epx hřbetů a pro větší šířky oken doporučujeme 24 epx hřbetů.

Související témata

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