//
you're reading...
Pemrograman

Layouting pada Windows Presentation Foundation


Bagi rekan-rekan yang telah mencoba Windows Presentation Foundation pasti tahu apa yang disebut dengan Grid, StackPanel, Canvas Panel, dan lain-lain. Saya penasaran dengan makhluk-makhluk yang telah disebutkan tadi. Kalau rekan-rekan membuat project WPF Application, maka secara otomatis akan dibuatkan secara otomatis layout type Grid.

Ada 5 macam layouting bila rekan-rekan ingin membuat aplikasi dengan WPF:

Wrap Panel

Wrap Panel mirip dengan Stack Panel, tapi tidak hanya menumpuk child element pada satu baris, dapat juga menyimpannya di baris baru bila tidak ada lagi ruang kosong di sebelah kirinya. Orientasinya pun dapat diatur seperti pada Stack Panel. Berikut contohnya.


<WrapPanel Orientation="Horizontal">
    <Button Content="Button" />
    <Button Content="Button" />
    <Button Content="Button" />
    <Button Content="Button" />
    <Button Content="Button" />
</WrapPanel>

Canvas Panel

Canvas merupakan layout panel paling mendasar di WPF. Setiap objek yang kita tempatkan pada Canvas dapat kita tentukan koordinatnya secara spesifik dengan perintah Canvas.Top, Canvas.Bottom, Canvas.Left, Canvas.Right. Canvas Panel ini biasa digunakan untuk menggabungkan/mengelompokkan gambar 2D, bukan untuk mendesain sebuah user interface. Ini penting karena penentuan koordinat secara absolut akan menyulitkan kita saat kita mengganti ukuran elemen, mengatur letak elemen, dan lain-lain. Kebanyakan orang yang biasa menggunakan WinForms akan familiar dengan layout ini, tapi layout ini bukanlah layout yang disarankan bila kita membuat aplikasi di WPF. Berikut contohnya.

<Canvas>

<Rectangle Canvas.Left=“40” Canvas.Top=“31”
Width=“63”
Height=“41”
Fill=“Blue” />

<Ellipse Canvas.Left=“130” Canvas.Top=“79”
Width=“58”
Height=“58”
Fill=“Blue” />

<Path Canvas.Left=“61” Canvas.Top=“28”
Width=“133”
Height=“98”
Fill=“Blue”

Stretch=“Fill”

Data=“M61,125 L193,28”/>

</Canvas>

 

<Canvas>	
   <Ellipse Fill="Green" Width="60" Height="60" Canvas.Left="30" Canvas.Top="20" Canvas.ZIndex="1"/>
   <Ellipse Fill="Blue" Width="60" Height="60" Canvas.Left="60" Canvas.Top="40"/>																										
</Canvas>		

Stack Panel

Stack Panel merupakan layout yang paling simple dan berguna. Tumpukan child element dapat diletakkan di bawah maupun disamping objek elemen lainnya tergantung pada orientasi dari Stack Panel tersebut. Berikut contohnya.

<StackPanel>
   <TextBlock Margin="10" FontSize="20">How do you like your coffee?</TextBlock>
   <Button Margin="10">Black</Button>
   <Button Margin="10">With milk</Button>
   <Button Margin="10">Latte machiato</Button>
   <Button Margin="10">Chappuchino</Button>
</StackPanel>
Dock Panel

Dock Panel merupakan layout yang memberikan kemudahan kepada developer untuk menempatkan sebuah objek/elemen ke dalam dock yang terbagi menjadi beberapa bagian, yaitu atas, bawah, kanan, kiri, dan tengah. Berikut contohnya.

<DockPanel LastChildFill="True">
   <Button Content="Dock=Top" DockPanel.Dock="Top"/>
   <Button Content="Dock=Bottom" DockPanel.Dock="Bottom"/>
   <Button Content="Dock=Left"/>
   <Button Content="Dock=Right" DockPanel.Dock="Right"/>
   <Button Content="LastChildFill=True"/>
</DockPanel>

Grid Panel

Grid merupakan layout yang menyusun elemen/objek di dalamnya ke dalam tabular structure berupa baris dan kolom. Layouting ini mirip seperti pada tag pada HTML, tapi Grid Panel ini lebih fleksibel. Berikut contohnya.

<Grid>
   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="Auto"/>
      <ColumnDefinition Width="*"/>
   </Grid.ColumnDefinitions>
   <Label Content="Left" Grid.Column="0" />
   <GridSplitter HorizontalAlignment="Right" VerticalAlignment="Stretch" Grid.Column="1" ResizeBehavior="PreviousAndNext" Width="5" Background="#FFBCBCBC"/>
   <Label Content="Right" Grid.Column="2" />
</Grid>

Mengapa layout begitu penting dalam WPF?

Pengaturan tata letak kontrol merupakan hal mendasar yang dapat berpengaruh terhadap penggunaan aplikasi. Pengaturan kontrol ke dalam koordinat pixel dapat berguna bagi pengembangan aplikasi yang terbatas pada environment tertentu, misalnya ukuran resolusi layar atau perbedaan ukuran huruf yang digunakan dalam aplikasi. Oleh karena itu, WPF menyediakan seperangkat pengaturan untuk layouting untuk menghindari kesalahan umum tersebut.

Tentang Vertical Alignment dan Horizontal Alignment

Sumber: http://wpftutorial.net/

Semoga bermanfaat.

J

Iklan

About Rendy Faqot

Adalah Sarjana Komputer dari jurusan Ilmu Komputer Universitas Pendidikan Indonesia 2008. Menyelesaikan studi selama 5 tahun yang penuh dengan lika-liku kehidupan mahasiswa sebagaimana mahasiswa normal pada umumnya. Tertarik dengan bidang Data Mining, Natural Language Processing, dan Mobile Development. InsyaAllah, mohon doa-nya agar bisa melanjutkan studi master untuk bidang tersebut. Pernah mencicipi dunia industri sebagai Analyst Programmer di Fujitsu Indonesia dan PT. BSP. Saat ini berdomisili di Bandung dan akan melanjutkan kehidupan di Bandung (untuk sementara).

Diskusi

Belum ada komentar.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: