DockLayout

Artikel
11/11/2023

DockLayout adalah tata letak di mana tampilan dapat ditampung ke sisi kontainer tata letak.

Gambar di bawah ini menunjukkan bagaimana terstruktur DockLayout secara konseptual. Tampilan anak ditambatkan di salah satu dari 4 kemungkinan posisi dok: Atas, Bawah, Kiri atau Kanan (setara dengan DockPosition.Top, DockPosition.Bottom, DockPosition.Left, dan DockPosition.Right). Tampilan yang tidak secara eksplisit ditambatkan (atau dengan DockPosition.None) ditampilkan di tengah (atau antara posisi Atas / Bawah dan Kanan Kiri). /

DockLayout concept

Membangun DockLayout

Bagian berikut mencakup cara menggunakan DockLayout di C# dan XAML.

XAML

Menyertakan namespace XAML

Untuk menggunakan toolkit di XAML, hal berikut xmlns perlu ditambahkan ke halaman atau tampilan Anda:

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

Oleh karena itu hal-hal berikut:

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

Akan dimodifikasi untuk menyertakan xmlns sebagai berikut:

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

Menggunakan DockLayout

Dasar DockLayout dapat dibuat di XAML seperti yang ditunjukkan di sini:

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

Untuk docking Kiri / Kanan, harus WidthRequest ditentukan. Untuk docking Atas / Bawah, HeightRequest menentukan ukuran tampilan anak di sepanjang arah docking. Arah ortogonal selalu dihitung secara implisit oleh DockLayout manajer.

C#

Dapat DockLayout dibangun dengan nyaman di C# seperti yang ditunjukkan di sini:

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" } },
    }
};

Catatan: DockPosition.None adalah default dan dapat dihilangkan.

Mengatur posisi dok

Untuk mengatur posisi docking dari C#, gunakan DockLayout.SetDockPosition(IView, DockPosition) untuk menerapkan properti terlampir DockPosition .

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

Menyesuaikan DockLayout

Kontainer DockLayout mendukung sewenang-wenang Padding serta beberapa DockLayoutproperti khusus untuk kustomisasi. Contoh di XAML dengan semua opsi yang tersedia diberikan di sini:

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

Properti

Properti	Tipe	Deskripsi
`Padding`	`Thickness`	Mendapatkan atau mengatur padding di sekitar kontainer tata letak (diwarisi dari `Layout`).
`HorizontalSpacing`	`double`	Mendapatkan atau mengatur penspasian horizontal di antara tampilan yang ditampar.
`VerticalSpacing`	`double`	Mendapatkan atau mengatur penspasian vertikal di antara tampilan yang ditampar.
		`HorizontalSpacing` dan `VerticalSpacing` diterapkan antara tampilan tetangga di `DockLayout`. Misalnya, `HorizontalSpacing` ditambahkan antara tampilan Kiri, Tidak Ada, dan Kanan , tetapi juga antara tampilan tetangga dalam tampilan yang sama `DockPosition` seperti beberapa tampilan yang ditambatkan ke Kiri. `VerticalSpacing` dirender antara tampilan bertumpuk vertikal di posisi Atas, Tidak Ada, dan Bawah .
`ShouldExpandLastChild`	`bool`	Jika true, anak terakhir diperluas untuk mengisi ruang yang tersisa (default: `true`).

Catatan tambahan

Jika DockLayout digunakan di tempat yang dibatasi secara spasial (terutama dengan ukuran yang ditentukan melalui HeightRequest atau WidthRequest pada kontainer), prioritas diberikan oleh urutan di mana tampilan anak ditambahkan ke DockLayout kontainer. Akibatnya, setiap kali tidak ada cukup ruang untuk semua tampilan anak yang akan dirender, anak prioritas terendah (yang ditambahkan terakhir) akan dihapus setelah penyajian. Untuk alasan itu, Anda harus selalu memeriksa bahwa ukuran kontainer mencakup setidaknya ukuran minimum semua tampilan anaknya.

Contoh

Anda dapat menemukan contoh fitur yang DockLayout sedang beraksi di Aplikasi Sampel Toolkit Komunitas .NET MAUI.

API

Anda dapat menemukan kode sumber untuk DockLayout lebih pada repositori GitHub .NET MAUI Community Toolkit di DockLayout dan DockLayoutManager.

Bagikan melalui