Günümüz tasarım trendlerinden olan Metro’ya ait renk scalasını , Silverlight ile süsleyerek paylaşıyorum.

Etiketler: expression blend, silverlight, metro ui

Geçtiğimiz günlerde gerçekleştirdiğimiz K12 Web Camp içerisinde yapmış olduğumuz uygulamayı biraz geç olsa da aşağıdaki linkten indirebilirsiniz.Uygulama içerisinde ;

• Sample Data
• MVVM
• Custom State
• Data
  Behavior ve daha fazlası mevcut

Source Code : Ineta K12 Application

Pathlistbox Sample

Hazır source code paylaşmaya başlamışken ,severek kullandığım pathlistbox içinde bir uygulama  eklemeden olmaz Aşağıdaki ön izlemesine göz atıp, kaynak kodu inceleyebilirsiniz.

Source Code : PathListbox Sample

Etiketler: pathlistbox, expression blend, ineta k12

Kısaca Motion Path ;

Nesnelerin animasyon içerisinde  düz bir yol dışında , kendi belirlediğimiz yolu izleme şekli olarak tanımlayabiliriz..Örnek verecek olursak, bir arabanın dönemeçli  bir yolda ilerlemesidir.Bu ve buna benzer custom çizimler oluşturarak bu yöntemi çok rahat bir şekilde kullanabiliriz.
Blend içinde Motion Path İşlemi

Öncelikle üzülerek söylemeliyim ki Silverlight için motion path işlemini gerçekleştiremiyoruz.Blend bize o konuda herhangi bir destek sağlamıyor.Yalnızca Wpf projesi açtığımızda motion path seçeneğini görebilmekteyiz.Örneğimize geçerek blend tarafında bu işlemi nasıl kullanacağımızı inceleyelim.

1. İlk olarak Expression Blend 4 ile bir Wpf projesi oluşturalım.
2. Aşağıdaki şekilde basit olarak bir ellipse ve pencil aracı ile çizilmiş custom bir path görülmekte.Çizilen şeklin Fill özelliğinin resetlenmiş olduğunu, Stroke özelliğinin ise siyah olarak set edildiğini belirtelim.

    3.  Daha sonra custom pathimiz üzerinde farenin sağ tuşuna tıklayarak aşağıdaki işlemi gerçekleştiriyoruz.

     4.   Karşımıza gelen pencereden hareket boyunca taşımak istediğimiz nesneyi seçiyoruz.

     5.   Bu aşamadan sonra Blend tarafından convert işlemi gerçekleştirilerek Motion işlemi hazır hale getiriliyor.Aşağıdaki şekilde görülen  timeline üzerinde oynama yaparak animasyon süresini uzatacağımız gibi, custom olarak oluşturduğumuz çizimi silerek animasyona dahil etmeyebiliriz.Böylelikle hareket boyunca bize referans olan çizim, misyonunu tamamlamış olur.

  Böylelikle hızlı bir şekilde Expression Blend 4 kullanarak motion path işleminin nasıl kullanılacağını öğrenmiş olduk.Bir başka makalede görüşmek dileğiyle , hoşçakalın!

Etiketler: expression blend motion path, blend motion path kullanımı

Bu makalemizde Blend üzerinde Combine işlemlerini inceliyor olacağız.

Peki nedir bu Combine?
Kısaca bahsetmek gerekirse şekiller(path) üzerinde yapmış olduğumuz tüm ekleme, çıkarma işlemlerine combine adı verilmektedir.Kısmen ihtiyaca göre ,vektörel olarak istediğimiz şekli çıkarmak için birden fazla çizimi birleştirmek üzere combine araçlarına başvururuz.(Özellikle vektörel çizim export eden programları örnek verebiliriz)Böylelikle default olarak elde edemediğimiz çizimleri şekillerin birbirleri ile etkileşiminden yararlanıp, farklı görünümler elde edebiliriz.İlk olarak Blend üzerinde combine araçlarına nasıl erişebileceğimize ve kaç adet combine aracı olduğuna bakalım.

Aşağıdaki resimde Blend üzerinde Combine araçlarına nasıl erişebileceğimiz görebiliriz.Bu aşamada şunu da hatırlatmakta fayda olacaktır.Birden çok çizim kullanacağımızdan ötürü son seçilen şekil üzerinden combine işlemi gerçekleşecektir.(Aşağıdaki şekilin yanı sıra çizimlere sağ tıklayarak da Combine seçeneklerine ulaşabiliriz.)

                                                Blend Üzerinde Combine Araçlarına Ulaşma

Şimdi bu combine araçlarını tek tek örneklerle inceleyelim.

Unite

Adından da anlaşılacağı gibi birden fazla şekli birleştirmek için kullanılır.Baz aldığımız iki veya daha fazla çizimi seçerek Combine/Unite yolu ile birleştirme işlemini uygulayabiliriz.Aşağıdaki örneğimizi inceleyerek görsel olarak bu işlemin nasıl gerçekleştiğine bakalım.

                                                         Unite İşlem Akışı        

Burada farkettiysek Unite öncesi iki farklı şeklimizde iki farklı renk kullanmıştık.Ancak Unite işlemini daireye uyguladığımızdan dolayı dairenin rengini alarak birleştirme işlemi gerçekleşti.

Divide

Divide aracı da birleştirme işlemi yapmasına karşın ana hatları koruyarak divide işlemine tabi tutar.Aşağıdaki şekilde Divide işlem akışını inceleyelim.Şekilde görüldüğü üzere divide işlemi sonucunda şekillerin Stroke propertyleri belirginleşerek anahatların ortaya çıktığını görebiliriz.

Divide İşlem Akışı

Intersect

InterSect ile birden fazla şeklin kesişen kısımlarını alabiliriz.Aşağıdaki şekildeki Intersect işlem akışını inceleyerek nasıl kullanıldığına bakalım.

Intersect İşlem Akışı

Subtract

Subtract ile seçilen şekiller arasında, subtract uygulamak istediğimiz çizim haricindeki kısımları yok eder.Aşağıdaki şekili inceleyerek ne demek istediğimize bakalım.

 Subtract İşlem Akışı

Dikkat edecek olursak subtract işlemini kırmızı daireye uyguladığımızdan yeşil daire yok oldu.Aynı işlemi yeşil daireye uygulamış olsaydık yeşil hilal ile karşılaşmış olacaktık.

Exclude Overlap

Exclude Overlap , şekiller arasında üst üste gelen kısımları yok eder. Aşağıdaki şekli inceleyerek görsel olarak bakalım.

Exclude Overlap İşlem Akışı

Not: Tüm bu işlemleri gerçekleştirirken birden fazla çizim arasında combine işlemine tabi tutacağınız çizime göre combine işleminin gerçekleştiğini unutmayalım!

Etiketler: expression blend combine

1) Tab veya F4

Sadece tasarım alanı ile çalışmak istediğimizde kullanacağımız kısayol olacaktır.Böylelikle tasarım alanını hızlı birşekilde genişletip,daraltabiliriz.

2) F6

Çalışma alanları arasında değişiklik yapmak için kullanılabilir.Böylelikle hem Blend’in bize sunduğu default (Design,Animation) workspaceler arasında, hemde kendi oluşturacağımız workspaceler’e geçiş yapabiliriz.

3) F12

Result (Error-Output) panelini göstermek ve gizlemek için kullanılır.

4) Ctrl + Shift + R

Workspaceler’i resetlemek için kullanılır.Bazen isteyerek bazende isemeyerek arayüzde panellerin yerleri ile oynayabiliriz.Ancak işimiz bitince de default halini almasını isteriz.Bu aşamada gerekli kısayollardan biri olacaktır.

5) Pressed SPACE

Tasarım görünümünde iken space tuşuna basılı tuttuğunuzda bir el işareti çıktığını göreceksiniz.Böylelikle tasarım ekranını kaydırabiliriz.Özellikle yüksek çözünürlüklerde kullanılmasında fayda var. Bunlara ek olarak H tuşu ile de bu kombinasyonu sağlayabiliriz.

6) Ctrl + 0

Tasarım ekranının fit hale gelmesini sağlar.Tasarım yaparken özellikle mouse ile tasarım ekranını büyültür ve küçültürüz.Bu gibi durumlarda ctrl + 0 kombinasyonuyla ekranın fit hale gelmesini sağlayabiliriz.

7) Ctrl + 9

Seçilen kontrolün ekrana fit olması sağlanır.

8) Ctrl + 1

Tasarım ekranını default olan yakınlaştırma moduna geçiririr.(%100)

9) Ctrl + Tab

Açık olan dökümanlar arasında gezinmeyi sağlar.Özellikle birden çok pencerenin açık olduğu durumlarda kullanışlı bir seçenek olacaktır.

10) F11

Design,Xaml ve Split görünümleri arasında gezinmeyi sağlar.

Etiketler: expression blend kısayol, blend, kısayol