Bugün sizlerle basit bir arayüz ile navigation menü nasıl yapılır ? sorusunun cevabını öğreneceğiz.

Tasarım ve görsel açıdan kendi isteğinize göre şekillendirebilirsiniz...


Adım-1

Oluştur kısmından "Boş bir tuval ile başlayın" seçeneğini seçiniz...

Adım-2

Tablet boyutunu seçerek uygulamamıza giriş yapacağız.

Adım-3

Uygulamanın App kısmının Onstart Seçeneği seçiniz...

Adım-4

Editör alanına aşağıdaki kodu yazınız...

ClearCollect(
        colNavigationMenu,
        {
            Row: 1,
            Title: "Anasayfa",
            Image:Icon.Home,
            ScreenName: 'Anasayfa'
        },
        {
            Row: 2,
            Title: "Profil",
            Image: Icon.Person,
            ScreenName: 'Profil Ekranı'
        },
        {
            Row: 3,
            Title: "Kütüphane",
            Image: Icon.Notebook,
            ScreenName: 'Kütüphane Ekranı'
        },
        {
            Row: 4,
            Title: "Uygun Kitaplar",
            Image: Icon.AddLibrary,
            ScreenName: 'Uygun Kitaplar Ekranı'
        },
        {
            Row: 5,
            Title: "SSS",
            Image: Icon.Message,
            ScreenName: 'SSS Ekranı'
        },
        {
            Row: 6,
            Title: "İletişim",
            Image: Icon.Mail,
            ScreenName: 'İletişim Ekranı'
        }
    )


Adım-5

Sayfaya bir Dikey Galeri ekleyin 

Adım-6

Galerinin Layout kısmını "Boş" olarak belirleyip devam edelim.

Adım-7

Galeri seçiliyken Pozisyon ve boyut oranlarını ekrandaki gibi yazdıktan sonra bir sonraki adıma geçebilirsiniz.

Adım-8

Bu arada artık yavaş yavaş geçiş yapmak istediğimiz sayfaları yeni sayfa kısmından ekleyerek bu adımıda tamamlıyoruz.

Adım-9

İhtiyacımız olan sayfaları ekledik

Adım-10

Galerimiz seçiliyken Ekle kısmından Home ikonumuzu seçip ekliyoruz. İcon seçiliyken Editör kısmına;

ThisItem.Image

yazdıktan sonra 




Adım-11

Galeri seçiliyken Items kısmına;

colNavigationMenu 

yazıyoruz.



Adım-12

Bu adımda Ekle kısmından "Hamburger menu" ikonunu seçerek uygun bir yere yerleştirelim.

Adım-13

İkon seçiliyken "OnSelect" kısmına;

Set(IsExpand,!IsExpand)



Adım-14

Metin Etiketini seçip Text kısmına ThisItem.Title yazın Sonrasında Visible kısmına ise ;
IsExpand
yazın.

Adım-15

Bir Buton ekleyin ve Fill kısmına 
RGBA(0,0,0,0)
 yazın.

Adım-16

Butunun HoverFill kısmınada

Self.Fill 
 olarak değiştirin.

Adım-17

Galeri seçin ve TemplateFill kısmına;

If(ThisItem.IsSelected, RGBA(221, 221, 222, 1), RGBA(0, 0, 0, 0))
yazın.

Adım-18

ve Width kısmına da ;

If(IsExpand,214,70)
yazıyoruz.

Adım-19

OnSelect kısmına'da;

Navigate(ThisItem.Screen)

yazıyoruz.

Adım-20

Son adım olarak yeni bir Galeri veyahut bir kapsayıcı resim yada herhangi birşey eklediğinizde X Kısmına en menünün ait olduğu galerinin ismini belirterek;

Gallery3.Width

Kodumuzu tamamlıyoruz.


ve sonunda bitti :)

Aklınıza takılan bir yer olursa yada başka  bir sorunuz lütfen iletişim kısmında yada sosyal medya hesaplarım üzerinden iletişime geçebilirsiniz... Mutlu Haftalar...