DockLayout

Makale
11/11/2023

DockLayout , görünümlerin düzen kapsayıcısının kenarlarına yerleştirilebildiği bir düzendir.

Aşağıdaki görüntüde a'nın DockLayout kavramsal olarak nasıl yapılandırıldığı gösterilmektedir. Alt görünümler 4 olası yerleştirme konumundan birine yerleştirilmiştir: Üst, Alt, Sol veya Sağ (, DockPosition.Bottom, DockPosition.Leftve DockPosition.Rightile eşdeğerdirDockPosition.Top). Açıkça yerleştirilmemiş görünümler (veya ileDockPosition.None) ortada (veya Üst / Alt ve Sol Sağ / konumlar arasında) görüntülenir.

DockLayout concept

DockLayout Oluşturma

Aşağıdaki bölümlerde hem C# hem de XAML'de nasıl DockLayout kullanılacağı ele alınıyor.

XAML

XAML ad alanını dahil edin

Araç setini XAML'de kullanmak için sayfanıza veya görünümünüzde aşağıdakilerin xmlns eklenmesi gerekir:

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

Bu nedenle aşağıdakiler:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</ContentPage>

aşağıdakiler dahil xmlns edilecek şekilde değiştirilir:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

</ContentPage>

DockLayout kullanma

Burada gösterildiği gibi XAML'de temel DockLayout bir temel oluşturulabilir:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="MyProject.MyContentPage">

    <toolkit:DockLayout>
        <Button toolkit:DockLayout.DockPosition="Top" Text="Top" HeightRequest="50" />
        <Button toolkit:DockLayout.DockPosition="Bottom" Text="Bottom" HeightRequest="70" />
        <Button toolkit:DockLayout.DockPosition="Left" Text="Left" WidthRequest="80" />
        <Button toolkit:DockLayout.DockPosition="Right" Text="Right" WidthRequest="90" />
        <Button Text="Center" />
    </toolkit:DockLayout>
    
</ContentPage>

Sol / Sağ yerleştirme için bir WidthRequest belirtilmelidir. Üst / Alt yerleştirme için, HeightRequest takma yönü boyunca alt görünümün boyutunu tanımlar. Ortogonal yönler her zaman yönetici tarafından DockLayout örtük olarak hesaplanır.

C#

burada DockLayout gösterildiği gibi C# dilinde rahatça oluşturulabilir:

using CommunityToolkit.Maui.Layouts;

var page = new ContentPage
{
    Content = new DockLayout
    {
        { new Button { Text = "Top", HeightRequest = 50 }, DockPosition.Top },
        { new Button { Text = "Bottom", HeightRequest = 70 }, DockPosition.Bottom },
        { new Button { Text = "Left", WidthRequest = 80 }, DockPosition.Left },
        { new Button { Text = "Right", WidthRequest = 90 }, DockPosition.Right },
        { new Button { Text = "Center" } },
    }
};

Not: DockPosition.None varsayılandır ve atlanabilir.

Takma birimi konumunu ayarlama

C# konumundan yerleştirme konumunu ayarlamak için, ekli DockPosition özelliği uygulamak için kullanınDockLayout.SetDockPosition(IView, DockPosition).

var button = new Button { Text = "Top", HeightRequest = 50 };
DockLayout.SetDockPosition(button, DockPosition.Top);

DockLayout Özelleştirme

Kapsayıcı DockLayout , özelleştirme için rastgele Padding özelliklerin yanı sıra belirli özellikleri DockLayoutde destekler. XAML'de tüm kullanılabilir seçenekleri içeren bir örnek burada verilmiştir:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="MyProject.MyContentPage">

    <toolkit:DockLayout HeightRequest="400"
                    WidthRequest="600"
                    Padding="10,20,30,40"
                    VerticalSpacing="10"
                    HorizontalSpacing="15"
                    ShouldExpandLastChild="False">
        ...
    </toolkit:DockLayout>
    
</ContentPage>

Özellikler

Özellik	Türü	Açıklama
`Padding`	`Thickness`	Düzen kapsayıcısının etrafındaki doldurmayı alır veya ayarlar (öğesinden `Layout`devralınır).
`HorizontalSpacing`	`double`	Yerleşik görünümler arasındaki yatay aralığı alır veya ayarlar.
`VerticalSpacing`	`double`	Yerleşik görünümler arasındaki dikey aralığı alır veya ayarlar.
		`HorizontalSpacing` ve `VerticalSpacing` içindeki komşu görünümler `DockLayout`arasında uygulanır. Örneğin, Sol, `HorizontalSpacing`Yok ve Sağ görünümler arasına, aynı zamanda Sol'a yerleştirilmiş birden çok görünüm gibi komşu görünümler `DockPosition`arasına eklenir. `VerticalSpacing`Üst, Yok ve Alt konumlarında dikey olarak yığılmış görünümler arasında işlenir.
`ShouldExpandLastChild`	`bool`	True ise, son alt öğe kalan alanı dolduracak şekilde genişletilir (varsayılan: `true`).

Ek Notlar

Uzamsal olarak kısıtlanmış bir yerde (özellikle kapsayıcı üzerinden HeightRequest veya WidthRequest kapsayıcıda belirtilen bir boyutla) kullanılırsa DockLayout öncelik, alt görünümlerin kapsayıcıya eklenme sırasına DockLayout göre verilir. Sonuç olarak, tüm alt görünümlerin işlenmesi için yeterli alan olmadığından, işleme sonrasında en düşük öncelikli alt öğeler (son eklenenler) kaldırılır. Bu nedenle kapsayıcı boyutunun her zaman tüm alt görünümlerinin en az boyutunu kapsadığını denetlemeniz gerekir.

Örnekler

Bu özelliğin bir örneğini DockLayout .NET MAUI Community Toolkit Örnek Uygulaması'nda bulabilirsiniz.

API

için kaynak kodunu DockLayoutDockLayout ve DockLayoutManager'daki .NET MAUI Community Toolkit GitHub deposunda bulabilirsiniz.

Aracılığıyla paylaş