Silverlight tarafında en sık ihtiyaç duyduğumuz ve benim de en çok karşılaştığım sorulardan biri eldeki nesnelerin bir yol üzerinde konumlandırılması oluyor. Belki de bu soruyu özellikle hatırlamamın nedeni Silverlight 4'e kadar güzel bir cevabımın olmamasıydı :) Silverlight ile beraber güzel bir kontrol geliyor, adı da PathListBox. İşte bu yazımızda PathListBox'a göz atacağız.

PathListBox'ın aslında özünde normal bir ListBox'tan farkı yok. Yani farkı derken eksiği yok fazlası var. Normal bir ListBox gibi kullanılırken ek özellikler sağlayabiliyor. Bunların en temeli ise elindeki ListBoxItem'ları (ki PathListBox senaryosunda bunlar PathListBoxItem oluyor) belirli bir Path / yol üzerine yerleştirebiliyor olması.

PathListBox yollarında...

Yukarıdaki ekran görüntüsünde de görebileceğiniz üzere örnek uygulamamızda basit bir Ellipse var. Bu ellipsin üzerine sağ tıkladığımızda "Path / Make Layout Path" komutunu verdiğimiz gibi karşımıza bir PathListBox geliyor. PathListBox'ın yanı sıra tabi ki Ellipse de sahnede durmaya devam edecek. Burada önemli olan nokta artık söz konusu Ellipse'in PathListBox'ın Item'larını üzerine koyacağı yolu referans veriyor olması. Yani PathListBox'ın Ellipse ile güzel bir ilişki içerisinde :)

Bu işlemi yaptıktan sonra hemen PathListBox'a bir isim verip kod tarafında dummy itemlar ekliyoruz. Bu arada Ellipse'in Opacity değerini de %10'a alıyorum ki şimdilik örnekte neler olduğunu görelim. Normalde Ellipse'i tamamen görünmez yapmak gerek hatta PathListBox'ın arkasına atmayı da unutmayın ki PathListBox'ın tıklanmasını engellemesin.

[VB]

Partial Public Class MainPage
    Inherits UserControl
 
    Public Sub New()
        InitializeComponent()
    End Sub
 
    Private Sub MainPage_Loaded(ByVal sender As Object,
                                ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
        For index = 1 To 10
            pListBox.Items.Add(index)
        Next
    End Sub
End Class

[XAML]

    <Grid x:Name="LayoutRoot"
          Background="White">
        <Ellipse x:Name="ellipse"
                 Margin="91,48,113,57"
                 Stroke="Black"
                 StrokeThickness="7"
                 Opacity="0.1" />
        <ec:PathListBox x:Name="pListBox"
                        Margin="91,48,113,57">
            <ec:PathListBox.LayoutPaths>
                <ec:LayoutPath SourceElement="{Binding ElementName=ellipse}"
                               Orientation="OrientToPath" />
            </ec:PathListBox.LayoutPaths>
        </ec:PathListBox>
    </Grid>

XAML koduna özellikle dikkat ederseniz dışarıdaki Ellipse'in ismi ile bir LayoutPath yaratılıp PathListBox'ın LayoutPaths kolleksiyonuna eklendiğini görebilirsiniz. İşte bir önceki adımda bahsettiğimiz ilişki buydu. Element Binding ile eldeki Ellipse'in LayoutPath'e SourceElement olarak verilmiş durumda.

PathListBox denememiz...

Yukarıdaki örneğe bakarken bir ListBox ile karşı karşıya olduğunuzu unutmayın :) Her sayı tek tek seçilebilir durumda. Sayı ekleyip çıkarma durumunuzda doğrudan Path üzerine eklenip çıkarılacak. Daha da güzeli var aslında :) Eğer isterseniz PathListBoxItem'ların merkez noktaya göre yönlerini değiştirmelerini sağlayabilirsiniz. Tek yapmanız gereken Orientation özelliğini OrientToPath olarak değiştirmek.

OrientToPath

Böylece artık her bir Item Ellipse'e göre yönünü değiştirecek üzerine bir de Distribution özelliği "Even" yaparsanız sürekli olarak eşit aralıklarla nesneler Path / yol üzerine dağıtılacaktır.

Yeni Item'lar ekleyin bakalım neler olacak.

Son olarak PathListBox'ın Start ve Padding özellikleri de güzel sonuçlar almanızı sağlayabilir. Start özelliği ile PathListBoxItem'ın PathListBox içerisinde nerede bulunacağını ayarlar. Bu değeri değiştirdiğinizde animasyonumsu hareketler yaratabilirsiniz hatta bu değerleri animasyonlarda değiştirirseniz aslında :) istediğiniz animasyonu da yapmış olursunuz.

Aşağıdaki örnekte Slider kontrolünün değeri doğrudan Start değerine bind edilmiş durumda. Elle siz Slider'ı değiştirdikçe aslında PathListBox'ın Start değerini değiştirmiş oluyorsunuz. Ayrıca sol alt düğme de Start değerini anime eden bir animasyona bağlı.

Start özelliğini anime ediyoruz.

Sanırım bu noktadan sonra PathListBox ile neler yapılabileceğini hayal etmek zor değil :) Aslında bir ListBox olsa da sanırım çoğunlukla PathListBox çok daha farklı işler için kullanılacak :) Nitekim bir Path etrafında nesneleri anime etmenin şu an için hem tek hem de en kolay yolu gibi duruyor.

Son olarak gelin bir de Padding özelliğine göz atalım. Padding özelliği nesneler arası mesafeyi belirliyor. Tabi bunun için PathListBox'ın Distribution özelliği Even değil Padded olmalı. Sonrasında aynı Start özelliği gibi Padding'i de anime edebilirsiniz.

Start özelliğini anime ediyoruz.

Hem Padding hem de Start'ın beraber anime olabileceğini de unutmamak gerek tabi ki :) Şimdi tüm bunların üstüne Ellipse'i de tamamen şeffaf hale getirirseniz ve tabi PathListBox'ın içinde sayılar değil de daha güzel görseller yer alırsa iş çok daha farklı yerlere gidecektir diye tahmin ediyorum.

Hepinize kolay gelsin!

Örnek Kaynak Kod : 05092010_7.rar (44,48 KB)

Geçen haftalarda Microsoft ofisinde iş ortakları için özel olarak düzenlenen bir seri seminerin son parçasını da sizlerle paylaşıyorum. Bu defa Expression Studio'da Design ve Blend, Sketchflow taraflarına değiniyoruz.

Yukarıdaki videoyu bilgisayarına indirmek isteyenler blogumun SeminerTV bölümünden faydalanabilirler.

İyi seyirler...

Koca bir INETA NEXT serisi bitti! :) Bu hafta sonu gerçekleştirdiğimiz Denizli etkinliği ile beraber 2009'ın NEXT serisine son vermiş olduk. Diyarbakır, İstanbul, Kayseri ve Denizli turumuz INETA kapsamında tüm sosyal topluluklar ve editörleri ile beraber son iki yılda gerçekleştirdiğimiz en büyük hareket oldu. Tüm bu seri boyunca katkıda bulunan INETA sosyal topluluklarımıza ve sevgili konuşmacılarımıza ÇOK teşekkürler.

Muammer Benzeş (birliktegelistir.com)
Erkan Balaban (Ceviz.net)
Oğuz Yağmur (csharpnedir.com)
Uğur Umutluoğlu (nedirtv.com)
Barış Kanlıca (yazgelistir.com)
Burak Selim Şenyurt (nedirtv.com)
Selçuk Yavuz (Ceviz.net)

Tüm etkinlikler boyunca en çok merak edilenlerden birinin "Beyin" olduğunu gördüm :) Biliyorsunuz ilk etkinliği duyurduğumuzda her şehirde bir katılımcıya yeni bir beyin vereceğimizden bahsetmiştik. Bu beyin konusunda ben her ne kadar samimi olsam da :) herkes "beyin" kelimesinden yola çıkarak çok farklı şeyler düşünmüş. Oysa gerçekten de "beyin" derken "beyin" demek istemiştim :)

Yepyeni bir beynin sahibi!

Fotoğrafta da görebileceğiniz üzere arkadaşımız yeni beynini sevinçle karşılamış durumda :D Her şehirde bu şekilde bir beyin hediye etme şansımız oldu. Beynin özelliği gerçek bir beyin "vıcıklığında" olma ile beraber her ne yaparsanız yapın esnese de şeklini kaybetmiyor olması :)

Etkinliklerimize katılan herkese tekrar defalarca çok teşekkürler. Bizi takip etmeye devam edin ;)

Geçenlerde çok güzel bir şekilde tasarlanmış bir Silverlight uygulamasında eski klasik tarz bir MessageBox gördüm ve hemen "Aman tanrım!" tepkisini vermekten kendimi alamadım. Oysa aslında ne kadar da kolay özel bir MessageBox yaratıp projelerimizde kullanmak. Bu videomuzda Silverlight içerisinde ChildWindow kontrolünü alarak bir MessageBox'a çeviriyoruz. Umarım faydalı olur.

Yukarıdaki videoyu bilgisayarına indirmek isteyenler nedirtv.com'u ziyaret edebilirler.

İyi seyirler...

Tasarımcılar ile yazılımcılar arasındaki iletişim sorunları çözmek projelerin işleyişindeki en önemli noktalardan biri. Expression Blend 3 ve Visual Studio'nun kullanımı ile bir tasarımcı ile yazılımcının sorunsuz olarak beraber çalışmaları mümkün. Sizler için hazırladığım bu videoda Expression Blend 3'ün data bağlama özelliklerini inceliyoruz.

Yukarıdaki videoyu bilgisayarına indirmek isteyenler nedirtv.com'u ziyaret edebilirler.

İyi seyirler...

Expression Blend 3 ile beraber gelen ilginç özelliklerden biri de SketchFlow. Sketchflow hakkında sizler için hazırladığım bu videoyu umarım beğenirsiniz.

Yukarıdaki videoyu bilgisayarına indirmek isteyenler nedirtv.com'u ziyaret edebilirler.

İyi seyirler...

Neredeyse her tür yazılım projesinde prototip geliştirmek çoğu zaman başvurduğumuz bir süreç oluyor. Bazen bu prototipleri sadece yapacağımız projenin fizibilitesini ölçmek amacı ile geliştirsek de bazen de amacımız müşterimize gelecekte elde edeceği ürünü kabaca göstermek de olabiliyor. İşin en sıkıcı tarafı ise çoğu zaman bu prototiplerin teklif aşamasında kullanılması nedeniyle aslında kuyuya atılan bir taştan farklı olmamaları. Yani prototipiniz karşılığında eğer hedef projeyi teklifiniz ile alamazsanız hiçbir ücret alamayabilirsiniz. Sektörde karşılaşabileceğiniz farklı senaryolara değinmek yerine işin biraz daha teknik kısmına geçip bu süreçlerde işimizi kolaylaştırmak adına neler yapabiliriz ve bu çerçevede Expression Blend bize nasıl yardımcı olabilir sorularına cevap vereceğiz.

Sketchflow

Expression Blend 3 ile beraber SketchFlow denilen bir mekanizma, proje şablonu geliyor. Sketchflow'un amacı prototip geliştirmeyi kolaylaştırmak ve olabildiğince bu süreçlerde müşteri ile interaktif bir sistem sağlamak. Sketchflow projelerini hem WPF hem de Silverlight tarafında kullanabilirsiniz. Her iki altyapıda da aynı şekilde çalışıyor. Hemen Expression Blend ile yeni bir Silverlight Sketchflow projesi yaratalım.

İlk Sketchflow projemizi yaratıyoruz.

Normal bir Blend projesine göre Sketchflow projeleri Blend ile açıldığında ekranda iki farklı bölüm daha oluşacaktır. Bu bölümlerden birinin adı "Map" diğeri ise "Sketchflow Animation" şeklinde. Sketcthflow'un mantığında prototip geliştirmek olduğu için geliştireceğiniz prototip uygulamanın haritası tabi ki çok önemli. Uygulamada hangi sayfalar olacak? Hangi sayfadan hangi sayfaya geçişler yapılacak? gibi tüm soruları harita üzerinde gerekli kontrolleri yarattıkça cevaplamış oluyorsunuz.

Skethflow ile bir prototip geliştirirken tüm projenizin bir haritasını yarattığınızı düşünebilirsiniz. Her ekranınız için haritada bir sayfa yaratmanız gerekiyor. Sayfalara farklı isimler verebilirsiniz. Herhangi bir sayfanın fare ile üzerine geldiğinde yukarıdaki görselde görebileceğiniz gibi bir menü gözükecektir. Bu menüde en sağdaki düğmeye bastığınızda söz konusu sayfanın harita üzerindeki rengini değiştirebilirsiniz. Böylece harita çok daha anlamlı ve okunaklı olacaktır. Diğer yandan haritadaki sayfaları birbirlerine uygun şekilde bağlayarak haritadınızı tamamlamak da çok önemli. Bunu yapmak için ister sayfaları tek tek yaratıp sonra menülerindeki soldan ikinci düğmeyi kullanarak sayfaları birbirlerine bağlayın ister herhangi bir sayfanın altındaki menüden soldan ilk düğmeyi kullanarak söz konusu sayfaya bağlantılı yeni bir sayfa yaratın, seçim sizin. Son olarak her sayfanın menüsünde soldan üçüncü düğme ise birden çok sayfada kullanılabilecek Component'ler oluşturmanızı sağlayacaktır. Bu konuyu da ileride detaylıca inceleyeceğiz.

Harita üzerinde yaptığınız her işlem otomatik olarak projenize yansıyacaktır. Harita içerisinde oluşturduğunuz sayfalar aslında projenizdeki ayrı bir XAML olarak saklanacaktır. Bu XAML sayfalarını ayrı ayrı açıp her zamanki gibi Blend içerisinde tasarımınızı yapabilirsiniz.

Tasarım yaparkan kullandığınız stillere dikkat!

Unutmayın ki bir prototip tasarlıyoruz. Prototipte amacımız ürünü müşteriye beğendirmekten öte aslında ileride ne gibi bir ürünle karşılaşacağına dair fikir vermek. Eğer projenin tüm görsel tasarımını da yapmak zorunda kalırsak işimiz ciddi zorlaşabilir. Oysa dediğimiz gibi yapmak istediğimiz şey sadece "nasıl birşey olacak?" kısmını müşteriye göstermek ve görsel detaylara takılmalarını olabildiğince engellemek.

Bunun için Sketchflow projelerinde kullanabileceğiniz özel olarak stillerle değiştirilmiş kontroller bulunuyor. "Asset Library" altında "Styles" tabına göz atarsanız normal projelerde bulunmayan SketchStyles seçeneğini bulacaksınız.

Sketchflow'a özel SketchStyles.

Yukarıdaki ekran görüntüsünde de görebileceğiniz üzere SketchStyles kontrollerini kullandığımızda zaten kontrollerin tasarımları gereği müşterimize "bu bir konsept tasarımdır" mesajını vermiş oluyoruz. Kimse bu şekilde hazırlanmış bir ekran görüntüsünün tasarımını eleştirmeyecek ve herkes tasarımın konsept olarak geliştirildiğini anlayacaktır. Böylece bir dertten daha kurtularak prototipimizi geliştirmeye devam edebiliriz.

Navigasyon

Ekranlarınızı tek tek tasarladıkça ekranlar arası geçişlerin de nasıl yapılabileceği önem kazanacaktır. Bir prototip ürettiğimize göre kod ile sayfalar arası geçiş yapacak değiliz. Konunun çok daha basit bir çözümü olsa gerek. Herhangi bir kontrol üzerine ekranda sağ fare tuşu ile tıklarsanız karşınıza gelen menünün en altında Navigate komutunu bulabilirsiniz.

Navigasyonun kolay yolu.

Gördüğünüz gibi içerisinde olduğumuz Giris sayfasında gidebileceğimiz tüm seçenekler Navigate To menüsünde bulunuyor. Şu an için uygulamamızın haritasında Giris sayfası ile Sonuc sayfası birbiri ile ilişkilendirimiş değil. Yine de Navigate To menüsünden eğer Sonuc sayfasını seçerseniz uygulama haritanız da bu bilgiye göre yenilenecek ve Giris ile Sonuc sayfaları birbiri ile ilişkilendirilecektir.

Not: SketchFlow projelerinde Blend Behavior'larını kullanabilirsiniz. Bu şekilde çok daha zengin işlevsellikteki prototipleri tek satır bile kod yazmadan yaratabilirsiniz.

Animasyonlar?

SketchFlow projelerinizde isterseniz StoryBoard'lar kullanabilirsiniz fakat genelde prototip üretirken çok kompleks animasyonlar yerine genel anlamda ekranla ilgili animasyonları üretmek daha mantıklı olacaktır. Örneğin ekrandaki bir menü gözüküp kaybolacak veya soldan alışveriş sepeti gelecek gibi bir animasyon çok daha anlamlı olabilir. Bu gibi durumlarda StoryBoard'lara kıyasla daha kolay kullanılabilen SketchFlow Animation'larından faydalanabilirsiniz.

SkethFlow animasyonlarında tüm ekranın aslında birer State serisi olarak kaydedildiğini düşünebilirsiniz. Ekranın farklı durumları vardır ve bunlar ayrı ayrı kareler olarak kaydedilerek bu kareler arası geçiş süreleri, ivmeleri vs belirlenir. Sonrasında bu animasyon herhangi bir kontrol tarafından hızlıca tetiklenebilir.

SkethFlow animasyonlarını oynatırken.

Herhangi bir kontrole sağ tıkladıktan sonra gelen menüde "Play SkethFlow Animation" seçeneğini göreceksiniz. Bu seçenek altında projenizde bulunan animasyonların bir listesi bulunacaktır. İstediğinizi seçerek söz konusu kontrol tarafından animasyonun tetiklenmesini sağlayabilirsiniz.

Prototipi yayınlayalım!

Prototipiniz tamamen hazır olduktan sonra büyük ihtimal ile çalışmanızı müşteriniz ile paylaşmak isteyeceksiniz. Bu gibi bir durumda yardımızda "SketchFlow Player" yetişecek. SketchFlow projelerinin ayrı kenilerine özel player yazılımları var. Bu yazılımlar WPF tarafında ve Silverlight tarafında tamamen aynı gibi gözükse de aslında WPF'te bir EXE olarak Silverlight'ta ise bir web sitesi olarak karşımıza çıkıyorlar. Projenizi bitirdikten sonra Blend içerisinde F5'e basmanız yeterli olacaktır.

SketchFlow Player karşınızda.

Bahsettiğimiz üzere SketchFlow player duruma göre bir Silverlight veya WPF uygulaması olabiliyor. Player içerisinde prototipinizdeki tüm sayfalar gösterilir. Sol üst "Navigate" ekranın sürekli olarak içerisinde bulunan sayfadan hangi sayfalara geçiş yapılabileceği gösterilir. Sol altta ise uygulamanın haritası görülebilir. Tabi ana ekranda ise prototipiniz gösterilir ve herşey tıklanabilir, kullanılabilir durumdadır. İşin en güzel tarafı ise müşteriniz bu player üzerinden projeyi incelerken yorumlar da yapabilir.

Müşteriden gelen yorumlar.

SketchFlow Player içerisinde rahatlıkla müşteriniz "Feedback" ekranını kullanarak doğrudan proje üzerine yorumlarını ekleyebilir. Bu yorumlar sonrasında Export düğmesi ile bir XML'e alınıp Blend içerisinde de açılabiliyor. "Window" menüsünden "Feedback" kısmını ekrana getirdikten sonra müşterinizden gelen XML'i ekleyerek doğrudan projeniz üzerinde görebilirsiniz.

Müşteri yorumları Blend içerisinde.

Müşterim ekran görüntülerini teklifin içinde istiyor!

Biliyorum, bazı müşteriler illa ekran görüntülerini ve prototipi kağıt üzerinde görmek ister. Dokümanlamak isterler. Konumuz müşterinin haklı veya haksız olduğu olmadığına göre biz bu işi nasıl çözeriz ona bakalım. Aslında pek bakacak birşey de yok, çünkü işimiz çok kolay. Prototipiniz bittikten sonra "File" menüsünden "Export to Microsoft Word" komutunu verebilirsiniz.

Projemizin detayları bir Word dokümanında.

Projenizdeki her ekran ayrı birer sayfada ekran görüntüsü ile beraber Word'e aktarılacaktır. Dokümanın ilk sayfasında hem projenizin haritası hem de iç sayfalara dair linkler ve indeks de otomatik olarak hazırlanacaktır. Eh, gönül daha ne ister?

Expression Blend içerisinde SketchFlow hangi amaçla kullanırsanız kullanın müşterilerinizle ilişkinizi kolaylaştıracağı veya bir adım ileriye taşıyacağı kesin.

Hepinize kolay gelsin.

İster Silverlight tarafında olsun ister WPF teknolojinin ve araçların sürekli bahsedilen en önemli özelliklerinden biri tasarımcı ile yazılımcı arasındaki ilişkiyi düzenlediği yönünde. Tabi ki eskisine kıyasla çok sayıda artı özellik bu iki profil arasındaki "kavgaların" azalmasını sağlıyor fakat diğer yandan özellikle yazılımcının da Expression Blend uyumlu binding yapılabilir nesnelerini tanımlayabiliyor olması çok önemli. Tabi aynı derecede bir tasarımcının da Blend içerisinden yola çıkarak programcının arka planda kendisine sağladığı CLR nesnelerine ulaşabilmesi şart.

Tüm bu senaryo ile ilgili ufak bir örnek yapacağımız bu yazımızda ilk olarak bir programcı olarak tasarımcının uygulama tasarımında istediği gibi işlevsellikleri ayarlayabileceği ve binding'leri set ederek hangi datanın nerede gözükeceğine karar verebileceği bir altyapı oluşturacağız. Sonrasonda tasarımcı profili ile Expression Blend'e geçerek arka tarafta programcının hazırlamış olduğu nesneleri alıp uygulama arayüzünde istediğimiz yerlere yerleştireceğiz.

Visual Studio tarafından başlayalım!

Varsayalım ki elinizde bir Insan listesi var ve bunu bir şekilde tasarımcının ellerine aktarmak istiyorsunuz. Sizin bir programcı olarak yapmanız gereken bu listeyi bir veri kaynağından alıp (bu ister SQL ister başka bir kaynak olabilir) Expression Blend tarafında kullanılabilir hale getirmek. Yani verinizin User Interface tarafında kullanılabilmesini sağlamanız gerekiyor. İlk olarak gelin basit bir şekilde Insan nesnemizi tanımlayalım.

[VB]

Public Class Insan

 

    Private _Soyadi As String

    Public Property Soyadi() As String

        Get

            Return _Soyadi

        End Get

        Set(ByVal value As String)

            _Soyadi = value

        End Set

    End Property

 

 

    Private _Adi As String

    Public Property Adi() As String

        Get

            Return _Adi

        End Get

        Set(ByVal value As String)

            _Adi = value

        End Set

    End Property

 

End Class

Gördüğünüz gibi nesnemizin şimdilik iki basit özelliği var. Amacımız bu nesneden birden çok sayıda yaratıp bir liste olarak tasarımcıya aktarmak. Bunun için ayrı bir sınıf tanımlamamız uygun olur. Söz konusu sınıf içerisinde de ObservableCollection dönecek bir metod yer alacak.

[VB]

Public Class AllData

 

    Private _All As New System.Collections.ObjectModel.ObservableCollection(Of Insan)

    Public Property All() As System.Collections.ObjectModel.ObservableCollection(Of Insan)

        Get

            Return _All

        End Get

        Set(ByVal value As System.Collections.ObjectModel.ObservableCollection(Of Insan))

            _All = value

        End Set

    End Property

 

    Sub New()

        _All.Add(New Insan() With {.Adi = "1asdasd", .Soyadi = "2222"})

        _All.Add(New Insan() With {.Adi = "2asdasd", .Soyadi = "4222"})

        _All.Add(New Insan() With {.Adi = "3asdasd", .Soyadi = "5222"})

        _All.Add(New Insan() With {.Adi = "4asdasd", .Soyadi = "6222"})

    End Sub

 

End Class

AllData adındaki bu sınıfın içerisinde All adında da bir Property var. Bu property geriye bir ObservableCollection döndürüyor. Bildiğiniz üzere ObservableCollection'lar TwoWay binding destekleyen collection nesneleridir. Yani görsel arayüzdeki değer değişiklikleri de otomatik olarak arka plandaki nesneye yansır. Expression Blend'de bu nesne bind edildiğinde Blend nesneyi çağırmadan önce bir Instance yani kopyasını alacaktır. İşte tam da bu kopyayı yaratırken sınıfımızın constructor'ında datamızı ObservableCollection'ımıza ekleyebiliriz. Kod yönetimi açısından tüm bu kodları harici bir VB veya C# dosyasında yazmanızda fayda var.

İşimiz bu kadar artık bu veriyi gösterme işi tasarımcının işi. Expression Blend tarafına geçerek geri kalanı bir tasarımcı profili ile yapalım.

Expression Blend tarafına geçiyoruz!

Aynı projeyi Expression Blend ile açtıktan sonra sağ barda "Data" tabını bulabilirsiniz. Data tabında "Add Live Data Source" komutunu verdikten sonra "Define New Object Data Source" diyebilirsiniz.

Expression Blend içerisinde Data Source'umuzu tanımlıyoruz.

Karşınızda çıkacak ekranda AllData adındaki sınıfımızı seçmeniz yeni DataSource'u yaratmanız için yeterli olacaktır. Artık sıra geldi bu DataSource içerisinde hangi Property'yi nasıl kullanacağınıza.

Nesnelerimiz Expression Blend tarafından algılandı.

Artık Data tabındaki veri kaynağı ile ilgili tüm detayları görebiliriz. Tasarımcı olarak Data tabından veriyi sahneye koymak için birkaç yolumuz var. Bunlardan ilki liste görünüşünü kullanmak. Şu an yukarıdaki ekran görüntüsünde List Mode gözüküyor. Bu durumda ObservableCollection'ı alıp sahneye bıraktığınızda otomatik olarak bir ListBox yaratılacak ve veri ListBox'a bağlanacaktır.

Sürükle, bırak! Ve karşında ListBox!

Artık bu ListBox'ın ItemTemplate'inin vs tasarımını değiştirmek tabi ki makalemizin sınırları dışında. Fakat unutmamak gerek ki artık canlı veriye bağlı ve tamamiyle tasarımı özelleştirilebilir bir ListBox tasarımcımızın ellerinde. Ayrıca tek seçenek ListBox da değil. Eğer sahnede bir Grid veya başka bir kontrol olsaydı doğrudan Collection'ı onun üzerine sürükleyip bırakarak da Data Binding işlemi rahatlıkla yapılabilirdi.

Details Mode karşınızda.

List Mode'un yanı sıra Blend içerisinde kullanabileceğimiz bir diğer Data modu da Details Mode olarak karşımıza çıkıyor. Bu moddayken veri kaynağından nesneleri ancak Property'ler olarak sürükleyip bırakabilirsiniz çünkü artık amacınız bir liste göstermek değil. Artık amacımız nesnelerin detaylarınız göstermek. Tek tek her Property'yi sahnedek ayrı nesnelere Bind edebileceğiniz gibi nesnelerin yaratılmasını Blend'e de bırakabilirsiniz. Örneğin gelin hem Adi hem de Soyadi Property'lerini seçerek sahneye sürükleyip bırakalım.

Details Mode ile otomatik detay görünümü yaratabilirsiniz.

Gördüğünüz gibi sürükle bırak sonrasında otomatik olarak bir Grid yaratılarak içerisinde hem Property isimlerini taşıyan hem de değerleri taşıyan birer TextBlock yerleştirildi. İşin en güzel tarafı binding işlemini aynı nesne kopyasına yaptığımız için ListBox içerisinde hangi nesne seçilirse onun detaylarının bu Grid içerisinde gösterilecek olması. Yani tüm işlevsellik tamamlanmış durumda!

Arka planda Blend neler yaptı?

Blend aslında basit bir şekilde Binding mekanizmalarının tasarımcılar tarafında rahatlıkla kullanılabilmesini sağlıyor. Maalesef şu an için bu mekanizmaları yazılımcılar olarak bizim elle yazmaktan başka şansımız ki. Visual Studio 2010 ile bu durumda toparlanacak ve bizler de tüm bu ayarları yapabileceğimiz menülere sahip olacağız.

XAML tarafına bir göz atacak olursak dikkatimizi çeken birkaç nokta olabilir.

[XAML]

<UserControl

   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

   mc:Ignorable="d" xmlns:local="clr-namespace:SilverlightApplication2" xmlns:dataFormToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm.Toolkit" x:Class="SilverlightApplication2.MainPage"

   d:DesignWidth="640" d:DesignHeight="480">

    <UserControl.Resources>

        <local:AllData x:Key="AllDataDataSource" d:IsDataSource="True"/>

        <DataTemplate x:Key="InsanTemplate">

            <StackPanel>

                <TextBlock Text="{Binding Adi}"/>

                <TextBlock Text="{Binding Soyadi}"/>

            </StackPanel>

        </DataTemplate>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource AllDataDataSource}}" >

        <ListBox x:Name="listBox" Margin="47,96,0,84" ItemTemplate="{StaticResource InsanTemplate}" ItemsSource="{Binding All}" HorizontalAlignment="Left" Width="200"/>

        <Grid DataContext="{Binding SelectedItem, ElementName=listBox}" Margin="310,94,76,186" d:DataContext="{Binding All[0]}" Background="White">

            <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Width="100" Height="16" Text="Adi"/>

            <TextBlock Text="{Binding Adi}" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150" Height="16" Margin="104,0,0,0"/>

            <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Width="100" Height="16" Margin="0,20,0,0" Text="Soyadi"/>

            <TextBlock Text="{Binding Soyadi}" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150" Height="16" Margin="104,20,0,0"/>

        </Grid>

    </Grid>

</UserControl>

Yukarıda tüm uygulamanın XAML kodunu inceleyebilirsiniz. Özellikle renkli kısımlara bakacak olursak Blend'in neler yapmaya çalıştığını net bir şekilde görebiliriz. İlk olarak en üstte bizim arkadaki uygulamamızın bir XML namespace olarak Import edilmiş. Sonra söz konusu yerden AllData sınıfından bir instance alınıp Resrouce'lar arasına AllDataDataSource adı ile koyulmuş. Bu DataSource uygulama genelinde Grid'e bağlanmış. Grid içerisinde ListBox ise All metoduna bağlanmış. ListBox aldığı her Insan nesnesini yine Resource'lar içerisinde tanımlı InstanTemplate ile gösterebiliyor. InsanTemplate içerisinde ise her Insan'ın Property'leri uygun kontrollere bağlanmış durumda. Son olarak detayları gösterecek olan nesnelerin bulunduğu Grid'in DataContext'i bizim ListBox'ın SelectedItem'ına element binding ile bağlanmış. SelectedItem zaten bir Insan nesnesi olarak geleceğine göre Grid içerisindeki kontrolleri de doğrudan bu Insan nesnesinin Property'lerine bağlayabiliriz. Son ufak bir detay ise Grid'in DataContext'inin yanı sıra bir de d:DataContext diye bir Property'sinin All listesindeki Index numarası sıfır olan kayda bind edilmiş olması. d: XML namespace'i tamamen design view için gerekli özellikleri tanımlar. Yani tasarımcı Blend içerisinde uygulamayı görürken ve uygulama çalışmazken bu Grid'in doğrudan All listesindeki ilk nesneyi göstermesini sağlamak için Blend böyle bir kod eklemiş durumda.

Sonuç olarak gördüğünüz gibi aslında her iki tarafın da kurallara uyması halinde Expression Blend ve Visual Studio ile beraber tasarımcılar ve yazılımcıların beraber rahatça çalışması olması.

Hepinize kolay gelsin.

Blend içerisinde kullanılabilecek Behavior çeşitlerinden biri de Trigger'lı Behavior'lar. Bu tip Behavior'lara genelde Action da denebiliyor. Normal Behavior'lardan farklı olarak Trigger'lar da kendi içlerinde yaratılırken Inherit ettikleri sınıfa göre değişebilirler. Bu yazımızda TriggeredAction Behavior'larına göz atacağız.

Ne işe yarar?

TriggeredAction behaviorları sonuç itibari ile normal Behavior'lar gibi bir aksyon almayı hedefler fakat bu aksyon yine kullanıcı tarafından belirlenen bir durumu takiben işleme alınır. Normal şartlarda bir TriggeredAction kendi Parent kontrolünü hedef alarak onun herhangi bir event'ı çalıştığında çalışacak şekilde kenarda durur.

Örneğimizde basit bir MessageBox gösteren TriggerAction tanımlayacağız. Diyelim ki herhangi bir kontrole tıklandığında veya farklı durumlarda MessageBox'lar göstermek istiyoruz. Normalde yapmamız gereken kesinlikle kod tarafına geçip uygun kodu yazmak olurdu. Oysa hazırlayacağımız TriggerAction herhangi bir kod yazmadan tasarımcının istediği event ve zaman için istediği mesajı MessageBox ile gösterebilmesini sağlayacak.

Her zamanki gibi yeni bir Silverlight projesi yarattıkta sonra System.Windows.Interactivity.dll'i referans olarak alıyoruz. Projemize ekleyeceğimiz yeni bir VB/CS dosyasının içerisinde Behavior'ımızı tanımlayacak sınıfı yazarken TriggerAction sınıfnı da inherit ediyoruz.

[VB]

Public Class MsgBoxTrigger

    Inherits Interactivity.TriggerAction(Of UIElement)

 

    Protected Overrides Sub Invoke(ByVal parameter As Object)

 

    End Sub

End Class

[C#]

    public class MsgBoxTrigger : System.Windows.Interactivity.TriggerAction<UIElement>

    {

        protected override void Invoke(object parameter)

        {

        }

    }

Gördüğünüz üzere hemen anında Invoke adında bir de metoda sahip olduk. TriggerAction sınıfında Invoke "MustInherit" olarak tanımlandığı için söz konusu metodu bizim yazmamış şart. Zaten bu metod da bizim en çok işimize yarayacak metod olacak. Herhangi bir şekilde bizim Trigger'ımızda kullanıcı tarafından ayarlanmış event çalıştığında buradaki Invoke metodu çalışacak. Anlayacağınız TriggerAction'ımızın tüm işlevselliğini buraya yazacağız.

[VB]

    Private PText As String

    Public Property MessageText() As String

        Get

            Return PText

        End Get

        Set(ByVal value As String)

            PText = value

        End Set

    End Property

[C#]

        public string MessageText { get; set; }

Tasarımcımızdan aynı anda MessageBox ile gösterilecek metni de almamız gerek. O nedenle hemen bir de Property tanımlayarak sınıfımıza ekliyoruz. Bir sonraki adımda basit bir şekilde Invoke metodunda bu mesajı göstermemiz yeterli olacaktır.

[VB]

    Protected Overrides Sub Invoke(ByVal parameter As Object)

        MessageBox.Show(MessageText)

    End Sub

[C#]

        protected override void Invoke(object parameter)

        {

            MessageBox.Show(MessageText);

        }

Gördüğünüz gibi sistem epey basit. Her zamanki gibi isterseniz AssociatedObject'e de ulaşarak TriggerAction'ın bağlı olduğu kontrolü de bulabilirsiniz. Artık elimizdeki Behavior'ı rahatlıkla tasarımcılar da Blend içerisinde kullanarak istedikleri durumlarda MessageBox gösterebilirler.

Özel TriggerAction Behavior'ımız karşınızda.

XAML tarafına baktığımızda her zaman olduğu gibi tüm Trigger yapısı XML ile tanımlanmış durumda. Gerekli XML NameSpace'ler de eklendikten sonra hazırladığımız TriggerAction rahatlıkla kullanılabiliyor.

[XAML]

<UserControl

   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

   mc:Ignorable="d" xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:local="clr-namespace:Triggers_VB" x:Class="Triggers_VB.MainPage"

   d:DesignWidth="640" d:DesignHeight="480">

  <Grid x:Name="LayoutRoot">

 

      <Rectangle Fill="Red" Stroke="Black" HorizontalAlignment="Left" Margin="157,184,0,215" Width="159">

          <i:Interaction.Triggers>

              <i:EventTrigger EventName="MouseLeftButtonDown">

                  <local:MsgBoxTrigger MessageText="Selamlar!"/>

              </i:EventTrigger>

          </i:Interaction.Triggers>

      </Rectangle>

 

  </Grid>

</UserControl>

Hepinize kolay gelsin.

Örneğe ait kaynak kodlar - 23082009_2.rar (49,3 KB)

Ve MIX'in ilk günü bitti :) Muhteşem haberler ve gelişmeler var paylaşmak istediğim fakat maalesef gün içinde bloga yazı yazacak zamanım olmadı. Oturum aralarında en fazla 20 dakika var ve bu sürede bir sonraki salona koşmak ile bir şeyler içmek arasında pek zaman kalmıyor diyebilirim. Diğer yandan tabi 16 saatlik uçak yolculuğunu da katarsak halimi tahmin edebilirsiniz :) Neyse, konu ben değilim, konu MIX'in 1. Günü...

Scott Guthrie sahnede!

ASP.NET MVC 1.0 Yayınlandı

MVC yapısının ASP.NET'e kazandıracakları çok fazla. Bu konuda yakınlarda yoğun bir bilgi aktarımına başlıyor olacağım ayrıca :) çünkü her yeni şeye olduğu gibi bir anda MVC'ye de ilginç bir ilgi/alaka gösterimi olacaktır ve bu çerçevede etrafta "her şeyi MVC" ile yapmaya çalışanlar :) veya "MVC yaramaz" diyenler olacaktır. MVC'nin web yazılım geliştirme mimarileri arasında bir yeri var ve bu konu maalesef bu yazımızın konusu değil :) İsteyenler hemen ASP.NET MVC 1.0'ı aşağıda adresten bilgisayarlarına indirebilirler.

http://www.asp.net/mvc/

Virtual Earth Silverlight Map Control CTP oldu!

Virtual Earth'ün Silverlight ile beraber kullanımı özellikle kullanıcı deneyimi açısından çığır açıyor. Bu çerçevede yazılımcıların işini kolaylaştırma amacı ile hazırlanan Map Control'ün CTP sürümü yayınlandı. Aşağıdaki adresten ulaşabilirsiniz ;)

http://connect.microsoft.com/silverlightmapcontrolctp

Silverlight 3 Beta

Silverlight ile ilgili o kadar çok gelişme var ki! Kesin bazılarını yazmayı unutacağım. Fakat önümüzdeki dönemde Silverlight 3 ile ilgili bolca içerik paylaşacağımdan emin olabilirsiniz. Aklımda kalan ana noktalara bakmak gerekirse ilk defa Microsoft Silverlight'ın dağıtımı ile ilgili sayısal bilgi verdi diyebilirim.... 350 milyon kullanıcıda Silverlight yüklü! Diğer yandan Silverlight 3 ile ilgili özelliklere bakarsak;

• Multitouch desteği geliyor. (Sadece Windows 7'de)
• MPEG, AAC, H.264 desteği geliyor. İsterseniz kendi codec mekanizmanısı da yazabiliyorsunuz.
• IIS Media Services üzerinden Smooth Streaming'in Live sürümü geliyor. Artık canlı yayında da bant genişliği yayın esnasında dinamik olarak değiştirilebiliyor.
• İş uygulamaları için Data kontrolleri geliyor...
• .NET RIA Services ile Silverlight ve ASP.NET arasındaki veri bağlantısı kolaylaştırılıyor.
• Offline çalışma desteği geliyor. Artık herhangi bir Silverlight uygulamasını Desktop'a normal program gibi alabiliyorsunuz. Mac'te de aynı şekilde çalışıyor. Kendini otomatik update ediyor vs vs :)
• SaveFileDialog ve bir çok yeni kontrol geliyor; WrapPanel, DockPanel, ViewBox, AutoCompleteBox, TreeView, Label...
• Lokalde Assembly önbellekleme desteği geliyor.
• Easing kütüphanaleri ve text animasyonları geliyor.
• Pixel Shader efektleri geliyor; DropShadow vs... Kendi efektinizi yazabiliyorsunuz.
• Perspective 3D!
• GPU destekli video oynatma!
• DeepZoom projelerinde GPU kullanımı!
• Network bağlantısını algılayabilme.

Silverlight 3 Beta ve Visual Studio Tools paketini aşağıdaki adresten indirebilirsiniz. Fakat unutmayın, söz konusu paket Beta! ve bu Beta paketini yüklemeniz halinde yüklediğiniz makinede artık Silverlight 2 projeleri geliştiremiyorsunuz! Silverlight 3'ün şu anda sadece "Developer Runtime"ı var. Normal Runtime yok! Zaten Go-Live lisansı da olmadığı için uygulamalarınızı yayına almanız yasak.

Silverlight 3 Beta Tools
Silverlight 3 Beta SDK 

En büyük sürprizi sona sakladım! Tüm bu yeni özelliklerle beraber Silverlight 3 Runtime paketinin büyüklüğü sizce ne oldu? :) Büyümüştür değil mi? :) Hayır! Hattta 40KB azalmış durumda :)

 Expression Blend 3 Beta

Silverlight 3.0 ile beraber Expression Blend'in 3. sürümü geliyor. Expression Blend gerçekten çok kuvvetleniyor. Dikkatimi çekenler arasında belki de en önemlisi doğrudan Photoshop ve Illustrator Import komutları. Tüm bu harici dosyaları katmanları ile beraber Blend'e alabiliyoruz. Başka neler mi var?

• Source Control - TFS desteği.
• XAML, VB ve C#'da Intellisense
• Behavior - Tasarımcılara kolay işlevsellikler yaratabilme olanağı.
• SketchFlow - Uygulamaların ön tasarımı ve planına dair altyapı :) Bu apayrı ve detaylı bir konu.

http://www.microsoft.com/expression/blendpreview

Web Platform Installer

Microsoft'un uzun süre önce yayına aldığı WPI (Web Platform Installer) sisteminin amacı Web uygulaması geliştirmek isteyenler onlarca yerden onlarca şeyi bulup yüklemeleri gerek kalmadan her şeyi merkezi bir yükleme haline getirmek. Örneğin bugün en basit sistemde bile VS 2008, SP1, Silverlight Tools, MVC şeklinde devam eden bir çok yükleme gerekebiliyor. WPI'ın ikinci sürümünde sizleri şaşırtabileceğini düşündüğüm noktalar ise PHP yüklemeleri :) WPI içerisinde isterseniz doğrudan PHP ile yazılım geliştireceğiniz ortamları da geliştirebiliyorsunuz. Biliyorsunuz Expression Web 2 zaten PHP destekliyordu.

WPI ile beraber bir de Application Gallery denilen bir sistem açılıyor ve burada Open Source bazı projeler otomatik yüklenebilir şekilde sunuluyor. Örneğin BlogEngine, DasBlog, DotNetnuke bunlardan bazıları. Ayrıca WordPress de pakete dahil :) Daha detaylı bilgi ve download için aşağıdaki adresi deneyebilirsiniz.

http://www.microsoft.com/Web/downloads/platform.aspx

Expression Web 3

Expression Web ürünü de giderek kuvvetleniyor. Özellikle Cross-Browser site tasarımı konusuna eğilen programa SuperPreview denilen bir özellik ekleniyor. Tahmin edebileceğiniz üzere hazırladığınız tasarımı ön izleyebileceğiniz bir ortam sağlayan SuperPreview'ün güzel yanı sisteminizde yüklü tüm tarayıcıların altyapısını kullanarak ayrı ayrı tarayıcılardaki sonucu karşılaştırmalı olarak gösterirken aradaki farkları da yakalamanızı sağlaması. SuperPreview Expression Web'den ayrı olarak da indirilebilir bir download olarak sunuluyor.

http://www.microsoft.com/expression/try-it/superpreview/

1. Günün Sonu

"Adamlar yapmış" deriz ya :) aynen öyle. Gerçekten özellikle Silverlight ve Expression tarafında muhteşem yenilikler var! Sizlere bu yenilikleri paylaşmak için can atıyorum :) Yazılacak birçok yazı, verilecek bir çok seminer oluştu bile kafamda :) Hem media tarafında hem de iş/data uygulamaları tarafında Silverlight'a öyle yenilikler geliyor ki... ASP.NET artık sadece SL için bir business/data layer olarak kalacak gibi gözüküyor. Bakalım yarın neler olacak ;) 

WPF veya Silverlight projelerinde Inıt durumu ile PageLoad veya WindowLoad event'ları arasındaki fark bazen ilk bakışta yokmuş gibi varsayılarak kodların doğrudan Init kısmına yazıldığını çok gördüm. Bazen bu durum sorun çıkarmasa da aslında tam olarak Init durumu bitmediği için bazı kaynaklara veya kontrollere ulaşmama hatta bu ulaşıp / ulaşmama durumunun da belli olmaması :) gibi garip hatalar ile karşılaşabilirsiniz. O nedenle benim genel tavsiyem sürekli Loaded event'larının kullanılması ve Init'in sadece ek event-listener tanımlamalarının yapılacağı bir konum olarak saklanması.

Bu çerçevede bir diğer sorun ise Init durumuna yazdığınız kodların aslında hem Blend hem de Visual Studio tarafından Design modundayken çalıştırılıyor olması. Eğer bu bilgiye sahip değilseniz maalesef ki Init durumunda yaptığınız ağır bir işlemin bir anda Visual Studio ve Blend'in arayüzüne de binmesi ve Page.XAML gibi bir dosyayı açtığınız anda yüksek işlemci kullanımları ile karşılaşmanız olası. En basit çözüm bu kodları Init'den çıkarmak ve Loaded'a yerleştirmek olabilir fakat ya Init'i kesinlikle kullanmanız gerekiyorsa?

[C#]

            if (System.ComponentModel.DesignerProperties.GetIsInDesignMode(this) == false)

            {

 

            }

İşte yukarıdaki gibi bir kontrol ile söz konusu Init kodunun içinde uygulamanın DesignMode'da olup olmadığını kontrol edebilirsiniz. Böylece eğer sayfa Visual Studio veya Blend ile Design modunda açılmış ise bu IF içerisinde kodlar çalıştırılmayacak. Oysa programı F5 ile compile edip çalıştırdığınızda ise herhangi bir sorun ile karşılaşamaycaksınız.

Hepinize kolay gelsin.

Bugün Imagine Cup Türkiye Lansmanı'nda "Expression Studio ile Tasarım" oturumunu sundum. Oturuma katılan arkadaşların çoğu hali hazırda daha önce beni izlemiş olmanın avantajını kullanarak neredeyse tüm hamlelerimi tahmin etseler de en azından daha önce dinlemeyenler için faydalı bir saat olduğunu tahmin edebilirim. Bu vesile ile aslında uzun zamandır Expression Studio anlatmadığımın da farkına vardım. Sürekli Silverlight ve WPF anlatırken sadece Expression Blend'den bahsetme şansım oluyor oysa Expression Studio içerisinde Design, Media, Encoder ve Web de çok güzel özelliklere sahip.

Imagine Cup Lansmanı - Expression Studio Oturumum

En kısa zamanda daha detaylı bir Expression Studio semineri yapma kararı aldım :) Imagine Cup'a katılmayı düşünen arkadaşların sorularını her zaman mail olarak bekliyorum ;) Yardım gerekirse buralardayım.

Sizlere şaşıracağını düşündüğüm bir haberim var :) Genelde neredeyse tüm seminerlerimde Microsoft'un yazılım geliştirici ve tasarımcı araçlarının pahalı olmasından yakınılıyor. Visual Studio tarafında Express sürümleri önersem de maalesef Expression tarafında önerebileceğim bir alternatif bulunmuyor. Peki pahalı diyoruz da acaba ne kadar? :) İşte size buradan yeni bir indirimi duyurmak istiyorum.

Expression Web
Expression Design
Expression Blend
Expression Media
Expression Encoder
Visual Studio 2008 Standart

Hepsi sadece 350$!

Şaşırdığınıza eminim çünkü ben de ilk duyduğumda şaşırdım. Tüm bu araçları kullanarak proje yapan firmaların veya kişilerin bu lisanslara 350$ ayıramamaları gibi bir durum olamaz. Gerçekten çok komik bir rakam. İlk yaptığınız projeden bir miktar ayırmanız en azından Silverlight 3.0 veya Visual Studio 2010 çıkana kadar sizi idare edecek araçları lisanslı olarak edinebilmeniz için yeterli olacaktır.

Biraz reklam tadında oldu fakat bu haberden ve indirimden faydalanabilecek kişileri düşününce yazmadan geçemedim.

Bu arada satın almak için : http://store.microsoft.com/microsoft/Expression-Studio-2-Full/product/524ABA6C

Microsoft'un dünya çapındaki Imagine Cup yarışmasının bu seneki ayağının finali Mısır'da yapılacak. Tabi onun öncesinde Türkiye ayağı ile yarışmacıların Türkiye birinciliğini almaları gerekiyor :)

Imagine Cup 2009 için bu yıl öğrenciler; dünyanın en zorlu sorunlarına, teknoloji ile çözüm bulabilecekleri bir dünya düşlemeye davet ediliyor. Bazılarımız teknolojiyi dünyanın her yerindeki insanlara eğitim şansı kazandırmak için kullanacaktır, ya da sağlık alanında yepyeni ufuklar açmak için. Bazılarımız ise cinsiyetler arası fırsat eşitsizliğini çözmek isteyecektir. Imagine Cup 2009 teması için örnek gösterilen Birleşmiş Milletler Milenyum Hedeflerinin açıklandığı, geçtiğimiz yılların deneyimlerinin aktarıldığı ve teknik oturumların bulunduğu Imagine Cup 2009 Lansmanı 20 Aralık Cumartesi günü Microsoft Istanbul ofisinde gerçekleştirilecek.

Aktiteye katılmak için buradan kayıt olmanız gerekiyor.

Sabah saat 10.00'da başlayacak etkinliğin planına buradan ulaşabilirsiniz. En son teknik oturum benim ;) Konumuz: Expression Studio.

Son üç gündür Isparta, Süleyman Demirel Üniversitesi'ndeydim. Cumartesi günü başladığımız INETA Boot Camp Isparta etkinliğimizde LINQ ve WCF konularını işledik. Pazar günü Microsoft'un Oyun Turu'nun da Isparta ayağını kampımıza ekleyerek dün de bahsettiğim gibi SL 2.0 ile ve XNA ile Oyun Programlama konularını inceledik. Son günümüz olan Pazartesi günü de ASP.NET Dynamic Data Web Site yapılarını göz attık sonra "Silverlight 2.0 ile Data Uygulamaları" ve "WPF" oturumlarımızı tamamladık. Böylece dolu dolu bir üç gün geçirdik.

Isparta, Süleyman Demirel Üniversitesi, INETA Boot Camp

Etkinliklere katılan hem konuşmacı arkadaşlarıma hem de sevgili öğrenci kardeşlerime çok teşekkür ediyorum. Geçen öğretim yılında da Süleyman Demirel Üniversitesi'nde gittiğimde blogumda yazmıştım hatta dün de yazmışım :) SDÜ'nün yeri benim için çok ayrı. Yukarıda resimde gördüğünüz tüm öğrencilerin Silverlight ve WPF konulu ödevleri var. Hepsi giriş seviyesini çoktan geçmiş durumda. Bu duruma tabi ki öğretim görevlilerinin katkısı çok büyük.

Özellikle organizasyonun gerçekleşmesindeki katkılarından dolayı sevgili Eğitim Görevlisi dostum Mehmet Albayrak'a çok teşekkür ediyorum.

Son gün yaptığımız bazı örnekleri toparlayıp bir poşete koydum :) aşağıdaki linkten indirebilirsiniz.

Örneklere ait kaynak dosyalar - 01122008_2.rar (2,81 MB)

Renklerin birbirine uyumu özellikle biz yazılımcılar için pek anlaşılamayan bir sistemi tanımlar :) Kişisel olarak ben bir renk yığınındaki renklerin birbirine uyumlu olup olmadığını anlayabilsem de "Buyur uyumlu 3 renk seç" derseniz pek de başarılı olamam. Belli ki bu durum genel geçer bir sorunu tanımlıyor ki RD, Jonas Folloseo birazdan sizlere detaylarından bahsedeceğim uygulamayı hazırlamış. Uygulama özünde Adobe'nin Kuler sitesinin API'larını kullanıyor. Kuler'dan hızlı bir şekilde bahsetmek gerekirse tasarımcıların birbirleri ile uyumlu renk şemalarını paylaştıkları bir Web 2.0 portalı diyebiliriz.

Colorful Expression

Aşağıdaki adresten indirebileceğiniz uygulama toplam 3 bölümden oluşuyor.

http://www.codeplex.com/colorful

Birincisi Colorful WPF adında tek başına çalışabilen bir WPF uygulaması. Bu uygulama içerisinde birbirleri ile uyumlu renk şemalarını inceleyebilir ve aramalar yapabilirsiniz. Unutmayın ki sistem Kuler'ın API'larından faydalanıyor yani programı ancak online durumdayken kullanabilirsiniz. Colorful WPF'in en güzel özelliği herhangi bir renk şemasının altındaki düğmeler aracılığı ile hızlı bir şekilde bu renkleri kullanabilmenizi sağlayacak XAML Brush kodlarını alabiliyor olmamız.

Colorful WPF içerisinde "silver" kelimesi aratıldığında çıkan birbiri ile uyumlu renklerin bir listesi.

Yukarıdaki ekran görüntüsünde yer alan en üstteki "Silver" adındaki renk şemasının altındaki "Swatches" düğmesine tıkladığımda doğrudan aşağıdaki XAML kodu panoya kopyalanıyor ve rahatlıkla Silverlight veya WPF projelerinde kullanabiliyoruz.

<SolidColorBrush x:Key="SilverColor1" Color="#FF474143" />

<SolidColorBrush x:Key="SilverColor2" Color="#FFA69E9D" />

<SolidColorBrush x:Key="SilverColor3" Color="#FFE7E2DA" />

<SolidColorBrush x:Key="SilverColor4" Color="#FFFFFFFF" />

<SolidColorBrush x:Key="SilverColor5" Color="#FFE7E8E7" />

Expression Design ve Blend Add-In

Colorful Expression içerisindeki renk şablonlarını isterseniz doğrudan Expression Design veya Blend içerisinde de kullanabiliyorsunuz. Bunun için download paketi içerisinden program adına uygun klasörün içindeki 2 DLL dosyasını programların bilgisayarlarınızda yüklü oldukları konumlara kopyalamanız gerek. Sonrasında aşağıdaki şekilde hem Blend hem de Design'ı çalıştırdığınızda Colurfull Expression'ı doğrudan Blend veya Design içerisinde de kullanabilirsiniz.

Blend.exe –addin:Colorful.Blend.AddIn.dll
Design.exe –addin:Colorful.Design.AddIn.dll

Expression Design içerisinde Colorful paneli.

Yukarıdaki ekran görüntüsünde Colurful Expression'ın doğrudan Expression Design içerisinde kullanılabildiğini görebiliyorsunuz. Aynı şekilde Blend 2 içerisinde de rahatlıkla Colurful paneline ulaşılabiliyor.

Expression Blend 2 içerisinde Colorful paneli.

Blend içerisinde Colorful panelinin kullanımı ile ilgili Design'a kıyasla ek avantajlar da söz konusu. Sahneye sürükleyip bıraktığınız bir renk şablonu aslında arka planda birer SolidColorBrush olarak sayfanın Resource'larına ekleniyor. Böylece bu renkleri istediğiniz kadar farklı yerlerde rahatlıkla merkezi olarak kullanabiliyorsunuz.

Colorful'un yarattığı XAML kodları otomatik olarak karşımızda.

Hepinize kolay gelsin.

Hafta sonunu Ankara'da geçirdik. Neden mi? INETA Capital Hit zamanıydı! Atladık INETA minibüsümüze :) yollara düştük. Maceralarımızla ilgili videolar ve fotoğraflar çok yakında bu blogda :)

İki kocaman gün boyunca dopdolu bir programla Çankaya Üniversitesi'nde iki yüz elli kişilik bir ekip olarak yattık kalktık diyebilirim. Yine her zamanki gibi benim için muhteşem zevkliydi.

Pazar akşamı saat yedide Capital Hit'i sonlandırdık.

Aktiviteye katılan tüm konuşmacı dostlarıma binlerce teşekkür. Ayrıca Çankaya Üniversitesi Bilişim Kulübü ve sevgili MSP, Çağrı Erdoğan'a da çok teşekkürler. Bir organizasyonda ancak bu kadar başarılı bir misafirperverlik sergilenebilirdi.

Tabi ki her şey bu kadarla bitmiyor! Elimde birçok fotoğraf, minibüs yolculuğumuzdan videolar ve panel kaydımız var. Hepsini büyük bir hızla hazırlamaya çalışıyorum. En kısa zamanda sizlerle buradan paylaşacağım.

Şimdilik aşağıdaki sunumlarla idare edelim :)

AdoNet Data Services / Burak Selim Şenyurt - 20102008_1.pptx (1,01 MB)
LINQ / Uğur Umutluoğlu - 20102008_2.pptx (750,29 KB)
WCF / Burak Selim Şenyurt - 20102008_3.pptx (460,14 KB)

Not: Bu sefer ben hiç sunum kullanmadım, doğrudan demolarla ilerledim. O nedenle sunum paylaşamıyorum.

Silverlight 2.0 sonunda yayınlandı. Bana çook uzun gelen bu bekleyişin sonunda hem bazı şeyleri tekrar ederek hem de SL 2.0 ile ilgili yeni bilgiler vererek bu dünyaya giriş yolunda başlangıç noktasında olanlar için bir rehber hazırlamaya karar verdim. Buyurun beraber ilerleyelim.

Silverlight 2.0 Runtime

Silverlight uygulamalarının istemci tarafında yani tarayıcı içerisinde çalışabilmesi için sistemde Silverlight 2.0 RunTime'ın yüklü olması gerekiyor. Bu paket şu anda 4MB büyüklüğünde ve otomatik olarak RunTime'ı yükleyecek mekanizmalar zaten Silverlight projelerine dahil ediliyor. Bu RunTime şu anda tüm tarayıcılarda çalışıyor ve Windows, Mac sürümleri mevcut. Windows Mobile, Linux ve Symbian konusunda çalışmalar devam ediyor.

Silverlight 'ın çalışabilmesi için sunucu veya istemci tarafında kesinlikle .NET Framework yüklü olması gerekmiyor!

Gelen yenilikler...

Silverlight 2.0 ile beraber artık Silverlight uygulamaları programlarken VB, C#, JavaScript, IronPyhton ve IronRuby dillerini kullanabilirsiniz.

1.0 sürümünde eksik olan ana form kontrollerinin RunTime'a eklenmesinin yanı sıra Layout kontrolleri, Calendar gibi özel kontroller ve DataGrid gibi veri kontrolleri de kullanımımıza sunuluyor. Tüm bu kontrollerin tasarımları ile ilgili WPF'den de alışık olduğumuz şablonlama yapısı kullanılabilir.

Silverlight 2.0 ile REST, WS*/SOAP, POX, RSS, ve HTTP kullanılarak farklı verilere ulaşmak mümkün. Bu çerçevede Cross-Domain-Request için de Policy File aracılığı ile destek sağlanıyor.

Aslında Silverlight 2.0 ile gelen Core CLR .NET'te alışık olduğumuzdan pek farklı değil. İstemci tarafında çalışacağımız için HTML/DOM entegrasyonu, LINQ ve özellikle XLINQ gibi tüm yapılar Silverlight 2.0 içerisinde de mevcut.

Gelecek neler getirecek?

AJAX Control Toolkit'i hatırlayanlarınız vardır. Aynı şekilde WPF için de bir control toolkit çıkarıldı. Şimdi de sıra Silverlight tarafında. "Silverlight Control Pack" adı verilen paket CodePlex üzerinden yayınlanacak TreeView gibi güzel kontroller olacak. Paket tamamen açık kaynaklı olarak yayınlanacak.

Eclipse özellikle Cross-Platform bir yazılım geliştirme aracı olarak bilinen IDE'lerden biri. Microsoft sponsorluğunda ilerleyen Soyotec'e ait bir proje ile Eclipse'e Silverlight geliştirme entegrasyonu uygulanacak. Ek olarak Microsoft Silverlight XAML'ının "Open Specification" olarak duyurdu, yani isteyenler bu XAML kodunu üreten veya yazan yazılımlar üretebilecekler.

Araçlar nerede?

Her zamanki gibi Visual Studio üzerinde "Silverlight Tools" paketini kurmanız gerekiyor. Bu paket ile beraber Silverlight SDK, proje şablonları, Intellisense desteği gibi noktlar Visual Studio'ya dahil oluyor. Sonrasında tabi ki Silverlight 2.0 uygulamalarını tasarımı için de Expression Blend'e ihtiyacımız var. Blend'in son yayınlanan sürümü olan 2.0 sürümü sadece Silverlight 1.0 destekliyor. Blend 2'ye Silverlight 2.0 desteğinin gelmesi için Blend 2 SP1'in yüklenmesi gerek. Silverlight 2.0 Beta 2 günlerini hatırlayan Blend 2.5'i de hatırlayacaklardır, artık 2.5 diye bir şey yok :)

Silverlight Tools for Visual Studio 2008 SP1 (72.1MB)
Microsoft Expression Blend 2 Service Pack 1 (17.8MB)
Deep Zoom Composer (3.8MB)

Silverlight 2.0 Tools paketi artık Visual Studio'nun Express sürümlerini de destekliyor. Yani Silverlight uygulamaları programlamak için çok kuvvetli ücretsiz bir alternatifiniz var.

Nasıl öğrenebilirim?

Silverlight 2.0 öğrenebilmeniz için başta Silverlight 2.0'ın desteklediği programlama dillerinden birini öğrenmeniz gerek. Bu noktada ağırlıklı olarak C# ve VB karşımıza çıkacaktır. Aşağıdaki adreste benim şu anda Silverlight 2.0 ile ilgili toplam 55 makalem var.

http://daron.yondem.com/tr/formatpage.aspx?path=liste.format.html#Silverlight

Makaleleri incelemeye başlarken Silverlight 2.0 seminerlerime ait videoları de SeminerTV bölümünden edinebilirsiniz. Çok yakında Silverlight 2.0 ile ilgili farklı detaylara yönelik seminer, ücretsiz eğitimleri de blogumdan duyuracağım.

Hepinize kolay gelsin!

INETA Summer Hit üzerinden uzun bir zaman geçti gibi hissettiğimiz bu günlerde yeni bir aktivite serisi ile tekrar karşınızdayız. Bu sefer İstanbul değil Anadolu'nun merkezi, Başkentimiz Ankara'da olacağız.

Dikkat ederseniz İstanbul'daki Summer Hit sonrası içeriğimizi de epeyce değiştirdik. Tabi bunda sizlerin doldurmuş olduğu değerlendirme formlarının etkisi çok büyük. Bu sefer çok daha sıkışık ve yoğun bir tempomuz olacak. Hediyelerimiz daha fazla (hatta çok ilginç beklenmedik şeyler var :)) ve içecek sorununu da hallettik (:))

İlk gün sabah yine SL 2.0 ile başlayıp sonra benim çok önem verdiğim IIS 7'ye geçeceğiz. IIS 7.0 üzerinde ASP.NET ve PHP tarafında çok güzel yenilikler var. Sonrasında her zamanki gibi bir sohbet panelimiz olacak. Son olarak LINQ ile ilk günümüzü kapatacağız. İkinci gün WPF ile başlayarak ADO.NET Data Services konusunu inceleyeceğiz. Heyecanlandığınızın farkındayım :) Sonrasında IE 8.0 ile gelen yazılımcı ve tasarımcıları ilgilendiren yenilikler ve yeni uygulama platformlarını inceleyerek WCF dünyasına da atılarak iki günü sonlandıracağız.

Aktiviteye üniversite girişinde güvenlik sorunları yaşamamak adına kayıt olmanız şart.

Kayıt adresi: http://daron.yondem.com/kayit/

Emeklerinden dolayı buradan sevgili MSP, Çağrı Erdoğan'a çok teşekkür ediyorum.

Aktiviteyi duyururken geçen sefer güzel bir başarı elde etmiştik. Bu sefer de yine aşağıdaki bannerı kullanabilirsiniz. Banner'a tıklandığında link olarak da kayıt adresini verebilirsiniz.

Hepinizi bekliyorum ;)

Expression Blend içerisinde eksikliği en çok eleştiri alan özelliklerden biri XAML Intellisense bulunmaması. Konsept olarak Expression ürün ailesi tasarımcıları hedeflediği için Blend içerisinde XAML kodunun elle yazılmayacağı düşünülerek herhangi bir Intellisense desteği sağlanmıyor. Eğer elle düzenlemek istersek söz konusu XAML dosyalarını Visual Studio ile açarak ilerlemek durumunda kalıyoruz.

Bu eksiklik göz önüne alınarak Expression Blend 2.5 ile beraber gelen Add-In altyapısı kullanılarak Blend içerisinde XAML Intellisense desteği getiren bir eklenti yayınlandı. Yükleme paketini aşağıdaki adresten bilgisayarınıza indirebilirsiniz;

http://code.msdn.microsoft.com/Release/ProjectReleases.aspx?ProjectName=BlendSense&ReleaseId=1358

Yükleme paketi içerisindeki dosyaların Blend'in yüklü olduğu klasöre kopyaladıktan sonra paket içerisindeki Blend.bat üzerinden Blend'i açabilirsiniz. Blend 2.5 ile herhangi bir Add-In kullanabilmeniz için gerekli Add-In'in DLL dosyasının yolunun program açılırken argument olarak aktarılması gerekiyor. O nedenle ister hali hazırdaki kısayollarınızı bu şekilde düzenleyiz ister Blend.bat dosyasını kullanın, karar sizin.

Blend 2.5 içerisinde XAML Intellisense Add-In

Bahsettiğimiz Add-In'in şimdilik sadece Blend 2.5 June Preview ile uyumlu olduğunu ve ancak WPF projelerinde Intellisense sağlayabildiğini de hatırlatarak yazımı sonlandırıyorum.

Hafta sonuna gelmesi gerçekten muhteşem :) Ne kadar heyecanlı olduğumu anlatamam. Silverlight 2.0 Beta 2 ile beraber gelen yenilikler ve diğer Silverlight 2.0 yazılarımı sizlerle paylaşmaya devam edeceğim. Fakat onun öncesinde gelin hızlı bir şekilde Silverlight 2.0 Beta 2 ile beraber gelen yeniliklere bir göz atalım.

• Runtime içerisinde daha çok kontrol var!
• Go-Live lisansı geldi!

İlk olarak Silverlight 2.0 Beta 1 ile beraber Plug-In haricinde gelen ve her seferinde DLL dosyalarını XAP paketimize eklemek zorunda kaldığımız kontrollerin çoğunun artık Plug-In'e dahil edildiğine dair müjdeyi vermem gerek. Böylece artık Silverlight 2.0 uygulamalarımızın XAP paketleri çok daha küçük olacak. Diğer yandan Silverlight 2.0 Beta 2 ile beraber artık Go-Live lisansı da geliyor, yani artık yavaş yavaş ticari uygulamalara geçiş yapabilir, hazırladığınız uygulamaları müşterilerinize sunabilirsiniz. Tabi ileriki sürümlerde yine altyapıda değişiklikler olacaktır, ürün RTM olana kadar bu risk geçerli olacak.

• TabPanel kontrolü geldi
• Calendar kontrolünde yenilikler var! (Çoklu gün seçimi artık mümkün)
• WPF'deki Control Templating desteği Expression Blend 2.5 June Preview içerisinde

Control Templating muhteşem bir esneklik sağlıyor. Bu konuda daha önce bir makale yazmıştım fakat herşeyi XAML kodundan elle yapmak zorunda kalmak pek hoş değil. Artık Expression Blend 2.5'in yeni sürümü olan June Preview ile beraber Silverlight 2.0 projeleri için de Control Templating desteği geliyor.

• TextBox içerisinde Copy/Paste desteği
• Tam ekran uygulamalarda klavyedeki oklar, tab, enter, "home", "end", boşluk, "pageup" ve "pagedown" tuşlarına ek destek. Eski sürümlerde hiçbir tuş desteklenmiyordu.
• Adaptive Streaming
• DRM

Video konusunda "adaptive streaming" gerçekten çok önemli. Otomatik olarak istemcideki işlemci kullanımını ve bant genişliğine göz önüne alarak hedef video kaynağında varsa farklı bitrate ayarlarındaki videoları otomatik olarak seçebilen bu sistem çok değerli bir altyapı sunuyor. Diğer yandan DRM (Digital Rights Management) da artık karşımızda; Windows DRM ve PlayReady DRM destekleniyor.

• Visual State Manager

Muhteşem bir sistem! Artık her kontrolün farklı durumlarında ne şekilde gözükebileceğini tek tek Expression Blend 2.5'in arayüzünden ayarlayabiliyorsunuz. Örneğin bir Button'un MouseOver durumunda nasıl gözükeceğini ayarlıyorsunuz ve farklı durumlar arasında geçiş animasyonlarını da sistem otomatik olarak sizin için yapıyor. Eskiye kıyasla kontrollerin özelleştirilmesi gerçekten kolaylaştıracak olan bu sistem ileride WPF'e de aktarılacak. Aslında Silverlight WPF'in torunu olmasına karşın yine ilk olarak Silverlight içerisinde karşımıza çıkan ve sonradan WPF'e aktarılacak bir sistem ile karşı karşıyayız :)

• Cross-Domain Request desteği
• WCF üzerinden Duplex Bağlantı

Beta 2 ile beraber hem HTTP hem de Socket programlamada cross-domain desteği policy XML dosyaları aracılığı ile sağlanabiliyor. Ayrıca hali hazırda Flash'ın da kullanmakta olduğu XML policy dosyalarına destek bulunuyor. Sunucu tarafında Push veri alımı ile ilgili sadece Socket programlama bir alternatif olarak gözükürken artık WCF servislerinde de aynı yapı kullanılabiliyor.

• .NET Framework 3.5 SP1 ile beraber gelecek olan ADO.NET Data Servisleri'ne tam destek
• LINQ to JSON

Yeni çıkan ASP.NET 3.5 AJAX kitabımda da bahsetmiş olduğum LINQ sorguları ile JSON verilerinin sorgulanmasına ait sistemin bir benzeri Silverlight içerisinde de entegre edildi. Böylece hali hazırda JSON formatında veri kaynağı sağlayan servislerden gelen verileri çok daha rahat sorgulayabileceğiz.

• DataGrid Yenilikleri : Kolon bazlı sıralama yapabilme, sürükle ve bırak tekniği ile kolonların yerlerinin değiştirilebilmesi.
• Isolated Storage içerisinde uygulamaların sakladıklarına artık son kullanıcılar da Silverlight uygulamalarında sağ tuş ile tıklayarak gelen menüden ulaşabilecekler.

Tüm bu yeniliklerle ilgili ayrı ayrı makaleleri tabi ki sizlerle paylaşıyor olacağım. Bu gerçek bir yenilik ziyafeti :) developer olmayı işte bu yüzden çok seviyorum ;)

Download adresleri:

Silverlight 2.0 Beta 2 Runtime (4,66MB)
Microsoft Silverlight Tools Beta 2 for Visual Studio 2008 (84,3MB)
Expression Blend 2.5 June Preview (32,3MB)

Özellikle beni microbloğum twitter.com üzerinden takip edenlerin farkında olacağı üzere hafta sonunu Ankara'da geçirdim. Cumartesi gece yarısı yola çıkarak sabahına Ankara'ya vardım ve sabah 10.00 gibi EMO (Elektrik Mühendisleri Odası) Ankara şubesinde eğitim serimize başladık. WPF, AJAX, Silverlight ve LINQ konularına değindiğimiz eğitimi Pazar akşamı 18.00'da bitirdik.

EMO Eğitim Serisi başlangıcından bir kare...

Eğitime katılan arkadaşlara özellikle Silverlight örneğindeki kodları blogumdan paylaşacağım konusunda söz vermiştim. Aşağıdan gerekli dosyaları bilgisayarınıza indirebilirsiniz.

Örnek Kodlar - 25052008_2.rar (8,57 KB)

Eğitime katılan ve kocaman bir hafta sonu boyunca yeni teknolojiye olan ilgilerini ve konsantrasyonlarını en yüksek seviyede tutan tüm arkadaşlara çok teşekkür ediyorum (Özellikle ikinci gün sınıfa pasta alan kamera fobili arkadaşımıza ek teşekkürler :))

INETA ve EMO işbirliğinizde düzenlediğimiz bu eğitime katkısından dolayı ODTÜ Bilgisayar Mühendisliği Araştırma Görevlisi Serdar Çiftçi'ye, eğitimlere laboratuar ortamı sağlamakla beraber gösterdikleri sıcak misafirperverlik için de tüm EMO ekibine teşekkürler.

Heyecanla beklediğimiz an geldi. Sonunda Expression Studio 2 gerçek, son sürümü ile karşımızda! Benim gibi heyecanlananlar hemen yeni paketin deneme sürümlerini aşağıdaki adresten indirebilirler.

http://www.microsoft.com/expression/try-it/Default.aspx

Daha önceleri Expression Design 2 ile ilgili bir yazı yazmıştım. Yavaş yavaş tüm Expression Studio 2 paketi ile beraber gelen yeniliklere tek tek değinen yazılar yazacağım. Kabaca değerlendirdiğimizde aşağıdaki yenilikleri ilk bakışta dikkati çekiyor.

Expression Web 2 ile beraber PHP desteğinin yanı sıra Adobe Photoshop'tan Import özellikleri geliyor.
Expression Blend 2 ile beraber Silverlight desteğinin yanı sıra Vertex-Animasyon ve yeni Split-Design arayüzü geliyor.
Expression Design 2 ile beraber muhteşem Slice sistemi geliyor.
Expression Media 2 ile beraber güncel RAW format desteği geliyor.
Expression Encoder 2 ile beraber video sıkıştırmasında ayarlar ve detaylar artık uzmanlık seviyesine ulaşıyor.

Uykusuz gecelerimize yeni oyuncaklar geldi :)

Ücretsiz eğitimler devam ediyor. Bugün de tam günlük bir WPF ve Expression Blend eğitimi ile TBD ve INETA işbirliğinde toplandık. WPF ile iki ve üç boyutlu animasyonlara ve bunların programatik olarak kullanımına değindik. Ayrıca WPF ve Winforms'un beraber kullanımını, WPF Browser Application mantığını da örneklerle inceledik. Eğitimin sonunda sevgili Oytun Deniz geçen organizasyonda kaçırdığı Vista Ultimate şansını yakalayarak hemen gözden kayboldu :)

WPF Eğitimi Sonu

Gün boyunca yaptığımız, çalışan, çalışmayan tüm örnekleri aşağıdan indirebilirsiniz :)

Örneklere ait kaynak kodları - 06042008_2.rar (2,38 MB)

PCnet'in Nisan sayısındaki yazılarımı her ay olduğu gibi yine buradan sizlere duyurmak istiyorum :) Derginin OKUL bölümünde AJAX, ASP.NET 3.5, Expression Blend ve Silverlight ile ilgili yazılarım yer alıyor.

AJAX : ASP.NET AJAX İstemci Özellikleri
Expression Blend : WPF ile zengin doküman uygulamaları
Silverlight: Silverlight ve video dünyası
ASP.NET 3.5 : Bir sitenin ekran görüntüsünü ASP.NET ile nasıl alırsınız?

Hepinize sevgiler.

Silverlight 2.0 yazılarıma başladığım günlerde aklıma olmasına rağmen atladığım bir yazıyı bugün sizlerle paylaşıyorum. Seminer ve eğitimlerde karşılaştığım kadarıyla hem Silverlight'ın sürümleri arasında hem de Silverlight ile geliştirme yapılacak araçların sürümleri arasında ciddi bir kafa karışıklığı söz konusu. Gelin elde neler var, ve ne yapmak için ne kullanmamız gerekiyor bir göz atalım.

Expression Blend : Blend'in ilk sürümünde WPF uygulamaları geliştirebilirsiniz fakat Silverlight uygulaması geliştiremezsiniz. Bunun nedeni aslında çok basit. Blend ilk çıktığında ortada Silverlight diye birşey yoktu. O nedenle ürün içerisinde de böyle bir destek yok. Özetle Expression Blend'in ilk sürümünün SL dünyasında yeri yok.

Expression Blend 2 : Blend'in bir sonraki sürümü olan Blend 2'nin Nisan ayı içerisinde satışa sunulması yani "release" olması bekleniyor. Bu sürüm içerisinde tabi ki Silverlight 1.0 desteği var. Şu an Blend 2'nin Beta'sını indirerek bilgisayarınızda çalıştırabilir ve SL 1.0 uygulamaları geliştirebilirsiniz. Adı sonradan SL 2.0 olarak değiştirilen SL 1.1 uygulamaları da yine Blend 2 içerisinde geliştirilebiliyordu fakat bu sistem değişti. Artık SL 1.1 kalmadığına göre zaten bu kullanımın da doğru olduğunu söyleyemez. Daha önceleri SL 1.1 kullananlara tavsiyem sistemlerindeki SL 1.1 ile ilgili herşeyi kaldırmaları.

Expression Blend 2.5 : Silverlight 2.0 uygulamaları geliştirmek istiyorsanız Expression Blend 2.5 ile yola çıkmanız gerekiyor. Unutmayalım ki SL 2.0 daha Beta 1 aşamasında bu nedenle Blend 2.5 de Preview sürümü ile karşımıza çıkıyor.

Microsoft Silverlight 1.0 Software Development Kit : Silverlight 1.0 ile ilgili uygulama geliştiriyorsanız sisteminize bu paketi yükleyerek hem yardım dosyalarından hem de Visual Studio'ya entegre olan SL Proje şablonundan faydalanabilirsiniz.

Microsoft Silverlight Tools Beta 1 for Visual Studio 2008 : Adından pek anlaşılmasa da aslında bu paket SL 2.0 için hazırlanmış durumda. VS içerisinde SL 2.0 proje şablonlarını ve gerekli Intellisense desteğini yüklüyor. Paket içerisinde aslında ayrıca da indirilebilen SL 2.0 BETA SDK da bulunuyor.

Benim her zamanki tavsiyem SL 2.0 ile ilgili yüklemeleri SL 1.0 uygulaması geliştirdiğiniz makinelere yapmamanız yönünde. Mümkünse bir sanal makine kullanarak SL 2.0 uygulama çalışmalarınızı söz konusu makine üzerinde devam ettirin.

Hepinize kolay gelsin.

Blogumdaki bazı yazıları yazgelistir.com üzerinden de sizlerle paylaştığımı biliyorsunuz. Özellikle Silverlight bölümü editorü olduktan sonra biraz daha sıkı çalışarak toplam 12 makalemin yayınlanmasını sağladım. Makalelere oylarınızı bekliyorum ;)

Silverlight içerisinde dinamik animasyonların yaratılması
Silverlight uygulamalarında Roller kullanımı
Slide.Show kurulumu ve kullanımı
Dinamik Silverlight nesneleri yaratmanın yolu : createFromXaml
Silverlight nesnelerini fare ile ekranda döndürün!
Silverlight ile bir EKG animasyonu
Silverlight animasyonlarında fare imlecini değiştirmek.
Animasyonla bir Silverlight düğmesi nasıl yaratılır?
Silverlight projelerinde Silverlight.JS dosyası
Silverlight Projelerini Ana Hatları
Silverlight Uygulamalarında Brush Yapıları
Silverlight ile MediaElement Kullanımı

Ücretsiz eğitim konseptinde düzenlediğimiz INETA ve NETRON sponsorluğundaki Silverlight 1.0 eğitimine gelen ve gelmeye devam eden büyük ilgi daha önce de tahmin ettiğim bir durumdu. Bu konuda maalesef "talihli" olamayıp seçilemeyen arkadaşlar haklı olarak sitemkar mailler gönderiyorlar. Emin olun bu tarz aktivitelere devam edeceğiz, mekan sponsorları aramaya devam ediyorum.

Bundan yaklaşık bir ay kadar öncesinde sevgili Burcu Kutlu ile temellerini attığımız bir diğer etkinliği bugün sizlere duyurmak istiyorum. Bu sefer de INETA ve TBD Genç işbirliği ile birer tam günlük dört farklı konuda bilgisayar başında eğitimler açıyoruz. "Bir günlük eğitim mi olur?" derseniz aslında haklısınız ama en azından kendi adıma düşündüğümde 3 saatlik seminerlerimden sonraki adım diyebilirim. Diğer Silverlight eğitimini 3 gün olarak tasarlamıştık. Umarım yakında bu gibi ücretsiz eğitimlerin sayısını arttıracağız. Bu seferlik dört konu, dört gün ;)

23 Mart - ASP.NET 3.5 AJAX
30 Mart - Silverlight
6 Nisan - Expression Blend ve WPF
13 Nisan - ASP.NET 3.5 ve LINQ

Eğitim saatleri her gün 10.00-18.00 arasında, eğitim yeri TBD İstanbul (Ali Ruhi Sok. No:2, K.3, Hasanpaşa/ Kadıköy).

Kayıt için bu adresi kullanabilirsiniz; http://www.tbdgenc.org/index.php?page=activityjoin&lang=tr&id=29

Buradan özellikle tekrar sevgili Burcu Kutlu'ya aktivitenin organizasyonundaki yoğun emekleri için çok teşekkür ediyorum.

Expression Studio yazılım paketi Microsoft'un tasarımcıları hedefleyen ve bizim WPF, Silverlight dünyasında harikalar yaratmamızı sağlayan ürünleri içeriyor. Expression Studio'nun yeni sürümü olarak Expression Studio 2 paketinin Beta sürümü Microsoft sitesinde downloada sunuldu. Yazılımlar Beta olduğu için her zamanki uyarımı yaparak sanal makine kullanmanızı normalde kullandığınız bilgisayarlarınızı riske atmamanızı tavsiye ediyorum. Download adreslerini aşağıda bulabilirsiniz. Uygulamalarla ilgili gelen yenilikleri ayrı yazılar olarak sizlerle paylaşacağım.

Expression Studio Beta 2 (303 MB)

Silverlight bir sonraki sürümü olan Silverlight 1.1'den uzun süre önce blogumda bahsetmiştim. Özellikle arka planda .NET Framework desteğini de alarak VB, C# kullanabiliyor olmak bile yeterince heyecan verici. Eski adıyla Silverlight 1.1 bir süre önce 2.0 olarak değiştirildi ve şu anda Silverlight 2.0'ın Beta sürümünü de bilgisayarınıza indirerek yükleyebiliyorsunuz. Linkleri aşağıda sizlerle paylaşıyorum.

Silverlight 2.0 Beta 1 Runtime Plug-In
Microsoft Silverlight Tools Beta 1 for Visual Studio 2008
Silverlight 2 Beta 1 SDK

Tabi yenilikler bu kadarla kalmıyor. Daha Expression Blend 2 çıkmadan Expression Blend 2.5 Mart Preview da karşımızda. Silverlight 2.0 Beta ile beraber gelen yeniliklerden faydalanarak uygulama geliştirebilmek için Blend 2.5'in de bilgisayarınızda kurulu olması şart.

Expression Blend 2.5 March Preview

Özellikle Silverlight'ın bir sonraki sürümü Alpha seviyesinden Beta 1'e gelmiş olsa da sizleri uyarmam gerek. Tavsiyem bu yazılımları sadece sanal makinelere yüklemenizdir, aksi halde her tür sorunla karşılaşabilirsiniz ve bundan kimse de sorumlu tutulamaz :) Özellikle şu an Silverlight 1.0 ile proje geliştirenlerin çok dikkatli olmasında fayda var, Silverlight 1.1 Alpha yüklü makinelerde normal Silverlight 1.0 ile ilgili de birçok sorun yaşanıyordu. Aynı durum burada da mümkün olabilir. Bu nedenle ben şiddetle bu yazılımları deneyebilmeniz için sanal makine kullanmanızı ve normal çalışma ortamınızı zedelememenizi tavsiye ederim.

Hepinize kolay gelsin.

PCnet'in Mart sayısındaki yazılarımı her ay olduğu gibi yine buradan sizlere duyurmak istiyorum :) Derginin OKUL bölümünde AJAX, ASP.NET 3.5, Expression Blend ve Silverlight ile ilgili yazılarım yer alıyor.

AJAX : İnce ayar AJAX.
Expression Blend : WPF tasarımında görsel kaynaklar
Silverlight: Silverlight projelerinin bileşenleri
ASP.NET 3.5 : ASP.NET 3.5 Veri Kontrolleri

Hepinize sevgiler.

PCnet'in Şubat sayısındaki yazılarımı her ay olduğu gibi yine buradan sizlere duyurmak istiyorum :) Derginin OKUL bölümünde AJAX, ASP.NET 3.5, Expression Blend ve Silverlight ile ilgili yazılarım yer alıyor.

AJAX : Zaman doluyor, AJAX istekleri yolda.
Expression Blend : WPF Uygulamalarında internette
Silverlight: Silverlight ve JavaScript
ASP.NET 3.5 : ASp.NET 3.5 ve LINQ2SQL

Tüm bu yazılara ek olarak Şubat sayısına özel ".NET Framework 3.5'in Yıldızı: LINQ" makalem de OKUL bölümünde yer alıyor :)

Hepinize kolay gelsin.

PCnet'in Ocak sayısındaki yazılarımı her ay olduğu gibi yine buradan sizlere duyurmak istiyorum :) Derginin OKUL bölümünde AJAX, ASP.NET 3.5, Expression Blend, Expression Design, Silverlight ve Expression Web ile ilgili yazılarım yer alıyor.

AJAX : UpdateProgress ile asenkron yüklemelerin takibi
Expression Blend : Animasyonlar ve Tetikleyiciler
Expression Web: Expression Web ile Veri Oyunları
Expression Design : Vektörel Çizim Araçları

Tüm bu yazılara ek olarak Ocak sayısına özel sürpriz makalelerim :)

FaceBook uygulamanızı geliştirin ! : ASP.NET bilgisiyle kolay yoldan FaceBook uygulamaları geliştirmenin yollarını inceliyoruz.
Visual Studio 2008 Bilgisayarlarımızda! : Visual Studio 2008 ve ücretsiz Express sürümleri bilgisayarlarımıza girdi. Peki yeni neler geldi?

Hepsi PCnet Ocak sayısında! :)

Hepinize kolay gelsin.

2008'in ilk aktivitesini CETURK.com organizasyonunda Microsoft, İstanbul / Dikilitaş binasında gerçekleştiriyoruz. "2008 Microsoft Vizyonu ve Yeni Teknolojileri Semineri" olarak adlandırdığımız güne hepiniz davetlisiniz :) 12 Ocak, Cumartesi günü sabah 10'dan başlayarak 17.30'a kadar sürecek olan seminerlerin konuları arasında Expression Web, Design, Blend, Silverlight, Visual Studio 2008, LINQ bulunuyor. Expression Blend ile WPF Animasyonları ve Silverlight 1.0, 2.0 Uygulamaları bölümünü 12.30-14.30 arasında ben sunuyor olacağım.

Programın detayları ve seminere kayıt için aşağıdaki linki kullanabilirsiniz.

http://www.ceturk.com/etkinlikkayit.asp?id=35

Dün mail ile WPF ve LINQ'nun beraber kullanılıp kullanılamayacağı ile ilgili güzel bir soru geldi. Ben bu soruyu hemen ufak bir blog yazısına çevirerek bilgiyi buradan sizlerle de paylaşmak istiyorum. WPF ile LINQ'nun beraber kullanılabilmesi aslında WPF'in .NET Framework 3.5 ile kullanılabilmesine bağlı. WPF esasen .NET Framework 3.0'ın bir parçasıdır fakat tabi ki .NET Framework 3.5 ile beraber de kullanılabiliyor hatta 3.5'in 3.0 üzerine geldiğini düşünürsek aslında WPF 3.5'in de bir parçası. Peki nasıl olacak da bir WPF uygulamasını .NET Framework 3.5 ile çalışır hale yaratacağız. Aslında cevap pek zor değil, doğrudan Visual Studio 2008 kullanabilirsiniz. Tek yapmanız gereken Visual Studio 2008'in Multi-Targeting özelliğinden faydalanarak .NET Framework 3.5'i seçmek.

Visual Studio 2008 içerisinde .NET Framework 3.5 ile WPF Projesi

Aslında esas sorun Expression Blend tarafında. Expression Blend içerisinde yeni bir WPF projesi oluşturmak isterseniz projeniz otomatik olarak .NET Framework 3.0'ı hedefleyecektir. Bunun nedeni Expression Blend'in .NET Framework 3.5'ten önce yayınlanmış olması. Bu sorunu şimdilik çözmek için Expression Blend 2 December Preview kullanabilirsiniz.

Expression Blend 2 December Preview içerisinde .NET Framework 3.5 desteği.

Yukarıda Expression Blend 2'nin proje yaratma penceresinde farklı Framework sürümlerini seçebiliyorsunuz. Tabi tüm bunlara ek olarak unutmamak gerek ki projenizi .NET Framework 3.5 desteği ile Visual Studio 2008 içerisinde yarattıktan sonra Expression Blend'in yayında olan sürümüyle de söz konusu projeyi açarak düzenleyebilirsiniz. Sorun sadece yeni proje yaratırken karşımıza çıkıyor.

.NET Framework 3.5 ile bir WPF uygulaması yaratırken tüm .NET Framework 3.5 projelerinde olduğu gibi WPF ile de LINQ'yu rahatlıkla kullanabilirsiniz.

Hepinize mutlu yıllar :)

KKTC, Doğu Akdeniz Üniversitesi'ndeki Silverlight seminerinden sonra dün bir de Expression Studio semineri yaptık. Özellikle WPF ile iki ve üç boyutlu animasyonların hazırlanması ve programatik yönetimi katılımcıların ilgisini çekti. Hatta tüm bu işlemlerin ne kadar kolay yapılabildiğini gören bazı öğrencilerden ilginç tepkiler de almadım değil :) Semineri İngilizce olarak düzenlediğimiz için sunumlar da yine ingilizce.

Expression Studio Sunumları - 28122007_2.pdf (2,72 MB)

Seminerin düzenlenmesinde katkılarından dolayı DAÜ ACM grubundan Arif Görkem Güngör'e buradan tekrar teşekkür ediyorum. Aktiviteden bir fotoğraf ile yazımı sonlandırıyorum ;)

KKTC, Doğu Akdeniz Üniversitesi Expression Studio Semineri

yazgelistir.com'a gönderdiğim yedi makalem daha yayınlanmış. Makalelere aşağıdaki adreslerden ulaşarak oylayabilirsiniz :)

Silverlight XAML kodlarını ASP.NET ile yaratmak.
AJAX ve WCF Kullanımı
Expression Studio Savaşları Bölüm 1 : Expression Design
Expression Studio Savaşları Bölüm 2 : Expression Web
Expression Studio Savaşları Bölüm 3 : Expression Media
Expression Studio Savaşları Bölüm 4 : Expression Blend
Expression Studio Savaşları Bölüm 5 : Expression Encoder

Silverlight uygulamaları hazırlarken Expression Blend'in 2.0 sürümünü kullanmamız gerekirken maalesef 2.0 sürümünün hala Preview aşamasında olmasa epey sıkıntı yaratıyor. Durum böyle olunca Preview'ların sürümlerini de yakından takip etmek şart. Takriben her ay yeni bir Preview çıkıyor zaten her bir Expression Blend 2 Preview sürümü de söz konusu ayın ismi ile anılıyor. Şu an Expression Blend 2'nin December Preview sürümünü hemen aşağıdaki adresten bilgisayarınıza indirebilirsiniz.

http://www.microsoft.com/expression/products/download.aspx?key=blend2preview

Özellikle Visual Studio 2008 ile proje dosyaları uyumluluğunun gelmesi zaten beklediğimiz bir gelişmeydi. Diğer yandan Silverlight tarafına baktığımızda da aslında Expression Blend 2 arayüzü epey bir derlenip toparlanmış. WPF tarafında olup Silverlight tarafında desteklenmeyen özelliklere ait panellerin program içerisinde Silverlight projelerinde gereksiz yere gözükmesi engellenmiş. Böylece artık özellikle Silverlight seminerlerimde "Programın bu bölümü burada gözüküyor fakat Silverlight ile çalışmıyor sadece WPF'de var." demekten kurtuldum :)

Dün Expression Blend ve WPF webinerini başarılı bir şekilde gerçekleştirdik. Webiner boyunca WPF ile 3D animasyon ve Visual Studio 2008 entegrasyonu ile VB ve C# kodları ile animasyon yönetimini inceledik.

Webinere ait sunum dosyasını aşağıdan indirebilirsiniz.

Webiner Sunumu - 08122007_1.pdf (1.07 MB)

Webinere katılan herkese tekrar teşekkür ediyorum. Bir başka webinerde görüşmek dileğiyle.

PCnet'in Aralık sayısı yine dopdolu :) Derginin OKUL bölümünde AJAX, Silverlight, Expression Web, Expression Blend, Expression Media ve Expression Design ile ilgili yazılarım yer alıyor. Ayrıca Aralık sayısından itibaren dünyada ilk defa :) ASP.NET 3.5 bölümü PCnet'te!

ASP.NET 3.5 : ASP.NET 3.5 Geliyor!
AJAX : UpdatePanel uzmanlığı
Silverlight : Kolay Yoldan Silverlight Animasyonları
Expression Blend : MediaElement ile Video Sihirleri
Expression Web: Expression Web ile yolculuğa devam
Expression Design : İlk Windows Programımızı Tasarlayalım
Expression Media : Mültimedya Dosya Yönetimi

Tüm bu yazılara ek olarak Aralık sayısına özel sürpriz makalem :)

Yeni nesil MashUP uygulamaları : MashUp uygulamaları hazırlamanın zevki Microsoft Popfly ile kat kat arttı.

Hepsi PCnet Aralık sayısında! :)

Daha fazlasını mı istiyorsunuz? PCnet ile beraber Expression Studio paketinden Blend, Web, Design, Encoder, Media'nın deneme sürümleri de DVD olarak geliyor.

Hepinize kolay gelsin.

7 Aralık, Cuma günü saat 15.15-16.00 arasında WPF ve Expression Blend webineri ile tekrar karşınızda olacağım. Webiner süresince Expression Blend ile WPF Windows uygulamaları geliştirirken vektörel animasyonların kullanımına değineceğiz. Tabi sadece iki boyutlu uygulamalarla kalmayacağız ve 3D animasyonların da Expression Blend içerisinde hazırlanmasını ve Visual Studio 2008 ile 3D animasyonların VB veya C# kodları ile kontrol edilmesini inceleyeceğiz.

Meeting ID: CG7ZWK
Webiner Bağlantısı :https://www112.livemeeting.com/cc/microsoft/join?id=CG7ZWK&role=attend&pw=2kDD%7E%2Bk%5Cr 
Webinere kayıt olmak için tıklayınız.

Bu webiner Microsoft Kurumsal Webiner serisinden olduğu için yukarıdaki linkten giriş yaparak kayıt olmanız gerekiyor.

Expression Savaşları yazı dizimde sonlara sakladığım Expression Blend benim en büyük favorim :) Kendimi kaptırıp WPF'in ne kadar muhteşem bir altyapı sunduğundan bahsetmeden Expression Blend'e geçmek aslında bir hata olur ama aksi halde de bu yazı bitmez. O nedenle ilk başta sunu söyleyelim, maalesef Expression Blend'in tam olarak bir rakibi yok.

WPF (Windows Presentation Foundation) nedir?

.NET Framework 3.0 ile beraber gelen bence en önemli altyapısal yenilik WPF'dir. XML tabanlı XAML kodları ile vektörel nesnelerin tanımlanabilmesinin ötesinde bu nesnelere çok kolay bir şekilde animasyonların verilmesini sağlayan WPF tüm bu verileri XML ile tanımlıyor. Tabi kimse bizden bu XML kodlarını elle yazmamızı bekleyemez :) O nedenle işte tam bu noktada Expression Blend devreye giriyor.

Expression Blend arayüzü.

İki ve Üç Boyutlu Animasyonlar ile Windows Uygulamaları

WPF ile Windows uygulamalarında vektörel çizimler ve animasyonlar hazırlamak bu kadar kolaylaşmışken Expression Blend tüm bu işlemleri çok daha kolaylaştırarak en ufak bir kod bile yazmadan çalışılabilecek bir ortamı tasarımcıların beğenisine sunuyor. Expression Blend içerisinde hiçbir kod yazmadan 2 ve 3 boyutlu nesnelere animasyonlar verebiliyor, animasyonlar için tetikleyiciler düzenleyebiliyorsunuz. Bu kadarla da kalmayıp WPF'e özel .NET kontrollerini kullanabiliyor ve tüm bu kontrollerinin görsel özellikleri ile çok kolayca oynayabiliyorsunuz. Hazırladığınız bir Windows uygulamasındaki tüm düğmelerin görsel özelliklerini bir kaynak olarak aynı web sitelerindeki CSS sınıfları gibi ayrı dosyalarda tutabildiğinizi hayal edin. Hayaliniz Expression Blend ile çoktan gerçek oldu bile :) Daha burada bahsedemediğim bir sürü özellik var Expression Blend içerisinde. Şu an yayındaki sürümüne ek olarak Blend'in 2. sürümünün Silverlight desteği de söz konusu.

Rakipler nerde?

Artık Expression Studio ailesine rakip dediğimizde karşımıza sürekli Adobe ürünlerinin çıkmasına alıştık sanırım. Blend konusunda da durum böyle. Adobe'a ait AIR, Flex, Apollo gibi ürünler farklı konumlandırmalar ile birer Blend ve WPF rakibi olarak görülebilir ama aslında değiller. "Rakip bile olamazlar" dersek hiç de yanlış olmaz. Birincisi hiçbirinin arkasında WPF'de olduğu gibi VB.NET veya C# gibi .NET dillerinin gücü yok. İkincisi ise .NET Framework 3.0'ın Vista ile gelen "dahili olma" durumu çerçevesinde sunduğu 3D performansı kimsede yok. Ki aslında bu performans söz konusu olan "oyunlar" olduğunda hala yeterli değil. Tüm bunlara baktığımızda gerçekten rakibi olmayan bir ürünle karşı karşıyayız. Umarım Microsoft Blend'e para yatırmaya devam eder.

Expression Studio Savaşları sersindeki önceki yazılarıma aşağıdan ulaşabilirsiniz.

Expression Media ve rakipleri
Expression Web ve rakipler
Expression Design ve rakipler

Kolay gelsin.

Sonunda Expression Blend için de bir Service Pack çıktı :) Daha önceki bir yazımda Expression Design için çıkmış olan SP1'den bahsetmiştim. Aşağıdaki adresten hemen Expression Blend SP1'i indirerek bilgisayarınıza yükleyebilirsiniz.

Expression Blend SP1

Sevgili dostum Mehmet Nuri Çankaya ile beraber sunduğumuz Expression Blend, Expression Media ve Encoder webinerlerinin kayıtlarını nedirtv?com üzerinden yayına aldık. İsteyenler webinerlerin kayıtlarına aşağıdaki adreslerden ulaşabilirler.

Expression Blend Webineri
Expression Media ve Encoder Webineri

Bugün Microsoft Kurumsal Webiner serisinin ilk webinerini "Silverlight ve ASP.NET AJAX ile Uygulama Geliştirme" konusunda gerçekleştirdik. Duyuruların yavaş yavaş yayılıyor olmasının yanı sıra ilk webinerde 80 kişilik bir katılım ile güzel bir aktivite oldu.

Webinerin mini sunumunu :) ve demoya ait kaynak kodları aşağıdaki adresten indirebilirsiniz.

Webiner Sunum ve Demo Kaynak Kodları - 07112007_1.zip (467.18 KB)

Webiner sonrası gelen soruları ve cevaplarımı buradan paylaşmak istiyorum. Umarım faydalı olur.

Soru: Visual Studio 2008'e bu bu designer (Expression Blend) bağlı gelecek mi?

Cevap: Visual Studio 2008'de JavaScript Intellisense desteği gelecek. Design kısmı şu anki ile aynı. Designer olarak Expression Blend 2'yi ayrı bir program olarak kullanmanız gerekecek.

Soru: Expression Studio, Blend, Design, Web olsun tamamen Visual Studio'yu görsel tasarım açısından desteklemek üzere çıkarılmış bir platform mudur? Ve bunlarda yapabileceklerimiz sadece görsel tasarımdan mı ibarettir? Kod yazamıyor muyuz?

Cevap: Expression serisi aynen bahsettiğiniz gibi tasarımcılara yöneliktir. Kod yazmak için Visual Studio kullanmak şart. Kolay gelsin.

Soru: Bu Expression Designer 2008'de de bu şekilde mi kullanılacak yoksa daha entegre olacak mı?

Cevap: Expression Blend 2 içerisindeki projeler direk VS 2008 ile de açılabiliyor. Solution Explorer içerisind e herhangi bir dosyaya sağ tuş tıklayınca "Edin in VS 2008" opsiyonu var.

Soru: 2008 ne zaman RTM olacak?

Cevap: Bu ay sonu tahmin edilen süre :)

Soru: Animasyon ve benzeri şeyleri eklerken JavaScript kısmı bu kadar manüel olacak mı 2008'de de ?

Cevap: Intellisense desteği gelecek. Bu kadar manüel değil :) AJAX ile ilgili de çok hoş JavaScript Intellisense destekleri yolda.

Soru: Peki teşekkür ederim :)

Cevap: ben teşekkür ederim ;) iyi çalışmalar

Soru: Silverlight hiç bilmiyorum. Sorularım biraz saçma kalabilir. XAML'i değiştirdiğimiz anda mı içerik değişiyor yoksa bekleme süresi var mı? Kendi içinde her hangi bir event işlemi sırasında kendi okuduğu XAML'i değiştirebiliyor muyuz? Değiştirebiliyorsak değiştirdiğimiz anda aynı şekilde işlemine devam ediyor mu?

Cevap: XAML'i değiştirdiğiniz anda sayfayı veya Silverlight animasyon nesnesini baştan yüklemeniz gerekir. Başka bir seçenek olarak arka planda asenkron XAML yükleyerek animasyonu aktarabilirsiniz. Herhangi bir event da XAML ile nesne ekleyip çıkarabiliyorsunuz. XAML'de değişiklik olunca kaynaktan tekrar yükleyerek sayfaya yansıtmanız gerek.

Katılan herkese teşekkürler. Hepinize kolay gelsin.

PCnet'in Kasım sayısında yepyeni yazılarımla yine karşınızdayım :) Derginin OKUL bölümünü genişlettik, artık AJAX, Silverlight, Expression Web, Expression Blend ve Expression Design ile ilgili yazıyor olacağım. Dünyada ilk defa bir dergide Silverlight Eğitim içeriğine yer veriliyor. Kasım sayısındaki yazılarımın başlıkları aşağıdaki şekilde;

AJAX : UpdatePanel Mucizesi
Silverlight : Expression Encoder ve Silverlight
Expression Blend : Windows Uygulamarında Animasyonlar
Expression Web: Güle Güle Frontpage
Expression Design : Vektörel Tasarım ve XAML Tek Merkezde

Tüm bu yazılara ek olarak Kasım sayısına özel bir sürpriz makale daha var :)

Flash VS Silverlight

Tahmin ettiğiniz gibi Flash ve Silverlight arasında çetin bir karşılaştırma yazısından bahsediyorum. Hepsi PCnet Kasım sayısında! :)

Dünkü Silverlight ve MediaElement örneğimize VideoBrush ile devam edeceğiz. İlk olarak MediaElement nesnemizi biraz daha ufaltarak yansıma için ekranda yer açalım. Sonrasında da MediaElement'imize bir isim vereceğiz.

  <MediaElement x:Name="Goruntu" Source="Bear.wmv" MouseLeftButtonDown="VideoTiklandi" Width="384" Height="288" Stretch="Fill" Canvas.Left="8" Canvas.Top="8"/>

Yukarıdaki biri x:Name diyerek herhangi bir elemente isim verme şansımız var. Bu işlemi Expression Blend 2 içerisinde görsel arayüzden de yapabiliriz.

MediaElement'imize isim veriyoruz.

Verdiğimiz bu isim ileride bir VideoBrush tanımlarken çok işimize yarayacak. Şimdi gelin videonun yansımasını gösterecek olan, ekranda taşıyacak olan nesnemizi belirleyelim. Bunun için basit bir dikdörtgen (rectangle) kullanacağız. Rectangle nesnesini Expression Blend 2 içerisinde solda araç çubuğunda bulabilirsiniz. Dikdörtgenin bir yansımayı temsil edebilmesi için perspektifi ile oynamanın yanı sıra dikdörtgene bir de OpacityMask uygulayacağız.

Dikdörtgenimize uyguladığımız perspektif ve yansıma efektleri.

Yukarıdaki ekran görüntülerinde de görebileceğiniz üzere ilk olarak dikdörtgenin Y ekseninde yansımasını alıyoruz sonrasında da perspektif veriyoruz. Son olarak da sıra geldi bir OpacityMask uygulamaya. Böylece yansıma görünür durumdan başlayarak şeffaflığa doğru kaybolacak.

OpacityMask ayarlarımızı yapıyoruz.

Dikdörtgeni Expression Blend 2 içerisinde seçtikten sonra sağ sütundan Properties sayfasında OpacityMask'ı seçiyoruz. OpacityMask olarak uygulamak üzere bir Gradient seçerek gradient renklerinden birinin Alpha değerini sıfır yaparak şeffaftan görünürlülüğe doğru giden bir efekt yaratıyoruz. Efektin yönünü ayarlamak için Expression Blend 2'nin sol araç çubuğundan Brush Transform aracını kullanabilirsiniz.

Tüm bunları tamamladığımızda dikdörtgenimizin XAML kodu aşağıdaki şekilde sonlanıyor.

  <Rectangle Width="380.569" Height="70" Canvas.Top="297" RenderTransformOrigin="0.5,0.5" Canvas.Left="-25" Opacity="0.8">

    <Rectangle.RenderTransform>

      <TransformGroup>

        <ScaleTransform ScaleX="1" ScaleY="-1"/>

        <SkewTransform AngleX="23.963" AngleY="0"/>

        <RotateTransform Angle="0"/>

        <TranslateTransform X="51.527" Y="0"/>

      </TransformGroup>

    </Rectangle.RenderTransform>

    <Rectangle.OpacityMask>

      <LinearGradientBrush EndPoint="0.514,0.957" StartPoint="0.507,0.129">

      <GradientStop Color="#00000000" Offset="0"/>

      <GradientStop Color="#FFFFFFFF" Offset="1"/>

    </LinearGradientBrush>

    </Rectangle.OpacityMask>

  </Rectangle>

Tüm ayarlarımızı tamamladığımıza göre sıra geldi bir VisualBrush tanımlayarak dikdörtgenini içini bu VisualBrush ile doldurmaya. Bu işlemleri direk XAML kodları yazarak yapacağız. Aşağıda bir VisualBrush'ın nasıl tanımlandığını inceleyelim.

      <VideoBrush SourceName="Goruntu" />

Hiç zor bir kod sayılmaz. Tek yapmamız gereken hedef video kontrolünün adını SourceName özelliğine aktarmış olmak. Tanımladığımız bu VideoBrush'ı dikdörtgenin Fill değerine atayacağız. XAML sayfamızın tamamının son hali aşağıdaki şekilde sonlanıyor.

<Canvas

  xmlns="http://schemas.microsoft.com/client/2007"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  Width="435" Height="382"

  Background="White"

  x:Name="Page"

  >

  <MediaElement x:Name="Goruntu" Source="Bear.wmv" MouseLeftButtonDown="VideoTiklandi" Width="384" Height="288" Stretch="Fill" Canvas.Left="8" Canvas.Top="8"/>

  <Rectangle Width="380.569" Height="70" Canvas.Top="297" RenderTransformOrigin="0.5,0.5" Canvas.Left="-25" Opacity="0.8">

    <Rectangle.Fill>

      <VideoBrush SourceName="Goruntu" />

    </Rectangle.Fill>

    <Rectangle.RenderTransform>

      <TransformGroup>

        <ScaleTransform ScaleX="1" ScaleY="-1"/>

        <SkewTransform AngleX="23.963" AngleY="0"/>

        <RotateTransform Angle="0"/>

        <TranslateTransform X="51.527" Y="0"/>

      </TransformGroup>

    </Rectangle.RenderTransform>

    <Rectangle.OpacityMask>

      <LinearGradientBrush EndPoint="0.514,0.957" StartPoint="0.507,0.129">

      <GradientStop Color="#00000000" Offset="0"/>

      <GradientStop Color="#FFFFFFFF" Offset="1"/>

    </LinearGradientBrush>

    </Rectangle.OpacityMask>

  </Rectangle>

</Canvas>

VisualBrush ile yarattığımız video yansıması.

Bu yazımızda da VideoBrush tanımlamayı, nesnelere isim vermeyi, dikdörtgen nesnelerini ve transform işlemlerinin bir kısmını inceledik. Silverlight ile videoların yansımalarını almak bu kadar kolay. Bu yansımaların herhangi bir performans alanında dezavantajı yok.

Biz örneğimizde tanımlamış olduğumuz VisualBrush'ı bir Rectangle'a ait Fill özelliğine aktardık. İsterseniz VisualBrush'ları aşağıdaki şekilde istediğiniz yere aktarabilirsiniz.

  <TextBlock Width="244" Height="84" Canvas.Top="300" FontSize="72" FontWeight="Bold" Text="TextBlock" TextWrapping="Wrap">

    <TextBlock.Foreground>

      <VideoBrush SourceName="Goruntu" />

    </TextBlock.Foreground>

  </TextBlock>

Bu örnekte sayfaya yerleştirdiğimiz bir TextBlock nesnesinin ForeGround özelliğine VisualBrush tanımladık. Böylece TextBlock içerisinde yazan yazıların içinde videomuz oynatılacak.

Yazının içerisinde video yerleştiriyoruz.

Tüm bu video işlemleri çok kolaylıkla sadece birkaç satır kod ile en ufak bir performans kaybı olmaksızın yapılabilir. Gerisi tamamen sizin hayal gücünüze kalmış.

Hepinize kolay gelsin.

Silverlight 1.0 uygulamalarında Video yayınının gücünden daha önceki yazılarımda bahsetmiştim. Gelin şimdi hep beraber sıfırdan bir Silverlight Video Oynatıcı'sı hazırlayalım. Expression Blend 2 September Preview yazılımını kullanacağımız bu demoda yeni bir Silverlight (JavaScript) projesi yaratarak Page1.xaml üzerinde çalışacağız. Dosyamıza bir adet MediaElement eklememiz gerekiyor, bunun için Expression Blend 2 içerisinde sol araç çubuğundan Asset Library'ye girerek "MediaElement" yazarak kontroller arasında arama yaptırmamız gerekiyor. Kontrol listesi içerisinde MediaElement'i bulduktan sonra sayfaya ekleyebilirsiniz.

Asset Library içerisinden MediaElement'imizi buluyoruz.

MediaElement'i sayfaya ekledikten sonra sıra geldi bir de video dosyası eklemeye. MediaElement'e ait Source özelliğine Blend 2 içerisinden bir video bağladığımızda video dosyasının bir kopyası projemize otomatik olarak ekleniyor.

MediaElement'e ait Source özelliğine videomuzu gösteriyoruz.

Bu işlemleri tamamladıktan sonra Silverlight uygulamamızı direk çalıştırabiliriz. Video dosyamız MediaElement içerisinde oynatılıyor olacaktır. Şimdi gelin videonun üzerine tıklandığında durmasını sonra da tekrar tıklandığında devam etmesini sağlayalım. Bunun için MediaElement'e ait MouseLeftButtonDown özelliğine bir JavaScript fonksiyonu atamamız gerekiyor. Maalesef bunu şimdilik direk XAML kodu içerisinde yapmamız gerekiyor, Expression Blend 2 içerisinde bu işlem için bir arayüz yok. Benim tavsiyem Video projesini Blend 2 ile beraber aynı anda Visual Studio ile de açmanız. Visual Studio içerisinde XAML Intellisense desteğini de kullanarak daha rahat bir çalışma ortamı yaratabilirsiniz. VideoTiklandi adinda bir JavaScript fonksiyonunu aktardığımız MediaElement nesnemizi içeren XAML kodumuzun tamamı aşağıdaki şekilde sonlanıyor.

<Canvas

  xmlns="http://schemas.microsoft.com/client/2007"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  Width="400" Height="400"

  Background="White"

  x:Name="Page"

  >

  <MediaElement Canvas.Left="8" Canvas.Top="8" Source="Bear.wmv" MouseLeftButtonDown="VideoTiklandi"/>

</Canvas>

Sıra geldi JavaScript fonksiyonumuzun kendisini yazmaya. Page.xaml.js adında Expression Blend 2 tarafından yaratılmış JavaScript dosyasında bize örnek olması amacıyla bazı kodlar yerleştirilmiş. İlk olarak bu kodları silerek Page.xaml.js'i aşağıdaki hale getirmemiz gerekiyor.

if (!window.VideoYansima)

  window.VideoYansima = {};

 

VideoYansima.Page = function()

{

}

 

VideoYansima.Page.prototype =

{

  handleLoad: function(control, userContext, rootElement)

  {

  }

}

Tüm bu kodların devamına VideoTiklandi JavaScript fonksiyonumuzu tanımlayalım. Fonksiyonumuz video eğer oynatılıyorsa durduracak, durdurulmuş durumdaysa tekrar devam ettirecek. Videonun var olan durumunu saklamak üzere Oynuyor adında bir JavaScript değişkeni kullanacağız.

var Oynuyor = true;

 

function VideoTiklandi (sender, args)

{

  if (Oynuyor)

  {

    sender.pause();

    Oynuyor = false;

  }

  else

  {

    sender.play();

    Oynuyor = true;

  };

}

Yukarıdaki kod içerisindeki standart JavaScript işlemlerinin yanı sıra Silverlight ile ilişkili olarak dikkat etmemiz gereken noktalardan biri MediaElement'imize sender JavaScript objesi üzerinden ulaşabiliyor olmamız. Hali hazırda JavaScript fonksiyonumuzu MediaElement üzerinden tetiklediğimiz için sender nesnesi de MediaElement'in ta kendisi oluyor. MediaElement'in doğrudan play(), pause() ve stop() metodlarını kullanarak videoyu durdurabilir, başlatabilir veya bulunduğu yerden devam ettirebiliriz.

Basit bir Silverlight video oynatıcısı hazırladığımız bu örnekte MediaElement'i ve JavaScript fonksiyonlarının Silverlight yapısındaki yerini hızlıca inceledik. Bu yazımı takiben sonraki makalemde bu örneğimize devam ederek MediaElement içerisindeki videonun VideoBrush ile yansımasını almayı öğreneceğiz.

Hepinize kolay gelsin.

Silverlight uygulamaları geliştirmeyle ilgili makalelerime geçmeden önce yavaş yavaş bilgisayarlarımızı Silverlight uygulamalarına hazırlamaya başlayalım. İlk olarak aşağıdaki adreslerden Silverlight 1.0'ı bilgisayarımıza kurmamız gerekiyor. Bu kurulum bilgisayarımızda Silverlight 1.0 uygulamalarının çalıştırılabilmesini sağlayacak.

http://www.microsoft.com/silverlight/downloads.aspx

Kurulumu tamamladıktan sonra sıra geldi yazılım geliştirme araçlarımızı da Silverlight uyumlu hale getirmeye. Bu noktada eğer Visual Studio 2008 Beta 2 kullanacaksanız Microsoft Silverlight Tools Alpha Refresh for Visual Studio 2008 Beta 2 (July 2007) paketini kurmanız gerekiyor. Eğer sisteminizi Beta yazılımlar ile riske atmak istemiyorsanız ve Visual Studio 2005 ile devam edecekseniz benim tavsiyem ilk olarak Visual Studio 2005 extensions for .NET Framework 3.0 (WCF & WPF), November 2006 CTP paketini bilgisayarınıza kurmanız. Böylece artık WPF uygulamalarını da Visual Studio ile açabilirsiniz. Silverlight tarafına gelince de Microsoft Silverlight 1.0 Software Development Kit paketini bilgisayarınıza kurmanız gerekiyor. Kurulumu tamamladıktan sonra "Başlat" / "Start" menünüze "Microsoft Silverlight 1.0 SDK" bölümü gelecektir. Bu bölümde Silverlight 1.0 Visual Studio 2005 Template adında bir kurulum daha bulacaksınız. Bu kurulumu da yüklediğinizde artık Visual Studio 2005 içerisinde yeni bir proje yaratırkan "Visual C#" altında "Silverlight" seçeneği ile de karşılaşacaksınız. Bu seçeneğin sadece Visual C# altında çıkıyor olmasının nedeni Silverlight proje şablonu'nun C# proje şablonlarından türetilmiş olması. Aksi halde Silverlight 1.0'ın C#, VB gibi .NET dilleri ile herhangi bir ilişkisi yok.

Visual Studio 2005 içerisinde Silverlight Proje seçeneği.

Artık Visual Studio 2005 ile Silverlight projeleri yaratabilir veya var olan projeleri açabiliriz. Tabi bu noktada "Varolan proje nerden var olacak biz yaratmazsak?" diyenler varsa :) Silverlight projeleri yaratabileceğimiz bir diğer alternatif yazılıma geçiş yapmakta fayda var. Aslına bakarsan tam olarak bir alternatif denemez çünkü Expression Blend 2 ile Visual Studio'nun projelerdeki konumu çok farklı. Expression Blend 2 görsel animasyonların hazırlanması noktasında devreye girerken Visual Studio ise zengin Intellisense desteği ile daha çok programcılara hitap ediyor. Şu an için Visual Studio 2005 içerisinde JavaScript Intellisense desteği bulunmasa da 2008 sürümünde bu konuda da ciddi gelişmeler olacak.

Konuya geri dönmemiz gerekirse, bilgisayarınıza Expression Blend 2'yi de aşağıdaki adresten yükleyebilirsiniz. Blend 2 şu an September Preview aşamasında, yani daha tam anlamıyla yayınlanmış, son haline gelmiş bir yazılım değil.

http://www.microsoft.com/Expression/products/download.aspx?key=blend2preview

Tüm bu yüklemeleri yaptığınızda aslında tüm hazırlıklarınızı da bitirmiş oluyorsunuz fakat eksik kalan ufak bir nokta var. Visual Studio içerisinde Silverlight uygulamalarımızın XAML kodlarını düzenleme şansımız var. Eğer yukarıda bahsettiğim gibi WPF desteğini de yüklediyseniz zaten Visual Studio XAML dosyaları açarak size gerekli Intellisense desteğini sağlayacaktır. Fakat konu Silverlight olunca Intellisense desteğinin de farklılaşması gerekiyor çünkü Silverlight içerisindeki XAML yapısı WPF'deki kadar zengin değil ve aslında Silverlight içerisinde kullanamayacağımız kodların Intellisense ile gelmesi durumu söz konusu ki bu hiç de hoş bir durum değil. O nedenle Silverlight için özel bir Intellisense veritabanı yüklememiz gerekiyor. Bu veritabanı Silverlight 1.0 SDK ile beraber geliyor.

Benim bilgisayarıma yaptığım kurulumda ihtiyacım olan Silverlight.xsd dosyasını C:\Program Files\Microsoft Silverlight 1.0 SDK\Tools\silverlight.xsd adresinde buldum. Bu dosyayı alarak yine kendi bilgisayarımdaki C:\Program Files\Microsoft Visual Studio 8\Xml\Schemas adresine kopyaladım. Siz bilgisayarınızdaki kurulumlara göre bu yolları özelleştirebilirsiniz.

Tüm işlemleri tamamladık. Artık sonraki makalelerde Silverlight uygulamalarına yelken açabiliriz.

Hepinize kolay gelsin.

Expression Studio içerisinde bulunan Expression Blend bir animasyon tasarım aracı olarak bize WPF Windows uygulamaları tasarlama olanağı tanıyor. Artık Windows uygulamalarında iki veya üç boyutlu animasyonlar kullanmak gerçekten çok kolay. Son yaptığımız Expression Blend webinerine katılanlar demolarda bu kolaylığın farkına varmışlardır. Bu kadar animasyonlardan bahsettikten sonra bir animasyon örneği vereceğimizi düşünüyorsanız, haklısınız ama yanılıyorsunuz :)

WPF uygulamalarında kullanabileceğimiz farklı kontroller var. Eski Windows uygulamalarından alıştığımız Button, Label vs kontrollerin yanı sıra çok kullanışlı ve ilginç kontroller mevcut. Bu kontrollerden özellikle FlowDocumentReader kontrolü çok hızlı birşekilde işlevsel uygulamalar hazırlamanızı sağlayabilir. Gelin şimdi hemen Expression Blend ile bir WPF Windows Application yaratalım.

Yeni bir WPF Windows uygulaması yaratıyoruz.

Uygulamamızı yarattıktan sonra içerisinde bir adet FlowDocumentReader kontrolü yerleştireceğiz. Bu kontrolü direk araç çubuğunda bulma şansınız yok. O nedenle araç çubuğundan "Asset Library" kısmına giderek kontrolümüzü orada bulmamız gerekecek.

FlowDocumentReader kontrolümüzü Asset Library içerisinde buluyoruz.

Kontrolü uygulamamızdaki Window1 penceresine yerleştirdikten sonra kontrolümüze flowDoc adını vererek genişliğini ve yüksekliğini ayarlıyoruz. Son olarak da pencereye bir Button yerleştirerek içerisine de Content özelliğine "Doküman Aç" değerini vererek gerekli bilgiyi yazmış olduk. Window1.xaml dosyasının XAML kodları aşağıdaki şekilde sonuçlanıyor.

<Window

  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  x:Class="Window1"

  x:Name="Window"

  Title="Window1"

  Width="640" Height="480">

 

  <Grid x:Name="LayoutRoot">

    <FlowDocumentReader Margin="0,0,0,50" x:Name="flowDoc"/>

    <Button HorizontalAlignment="Right" Margin="0,0,10,10" VerticalAlignment="Bottom" Width="136" Height="30" Content="Doküman Aç"/>

  </Grid>

</Window>

Programımızın tasarımını bitirdik. Sıra geldi kodlamaya. Penceremizdeki düğmeye basıldığında klasik Windows doküman açma dialoğunun gelmesini ve seçilen bir XAML dokümanını programımızda gösterilmesini istiyoruz. Burada özellikle bir detayı belirtmem gerek; programımızın açacağı XAML dosyaları FlowDocument formatında olmalı. Yani bunlar herhangi bir XAML dosyası olamaz. Bu dokümanların nasıl yaratılacağına ileride değineceğim ama şimdilik gelin örnek bir XAML dokümanını inceleyelim.

<FlowDocument xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">

  <Table CellSpacing="5">

 

    <Table.Columns>

      <TableColumn/>

      <TableColumn/>

      <TableColumn/>

      <TableColumn/>

    </Table.Columns>

 

    <TableRowGroup>

 

      <TableRow Background="SkyBlue">

        <TableCell ColumnSpan="4" TextAlignment="Center">

          <Paragraph FontSize="24pt" FontWeight="Bold">Gezegen Bilgileri</Paragraph>

        </TableCell>

      </TableRow>

 

      <TableRow Background="LightGoldenrodYellow">

        <TableCell>

          <Paragraph FontSize="14pt" FontWeight="Bold">Gezegen</Paragraph>

        </TableCell>

        <TableCell>

          <Paragraph FontSize="14pt" FontWeight="Bold">Güneşten Mesafe</Paragraph>

        </TableCell>

        <TableCell>

          <Paragraph FontSize="14pt" FontWeight="Bold">Çap</Paragraph>

        </TableCell>

        <TableCell>

          <Paragraph FontSize="14pt" FontWeight="Bold">Kütle</Paragraph>

        </TableCell>

      </TableRow>

 

      <TableRow>

        <TableCell ColumnSpan="4">

          <Paragraph FontSize="14pt" FontWeight="Bold">İç Gezegenler</Paragraph>

        </TableCell>

      </TableRow>

 

      <TableRow>

        <TableCell>

          <Paragraph>Merkür</Paragraph>

        </TableCell>

        <TableCell>

          <Paragraph>57,910,000 km</Paragraph>

        </TableCell>

        <TableCell>

          <Paragraph>4,880 km</Paragraph>

        </TableCell>

        <TableCell>

          <Paragraph>3.30e23 kg</Paragraph>

        </TableCell>

      </TableRow>

      <TableRow Background="lightgray">

        <TableCell>

          <Paragraph>Venus</Paragraph>

        </TableCell>

        <TableCell>

          <Paragraph>108,200,000 km</Paragraph>

        </TableCell>

        <TableCell>

          <Paragraph>12,103.6 km</Paragraph>

        </TableCell>

        <TableCell>

          <Paragraph>4.869e24 kg</Paragraph>

        </TableCell>

      </TableRow>

      <TableRow>

        <TableCell>

          <Paragraph>Dünya</Paragraph>

        </TableCell>

        <TableCell>

          <Paragraph>149,600,000 km</Paragraph>

        </TableCell>

        <TableCell>

          <Paragraph>12,756.3 km</Paragraph>

        </TableCell>

        <TableCell>

          <Paragraph>5.972e24 kg</Paragraph>

        </TableCell>

      </TableRow>

      <TableRow Background="lightgray">

        <TableCell>

          <Paragraph>Mars</Paragraph>

        </TableCell>

        <TableCell>

          <Paragraph>227,940,000 km</Paragraph>

        </TableCell>

        <TableCell>

          <Paragraph>6,794 km</Paragraph>

        </TableCell>

        <TableCell>

          <Paragraph>6.4219e23 kg</Paragraph>

        </TableCell>

      </TableRow>

 

      <TableRow>

        <TableCell ColumnSpan="4">

          <Paragraph FontSize="14pt" FontWeight="Bold">Dış Gezegenler</Paragraph>

        </TableCell>

      </TableRow>

 

      <TableRow>

        <TableCell>

          <Paragraph>Jupiter</Paragraph>

        </TableCell>

        <TableCell>

          <Paragraph>778,330,000 km</Paragraph>

        </TableCell>

        <TableCell>

          <Paragraph>142,984 km</Paragraph>

        </TableCell>

        <TableCell>

          <Paragraph>1.900e27 kg</Paragraph>

        </TableCell>

      </TableRow>

      <TableRow Background="lightgray">

        <TableCell>

          <Paragraph>Satürn</Paragraph>

        </TableCell>

        <TableCell>

          <Paragraph>1,429,400,000 km</Paragraph>

        </TableCell>

        <TableCell>

          <Paragraph>120,536 km</Paragraph>

        </TableCell>

        <TableCell>

          <Paragraph>5.68e26 kg</Paragraph>

        </TableCell>

      </TableRow>

      <TableRow>

        <TableCell>

          <Paragraph>Uranüs</Paragraph>

        </TableCell>

        <TableCell>

          <Paragraph>2,870,990,000 km</Paragraph>

        </TableCell>

        <TableCell>

          <Paragraph>51,118 km</Paragraph>

        </TableCell>

        <TableCell>

          <Paragraph>8.683e25 kg</Paragraph>

        </TableCell>

      </TableRow>

      <TableRow Background="lightgray">

        <TableCell>

          <Paragraph>Neptün</Paragraph>

        </TableCell>

        <TableCell>

          <Paragraph>4,504,000,000 km</Paragraph>

        </TableCell>

        <TableCell>

          <Paragraph>49,532 km</Paragraph>

        </TableCell>

        <TableCell>

          <Paragraph>1.0247e26 kg</Paragraph>

        </TableCell>

      </TableRow>

 

      <TableRow>

        <TableCell ColumnSpan="4">

          <Paragraph FontSize="10pt" FontStyle="Italic">

            Kaynak:

            <Hyperlink NavigateUri="http://encarta.msn.com/encnet/refpages/artcenter.aspx">Encarta</Hyperlink>

            web sitesi.

          </Paragraph>

        </TableCell>

      </TableRow>

 

    </TableRowGroup>

  </Table>

</FlowDocument>

Bir FlowDocument'ın nasıl yaratılacağı ile ilgili detaylara girmeyeceğim. Ama sanırım yukarıda her şey yeterince açıktır. FlowDocument'ları Tag isimleri farklı birer HTML dokümanına benzetebilirsiniz. Programımız yukarıdaki şekilde düzenlenmiş belgeleri açabilecek.

Sıra geldi artık programlama kodumuzu yazmaya. Bunun için Expression Blend içerisinde düğmemizi seçerek sağ sütunda "Properties" sekmesine geçeceğiz. "Properties" sekmesi içerisinde de "Events" bölümüne geçtikten sonra "Click" özelliğine istediğimiz bir method adı yazacağız.

Düğmemizin Click durumuna ait methodu tanımlıyoruz.

Yukarıdaki gibi DocAcTiklandi değerini yazdığınız Expression Blend size gerekli Event kodunuzu verecektir. Eğer bilgisayarınızda Visual Studio ve WPF Extension yüklü ise direk Visual Studio içerisinde projeniz açılacaktır. İlk baktığımızda aşağıdaki kodun otomatik olarak eklendiğini görüyoruz.

    Private Sub DokAcTiklandi(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)

 

    End Sub

Programımızın Window1.xaml dosyasının XAML kodlarına baktığımızda ise ufak bir değişiklik görebiliriz.

<Window

  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  x:Class="Window1"

  x:Name="Window"

  Title="Window1"

  Width="640" Height="480">

 

  <Grid x:Name="LayoutRoot">

    <FlowDocumentReader Margin="0,0,0,50" x:Name="flowDoc"/>

    <Button HorizontalAlignment="Right" Margin="0,0,10,10" VerticalAlignment="Bottom" Width="136" Height="30" Content="Doküman Aç" Click="DokAcTiklandi"/>

  </Grid>

</Window>

XAML kodlarına dikkatli olarak bakarsak artık Button nesnesine ait Click özelliğinin bizim için otomatik olarak ayarlanmış olduğunu görebiliriz. Bu noktadan sonra bizim tek yapmamız gereken uygun kodları Visual Studio içerisinde yazmak. İlk olarak aşağıdaki kod ile penceredeki FlowDocumentReader nesnesini bulacağım. Aslında buna normal şartlarda gerek yok, fakat bazen Visual Studio içerisinde Intellisense XAML kodundaki objeleri yakalayamıyor. Bunun nedeni büyük ihtimal ile tüm bu XAML desteğinin bir Extension olarak yükleniyor olması. Visual Studio 2008 ile yaptığım denemelerde böyle bir sorunla karşılaşmadım. O nedenle eğer siz de aynı sorunla karşılaşırsanız aşağıdaki kod ile kontrolümüzü yakalayabilirsiniz.

Dim flowDoc As FlowDocumentReader = CType(Me.FindName("flowDoc"), FlowDocumentReader)

Sonraki adımda ilk olarak kendimize özel bir FlowDocument nesnesi tanımlayacağız. Kullanıcının doküman açabilmesi için eski Windows uygulamalarında da kullandığımız OpenFileDialog nesnesinden yardım alacağız.

        Dim yeniDoc As Documents.FlowDocument = Nothing

        Dim Dialog As New Microsoft.Win32.OpenFileDialog

        Dialog.Filter = "FlowDocument Dosyaları (*.xaml)|*.xaml"

        If Dialog.ShowDialog.Value Then

 

        End If

Eğer OpenFileDialog ile kullanıcı bir dosya seçmiş ise sıra gelecek dosyayı okuyarak daha önce yarattığımız FlowDocument değişkenimiz olan yeniDoc değişkenine aktarmaya.

            Dim xamlDosya As FileStream = CType(Dialog.OpenFile, FileStream)

            Try

                yeniDoc = CType(Markup.XamlReader.Load(xamlDosya), Documents.FlowDocument)

                flowDoc.Document = yeniDoc

            Catch ex As Exception

                System.Windows.MessageBox.Show(ex.Message)

            End Try

Yukarıdaki kod içerisinde ilk satırda xamlDosya adında bir FileStream yaratarak dosyamızın konumunu alıyoruz. Sonrasında dosya okuma işlemini Try-Catch bloğu içerisinde gerçekleştireceğiz. En baştayarattığımız yeniDoc FlowDocument değişkenimize gerçek dosyayı okuyarak yüklemek için Markup.XamlReader sınıfını kullanıyoruz. Xaml dosyası okunduktan sonra değişken tipini de FlowDocument'a çevirerek kendi yeniDoc nesnemize aktardık. Artık elimizdeki FlowDocument değişkenimiz penceremizdeki FlowDocumentReader'a aktarılmaya hazır. FlowDocumentReader'a ait Document özelliğine gerekli değeri aktararak okuma işlemini sonlandırabiliriz. Tüm bu işlemler süresince eğer bir hata gerçekleşirse hatayı bir mesaj kutusu olarak Try-Catch bloğu ile kullanıcıya gösterebiliyoruz.

Artık programımızı deneyebiliriz. Visual Studio veya Expression Blend içerisinde F5'e bastığınızda program derlenecek ve otomatik olarak çalıştırılacaktır. Yukarıda örnek olarak verdiğimiz FlowDocument XAML dosyasını açtığımızda aşağıdaki gibi bir ekranla karşılaşıyoruz.

WPF uygulamamızda FlowDocumentReader görüntüsü.

Gördüğünüz gibi dosyamız programımızda gösteriliyor. Peki neden FlowDocumentReader? FlowDocumentReader'ın özellikleri tek tek yazarak anlatmaya çalışmaktansa gelin aşağıda ufak bir seri görüntü ile durumu inceleyelim.

FlowDocument içerisinde otomatik sayfalama.

FlowDocumentReader kontrolünün kendi içerisinde bazı özellikleri var. Bunlardan ilki programın kullanıcısına açılan dokümanı farklı şekillerde okuyabilme olanağı sağlıyor olması. Yukarıdaki ekran görüntüsünde kullanıcı dokümanı sayfalar şeklinde görmek istediği için FlowDocumentReader gerekli düzenlemeleri otomatik olarak yapmış. Tüm bu işlemlerin tamamen vektörel olarak yapıldığını bu nedenle her şekilde yazılarda ve grafiklerde çok net görüntüler alındığını özellikle belirtmek istiyoruz.

FlowDocumentReader'da zoom yapmak arama yapmak kadar kolay.

FlowDocumentReader kontrolü ile beraber gelen diğer özellikler de çok etkileyici. Kullanıcı istediği zaman dokümana zoom yapabiliyor. Yukarıdaki görüntüde dokümanın biraz büyütülmüş halini görebilirsiniz. Yazılarda herhangi bir bozulma yok. Aynı şekilde kullanıcı isterse yazıların boyutu FlowDocumentReader'ın sağ altında bulunan kontroller ile küçültebilir de. Son olarak bahsetmek istediğim belki de en önemli işlevlerden biri de Arama. FlowDocumentReader ile beraber otomatik bir arama motoru geliyor ve açılan doküman içerisinde aramaları FlowDocumentReader tamamen kendisi yapıyor.

Sanırım artık neden bu yazımda FlowDocumentReader'ı anlatmak istediğimizi anlamışsınızdır. Tabiri caiz ise iki satır kod yazarak muhteşem bir program yapmış olduk. WPF olmadan önce bu tarz bir programı hazırlamak belki de bir haftamızı alırdı.

FlowDocument Dosyaları nasıl yaratılır?

Gelelim can alıcı soruya. Eminim ki çoğunuz şu anda elinizdeki bir sürü dokümanı yukarıdaki şekilde windows uygulamaları ile göstermek müşterilerinize projelerde göstermek istiyorsunuz. Daha önce de bahsettiğim gibi HTML ile FlowDocument yazımı arasında ciddi benzerlikler var. Bu noktada HTML'den FlowDocument'a yani XAML'e çevirmek için gerekli araçlar da hazır. Aşağıdaki adresten XAML'den HTML'e veya tam tersi HTML'den XAML'e çeviri yapabilen bir yazılımı açık kaynak kodu ile indirebilirsiniz.

http://wpf.netfx3.com/files/folders/developer/entry816.aspx

Makale boyunca yaptığımız örneğin kodlarını da aşağıdan indirebilirsiniz.

WPF FlowDocumentReader Proje Kaynak Kodları - 20102007_1.zip (137,43 KB)

Hepinize kolay gelsin.