Düzen panelleri

Düzen panelleri, uygulamanızda kullanıcı arabirimi öğelerini düzenlemenize ve gruplandırmanıza olanak sağlayan kapsayıcılardır. Yerleşik XAML düzen panelleri RelativePanel, StackPanel, Grid, VariableSizedWrapGrid ve Canvas'dır. Burada her paneli açıklar ve XAML kullanıcı arabirimi öğelerini düzenlerken nasıl kullanılacağını gösteririz.

Düzen paneli seçerken dikkate alınması gereken birkaç şey vardır:

• Panelin alt öğelerini nasıl konumlandırıyor?
• Panelin alt öğelerini nasıl boyutlandırıyor?
• Çakışan alt öğelerin üst üste nasıl katmanlandığı (z sırası).
• İstediğiniz düzeni oluşturmak için gereken iç içe yerleştirilmiş panel öğelerinin sayısı ve karmaşıklığı.

Örnekler

WinUI 2 Galerisi
	WinUI 2 Galerisi uygulaması yüklüyse RelativePanel, StackPanel, Grid, VariableSizedWrapGrid ve Canvas'ı çalışır durumda görün. WinUI 2 Galeri uygulamasını (Microsoft Store) edinin Kaynak kodu alma (GitHub)

Panel özellikleri

Tek tek panelleri tartışmadan önce, tüm panellerin sahip olduğu bazı ortak özellikleri inceleyelim.

Panel ekli özellikleri

Çoğu XAML düzen paneli, alt öğelerinin kullanıcı arabiriminde nasıl konumlandırılmaları gerektiği konusunda üst panele bilgi vermelerini sağlamak için ekli özellikleri kullanır. Eklenen özellikler AttachedPropertyProvider.PropertyName söz dizimini kullanır. Diğer panellerin içinde iç içe yerleştirilmiş panelleriniz varsa, bir üst öğeye düzen özelliklerini belirten kullanıcı arabirimi öğelerindeki ekli özellikler yalnızca en yakın üst panel tarafından yorumlanır.

Burada, XAML'de Bir Düğme denetiminde Canvas.Left ekli özelliğini nasıl ayarlayabileceğinize ilişkin bir örnek verilmiştir. Bu, Üst Tuval'e Düğme'nin Tuvalin sol kenarından 50 etkin piksel konumlandırılması gerektiğini bildirir.

<Canvas>
  <Button Canvas.Left="50">Hello</Button>
</Canvas>

Ekli özellikler hakkında daha fazla bilgi için bkz. Ekli özelliklere genel bakış.

Panel kenarlıkları

RelativePanel, StackPanel ve Grid panelleri, ek bir Border öğesinde kaydırmadan panelin çevresine kenarlık çizmenize olanak sağlayan kenarlık özelliklerini tanımlar. Kenarlık özellikleri BorderBrush, BorderThickness, CornerRadius ve Padding'tir.

Kılavuzda kenarlık özelliklerinin nasıl ayarlanacağına ilişkin bir örnek aşağıda verilmiştır.

<Grid BorderBrush="Blue" BorderThickness="12" CornerRadius="12" Padding="12">
    <TextBlock Text="Hello World!"/>
</Grid>

Yerleşik kenarlık özelliklerinin kullanılması, uygulamanızın kullanıcı arabirimi performansını geliştirebilecek XAML öğe sayısını azaltır. Düzen panelleri ve kullanıcı arabirimi performansı hakkında daha fazla bilgi için bkz. XAML düzeninizi iyileştirme.

RelativePanel

RelativePanel , kullanıcı arabirimi öğelerini diğer öğelere göre ve panele göre nereye gideceklerini belirterek düzenlemenize olanak tanır. Varsayılan olarak, bir öğe panelin sol üst köşesine yerleştirilir. Ui'nizi farklı pencere boyutları için yeniden düzenlemek için RelativePanel'i VisualStateManager ve AdaptiveTrigger ile kullanabilirsiniz.

Bu tablo, bir öğeyi panele veya diğer öğelere göre hizalamak için kullanabileceğiniz ekli özellikleri gösterir.

Panel hizalaması	Eşdüzey hizalama	Eşdüzey konum
AlignTopWithPanel	AlignTopWith	Üstünde
AlignBottomWithPanel	AlignBottomWith	Aşağıda
AlignLeftWithPanel	AlignLeftWith	LeftOf
AlignRightWithPanel	AlignRightWith	RightOf
AlignHorizontalCenterWithPanel	AlignHorizontalCenterWith
AlignVerticalCenterWithPanel	AlignVerticalCenterWith

Bu XAML, Bir RelativePanel'de öğelerin nasıl düzen yapılacağını gösterir.

<RelativePanel BorderBrush="Gray" BorderThickness="1">
    <Rectangle x:Name="RedRect" Fill="Red" Height="44" Width="44"/>
    <Rectangle x:Name="BlueRect" Fill="Blue"
               Height="44" Width="88"
               RelativePanel.RightOf="RedRect" />

    <Rectangle x:Name="GreenRect" Fill="Green" 
               Height="44"
               RelativePanel.Below="RedRect" 
               RelativePanel.AlignLeftWith="RedRect" 
               RelativePanel.AlignRightWith="BlueRect"/>
    <Rectangle Fill="Orange"
               RelativePanel.Below="GreenRect" 
               RelativePanel.AlignLeftWith="BlueRect" 
               RelativePanel.AlignRightWithPanel="True"
               RelativePanel.AlignBottomWithPanel="True"/>
</RelativePanel>

Sonuç şöyle görünür.

Dikdörtgenlerin boyutuyla ilgili dikkate almaları gereken birkaç nokta şunlardır:

• Kırmızı dikdörtgene 44x44 açık bir boyut verilir. Panelin sol üst köşesine yerleştirilir ve bu da varsayılan konumdur.
• Yeşil dikdörtgene 44 açık yükseklik verilir. Sol tarafı kırmızı dikdörtgenle, sağ tarafı ise genişliğini belirleyen mavi dikdörtgenle hizalanır.
• Turuncu dikdörtgene açık bir boyut verilmez. Sol tarafı mavi dikdörtgenle hizalanır. Sağ ve alt kenarları panelin kenarıyla hizalanır. Boyutu bu hizalamalarla belirlenir ve panel yeniden boyutlandırılırken yeniden boyutlandırılır.

StackPanel

StackPanel , alt öğelerini yatay veya dikey olarak yönlendirilebilen tek bir çizgi halinde düzenler. StackPanel genellikle sayfadaki kullanıcı arabiriminin küçük bir alt bölümünü düzenlemek için kullanılır.

Alt öğelerin yönünü belirtmek için Orientation özelliğini kullanabilirsiniz. Varsayılan yönlendirme Dikey'dir.

Aşağıdaki XAML'de öğelerin dikey StackPanel'inin nasıl oluşturulacağı gösterilmektedir.

<StackPanel>
    <Rectangle Fill="Red" Height="44"/>
    <Rectangle Fill="Blue" Height="44"/>
    <Rectangle Fill="Green" Height="44"/>
    <Rectangle Fill="Orange" Height="44"/>
</StackPanel>

Sonuç şöyle görünür.

StackPanel'de, bir alt öğenin boyutu açıkça ayarlanmazsa, kullanılabilir genişliği (veya Yönlendirme Yatay ise yüksekliği) dolduracak şekilde esnetilir. Bu örnekte dikdörtgenlerin genişliği ayarlanmadı. Dikdörtgenler StackPanel'in tüm genişliğini dolduracak şekilde genişler.

Grid

Kılavuz paneli akıcı düzenleri destekler ve denetimleri çok satırlı ve çok sütunlu düzenlerde düzenlemenizi sağlar. RowDefinitions ve ColumnDefinitions özelliklerini kullanarak kılavuz satırlarını ve sütunlarını belirtirsiniz.

Nesneleri Kılavuzun belirli hücrelerinde konumlandırmak için Grid.Column ve Grid.Row ekli özelliklerini kullanın.

İçeriği birden çok satır ve sütuna yaymak için Grid.RowSpan ve Grid.ColumnSpan ekli özelliklerini kullanın.

Bu XAML örneği, iki satır ve iki sütun içeren bir Kılavuz oluşturmayı gösterir.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="44"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Rectangle Fill="Red" Width="44"/>
    <Rectangle Fill="Blue" Grid.Row="1"/>
    <Rectangle Fill="Green" Grid.Column="1"/>
    <Rectangle Fill="Orange" Grid.Row="1" Grid.Column="1"/>
</Grid>

Sonuç şöyle görünür.

Bu örnekte boyutlandırma şu şekilde çalışır:

• İkinci satırın açık yüksekliği 44 etkin pikseldir. Varsayılan olarak, ilk satırın yüksekliği kalan alanı doldurur.
• İlk sütunun genişliği Otomatik olarak ayarlanır, bu nedenle alt öğeleri için gerektiği kadar geniştir. Bu durumda, kırmızı dikdörtgenin genişliğine uyum sağlamak için 44 etkin piksel genişliğindedir.
• Dikdörtgenlerde başka boyut kısıtlaması olmadığından, her biri içinde bulunduğu kılavuz hücresini doldurmak için esnetilir.

Otomatik veya yıldız boyutlandırmayı kullanarak bir sütun veya satır içindeki alanı dağıtabilirsiniz. Kullanıcı arabirimi öğelerinin içeriğine veya üst kapsayıcısına sığacak şekilde yeniden boyutlandırılması için otomatik boyutlandırmayı kullanırsınız. Otomatik boyutlandırmayı bir kılavuzun satırları ve sütunlarıyla da kullanabilirsiniz. Otomatik boyutlandırmayı kullanmak için, Kullanıcı arabirimi öğelerinin Yükseklik ve/veya Genişliği'ni Otomatik olarak ayarlayın.

Kullanılabilir alanı bir kılavuzun satır ve sütunları arasında ağırlıklı oranlara göre dağıtmak için yıldız boyutlandırma olarak da adlandırılan orantılı boyutlandırmayı kullanırsınız. XAML'de yıldız değerleri* (veya ağırlıklı yıldız boyutlandırması için n* olarak ifade edilir). Örneğin, bir sütunun 2 sütunlu düzendeki ikinci sütundan 5 kat daha geniş olduğunu belirtmek için ColumnDefinition öğelerindeki Width özellikleri için "5*" ve "*" kullanın.

Bu örnek kılavuzdaki sabit, otomatik ve orantılı boyutlandırmayı 4 sütunla birleştirir.

Köşe yazısı	Sizing	Description
Column_1	Otomatik	Sütun, içeriğine sığacak şekilde boyutlandırılır.
Column_2	*	Otomatik sütunlar hesaplandıktan sonra sütun kalan genişliğin bir kısmını alır. Column_2 Column_4 kadar geniş olacaktır.
Column_3	44	Sütun 44 piksel genişliğinde olacaktır.
Column_4	2*	Otomatik sütunlar hesaplandıktan sonra sütun kalan genişliğin bir kısmını alır. Column_4 Column_2 iki kat geniş olacaktır.

Varsayılan sütun genişliği "*" olduğundan, ikinci sütun için bu değeri açıkça ayarlamanız gerekmez.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition/>
        <ColumnDefinition Width="44"/>
        <ColumnDefinition Width="2*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="Column 1 sizes to its content." FontSize="24"/>
</Grid>

Visual Studio XAML tasarımcısında sonuç şöyle görünür.

VariableSizedWrapGrid

VariableSizedWrapGrid , MaximumRowsOrColumns değerine ulaşıldığında satırların veya sütunların otomatik olarak yeni bir satıra veya sütuna kaydırıldığı Kılavuz stili bir düzen panelidir.

Orientation özelliği, kılavuzun kaydırmadan önce öğelerini satırlara veya sütunlara ekleyip eklemediğini belirtir. Varsayılan yönlendirme Dikey'dir. Bu, kılavuz bir sütun dolana kadar yukarıdan aşağıya öğe eklediği ve ardından yeni bir sütuna kaydırıldığı anlamına gelir. Değer Yatay olduğunda, kılavuz öğeleri soldan sağa ekler ve sonra yeni bir satıra kaydırılır.

Hücre boyutları ItemHeight ve ItemWidth tarafından belirtilir. Her hücre aynı boyuttadır. ItemHeight veya ItemWidth belirtilmezse, ilk hücre içeriğine sığacak şekilde boyutlandırılır ve diğer her hücre ilk hücrenin boyutudur.

Bir alt öğenin kaç bitişik hücreyi doldurması gerektiğini belirtmek için VariableSizedWrapGrid.ColumnSpan ve VariableSizedWrapGrid.RowSpan ekli özelliklerini kullanabilirsiniz.

XAML'de VariableSizedWrapGrid'i şu şekilde kullanabilirsiniz.

<VariableSizedWrapGrid MaximumRowsOrColumns="3" ItemHeight="44" ItemWidth="44">
    <Rectangle Fill="Red"/>
    <Rectangle Fill="Blue" 
               VariableSizedWrapGrid.RowSpan="2"/>
    <Rectangle Fill="Green" 
               VariableSizedWrapGrid.ColumnSpan="2"/>
    <Rectangle Fill="Orange" 
               VariableSizedWrapGrid.RowSpan="2" 
               VariableSizedWrapGrid.ColumnSpan="2"/>
</VariableSizedWrapGrid>

Sonuç şöyle görünür.

Bu örnekte, her sütundaki satır sayısı üst sınırı 3'tür. Mavi dikdörtgen 2 satıra yayılacağından ilk sütun yalnızca 2 öğe (kırmızı ve mavi dikdörtgenler) içerir. Yeşil dikdörtgen daha sonra sonraki sütunun en üstüne kaydırılır.

Tuval

Tuval paneli alt öğelerini sabit koordinat noktaları kullanarak konumlandırmaktadır ve akışkan düzenlerini desteklemez. Her öğede Canvas.Left ve Canvas.Top ekli özellikleri ayarlayarak tek tek alt öğelerdeki noktaları belirtirsiniz. Üst Tuval, düzenin Düzenleme geçişi sırasında alt öğelerinden bu ekli özellik değerlerini okur.

Tuvaldeki nesneler çakışabilir ve burada bir nesne başka bir nesnenin üzerine çizilir. Varsayılan olarak, Tuval alt nesneleri bildirildiği sırada işler, böylece son alt öğe en üstte işlenir (her öğenin varsayılan z dizini 0'dır). Bu, diğer yerleşik paneller ile aynıdır. Ancak Canvas, alt öğelerin her birinde ayarlayabileceğiniz Canvas.ZIndex ekli özelliğini de destekler. Çalışma zamanında öğelerin çizim sırasını değiştirmek için kodda bu özelliği ayarlayabilirsiniz. En yüksek Canvas.ZIndex değerine sahip öğe en son çizer ve bu nedenle aynı alanı paylaşan veya herhangi bir şekilde çakışan diğer öğelerin üzerine çizer. Alfa değerine (saydamlık) uyulduğunu unutmayın, bu nedenle öğeler çakışsa bile, üst kısımda maksimum olmayan alfa değeri varsa örtüşen alanlarda gösterilen içerikler karıştırılabilir.

Tuval, alt öğelerinin boyutlandırmasını yapmaz. Her öğenin boyutunu belirtmesi gerekir.

Burada XAML'de bir Tuval örneği verilmiş.

<Canvas Width="120" Height="120">
    <Rectangle Fill="Red" Height="44" Width="44"/>
    <Rectangle Fill="Blue" Height="44" Width="44" Canvas.Left="20" Canvas.Top="20"/>
    <Rectangle Fill="Green" Height="44" Width="44" Canvas.Left="40" Canvas.Top="40"/>
    <Rectangle Fill="Orange" Height="44" Width="44" Canvas.Left="60" Canvas.Top="60"/>
</Canvas>

Sonuç şöyle görünür.

Tuval panelini isteğe bağlı olarak kullanın. Bazı senaryolarda kullanıcı arabirimindeki öğelerin konumlarını hassas bir şekilde denetleyebilmek kullanışlı olsa da, sabit konumlandırılmış düzen paneli kullanıcı arabiriminizin bu alanının genel uygulama penceresi boyutu değişikliklerine daha az uyarlamalı olmasına neden olur. Uygulama penceresini yeniden boyutlandırma, cihaz yönlendirme değişiklikleri, bölünmüş uygulama pencereleri, monitör değiştirme ve diğer kullanıcı senaryolarından kaynaklanabilir.

ItemsControl panelleri

Bir ItemsControl içindeki öğeleri görüntülemek için yalnızca ItemsPanel olarak kullanılabilen birkaç özel amaçlı panel vardır. Bunlar ItemsStackPanel, ItemsWrapGrid, VirtualizingStackPanel ve WrapGrid'tir. Bu panelleri genel kullanıcı arabirimi düzeni için kullanamazsınız.

Örnek kodu alma

• WinUI 2 Galeri örneği - Tüm XAML denetimlerini etkileşimli biçimde görün.