UWP – Grid Layout

Universal Windows Platform programlamaya ilk olarak Layoutlar ile başlayalım. Kelime olarak “Layout” yerleşim planı demek.Biz bu layoutları ne için kullanacagız.Biz uygulamamızın bileşenlerini nasıl ve nerede görüneceklerini layoutlar aracılıgıyla belirliyor olacagız.
Bunlardan ilki Grid Layout bize tablolar yaratarak, uygulamamızın bileşenlerini satır ve sütün olarak konumlandırabilecegimiz bir dizilim yaratmamızı saglar.Bunu htmldeki etiketi ya da androiddeki gridview yapısına benzetebiliriz.Ekranı bir dikdörtgen şeklinde olan telefonumuzu 4  parçaya bölerek bunlardan ilkine kırmızı , ikincisine sarı, dördüncüsüne siyah , üçüncüsü ise boş kalacak şekilde bir grid yapısı oluşturalım.

File -> New -> Project yolunu izleyerek yeni proje yaratma sayfasından Blank App(Universal Windows) seçenegini seçelim.Projemize isim verelim.

uwp grid layout

Projemizde MainPage.xaml hali hazırda bir Grid ile geliyor zaten. gelin buna satır(row) ve sütün(column) ekleyerek oluşturmak istediğimiz grid yapısını kodlayalım.

mainpage.xaml

<Page
    x:Class="Grid_Layout.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Grid_Layout"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>  
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Rectangle Fill="Red"/>
        <Rectangle Fill="Yellow" Grid.Row="0" Grid.Column="1"/>
        <Rectangle Fill="Black" Grid.Row="1" Grid.Column="1" />
    </Grid>
</Page>

En sonunda elde edecegimiz görüntü aşağıdaki gibi olacaktır.burada dikkat etmemiz gereken row ve column indexleri 0 ile başlıyor ve kırmızı hücremiz için [0,0] index’ini yazmamıza gerek yok çünkü ön tanımlı olarak geliyor.Yükseklik(Height) ve Genişlik(Width) içinse şimdilik “*” ile tüm ekrana sıgdır şeklinde verdik.Grid yapısını ileride de  bir çok yerde kullanacagız.

uwp grid layout örnegi

Bir Cevap Yazın