RiffaMedia

Elemen panel adalah komponen yang mengendalikan rendering elemen , ukuran , dimensi , posisinya, dan susunan konten turunannya. Avalonia UI menyediakan sejumlah elemen Panel yang telah ditetapkan sebelumnya serta kemampuan untuk membuat elemen Panel kustom.

Beberapa panel yang bisa kita gunakan di dalam avanlonia adalah  Canvas, DockPanel, Grid, StackPanel, WrapPanel , RelativePanel dan UniformGrid Properties.

Canvas

Kanvas dapat memposisikan elemen di dalamnya di posisi mana pun di dakan window. Kalau posisinya tidak pas, canvas juga berpotensi membuat element menumpuk.

<Canvas Height="300" Width="300">
  <Canvas Height="50" Width="50" Top="0" Left="0" Background="Red"/>
  <Canvas Height="50" Width="50" Top="100" Left="100" Background="Green"/>
  <Canvas Height="50" Width="50" Top="50" Left="50" Background="Blue"/>
</Canvas>

Di canvas ada properti Height, Width, Top,Left untuk mengatur posisi dari element. Nah jika posisi ini tidak pas, ini bisa berpotensi terjadi penumpukan

DockPanel 

DockPanel mengatur posisi element dengan properti DockPanel.Dock dengan valuenya Top, Left, Right, Bottom. Sangat cocok untuk membentuk block utama pada sebuah aplikasi desktop. Memposisikan sidebar, menu, footer dan sebagainya akan lebih mudah.  Silahkan lihat Code dibawah ini untuk pengaplikasiannya. 

<DockPanel LastChildFill="True">
    <Border Width="100" BorderThickness="5" BorderBrush="Black" DockPanel.Dock="Left" Background="Red">
        <Label  Foreground="White" Content="Left" />
    </Border>

    <Border Height="50" BorderThickness="5" BorderBrush="Black" DockPanel.Dock="Top" Background="Red">
        <Label  Foreground="White" Content="Top" />
    </Border>
    <Border Height="50" BorderThickness="5" BorderBrush="Black" DockPanel.Dock="Bottom" Background="Red">
        <Label Foreground="White" Content="Bottom" />
    </Border>
    <Border BorderThickness="5" BorderBrush="Black" DockPanel.Dock="Bottom" Background="Red">
        <Label Foreground="White" Content="Bottom2" />
    </Border>
</DockPanel>

<DockPanel LastChildFill="True">
    <Border Height="50" BorderThickness="5" BorderBrush="Black" DockPanel.Dock="Top" Background="Red">
        <Label  Foreground="White" Content="Top" />
    </Border>
    <Border Height="50" BorderThickness="5" BorderBrush="Black" DockPanel.Dock="Bottom" Background="Red">
        <Label  Foreground="White" Content="Bottom" />
    </Border>
    <Border Width="100" BorderThickness="5" BorderBrush="Black" DockPanel.Dock="Left" Background="Red">
        <Label  Foreground="White" Content="Left" />
    </Border>    
    <Border Width="100" BorderThickness="5" BorderBrush="Black" DockPanel.Dock="Right" Background="Red">
        <Label  Foreground="White" Content="Right" />
    </Border>  
     <Border  BorderThickness="5" BorderBrush="Black" DockPanel.Dock="Left" Background="Red">
        <Label  Foreground="White" Content="Center" />
    </Border>  
</DockPanel>

GridPanel

GridPanel mengatur posisi element berdasarkan kolom dan baris. Jadi kita akan menentukan letak sebuah element di kolom berapa dan baris berapa.

Properti yang ada di dalam gridpanel diantaranya adalah

• HorizontalAlignment= Untuk mengatur Alignment secara horizontal
• VerticalAlignment= Untuk mengatur Alignment secara Vertical
• Width = Mengatur lebar
• Height=Mengatur tinggi
• ColumnDefinitions = Untuk mengatur lewar colum ( Properti bisa berupa Auto agar mengikuti ukuran dari element , dan * untuk mengisi sisa dari ruangan)
• RowDefinitions= Untuk mengatur lebar baris ( Properti bisa berupa Auto agar mengikuti ukuran dari element , dan * untuk mengisi sisa dari ruangan)

Element di dalam grid panel ada properti untuk mengtur ukuran di dalamnya

• Grid.Row= Untuk mengatur dimanakah row yang di inginkan 
• Grid.Column= Untuk mengatur dimanakah column yang di inginkan 
• Grid.ColumnSpan= Untuk mengatur berapa columnkah yang akan digunakan oleh suatu element

Contoh penggunaan

<Grid Background="Gainsboro"   HorizontalAlignment="Left"    VerticalAlignment="Top"  Width="425"   Height="165"   ColumnDefinitions="Auto,*,*,*,*"    RowDefinitions="Auto,Auto,*,Auto">
    <TextBlock Grid.Row="1" Grid.Column="0" Text="Open:" />
    <TextBox Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="5" />
    <Button Grid.Row="3" Grid.Column="2" Content="OK" Margin="11,0,10,15" />
    <Button Grid.Row="3" Grid.Column="3" Content="Cancel" Margin="11,0,10,15" />
    <Button Grid.Row="3" Grid.Column="4" Content="Browse ..." Margin="11,0,10,15" />
</Grid>

StackPanel

StackPanel memungkinkan Anda untuk "menumpuk" elemen dalam arah yang ditentukan. Arah tumpukan default adalah vertikal. Properti Orientation dapat digunakan untuk mengontrol aliran konten. Properti yang paling pokok adalah HorizontalAligment dengan nilai Center, Left ,Right, Strech dan VerticalAligment dengan nilai Center, Bottom ,Top, Strech

Contoh penggunaan

 <StackPanel HorizontalAlignment="Center" 
                VerticalAlignment="Top"
                Spacing="30">
        <Button Content="Button Satu" />
        <Button Content="Button Dua" />
        <Button Content="Button Tiga" />
    </StackPanel>

DockPanel dan StackPanel

Sekilas kedua panel ini mirip tetapi, DockPanel dan StackPanel tidak menghasilkan hasil yang sama . Misalnya, urutan elemen anak dapat memengaruhi ukurannya di DockPanel tetapi tidak di StackPanel. sedangkan DockPanel hanya mengukur ukuran yang tersedia.

DockPanel ada properi DockPanel.Dock untuk mengatur element yang ada di dalamnya. Sedangkan di Stackpanel, Penumpukan di atur jadi satu di properti panelnya.

WrapPanel

WrapPanel digunakan untuk memposisikan elemen anak dalam posisi berurutan dari kiri ke kanan, dan membagi konten ke baris berikutnya saat mencapai tepi wadah induknya. Konten dapat diorientasikan secara horizontal atau vertikal. WrapPanel berguna untuk skenario UI yang mengalir sederhana. WrapPanel juga dapat digunakan untuk menerapkan ukuran yang seragam ke semua elemen anaknya. Secara Default untuk  Posisi dari Aligment nya adalah Center Center. 

<WrapPanel VerticalAlignment="Top" HorizontalAlignment="Left" Background="White" Width="200" Height="150">
    <Button Width="200">Button Satu</Button>
    <Button>Tombol Dua</Button>
    <Button>Tombol Tiga</Button>
    <Button>Tombol Empat</Button>
</WrapPanel>

UniformGrid

UniformGrid adalah jenis Panel yang menyediakan tata letak grid yang seragam. Ini berarti bahwa panel ini menata anak-anaknya dalam grid di mana semua sel dalam grid memiliki ukuran yang sama. Tidak seperti Grid standar, UniformGrid tidak mendukung baris dan kolom yang eksplisit, juga tidak menyediakan properti Grid.Row atau Grid.Column yang terlampir.

Untuk melihat lebih detail tentang panel ini, kalian bisa lihat dokumentasi avalonia tentang panel pada url berikut

https://docs.avaloniaui.net/docs/basics/user-interface/building-layouts/panels-overview