Düzenler

  • Makale

.NET MAUI layout classes.

.NET Çok Platformlu Uygulama Kullanıcı Arabirimi (.NET MAUI) düzen sınıfları, uygulamanızda kullanıcı arabirimi denetimlerini düzenlemenize ve gruplandırmanıza olanak sağlar. Düzen sınıfını seçmek, düzenin alt öğelerini nasıl konumlandırıp alt öğelerini nasıl boyutlandırıyor olduğu hakkında bilgi gerektirir. Ayrıca, istediğiniz düzeni oluşturmak için düzenleri iç içe yerleştirmeniz gerekebilir.

StackLayout

, StackLayout öğeleri yatay veya dikey olarak tek boyutlu bir yığında düzenler. Orientation özelliği öğelerin yönünü belirtir ve varsayılan yönlendirme şeklindedirVertical. StackLayout genellikle bir sayfadaki kullanıcı arabiriminin alt bölümünü düzenlemek için kullanılır.

Aşağıdaki XAML üç nesne içeren Label bir dikey StackLayout oluşturma işlemini gösterir:

<StackLayout Margin="20,35,20,25">
    <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
    <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
    <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
</StackLayout>

bir StackLayoutöğesinde, bir öğenin boyutu açıkça ayarlanmadıysa, kullanılabilir genişliği veya özelliği olarak ayarlandıysa Orientation yüksekliği dolduracak şekilde Horizontalgenişletilir.

genellikle StackLayout diğer alt düzenleri içeren bir üst düzen olarak kullanılır. Ancak, StackLayout bir nesne bileşimi StackLayout kullanılarak bir Grid düzeni yeniden oluşturmak için kullanılmamalıdır. Aşağıdaki kodda bu hatalı uygulamanın bir örneği gösterilmektedir:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Details.HomePage"
             Padding="0,20,0,0">
    <StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Name:" />
            <Entry Placeholder="Enter your name" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Age:" />
            <Entry Placeholder="Enter your age" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Occupation:" />
            <Entry Placeholder="Enter your occupation" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Address:" />
            <Entry Placeholder="Enter your address" />
        </StackLayout>
    </StackLayout>
</ContentPage>

Gereksiz düzen hesaplamaları yapıldığından bu gereksizdir. Bunun yerine, istenen düzen bir Gridkullanılarak daha iyi elde edilebilir.

Daha fazla bilgi için bkz . StackLayout.

HorizontalStackLayout

Alt HorizontalStackLayout görünümleri tek boyutlu bir yatay yığında düzenler ve öğesine daha yüksek performanslı bir StackLayoutalternatiftir. HorizontalStackLayout genellikle bir sayfadaki kullanıcı arabiriminin alt bölümünü düzenlemek için kullanılır.

Aşağıdaki XAML'de farklı alt görünümler içeren bir HorizontalStackLayout oluşturma gösterilmektedir:

<HorizontalStackLayout Margin="20">
   <Rectangle Fill="Red"
              HeightRequest="30"
              WidthRequest="30" />
   <Label Text="Red"
          FontSize="18" />
</HorizontalStackLayout>

bir HorizontalStackLayoutöğesinde, bir öğenin boyutu açıkça ayarlanmadıysa, kullanılabilir yüksekliği dolduracak şekilde genişletilir.

Daha fazla bilgi için bkz . HorizontalStackLayout.

VerticalStackLayout

Alt VerticalStackLayout görünümleri tek boyutlu bir dikey yığında düzenler ve öğesine daha yüksek performanslı bir StackLayoutalternatiftir. VerticalStackLayout genellikle bir sayfadaki kullanıcı arabiriminin alt bölümünü düzenlemek için kullanılır.

Aşağıdaki XAML üç nesne içeren bir VerticalStackLayout nesnenin Label nasıl oluşturulacağını gösterir:

<VerticalStackLayout Margin="20,35,20,25">
    <Label Text="The VericalStackLayout has its Margin property set, to control the rendering position of the VerticalStackLayout." />
    <Label Text="The Padding property can be set to specify the distance between the VerticalStackLayout and its children." />
    <Label Text="The Spacing property can be set to specify the distance between views in the VerticalStackLayout." />
</VerticalStackLayout>

bir VerticalStackLayoutöğesinde, bir öğenin boyutu açıkça ayarlanmadıysa, kullanılabilir genişliği dolduracak şekilde genişletilir.

Daha fazla bilgi için bkz . VerticalStackLayout.

Kılavuz

, Grid öğeleri orantılı veya mutlak boyutlara sahip olabilecek satır ve sütunlarda görüntülemek için kullanılır. Bir kılavuzun satırları ve sütunları ve ColumnDefinitions özellikleriyle belirtilirRowDefinitions.

Belirli Grid hücrelerdeki öğeleri konumlandırmak için ve Grid.Row ekli özelliklerini kullanınGrid.Column. Öğelerin birden çok satır ve sütuna yayılmasını Grid.RowSpan sağlamak için ve Grid.ColumnSpan ekli özelliklerini kullanın.

Not

Düzen Grid tablolarla karıştırılmamalıdır ve tablosal verileri sunma amacı taşımamalıdır.

Aşağıdaki XAML'de iki satır ve iki sütun ile nasıl Grid oluşturulacağı gösterilmektedir:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>    
    <Label Text="Column 0, Row 0"
           WidthRequest="200" />
    <Label Grid.Column="1"
           Text="Column 1, Row 0" />
    <Label Grid.Row="1"
           Text="Column 0, Row 1" />
    <Label Grid.Column="1"
           Grid.Row="1"
           Text="Column 1, Row 1" />
</Grid>

Bu örnekte boyutlandırma aşağıdaki gibi çalışır:

  • Her satırın açık yüksekliği 50 cihazdan bağımsız birimdir.
  • İlk sütunun genişliği olarak Autoayarlanır ve bu nedenle alt öğeleri için gerektiği kadar geniştir. Bu durumda, ilk Labelöğesinin genişliğine uyum sağlamak için cihazdan bağımsız 200 birim genişliğindedir.

Alan, sütunların ve satırların içeriğine sığabilmesini sağlayan otomatik boyutlandırma kullanılarak bir sütun veya satır içinde dağıtılabilir. Bu, bir RowDefinitionöğesinin yüksekliğini veya genişliğini ColumnDefinitionAutoolarak ayarlayarak elde edilir. Orantılı boyutlandırma, kullanılabilir alanı kılavuzdaki satırlar ve sütunlar arasında ağırlıklı oranlara göre dağıtmak için de kullanılabilir. Bu, bir RowDefinitionöğesinin yüksekliğini veya genişliğini ColumnDefinitionişlecini kullanan bir değere ayarlayarak elde edilir * .

Dikkat

Mümkün olduğunca az satır ve sütunun boyuta Auto ayarlandığından emin olmaya çalışın. Otomatik boyutlandırılmış her satır veya sütun, düzen altyapısının ek düzen hesaplamaları gerçekleştirmesine neden olur. Bunun yerine, mümkünse sabit boyutlu satırlar ve sütunlar kullanın. Alternatif olarak, sabit listesi değeriyle GridUnitType.Star orantılı miktarda alan kaplayan satırlar ve sütunlar ayarlayın.

Daha fazla bilgi için bkz . Kılavuz.

FlexLayout

A FlexLayout , alt öğeleri bir yığında yatay veya dikey olarak görüntülemesine benzer StackLayout . Ancak, FlexLayout tek bir satıra veya sütuna sığamayacak kadar çok sayıda alt öğe varsa da alt öğelerini sarmalayabilir ve ayrıca alt öğelerinin boyutu, yönlendirmesi ve hizalaması için daha ayrıntılı denetime olanak tanır.

Aşağıdaki XAML, görünümlerini tek bir sütunda görüntüleyen bir FlexLayout oluşturma işlemini gösterir:

<FlexLayout Direction="Column"
            AlignItems="Center"
            JustifyContent="SpaceEvenly">
    <Label Text="FlexLayout in Action" />
    <Button Text="Button" />
    <Label Text="Another Label" />
</FlexLayout>

Bu örnekte düzen aşağıdaki gibi çalışır:

  • Direction özelliği olarak Columnayarlanır ve bu da öğelerinin alt öğelerinin FlexLayout tek bir sütunda düzenlenmesine neden olur.
  • AlignItems özelliği olarak Centerayarlanır ve bu da her öğenin yatay olarak ortalanmasına neden olur.
  • JustifyContent özelliği, tüm kalan dikey alanı tüm öğeler arasında eşit olarak ve ilk öğenin üstünde ve son öğenin altına ayıran olarak ayarlanırSpaceEvenly.

Daha fazla bilgi için bkz . FlexLayout.

AbsoluteLayout

, AbsoluteLayout açık değerleri veya düzenin boyutuna göre değerleri kullanarak öğeleri konumlandırmak ve boyutlandırmak için kullanılır. Konum, alt öğesinin sol üst köşesi tarafından öğesinin sol üst köşesine AbsoluteLayoutgöre belirtilir.

yalnızca AbsoluteLayout alt öğelere boyut uygulayabileceğiniz veya öğenin boyutu diğer alt öğelerin konumunu etkilemediğinde kullanılacak özel amaçlı bir düzen olarak kabul edilmelidir. Bu düzenin standart bir kullanımı, kullanıcıyı sayfadaki normal denetimlerle etkileşime geçmekten korumak için sayfayı diğer denetimlerle kapsayan bir katman oluşturmaktır.

Önemli

HorizontalOptions ve VerticalOptions özelliklerinin bir öğesinin alt öğeleri üzerinde hiçbir AbsoluteLayoutetkisi yoktur.

içinde AbsoluteLayout, AbsoluteLayout.LayoutBounds ekli özellik bir öğenin yatay konumunu, dikey konumunu, genişliğini ve yüksekliğini belirtmek için kullanılır. Ek olarak, AbsoluteLayout.LayoutFlags ekli özellik düzen sınırlarının nasıl yorumlanacağı belirtir.

Aşağıdaki XAML' de bir AbsoluteLayoutiçindeki öğelerin nasıl düzenleyecekleri gösterilmektedir:

<AbsoluteLayout Margin="40">
    <BoxView Color="Red"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100"
             Rotation="30" />
    <BoxView Color="Green"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100"
             Rotation="60" />
    <BoxView Color="Blue"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100" />
</AbsoluteLayout>

Bu örnekte düzen aşağıdaki gibi çalışır:

  • Her BoxView birine 100x100 açık bir boyut verilir ve yatay olarak ortalanmış olarak aynı konumda görüntülenir.
  • Kırmızı BoxView 30 derece döndürülür ve yeşil BoxView 60 derece döndürülür.
  • Her BoxViewbirinde, AbsoluteLayout.LayoutFlags ekli özellik olarak PositionProportionalayarlanır ve genişlik ve yükseklik hesaba eklendikten sonra konumun kalan alanla orantılı olduğunu gösterir.

Dikkat

Düzen altyapısının AbsoluteLayout.AutoSize ek düzen hesaplamaları gerçekleştirmesine neden olacağı için mümkün olduğunca özelliğini kullanmaktan kaçının.

Daha fazla bilgi için bkz . AbsoluteLayout.

BindableLayout

A BindableLayout , sınıfından Layout türetilen herhangi bir düzen sınıfının bir öğe koleksiyonuna bağlayarak içeriğini oluşturmasına olanak tanır ve her öğenin görünümünü bir DataTemplateile ayarlama seçeneğiyle.

Bağlanabilir düzen, özelliğini uygulayan IEnumerableherhangi bir koleksiyona ayarlayarak ItemsSource ve bunu türetilmiş bir Layoutsınıfa ekleyerek verilerle doldurulur. Bağlanabilir düzendeki her öğenin görünümü, ekli özellik olarak DataTemplateayarlanarak BindableLayout.ItemTemplate tanımlanabilir.

Aşağıdaki XAML'de bir StackLayout öğe koleksiyonuna nasıl bağlanacağınız ve bunların görünümünün bir DataTemplateile nasıl tanımlanacağı gösterilmektedir:

<StackLayout BindableLayout.ItemsSource="{Binding User.TopFollowers}"
             Orientation="Horizontal">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}"
                   Aspect="AspectFill"
                   WidthRequest="44"
                   HeightRequest="44" />
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

Bağlanabilir düzenler yalnızca görüntülenecek öğe koleksiyonu küçük olduğunda ve kaydırma ve seçim gerekli olmadığında kullanılmalıdır.

Daha fazla bilgi için bkz . BindableLayout.

Özel düzenler

.NET MAUI'de düzen sınıfları soyut Layout sınıftan türetilir. Bu sınıf, platformlar arası düzeni ve ölçümü düzen yöneticisi sınıfına devreder. Her düzen yöneticisi sınıfı, ve ArrangeChildren uygulamalarının ILayoutManager sağlanması gerektiğini belirten Measure arabirimini uygular:

  • Uygulama Measure , düzendeki her görünümü çağırır IView.Measure ve kısıtlamalara göre düzenin toplam boyutunu döndürür.
  • Uygulama, ArrangeChildren her görünümün düzenin sınırları içinde nereye yerleştirileceğini belirler ve her görünüme uygun sınırlarıyla çağrılar Arrange . Dönüş değeri, düzenin gerçek boyutudur.

.NET MAUI'nin düzenleri, düzenlerini işlemek için önceden tanımlanmış düzen yöneticilerine sahiptir. Ancak bazen sayfa içeriğini .NET MAUI tarafından sağlanmayan bir düzen kullanarak düzenlemek gerekir. Bu, kendi özel düzeninizi yazarak elde edilebilir. Daha fazla bilgi için bkz . Özel düzenler.

Giriş saydamlığı

Her görsel öğenin giriş alıp alamayacağını tanımlamak için kullanılan bir InputTransparent bağlanabilir özelliği vardır. Varsayılan değeri, öğesinin giriş alabilmesini sağlayan değeridir false. Bu özellik true bir öğe üzerinde olduğunda, öğesi herhangi bir giriş almaz. Bunun yerine, giriş görsel olarak öğesinin arkasındaki öğelere geçirilir.

Layout Tüm düzenlerin türetildiği sınıfın, alt öğelerin düzenin giriş saydamlığını devralıp devralmadığını denetleyen bağlanabilir bir CascadeInputTransparent özelliği vardır. Varsayılan değeri, özelliğin true bir düzen sınıfında olarak ayarlanmasının InputTransparent düzendeki tüm öğelerin herhangi bir giriş almamasıyla sonuçlanacağından emin olmaktırtrue.