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á rozměry, zarovnání, vlastnosti okrajů a odsazení, které ovlivňují chování rozvrž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 pixelechnebo můžete použít automatické nebo proporcionální nastavení velikosti 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 zadat hodnoty, které omezují velikost prvku a umožňují plynulou změnu velikosti.

• 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 je prvek umístěn v nadřazeném kontejneru.

  • Hodnoty pro HorizontalAlignment jsou Vlevo, Střed, Vpravoa Roztáhnout.
  • Hodnoty pro VerticalAlignment jsou Nahoře, Uprostřed, Dolea Roztažení.

• Stretch je výchozím nastavením pro obě vlastnosti a prvky vyplní veškerý prostor, který je určen v nadřazeném kontejneru. Reálné hodnoty výšky a šířky ruší hodnotu Roztažení, která bude sloužit jako středová hodnota. Některé ovládací prvky, jako Button, přepisují výchozí hodnotu Stretch ve svém výchozím stylu.

• HorizontalContentAlignment a VerticalContentAlignment určit umístění podřízených elementů v rámci kontejneru.

• Zarovnání může ovlivnit oříznutí na panelu rozložení. Například s HorizontalAlignment="Left"se pravá strana prvku ořízne, 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 úpravě textu naleznete v Typografie.

Okraje a odsazení

Vlastnosti okrajů a odsazení udržují uživatelské rozhraní, aby nevypadalo příliš zaplněně nebo příliš řídce, a mohou také usnadnit používání určitých vstupních zařízení, jako je pero a dotykové ovládání. Zde je ilustrace, která zobrazuje okraje a odsazení kontejneru a jeho obsahu.

Marže

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

• Hodnoty okrajů můžou být jednotné nebo odlišné. U Margin="20" prvku by se na levé, horní, pravé a dolní straně použil jednotný okraj o velikosti 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 mají stejný 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 ale může často způsobit výřez nebo překreslení sousedních prvků, takže není běžnou technikou.
• Hodnoty okrajů jsou omezeny až nakonec, takže buďte opatrní s okraji, protože kontejnery mohou oříznout nebo omezit prvky. Hodnota okraje může být příčinou toho, že se prvek nezobrazuje; s použitým okrajem může být rozměr prvku omezen 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 vlastnosti 'padding' snižuje oblast obsahu prvku.

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

• Control.Padding: dědí se ve všech třídách odvozených 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 tím, že umisťuje zadané odsazení kolem každé položky.
• TextBlock.Padding a RichTextBlock.Padding: rozšiřte ohraničující rámeček kolem textu textového prvku. 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 se použijí okraje i odsazení, sčítají se: zjevná vzdálenost mezi vnějším kontejnerem a jakýmkoli vnitřním obsahem bude součtem okraje a odsazení.

Příklad

Pojďme se podívat na dopady 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>

Stylové zdroje

U ovládacího prvku nemusíte nastavovat každou hodnotu vlastnosti jednotlivě. Obvykle je efektivnější seskupovat hodnoty vlastností do zdroje Styl 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. 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 epx 4. 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í podle násobků 4. Když použijete hodnoty v přírůstcích po 4, dosáhnete nejlepšího vykreslování tak, že se zarovnáte 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

• Element.Height
• Element.Width
• FrameworkElement.HorizontalAlignment
• FrameworkElement.VerticalAlignment
• FrameworkElement.Margin
• Ovládací prvek.Odsazení