Igazítás, margó, bélés

Az XAML-alkalmazásokban a felhasználói felület legtöbb eleme a FrameworkElement osztálytól öröklődik. Minden FrameworkElement dimenziókkal, igazítási, margó- és párnázási tulajdonságokkal rendelkezik, amelyek befolyásolják az elrendezés működését. Az alábbi útmutató áttekintést nyújt arról, hogyan használhatja ezeket az elrendezési tulajdonságokat annak érdekében, hogy az alkalmazás felhasználói felülete bármilyen környezetben olvasható és könnyen használható legyen.

Méretek (Magasság, Szélesség)

A megfelelő méretezés biztosítja, hogy minden tartalom tiszta és olvasható legyen. A felhasználóknak nem szabad görgetni vagy nagyítaniuk az elsődleges tartalom visszafejtéséhez.

• A magasság és a szélesség határozza meg egy elem méretét. Az alapértelmezett értékek matematikailag NaN (nem szám). Beállíthatja az érvényes képpontokban mért rögzített értékeket, illetve automatikus vagy arányos méretezést is használhat a folyadék viselkedéséhez.

• Az ActualHeight és actualWidth írásvédett tulajdonságok, amelyek futásidőben biztosítják egy elem méretét. Ha a folyadékelrendezések növekednek vagy zsugorodnak, akkor az értékek a SizeChanged eseményben változnak . Vegye figyelembe, hogy a RenderTransform nem módosítja az ActualHeight és az ActualWidth értékeket.

• Minwidth/A MaxWidth és a MinHeight/MaxHeight olyan értékeket határoz meg, amelyek korlátozzák egy elem méretét, miközben lehetővé teszik a folyadék átméretezését.

• A FontSize és más szövegtulajdonságok szabályozzák a szövegelemek elrendezésének méretét. Bár a szövegelemeknek nincsenek explicit módon megadott méretei, számított tényleges szélességgel (ActualWidth) és tényleges magassággal (ActualHeight) rendelkeznek.

Igazítás

Az igazítás lehetővé teszi, hogy a felhasználói felület rendezett és kiegyensúlyozott legyen, és vizuális hierarchia és kapcsolatok megteremtésére is használható.

• A HorizontalAlignment és a VerticalAlignment határozza meg, hogyan kell elhelyezni egy elemet a szülőtárolóban.

  • A HorizontalAlignment értékei Bal, Közép, Jobb és Stretch.
  • A VerticalAlignment értéke a Felső, a Közép, az Alsó és a Stretch.

• Mindkét tulajdonság esetében a Stretch az alapértelmezett érték, és az elemek kitöltik a szülőtárolóban biztosított összes területet. A valós szám magassága és szélessége megszakítja a Stretch értéket, amely ehelyett középértékként fog működni. Egyes vezérlők, mint például a gomb, felülbírálják az alapértelmezett Stretch értéket az alapértelmezett stílusukban.

• A HorizontalContentAlignment és a VerticalContentAlignment határozza meg a gyermekelemek tárolón belüli elhelyezését.

• Az igazítás befolyásolhatja az elrendezéspanelen belüli kivágást. Ha például HorizontalAlignment="Left"a tartalom nagyobb, mint az ActualWidth, az elem jobb oldala ki lesz vágva.

• A szövegelemek a TextAlignment tulajdonságot használják . Általában a bal oldali igazítást javasoljuk, az alapértelmezett értéket. A szövegformázásról további információt a Tipográfia című témakörben talál.

Margó és párnázás

A margó- és a párnázási tulajdonságok miatt a felhasználói felület nem tűnik túl zsúfoltnak vagy túl ritkának, és bizonyos bemenetek, például a toll és az érintés használatát is megkönnyítik. Ez az ábra egy konténer és annak tartalmának margóit és belső távolságát mutatja be.

Margin

A margó az elem körüli üres terület mennyiségét szabályozza. A margó nem ad hozzá képpontokat az ActualHeighthoz és az ActualWidthhez, és nem számít bele a találattesztelés és a bemeneti események forrásába.

• A margóértékek lehetnek egységesek vagy eltérőek. A Margin="20"bal, felső, jobb és alsó oldalon lévő elemre egységes, 20 képpontos margót alkalmazunk. Ekkor Margin="0,10,5,25"az értékek a bal, a felső, a jobb és az alsó részre lesznek alkalmazva (ebben a sorrendben).
• A margók additívak. Ha két elem egyaránt 10 képpontos, egységes margót határoznak meg, és bármely tájolásban szomszédos elemek, akkor a köztük lévő távolság 20 képpont.
• A negatív margók engedélyezettek. A negatív margók használata azonban gyakran okozhatja a társkivágást vagy a túllépést, ezért nem gyakori módszer a negatív margók használata.
• A margóértékek utolsóként kerülnek korlátozásra, ezért legyen óvatos a margókkal, mert a konténerek levághatják vagy korlátozhatják az elemeket. A margóérték lehet az oka annak, hogy egy elem nem jelenik meg a renderelés során; Margó alkalmazásával az elem dimenziója 0-ra korlátozható.

Belső margó

A padding szabályozza az elem belső szegélye és a belső tartalom vagy elemek közötti térközt. A pozitív Padding érték csökkenti az elem tartalomterületét.

A Margótól eltérően a Padding nem a FrameworkElement tulajdonsága. Több osztály is definiálja a saját Padding tulajdonságát:

• Control.Padding: örökli az összes control származtatott osztályt. Nem minden vezérlő rendelkezik tartalommal, ezért ezeknél a vezérlőknél a tulajdonság beállítása nem tesz semmit. Ha a vezérlő szegélyrel rendelkezik, a kitöltés az adott szegélyen belülre vonatkozik.
• Border.Padding: a BorderThickness/BorderBrush és a Child elem által létrehozott téglalapvonal közötti térközt határozza meg.
• ItemsPresenter.Padding: hozzájárul az elemek megjelenéséhez az elemvezérlőkben, és az egyes elemek köré helyezi a megadott kitöltést.
• TextBlock.Padding és RichTextBlock.Padding: bontsa ki a határolókeretet a szövegelem szövege körül. Ezek a szöveges elemek nem rendelkeznek háttérrel, ezért vizuálisan nehezen láthatók. Ezért használja inkább a Blokk konténereken a margó beállításokat.

Ezekben az esetekben az elemek margótulajdonságokkal is rendelkeznek. Amennyiben mind a Margin, mind a Padding alkalmazásra kerül, ezek összeadódnak: a külső tároló és a belső tartalom közötti látszólagos távolság a margin és a padding összegének felel meg.

Example

Nézzük meg a Margó és a Padding valós vezérlőkre gyakorolt hatását. Íme egy szövegdoboz egy rácson belül az alapértelmezett margóval és a 0-s kitöltési értékekkel.

Itt van ugyanaz a TextBox és Grid a TextBox margó- és kitöltési értékeivel, ahogyan az ebben az XAML-ben látható.

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

Stíluserőforrások

Nem kell külön-külön beállítania az egyes tulajdonságértékeket egy vezérlőelemen. Általában hatékonyabb a tulajdonságértékek csoportosítása stíluserőforrásba, és a stílus alkalmazása egy vezérlőelemre. Ez különösen akkor igaz, ha ugyanazokat a tulajdonságértékeket több vezérlőre is alkalmaznia kell. A stílusok használatáról további információt az XAML-stílusok című témakörben talál.

Általános javaslatok

• Csak bizonyos kulcselemekre alkalmazza a mérési értékeket, és használja a folyadékelrendezés viselkedését a többi elemhez. Ez rugalmas felhasználói felületet biztosít, amikor az ablak szélessége megváltozik.
• Ha mérési értékeket használ, minden dimenziónak, margónak és párnázásnak 4 epx-növekményben kell lennie. Ha az XAML hatékony képpontokkal és méretezéssel teszi olvashatóvá az alkalmazást minden eszközön és képernyőméreten, a felhasználói felület elemeit 4-es többszörösével skálázza. Az értékek 4 lépésben történő használata a teljes képpontokhoz igazodva a legjobb renderelést eredményezi.
• Kis méretű (640 képpontnál kisebb) ablakszélesség esetén 12 epx ereszcsatornát, nagyobb ablakszélesség esetén pedig 24 epx ereszcsatornát ajánlunk.

Kapcsolódó témakörök

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