Hizalama, kenar boşluğu, doldurma

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 piksellerle ölçülen sabit değerler ayarlayabilir veya Otomatik veya akışkan davranışı için orantılı boyutlandırma 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. Unutmayın ki bir RenderTransform, ActualHeight ve ActualWidth değerlerini değiştirmez.

• 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.

Hizalama gösteren diyagramı

• 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şeklindedir.
  • VerticalAlignment değerleri Üst, Orta, Altve Genişlet'dir.

• Stretch her iki özellik için de varsayılan değerdir ve öğeler, üst kapsayıcıda kendilerine ayrılan tüm alanı doldurur. Gerçek sayı olarak belirtilen Yükseklik ve Genişlik, Esnetme değerini etkisiz hale getirir ve bunun yerine bir Orta değeri olarak işlev görür. 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ıldığını belirtir.

• Hizalama, düzen tasarımı panelindeki kırpmayı etkileyebilir. HorizontalAlignment="Left" örneğin, 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ı ile iç boşluğunu gösteren bir çizim bulunmaktadır.

Kenar boşluğu

Kenar boşluğu , öğenin etrafındaki boş alan miktarını denetler. Kenar boşluğu ActualHeight ve ActualWidth'e piksel eklemez ve isabet testi ve kaynak giriş olayları için öğenin parçası olarak 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 herhangi bir yerleşimde yan yana gelirse, aralarındaki mesafe 20 pikseldir.
• Negatif marjlara izin verilir. Ancak, negatif kenar boşluğu kullanmak genellikle kırpmaya veya eşlerin fazla çizilmelerine neden olabilir, bu nedenle negatif kenar boşluklarını 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

Doldurma, öğ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: Control'dan türetilmiş tüm sınıflara uygulanır. Tüm denetimlerin içeriği yoktur, bu nedenle bu denetimler için özelliği ayarlamak hiçbir şey yapmaz. Denetimde kenarlık varsa, boşluk bu kenarlığın içinde uygulanır.
• Border.Padding: BorderThickness/ve BorderBrush tarafından oluşturulan dikdörtgen çizgi ile Child öğesi 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 metni 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, onun yerine Blok kapsayıcılarında 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.

Örnek

Şimdi Margin ve Padding'in gerçek denetimler üzerindeki etkilerine göz atalım. Burada, kenar boşluğu ve doldurma değerleri varsayılan olarak 0 olan bir Grid içindeki bir TextBox bulunmaktadır.

Burada, bu XAML'de gösterildiği gibi TextBox'ta Kenar Boşluğu ve Doldurma değerleriyle aynı TextBox ve Grid değerleri yer alır.

<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.
• Ölçüm değerleri kullanıyorsanız, tüm boyutları, kenar boşluklarını ve doldurmayı 4 epxartımlı olmalı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 kenar boşluğu ve daha büyük pencere genişlikleri için 24 epx kenar boşluğu öneririz.

İlgili konular

• FrameworkElement.Height
• FrameworkElement.Width
• FrameworkElement.HorizontalAlignment
• FrameworkElement.VerticalAlignment
• FrameworkElement.Kenar Boşluğu
• Kontrol.Dolgu