Layout in Visual Studio 2013

Dalam visual studio, kita mengenal beberapa komponen layout untuk tampilan di program kita. Pada bahasan kali ini saya akan menjabarkan tentang

-          Text block

-          Stack Panel

-          Text box

-          Button

-          Grid

Pertama mari kita buat project baru, caranya telah dijelaskan pada bahasan sebelumnya. Bahasan pertama, kita akan mengenal grid. Apa itu grid? Mudahnya grid itu seperti tempat dimana kita akan meletakkan komponen-komponen layouting.

Pada awal pembuatan, grid kita masih kosong, sekarang kita akan mulai menyisipkan komponen-komponen. Kita mulai dengan text block

Cara memasukkan item bisa dengan toolbox ataupun koding secara manual, toolbox bisa kita temukan di sebelah kiri layar. Tetapi pada kesempatan ini saya akan koding manual.

<TextBlock x:Name="txt1" Text="hello world" FontSize="40" Margin="10,20,0,0"/>

x:name -> untuk menamai text kita

text  ->  apa yang akan kita isi di text block

fontsize  ->  menentukan ukuran font

margin  ->   menentukan jarak pada content, ada empat arah, mulai dari kiri, atas, kanan, bawah

dan begini hasilnya.

Stack panel adalah suatu fungsi yang berguna untuk menumpuk data. Sebagai contoh yaitu tumpukan roti atau tumpukan unag logam. Stack panel harus mempunyai kompunen di dalamnya agar terlihat hasil atau kegunaan dari stack panel. Kita coba untuk menulis hello world dalam jumlah banyak tanpa menggunakan stack panel.

<TextBlock x:Name="txt1" Text="hello world" FontSize="40" Margin="10,20,0,0"/>

<TextBlock x:Name="txt2" Text="halo dunia" FontSize="40" Margin="10,20,0,0"/>

<TextBlock x:Name="txt3" Text="world hello" FontSize="40" Margin="10,20,0,0"/>

<TextBlock x:Name="txt4" Text="dunia halo" FontSize="40" Margin="10,20,0,0"/>

Hasilnya akan menjadi seperti ini

Disini dapat kita lihat bahwa text yang kita buat akan saling tumpuk-menumpuk oleh sebab itu kita gunakan stack panel.

<StackPanel>

        <TextBlock x:Name="txt1" Text="hello world" FontSize="40" Margin="10,20,0,0"/>

        <TextBlock x:Name="txt2" Text="halo dunia" FontSize="40" Margin="10,20,0,0"/>

        <TextBlock x:Name="txt3" Text="world hello" FontSize="40" Margin="10,20,0,0"/>

        <TextBlock x:Name="txt4" Text="dunia halo" FontSize="40" Margin="10,20,0,0"/>

</StackPanel>

Dan hasilnya menjadi

Text yang kita input tidak akan saling tiban dan akan terlihat seperti tumpukan (stack)

Pembahasan selanjutnya adalah text box

Text box berupa kutak yang disediakan dan berfungsi untuk memasukkan input yang akan dilakukan oleh user, adapun disini kita menggunakan input scope untuk menentukan tipe keyboard apa yang keluar ketika kita tap text box tersebut.

<TextBox x:Name="tbx1" InputScope="Number"/>

Disini kita menggunakan inputscope number, apabila kita tidak mendeklarasikan inputscope maka keyboard yang akan keluar adalah default yaitu huruf

Oke, selanjutnya adalah button, seperti yang kita ketahui, button dalam bahasa indonesia berarti tombol, dan cara mendeklarasikannya adalah

<Button x:Name="btn1" Content="ini button" FontSize="40" Width="300" Height="100"/>

X:name  ->  mendefinisikan nama button kita

Content  ->  memberi isi(text) dari button

Fontsize  ->  ukuran text pada content button

Width  ->  lebar button

Height  ->  tinggi button

Dan hasilnya akan menjadi

Selanjutnya grid, grid seperti penjelasan diawal dapat kita definisikan menjadi beberapa baris dan kolom. contohya

<Grid>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="*"/>

            <ColumnDefinition Width="2*"/>

            <ColumnDefinition Width="3*"/>

        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

            <RowDefinition Height="2*"/>

        </Grid.RowDefinitions>

    </Grid>

<Grid.ColumnDefinitions>  ->  untuk mendeklarasikan bahwa grid tersebut mempunyai kolom

            <ColumnDefinition  ->  untuk memberikan definisi kolom

Width  ->  untuk mendeklarasikan leber kolom

<Grid.RowDefinitions>  ->  untuk mendeklarasikan bahwa grid tersebut mempunyai baris

<RowDefinition  ->  untuk memberikan definisi baris

Height  ->  untuk mendeklarasika tinggi baris

Untuk lebih jelasnya

Dalam gambar diatas hanya memiliki dua baris sedangkan kita memberikan tiga baris, mengapa bisa demikian? Karena height pada row satu = auto sehingga tingginya menesuaikan item pada row 1, disini kita tidak ada item pada row satu jadi kita coba tambahkan textblock dan begini hasilnya

Sekian untuk penjelasan kali ini semoga bermanfaat dan sampai jumpa di pembahasan selanjutnya.