17/2/2009
Merhaba Expression Blend’i öğrenmeye devam ediyoruz. Tüm bunların sonunda Blend ile ara yüz geliştirmeyi öğrenmiş olacağız. Belki windows uygulaması için ara yüz hazırlayacağız ama benim için en önemlisi SilverLight site için ara yüz yapabiliyor olacağız. Expression Blend 2 Text işlemleri ile devam ediyoruz.
Başlayalım. Çalışmamıza text koyabilmek için Toolbox’da ki TextBox ikonunu kullanıyoruz. Bu ikona basılı tuttuğunuzda hzır text kontrolleri menü olarak açılır.
İlk önce düzenlenemez, seçilemez text kontrollerimizi gözden geçirelim. Bunlardan ilki TextBlock.
TextBlock’u seçtikten sonra çalışma alanında istediğiniz boy için mouse u sürükleyin ve yazınızı yazın. Text kontrolleri içinde görünümler Properties tabı altından yönetilir. Alttaki imaj da yazının rengini kırmızı yapılması açıklanıyor.
Properties tabında text için özellikler kutucuğu bulunmaktadır. Buradan text, paragraf ve listeleme özelliklerini yönetebilirsiniz.
Font tipini belirleyebilirsiniz.
Font boyutunu belirleyebilirsiniz.
Yazınızı kalın, eğik ya da altı çizgili yapabilirsiniz.
Text kutucuğunun altındaki oka basarak ileri özellikleri açabilirsiniz.
Örneğin buradaki FontWeight yazının kalınlığı ile ilgilidir ama çok daha fazla seçenek sunmaktadır.
Bir diğer seçilemez, düzenlenemez text seçeneğimiz “Label” dır. Label’ın TextBlock’a göre işlevsel farkları vardır ve bu sebeple programcıların daha fazla tercih ettikleri bir kontroldür.
Şimdi input (girdi) yapabileceğimiz Text kontrollerini gelelim. Elbette bunlar içinde en çok bileneni ve kullanılanı “TextBox” dır.
TextBox ı seçip çalışma alanında sürükleyip bırakıyoruz.
Karşımızda bilinen 3D görünümlü text box.
F5 ile projeyi çalıştırıp text box ınızı kontrol edebilirsiniz.
Elbette TextBox içinde Properties altında özellikler mevcuttur. Burada farklı olarak BorderBrush bulunmaktadır. TextBox’ın borderlarına verilen Gradient renk geçişlerine dikkat edin. Bu TextBox’a 3D görünümünü veren özelliktir.
“RichTextBox” bir diğer input özellikli kontroldür.
İlk bakışta TextBox’ın aynısıdır.
Fakat TextBox’a göre daha fazla özelliği bulundurmaktadır. Örneğin RichTextBox a sağ klik yapıp Edit Text’i seçerseniz.
Örneğin Rich yazısını seçip Properties tabından rengini kırmızıya çevirebilirsiniz.
Arka tarafta olanları görmek için XAML tabına basın.
İşte RichTextBox’ı editledikten sonra ortaya çıkan XAML kodu.
PassworBox’da bir diğer özellikli Text Box dır.
Buraya yazdığınız harfler güvenlik için gizlenir.
PasswordBox’ın gelişmiş özelliklerinde gizleme işlemi sırasında görünecek karaktere karar verebilirsiniz.
Örneğin ben yuvarlak yerine yıldız kullandım.
İşte sonuç.
Toolbox menüsündeki son kontrol “FlowDocumentScrollViewer” dır.
Fakat biz bu kontrolün farklı bir versiyonunu kullanacağız. Toolbox daki “Asset Library” ikonuna tıklıyoruz.
Açılan pencerede “System Controls” u seçiyoruz.
“Show All” kutucuğunu işaretleyince, System Control altındaki tüm WPF kontrolleri açılmış oluyor.
Bunlardan “FlowDocumentReader” ı seçip çalışma alanında sürüklüyoruz.
Kontrolümüz hazır.
İçerik konulmuş hali.
XAML kodu
Bu kontrolü ilerideki çalıştığım projelerde kullanmayı şiddetle düşünüyorum. Çok başarılı. Belirlediğimiz alana sığmayan içeriği sayfalıyor. Sayfalar içinde yolculuk etmemizi sağlıyor.
İçeriği iki sütun halinde gösterebiliyor.
İçeriği tek sayfada scroll’ayabiliyor.
İçeriğe zoom yapabiliyor.
İçerik içinde arama yapabiliyor.
Bazı durumlarda textleri path’e çevirmemiz gerekir. Yani sadece bir grafik objesi olarak kullanmak durumunda kalabiliriz. Bunun için textinizi yazarsınız.
Text seçiliyken ana menüde Object>Path>Convert to Path ile texti path’e çevirebilirsiniz.
XAML’de kendini buna göre ayarlar.
Artık normal bir grafik objeniz var.
Bu makalede Expression Blend 2’de text konularını inceledik
İyi çalışmalar
Teşekkürler.
