Hizalama, kenar boşluğu, dolgu

XAML uygulamalarında, kullanıcı arabirimi (UI) öğelerinin çoğu FrameworkElement sınıfından devralır. Her FrameworkElement'in düzen davranışını etkileyen boyutları, hizalaması, kenar boşluğu ve doldurma özellikleri vardır. Aşağıdaki kılavuzda, uygulamanızın kullanıcı arabiriminin okunaklı ve her bağlamda kullanımı kolay olduğundan emin olmak için bu düzen özelliklerinin nasıl kullanılacağına ilişkin genel bir bakış sağlanmaktadır.

Boyutlar (Yükseklik, Genişlik)

Uygun boyutlandırma, tüm içeriğin net ve okunaklı olmasını sağlar. Kullanıcıların birincil içeriği çözmek için kaydırması veya yakınlaştırması gerekmez.

• Height ve Width bir öğenin boyutunu belirtir. Varsayılan değerler matematiksel olarakdır NaN (Sayı Değil). Etkin piksel cinsinden ölçülen sabit değerler ayarlayabilir veya akışkan davranışı için Otomatik veya orantılı boyutlandırmayı kullanabilirsiniz.

• ActualHeight ve ActualWidth , çalışma zamanında bir öğenin boyutunu sağlayan salt okunur özelliklerdir. Akışkan düzenleri büyür veya küçülürse , SizeChanged olayında değerler değişir. RenderTransform'un ActualHeight ve ActualWidth değerlerini değiştirmediğini unutmayın.

• Minwidth/MaxWidth ve MinHeight/MaxHeight , sıvının yeniden boyutlandırılması için bir öğenin boyutunu kısıtlayan değerler belirtir.

• FontSize ve diğer metin özellikleri, metin öğelerinin düzen boyutunu denetler. Metin öğeleri açıkça bildirilen boyutlara sahip olmasa da, ActualWidth ve ActualHeight değerlerini hesaplamışlardır.

Hizalama

Hizalama, kullanıcı arabiriminizin düzgün, düzenli ve dengeli görünmesini sağlar ve görsel hiyerarşi ve ilişkiler oluşturmak için de kullanılabilir.

• HorizontalAlignment ve VerticalAlignment , bir öğenin üst kapsayıcısı içinde nasıl konumlandırılacağını belirtir.

  • HorizontalAlignment değerleri Sol, Orta, Sağ ve Esnetme'tir.
  • VerticalAlignment değerleri Top, Center, Bottom ve Stretch değerleridir.

• Her iki özellik için de Stretch varsayılandır ve öğeler ebeveyn kapsayıcıda sağlanan tüm alanı doldurur. Reel sayı Yükseklik ve Genişlik, bir Esnetme değerini iptal eder ve bunun yerine bir Merkez değeri olarak görev yapar. Düğme gibi bazı denetimler varsayılan Esnetme değerini varsayılan stillerinde geçersiz kılar.

• HorizontalContentAlignment ve VerticalContentAlignment , alt öğelerin kapsayıcı içinde nasıl konumlandırılacağını belirtir.

• Hizalama, düzen panelindeki kırpmayı etkileyebilir. Örneğin, HorizontalAlignment="Left" ile kullanıldığında, içerik ActualWidth değerinden büyükse öğenin sağ tarafı kırpılır.

• Metin öğeleri TextAlignment özelliğini kullanır. Genel olarak, varsayılan değer olan sol hizalamayı kullanmanızı öneririz. Metin stili oluşturma hakkında daha fazla bilgi için bkz. Tipografi.

Kenar boşluğu ve doldurma

Kenar boşluğu ve doldurma özellikleri, kullanıcı arabiriminin çok dağınık veya çok seyrek görünmesini engeller ve ayrıca kalem ve dokunma gibi belirli girişlerin kullanımını kolaylaştırabilir. Burada bir kapsayıcının ve içeriğinin kenar boşluklarını ve dolgusunu gösteren bir görsel yer almaktadır.

Margin

Kenar boşluğu , öğenin etrafındaki boş alan miktarını denetler. Kenar boşluğu, ActualHeight ve ActualWidth'e piksel eklemediği gibi, isabet testi ve giriş olaylarını kaydetme gibi amaçlar için öğenin parçası olarak da kabul edilmez.

• Kenar boşluğu değerleri tekdüzen veya farklı olabilir. ile Margin="20", sol, üst, sağ ve alt kenarlardaki öğeye 20 piksellik tekdüzen bir kenar boşluğu uygulanır. Margin="0,10,5,25"ile değerler sola, üste, sağa ve alta (bu sırayla) uygulanır.
• Kenar boşlukları eklenebilir. İki öğe de 10 piksellik tekdüzen bir kenar boşluğu belirtirse ve yatay ya da dikey olarak bitişiklerse, aralarındaki mesafe 20 pikseldir.
• Negatif kenar boşluklarına izin verilir. Ancak, negatif kenar boşluğu kullanmak genellikle kırpmaya veya çevre ögelerin fazla boyanmasına neden olabilir, bu nedenle negatif kenar boşluğu kullanmak yaygın bir teknik değildir.
• Kenar boşluğu değerleri en son kısıtlanır, bu nedenle kapsayıcılar öğeleri kırpabilir veya kısıtlayabilir, bu yüzden kenar boşluklarına dikkat edin. Kenar Boşluğu değeri, bir öğenin işlenmek üzere görünmeme nedeni olabilir; Kenar Boşluğu uygulandığında, öğenin boyutu 0 ile kısıtlanabilir.

Doldurma

Dolgu bir öğenin iç kenarlığı ile alt içeriği veya öğeleri arasındaki boşluk miktarını denetler. Pozitif doldurma değeri, öğenin içerik alanını azaltır.

Margin'in aksine, Padding FrameworkElement'in bir özelliği değildir. Her biri kendi Padding özelliğini tanımlayan birkaç sınıf vardır:

• Control.Padding: Tüm Control türetilmiş sınıflar tarafından miras alınır. Tüm denetimlerin içeriği yoktur, bu nedenle bu denetimler için özelliği ayarlamak hiçbir şey yapmaz. Denetimin kenarlıkları varsa doldurma, bu kenarlık içinde uygulanır.
• Border.Padding: BorderThickness/BorderBrush ile Child öğesi tarafından oluşturulan dikdörtgen çizgisi arasındaki boşluğu tanımlar.
• ItemsPresenter.Padding: Öğe denetimlerindeki öğelerin görünümüne katkıda bulunur ve belirtilen doldurmayı her öğenin çevresine yerleştirir.
• TextBlock.Padding ve RichTextBlock.Padding: metin öğesinin metninin etrafındaki sınırlayıcı kutuyu genişletin. Bu metin öğelerinin Arka Planı yoktur, bu nedenle görsel olarak görülmesi zor olabilir. Bu nedenle, bunun yerine Blok kapsayıcılar üzerinde Kenar Boşluğu ayarlarını kullanın.

Bu durumların her birinde, öğelerin margin özelliği de vardır. Hem Kenar Boşluğu hem de Doldurma uygulanırsa, bunlar eklenir: dış kapsayıcı ile iç içerik arasındaki görünür uzaklık kenar boşluğu artı doldurma olur.

Example

Şimdi Margin ve Padding'in gerçek denetimler üzerindeki etkilerine göz atalım. Grid içinde, varsayılan kenar boşlukları ve doldurma değerleri 0 olan bir TextBox yer alır.

Burada, bu XAML'de gösterildiği gibi Kenar Boşluğu ve Doldurma değerlerine sahip aynı TextBox ve Grid gösterilmektedir.

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

Stil kaynakları

Her özellik değerini bir denetimde ayrı ayrı ayarlamanız gerekmez. Özellik değerlerini bir Stil kaynağında gruplandırmak ve bir denetime Stil uygulamak genellikle daha verimlidir. Bu, özellikle aynı özellik değerlerini birçok denetime uygulamanız gerektiğinde geçerlidir. Stilleri kullanma hakkında daha fazla bilgi için bkz. XAML stilleri.

Genel öneriler

• Ölçüm değerlerini yalnızca belirli anahtar öğelere uygulayın ve diğer öğeler için akıcı düzen davranışı kullanın. Bu, pencere genişliği değiştiğinde duyarlı kullanıcı arabirimi sağlar.
• Eğer ölçüm değerleri kullanıyorsanız, tüm boyutlar, kenar boşlukları ve dolgu 4 epx artışlarla ayarlanmalıdır. XAML, uygulamanızı tüm cihazlarda ve ekran boyutlarında okunaklı hale getirmek için etkili pikseller ve ölçeklendirme kullandığında, kullanıcı arabirimi öğelerini 4'ün katlarına göre ölçeklendirir. Değerlerin 4'lü artışlarla kullanılması, tüm piksellerle hizalanarak en iyi işlemeye neden olur.
• Küçük pencere genişlikleri (640 pikselden az) için 12 epx boşluk, daha büyük pencere genişlikleri için 24 epx boşluk öneririz.

İlgili konular

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