‫Tekrar hoş geldiniz.
‫Bu videoda zemo'ya daha yakından bakacağız ve altta görebileceğiniz gibi zemo'nun bir tür
‫XML dili olduğunu örneklemek isteyebilirsiniz.
‫Ve aslında bunu daha da ileri götüreceğim.
‫Yani bir örnek, kullanıcı arayüzümüzü yazmamıza olanak tanır, böylece ilerleyip tüm öğeleri kullanıcı arayüzümüze sürüklememize
‫ve ardından orada ayarlamamıza gerek kalmaz.
‫Bunların hepsini kodla yapabiliriz.
‫Şimdi diyebilirsiniz ki, Oh, ben daha çok görsel bir adamım.
‫Devam etmek ve eşyaları içeri sürüklemek istiyorum ve bu benim için sorun değil.
‫Bunu yapabilirsiniz, ancak o zaman sadece sürüklemekle sınırlı kalırsınız.
‫Ve example ile çok şey ayarlayabilirsiniz ve sadece son videoda gördüğünüz bu sarma gibi şeyleri değil, çok daha fazlasını
‫yapabilirsiniz ve veri bağlamanın ne olduğunu, özelliklerin ne olduğunu, bağımlılık özelliklerini
‫ve benzerlerini göreceğiz, bunlar example ile yapabileceğiniz şeylerdir ve kolayca bakımı yapılabilen
‫çok harika kullanıcı arayüzleri oluşturmamızı sağlar.
‫Burada ilk olarak bu pencereyi görebilirsiniz.
‫Yani genel olarak sahip olduğunuz şey bir açılış etiketiniz ve bir kapanış etiketiniz olmasıdır.
‫HTML biliyorsanız, buna aşina olabilirsiniz.
‫Köşe destekleriniz var ve onları da kapatıyorsunuz.
‫Yani kelimeden küçük işareti ve ardından büyük işareti.
‫Pencerede ve burada da aynı şeyin olduğunu görüyorsunuz.
‫Bir de kapanışta, kelimeden hemen önce eğik çizgi var.
‫Yani bu ızgara için de, pencere için de, başka herhangi bir şey için de aynıdır.
‫Örneğin bir düğme kullanmak istersem, devam edebilir ve bunu yapabilirim.
‫Ve eğer büyüktür işaretini kullanırsam, otomatik olarak kapanış etiketini oluşturur.
‫Şimdi yapabileceğim şey, burada gördüğünüz gibi açılış etiketinin içinde tüm ayarlamaları yapabilirim, düğme,
‫devam edebilir ve örneğin ona içerik ekleyebilirim.
‫Gördüğünüz gibi birçok farklı özellik var.
‫Sadece content özelliğini kullanacağım ve Click Me gibi bir şey kullanacağım.
‫Şimdi gördüğünüz gibi ortada bir düğme var ve üzerinde "Bana tıklayın" yazıyor.
‫Elbette bir yüksekliğimiz yok, bir genişliğimiz yok.
‫Bu tür özelliklerin hepsi henüz söylenmedi.
‫Ama diyelim ki bu düğmenin 50 piksel yüksekliğinde olmasını ve gördüğünüz gibi 100 piksel genişliğinde olmasını istiyorum.
‫Şimdi, bu benim oluşturduğum düğme.
‫Elbette bunu sürükleyebilirdim, ancak bunu bir örnek olarak yapmak oldukça faydalı.
‫Peki şimdi ne olacak?
‫Henüz çok fazla değinmediğim bir konu.
‫Ve bu da kursun ilerleyen aşamalarına kadar gerekli olmayacak.
‫Ancak genel olarak burada görebilecekleriniz X ve L ve S'dir.
‫Bunun açılımı XML ad alanıdır ve XAML Genişletilebilir Uygulama Biçimlendirme Dili anlamına gelir.
‫Bunu da buraya eklememe izin verin.
‫Bir yorum ekleyelim.
‫Böyle bir yorum kullanacağım.
‫Gördüğünüz gibi, burası artık yeşil ve bu hemen hemen bir yorum.
‫Yani buraya XAML genişletilebilir bir uygulama biçimlendirme dilidir
‫gibi bir şey yazabilirim.
‫Tamam.
‫Gördüğünüz gibi düğme burada.
‫Şimdi devam edelim ve düğmelerle birkaç şey daha yapalım.
‫O halde bazı ek düğmeler oluşturalım.
‫Lütfen devam edin ve başka bir düğme oluşturun.
‫Tamam.
‫Umarım denemişsinizdir.
‫Burada düğme adını veya anahtar kelimeyi kullanmanız ve ardından devam edip ek düğmeyi oluşturmanız yeterlidir.
‫Şimdi merak edebilirsiniz, oh --, doğru konumlandırılmıyor.
‫Yani bu düğmeye sahibim ve içeriği şu şekilde.
‫Merhaba.
‫Peki şimdi neden?
‫Nerede şimdi bu beni tıkla düğmesi?
‫Izgaranın içinde ve kayboldu çünkü bir ızgara kullanıyoruz, böylece düğmeler birbirinin
‫üstünde görünmüyor vb.
‫Yani bunu denediyseniz, gördünüz ve daha sonra ızgaralara da bakacağız.
‫Ama şimdilik sadece bunu göstermek istedim.
‫Tamam.
‫O zaman bu düğmeden tekrar kurtulalım.
‫Şimdi bu beni tıkla butonuna sahibiz ve uygulamayı çalıştıralım, böylece gerçek hayatta
‫nasıl göründüğünü ve tüm bu şeyin sadece üzerine tıklayarak hayatımızı nasıl güzelleştirebileceğini görebiliriz.
‫Gördüğünüz gibi, üzerine gelebiliyorum ve rengi değişiyor ve üzerine tıklayabiliyorum
‫ve bu küçük tıklama animasyonunu yapıyor ve hepsi bu.
‫Ancak tıkladığınızda hiçbir şey olmaz ve tıklama işlevini uygulamanın birden fazla yolu vardır
‫ve bunu daha sonra yapacağız.
‫Tamam.
‫Örnek olarak bir düğmeyi bu şekilde oluşturabiliriz.
‫Şimdi, burada erişebileceğimiz çok sayıda ek öğe veya özellik var.
‫Örneğin, yazı tipi boyutu özelliğine erişebilir ve yazı tipi boyutunu diyelim ki 32'ye çıkarabiliriz.
‫Şimdi düğme metin kadar geniş değil, bu yüzden genişliği ayarlayalım.
‫Şimdi yine sorun yok, düğmenin tüm metnini görebiliyoruz.
‫Ancak yazı tipi boyutu ve tüm bu unsurlarla oynadığınızda, yine de uyum sağlamasına dikkat etmeniz
‫gerekir.
‫Şimdi yapabileceğiniz şey, içeriği buraya içerik özelliğine eklemek yerine, basitçe düğme
‫etiketlerinin içine ekleyebilirsiniz.
‫Bu yüzden burada Click Meet gibi bir şey söyleyeceğim ve gördüğünüz gibi orada.
‫Yani etiketler arasındaki içerik, içeriğinizin bulunduğu yerdir.
‫Bu da yapmanın bir yolu.
‫Diğeri ise, daha önce gördüğümüz gibi, burada içerik özelliğini kullanmak ve metni bu şekilde atamaktır.
‫Şimdi, düğmeyi bu şekilde hemen kapatırsanız bu kapatma etiketi düğmesi gerekli değildir, böylece düğmeyi bu şekilde
‫daha kısa bir şekilde kapatabilirsiniz.
‫Bu yüzden kapatma etiketi düğmesine ihtiyacınız yoktur.
‫Düğme tasarlamanın bir başka yolu da aşağıdaki gibidir.
‫Yani böyle bir şey görürseniz, bu da tamamen sorun değil.
‫Böylece düğmeyi, etiketi, kapanışı ve açılışı oluşturursunuz ve burada düğme noktanız vardır ve ardından devam edip istediğiniz
‫tüm farklı özellikleri ayarlayabilirsiniz.
‫Gördüğünüz gibi, örneğin yazı tipi boyutu gibi erişebileceğimiz
‫birçok farklı özellik var.
‫Böylece yazı tipi boyutunu örneğin 72 olarak ayarlayabilirim.
‫Ayarlamak istediğim bir diğer düğme özelliği de diyelim ki içerik.
‫Böylece devam edebilir ve sadece içeriği orada gizleyebilirim.
‫Şimdi 72 punto büyüklüğünde kocaman bir düğme görüyorsunuz ve üzerinde Merhaba yazıyor.
‫Bu da iki numaralı yaklaşım.
‫Ve hatta yapabileceğiniz başka bir şey daha var.
‫O halde bu düğmeyi daha da ileri ayarlayalım.
‫Diyelim ki içerik olarak sadece bir Merhaba metni olsun istemiyorum.
‫Daha da ileri gitmek istiyorum.
‫Bir temsilci paneli eklemek istiyorum.
‫Şimdi, bir rep panelinin yaptığı şey, tüm kontrollerini veya öğelerini soldan sağa doğru yan yana sıralamaktır.
‫İlk öğe, diyelim ki bir metin bloğu olacak.
‫Ve bunların hangi metin blokları olduğunu gördük?
‫Basit bir metin ve bu çok şey söyleyecek.
‫Şimdi başka bir metin bloğuna ve üçüncü bir bloğa ihtiyacım var.
‫Şimdi üç kez multi yazıyor.
‫Ancak şimdi yapabileceğim şey, her bir yönün veya her bir metin bloğunun rengini ayarlayabilmek.
‫Diyelim ki bunu mavi olarak değiştirdim, o zaman bu ön plana sahip olur.
‫Yani ön plan rengi ön plan rengidir ve bu kırmızı olacaktır.
‫Ve son olarak, son metin bloğumun ön planı beyaz olacak.
‫Ve şimdi çoklu, çoklu, çoklu yerine çok renkli düğme yazıyor.
‫Ve şimdi belki de yazı tipi boyutunu biraz ayarlamak istiyoruz.
‫Daha küçük yapalım.
‫Ayrıca, gördüğünüz gibi ilk düğme gizlidir çünkü ızgara yalnızca son öğeyi görüntüler.
‫Eğer doğru ızgara yapısına atanmamışlarsa, ki bunu daha sonra göreceğiz, sahip olduğumuz ilk
‫düğmeden kurtulalım.
‫Şimdi de bir düğme boyutu belirleyelim.
‫Şimdi devam edelim ve düğme nokta genişliğini kullanalım, bu da diyelim ki 200 olsun.
‫Ve yüksekliği 100 olacak bir düğme.
‫Ve işte böyle.
‫İşte buradayız.
‫Ve yazı tipi boyutu her şeyi sığdırmak için çok büyük.
‫Eğer devam eder ve bunu 24 ile yaparsak, şimdi orada.
‫Yani kodu çalıştırırsam, içinde birden fazla farklı metin bloğu olan çok renkli bir düğme elde edeceğim.
‫Ve işte buradayız.
‫Gördüğünüz gibi, bunu yapmanın birden fazla farklı yaklaşımı var.
‫Birden fazla yönü içine sarmak istiyorsanız, bu temsilci panelini kullanabilirsiniz.
‫Hatta düğme içinde bir ızgara kullanabilir ve düğmenizin içinde birden fazla farklı, farklı kontrol oluşturmak
‫için ızgara etiketini kullanabilirsiniz.
‫Ancak bu daha sonra ele alacağımız bir konu.
‫Şimdilik sadece anlamanız önemli.
‫Bu örnek, sürükleyip bırakmak zorunda kalmadan ve ayrıca şeylerin nasıl göründüğü ve ne yaptıkları üzerinde tam kontrol
‫sahibi olarak hedefinizle birçok süslü şey yapmanıza olanak tanır.
‫Şimdi yapacağım şey, bunu yorumlayacağım ve size burada kodla gördüğümüzün aynısını nasıl yapacağınızı
‫göstereceğim, çünkü bunu örnek kodla gördük, ancak bunu arkadaki kodda da
‫yapabiliriz, yani C sharp'ta, şimdiye kadar tüm sınıf veya tüm kurs için öğrendiğimiz
‫gibi.
‫Şimdi kodun arkasına geçelim.
‫Gördüğünüz gibi, burada açtığımız bir nokta örnek dosyası var, XML'in ana penceresi
‫ve her örnek dosyasının arkasında bir nokta örnek nokta CSS dosyası olan bir kod dosyası var ve bu bir C-sharp dosyası,
‫yani burada şimdi kullanıcı arayüzümüzü ayarlamak veya oluşturmak için kullanabileceğimiz bir C
‫sharp kısmi sınıfımız var.
‫Gördüğünüz gibi buna Ana Pencere deniyor ve window'tan miras alıyor.
‫Ve burada, şimdiye kadar gördüğümüz konsol uygulamalarımızdaki main yöntemine benzeyen Main Window
‫adlı bir yöntemimiz var.
‫Bu pencere açılır açılmaz veya uygulama başlatılır başlatılmaz çağrılır.
‫Burada görebileceğiniz gibi, penceremizin çalışması için gereken diğer her şeyi başlatan
‫initialize bileşeni çağrılmıştır.
‫Örneğin, bu başlığı başlatır ve boyutu ve benzerlerini başlatır.
‫Şimdi devam edebilir ve buraya kendi kodumuzu yazabiliriz.
‫Bu yüzden size önce bir düğmenin nasıl oluşturulacağını göstereceğim.
‫Bu yüzden öncelikle, bu düğmeyi atayabileceğimiz bir kılavuza ihtiyacımız var.
‫Bu yüzden buna yeni bir ızgara olan ızgara adını vereceğim.
‫Ardından bunun içeriğini, basitçe söylediğim gibi ana pencereyi oluşturacak olan ızgarama ayarlıyorum.
‫Örnek dosyada gördüğümüz gibi, bazı içeriklere sahip olmalıdır.
‫Buradaki pencere etiketi açılır ve bu açılış ve kapanış etiketleri arasında kalan her şey benimdir, yani hemen hemen buradaki
‫tüm içeriktir.
‫Bu benim penceremin içeriği.
‫Ve burada söylediğim şey, bu nokta içeriğinin ızgara olması gerektiğidir.
‫Böylece burada gördüğümüz gibi yeni bir ızgara oluşturuyoruz.
‫Burada da bir ızgaramız var, bu ızgaranın açılış ve kapanış etiketi burada ve şimdi.
‫Bunu içerik olarak ayarladım ve şimdi bu kılavuza bir şeyler ekleyebilirim.
‫Örneğin, ızgaraya bir düğme ekleyebilirim.
‫Her şeyden önce, bu düğmeyi oluşturalım ve BTN adını vereceğim yeni bir düğme olacak.
‫Şimdi o düğmeye sahibim ve özelliklerini ayarlayabilirim.
‫Diyelim ki düğmemin yazı tipi boyutunu ayarlamak istiyorum ve bunu basitçe yapabilirim.
‫Basitçe 26 gibi bir şey olacağını söyleyebilirim.
‫Şimdi düğmemizde, burada gördüğünüz gibi, düğmenin içeriği olan bir sarma panelimiz vardı.
‫Şimdi yapacağım şey, bir sarma paneli oluşturmak.
‫Wrap panel ve ben buna wrap panel diyeceğim, yeni bir wrap panel olacak.
‫Şimdi, sarma paneline bir şeyler ekleyebiliriz.
‫Düğmeye wrap panelini ekliyoruz ve yarasa düğmesini ızgaraya ekliyoruz.
‫Ve ızgara zaten içeriğimizin bir parçası.
‫Şimdi devam edelim ve wrap paneline eklemek istediğimiz tüm öğeleri oluşturalım ve buna ekleyelim.
‫Bu yüzden önce bir metin bloğuna ihtiyacımız var.
‫Ve metin bloğu, burada gördüğünüz gibi, buradaki bloktur.
‫Böylece 1 ila 3 metin bloğu oluşturuyoruz.
‫İlki t t olacak yeni metin bloğu olacak ve ben basitçe t t nokta metin diyorum.
‫Bu yüzden bir metin özelliği vardır, buradaki metin içeriktir.
‫Dolayısıyla, düğme için içerik content olarak adlandırılır ve metin bloğu için metnin kendisi text olarak adlandırılır.
‫Böylece metin bloğumuzun text özelliğine erişiyoruz ve bunu multi olarak ayarlıyoruz, ardından rengi ayarlıyoruz.
‫Yani metin noktası ön plan fırçalar olacak diye düşündüm ve çoklu için ilk olarak hangi renge sahiptim, maviydi.
‫Pekala, bunu mavi yapacağım ve gördüğünüz gibi, fırçalar iyi metin fırçalarla yapılır, bu nedenle metnin
‫rengi fırçalar sınıfıyla yapılır.
‫Bu yüzden bu fırçayı sınıf olarak kullanmam ve ardından rengine erişmem gerekiyor.
‫Yani düz renk fırça tipi fırçalar.
‫Daha sonra bunu sarma paneline ekleyebilirim.
‫Artık metne sahip olduğuma göre, onu kaydırma paneline ekleyebilirim ve bunu da alt öğe olarak
‫erişip metnimi ekleyerek yapıyorum.
‫Bu şekilde bir metin bloğu ekliyorum ve bunu hiçbir şey çalıştırmazsak henüz hiçbir şey göremeyiz çünkü kırmızı paneli henüz
‫düğmeye eklemedik ve düğmeyi de ızgaraya eklemedik.
‫Ama bunu birazdan yapacağız.
‫Şimdi devam edelim ve metni ayarlayalım ya da aslında bu üç parçayı tekrar ayarlayalım.
‫Şimdi yapacağımız şey metni çoklu renge ayarlamak ve sonuncusu düğmeydi ve şimdi kırmızı rengimiz
‫ve beyaz rengimiz vardı.
‫Ben de aynı oldukları için bu üç satırı kopyalayıp yapıştırdım.
‫Her seferinde yeni bir metin bloğu oluşturmama gerek yok, sadece eskisini ekliyorum ve sonra onu ayarlıyorum.
‫Veya değerlerini ayarlayın.
‫Ve sonra tekrar ref paneline ekliyorum.
‫Şimdi bu üç metin temsilci panelimde ve şimdi yapabileceğim şey temsilci panelini ekleyebilmek.
‫Düğmeme.
‫Bu yüzden içerik düğmesi benim sarma panelim olacak.
‫Ve son olarak ızgara nokta çocuk nokta ekle.
‫Ve buraya düğmemi ekliyorum.
‫Ben de bundan bahsediyordum.
‫Yani ızgaramız var, düğmemiz var, kaydırma panelimiz var.
‫Ve şimdi bu metinleri kırmızı panele ekliyoruz.
‫Kırmızı paneli düğmeye ekledik, düğmeyi ızgaraya ekledik ve ızgarayı pencereye ekledik.
‫Ve gördüğünüz gibi, bunu kodla bu şekilde yapabilirsiniz.
‫Kodu çalıştırmadan önce yapmam gereken şey aslında ızgarayı da yorumlamak.
‫Yani ben.
‫Aslında sadece pencere olabilir.
‫Yani ana penceremizde sadece pencere var.
‫XML dosyası ve diğer tüm kodlar, zamalek'in arkasındaki kod olan ana penceremizin içindedir.
‫Yani bu dosya ana pencere XAML'ımızın arkasındaki koddur.
‫Şimdi bunu test etmeden önce eksik olan bir şey var ve o da metnime yeni bir metin bloğu atamam.
‫Bu yüzden her iki metnim için de bunu yapmam gerekiyor.
‫Yani burada metin oluşturduk ve yeni metin bloğuyla başlattık ve şimdi yeni
‫bir metin bloğu oluşturmamız ve bunu kaydırma panelimize eklemeden önce metnimize atamamız gerekiyor.
‫Şimdi elimizde bu var, kodu çalıştırabiliriz.
‫Ve çok renkli düğmemize de sahip olduğumuzu göreceğiz.
‫Gördüğünüz gibi, daha önce Zemo ile yaptığımız şeyin aynısını burada da yaptık,
‫bu da oldukça basit ve düzgün görünüyor.
‫C-sharp koduyla böyle yaptık.
‫Şimdi tercih ettiğiniz yoldan gidebilirsiniz, ancak biz esas olarak zemo ile çalışacağız.
‫Size sadece XAML ile yaptığınız her şeyi arkasındaki kodla da yapabileceğinizi göstermek istedim, ancak bazen
‫arkasındaki kodu kullanmak çok daha mantıklıdır.
‫Örneğin, bir şeyi dinamik olarak ayarlamak istiyorsanız, arkasındaki kod daha mantıklıdır.
‫Bu yüzden C sharp ile çalıştırmak veya ayarlamaları C-sharp ve Zemo ile yapmak, statik kullanıcı arayüzleriniz
‫olduğunda daha mantıklıdır.
‫Ve bu arada, burada olduğu gibi bu XAML dosyasını oluşturduğunuzda, yaptığı şey devam etmek ve dosyanın
‫arkasında bu kodu oluşturmaktır.
‫Yani basitçe bu kodu oluşturur ve uygulama çalışmaya başladığında çalıştırır.
‫Ana penceremiz çağrıldığında.
‫Yani yine de yapıldı.
‫Ve bunu XAML ile bu şekilde yaparız veya kodu oluşturarak manuel olarak yaparız.
‫Şimdi elbette şunu iddia edebilirsiniz, hey, bu genişlik ve ayarlamadığınız kenar gibi bir şey
‫var.
‫Bunu burada çok kolay bir şekilde yapabilirim.
‫Örneğin, basitçe şu genişlikte düğme diyebilir ve bunu 150 olarak ayarlayabilirim ve şu yükseklikte düğme diyebilir ve bunu 100 olarak
‫ayarlayabilirim.
‫Ardından düğme buna göre ayarlanacaktır.
‫Ve şimdi görebileceğiniz gibi, iki satıra yayılmış durumda.
‫Tamamdır.
‫İşte Zemo ve arkasındaki kod.
‫Uzun bir video olduğunu biliyorum, ancak bir sonraki videoda daha da süslü havalı WPF şeyleri göreceğiz.
‫Orada görüşürüz.