Expression Blend ve WPF

Expression Blend ve WPF MerhabalarBu makalede hep beraber Microsoft Expression Studio ailesinden Expression Blend" ı kısaca tanıyarak başlayacağız.Daha sonra Expression Blend hakkında öğrendiğimiz bilgilerimizi Windows Presantation Foundation (WPF) ile uygulamaya çalışacağız.Bu sayede hem Expression Blend" i öğrenmiş olup hem de .net 3.0 bünyesinde bulunan WPF ile proje geliştirmiş olacağız. Expression BlendExpression Blend, .net 3.0 teknolojisini kullanarak yapabiliceğimiz uygulamaları XAML projelerinin içerisine entegre ederek oluşturabileceğimiz editör olarak karşımıza çıkıyor.XAML ve .net 3.0 ile aramıza katılan WPF ile Vista Aero tarzı tasarımlar yapmamıza olanak tanıyor.Oluşturduğumuz tasarımların ve projelerin sonucunda karşımıza çıkacak sonuçlar karşısında kendi kendinize bunu ben mi yaptım demeye başlıyorsunuz.Sonra ise yaptığınız projenin büyüsüne kapılarak kendinizi .net 3.0 ile XAML "in gücüne ve hayal gücünüze bırakmış olarak buluyorsunuz.Expression Blend" ın Expression Studio içerisinde yer almasının sebebi nedir diye biraz araştırdığımızda.Expression Stuido" nun tamamiyle aslında bir bütün olduğunu başka hiç bir yazılıma gerek kalmadan bütün isteklerimizi karşılayabilmesi sonucuna ulaşabiliyoruz.Expression Blend" ı Expression Studio ile bütünlüğünü sağlayan etkenler ise Expression Design ile oluşturduğumuz tasarımları XAML formatında kaydederek Blend içerisinde kusursuz kullanabilmemiz olması.Zaten çalışma ortamı incelendiği zaman Expression Desing ve Expression Media ile aynı olduğu gözden kaçmamaktadır.Not:Eğer Expression Blend ile temel tema olarak gelen Koyu siyahı beğenmemeniz durumunda Expression Light adı verilen gri ye yakın bir rengi olan temayı seçebilirsiniz.Ulaşabilmeniz için Tool-->Options...-->Workspace-->Theme yolunu takip ederek değiştirebilirsiniz.İsterseniz sözü fazla uzatmadan Expression Blend" ın çalışma ortamına giriş yapalım. İlk olarak sizlere Expression Blend ile çalışabilmeniz için indirip kurabileceğiniz adresi veriyorum.Artık Expression Blend" ı kurduk ve çalışmaya başlayacağız.Fakat karşımıza hiç beklemediğimiz bir durum çıkıyor.Çalışma alanımızın teması Siyah hem de koyu siyah.Bir süre şaşkınlıktan sonra Blend" ı incelemeye geçiyorum.Temasının dışında tasarımının da yenilikçi olduğu hiç şüphe getirmeyen bir durum.Şaşkınlğımızı yine bir kenara bırakarak yine bir proje oluşturalım.File-->NewProject ile yeni bir proje oluşturabilyoruz.Eğer bilgisayarınızda SilverLight yüklü ise bu teknoloji ile de proje geliştirebilmemize olanak tanıyor.Ama biz standart WPF projesini seçiyoruz.Yavaş Expression Blend" ı tanımaya devam edelim.Çalışma alanımızın sol tarafında form üzerinde yapabileceğimiz değişiklikler için bir ToolBox(Araç Kutusu) yer almaktadır. Bu toolBox ile buton gibi bileşenlerin dışında Expression Blend" ın bie izin verdiği ölçüde çizimsel tasarımlarda oluşturabiliriz. Belki sizden yüzbinlerce kez yapılmış bir projenin sizin yorumunuzla yapılması istendi.Sizde Expression Blend" ı kullanarak eğer bu projeyi başka şekillerde de olsa başka insanlar yaptıysa ben de onlardan farkımı oluşturacağım tasarımlar ile göstereceğim diyebilme şansına sahibiz.Expression Blend" ın Properties" ini genel olarak incelersek;Brushes ÖzelliğiBu özellik yarmıyla Formumuz üzerinde her türlü renksel değişikliği yapabilmemiz mümkündür.Bu arada eklemek istediğim bir özelliği var sadece tek renk değil aralarında geçiş yapabileceğimiz birden fazla renk oluşumunada izin vermektedir.Appearance ÖzelliğiBu özellik form üzerinde bulunan şekillerin, bileşenlerin düzenini sağlamak için kullanılır.Common ile Layout ÖzelliğiBu özellikler ile formumuzun açıldığı zaman ki boyutunu, sol üst köşesinde hangi ikon" un bulunacağı gibi estetik açısından gerekli özellikleri ayarlayabiliyoruz.Artık temel olarak Expression Blend" ın çalışma ortamını tanıdığımıza göre WPF ile projemizi geliştirmeye başlayabiliriz. Expression Blend ile WPF uygulaması İlk başta WPF ile geliştirme yaparken herhangi bir sorun ile karşılaşmamak için .net FrameWork 2.0 ve 3.0 "ı kurmamız gerekmektedir. FrameWork Expression Blend ile çalışmamız içinde gerekli olan bir araçtır. Visual Studio Orcas C# Express Edition" a gerek duyulmaktadır.Olmadığı durumda kodlarımı bir NotePad ile karşımızda bulabiliyoruz..net Framework 2.0.net Framework 3.0Visual Studio 2008 Beta2 C# Express EditionNot:Visual Studio 2008 "in Beta 2 sürümü bugün Microsoft" un sitesinden kullanıcılara sunuldu.Sizde Expression Blend sayesinde bir Visual Studio Beta Tester" ı olacaksınız ve VisualStudio" nun bize getirdiği yenilikleri keşfetmenin mutluğunu tadacaksınız.Gerekli bütün yazılımlarımızı temin edip bilgisayarımıza kurduktan sonra Projemizi geliştirmeye başlayabiliriz.Benim aklıma proje olarak çekmecelerin üzerinde ayların yazdığı ve bu ayların üzerine gelince çekmecelerin açılmasını istediğim bir proje geldi.İlk Etapta zor gibi gözüksede aslında WPF ile gerçekten çok kolay olacak dikkat edilecek olan sadece gerekli noktaların doğru yerlerde bulunmasıdır.Projemizi oluşturduğumuz ve form tasarımını bitirdiğimiz zaman karşımıza aşağıdaki gibi bir görüntü elde edeceğiz.Fakat eklemek istediğim bir konu var Projemizi tamamiyle kod ile oluşturacağımız için derleme dışında çalışma alanımızda boş formdan başka bir şey gözükmeyecektir.Projemizin formu Windows1.xaml dosyasında oluşturulmaktadır. <Window    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    x:Class="Aylar.Window1"    Title="RafIcindeAylar" Height="300" Width="300"    Icon="eclipse_update_120.jpg" WindowStyle="ThreeDBorderWindow"    Background="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}">    <Window.OpacityMask>     <DrawingBrush Viewbox="0,0,20,20" ViewboxUnits="Absolute">      <DrawingBrush.Drawing>       <DrawingGroup>        <GeometryDrawing Brush="#FFD3D3D3">         <GeometryDrawing.Geometry>          <RectangleGeometry Rect="0,0,20,20"/>         </GeometryDrawing.Geometry>         </GeometryDrawing>        <GeometryDrawing Brush="#FF000000">        <GeometryDrawing.Geometry>         <EllipseGeometry Center="0,0" RadiusX="10" RadiusY="10"/>        </GeometryDrawing.Geometry>       </GeometryDrawing>       <GeometryDrawing Brush="#FF000000">        <GeometryDrawing.Geometry>         <EllipseGeometry Center="20,20" RadiusX="10" RadiusY="10"/>        </GeometryDrawing.Geometry>       </GeometryDrawing>       <GeometryDrawing Brush="#FFFFFFFF">        <GeometryDrawing.Geometry>         <EllipseGeometry Center="20,0" RadiusX="10" RadiusY="10"/>        </GeometryDrawing.Geometry>       </GeometryDrawing>       <GeometryDrawing Brush="#FFFFFFFF">        <GeometryDrawing.Geometry>         <EllipseGeometry Center="0,20" RadiusX="10" RadiusY="10"/>        </GeometryDrawing.Geometry>       </GeometryDrawing>       </DrawingGroup>      </DrawingBrush.Drawing>     </DrawingBrush>    </Window.OpacityMask>    <Window.ContextMenu>     <ContextMenu/>    </Window.ContextMenu></Window>Windows1.xamlYukarıda görmekte olduğumuz XAML kodları, Expression Blend tarafında Form üzerindeki değişiklikler sonucunda otomatik olarak yaratılan kodlardır.Bunları herhangi bir klosörün altında arayıp bulmadan direk çalışma ortamımızın sağüst köşesinde desing/XAML tab"larından XAML" i seçerek görebileceğimiz kodlardır.Bu kodlar üzerinde istediğimiz değişiklikleri yapabilmemiz mümkündür.Ben herhangi bir değişiklik yapmadan Blend" in yarattığı kodları kabul ediyorum.Formumuzun ikonunu, arka planını ve derlendiği zaman karşımıza çıkacak boyutunu ayarladıktan sonra gerçek işimiz olan kod tarafına geçiyoruz.Bu kodları yazabilmek için Windows1.xaml "in sağındaki oke tıkladıktan sonra çıkan Windows1.xaml.cs" in üzerine çift tıklanması ile VisualStudio 2008 Beta 2 C# Express Edition ile yazıyoruz.İlk başta çağıracağımız kütüphaneleri veriyorum.Çünkü Alışık olduğumuzdan farklı olarak daha fazla kütüphane çağıracağız. using System;using System.Collections.Generic;using System.Text;using System.Windows;using System.Windows.Controls;using System.Windows.Data;using System.Windows.Documents;using System.Windows.Input;using System.Windows.Media;

using System.Windows.Media.Imaging;using System.Windows.Shapes;using System.Drawing.Imaging;using System.Windows.Media.Media3D;using System.Windows.Media.Animation;

Media kütüphanesinin çağırılması WPF ile nesnelerini kullanacağımız için çağırılmıştır. public partial class Window1 : Window{

public Window1()  {    InitializeComponent();    this.Width = 600;    this.Height = 600;

                                                                                                                                                                                                                                                                                                                                                    RafGorunumu = new Viewport3D();    this.Content = RafGorunumu;     KubYarat();  }

  Viewport3D RafGorunumu;  System.Collections.ArrayList Model = new System.Collections.ArrayList();  System.Collections.ArrayList Text = new System.Collections.ArrayList();  MeshGeometry3D UcgenGecis;  GeometryModel3D OncekiIsabetliSekil;  GeometryModel3D IsabetliSekil;

  DiffuseMaterial ArkaPlanunFocus = new DiffuseMaterial(new SolidColorBrush(System.Windows.Media.Colors.BlanchedAlmond));  DiffuseMaterial ArkaplanFocus = new DiffuseMaterial(new SolidColorBrush(System.Windows.Media.Colors.BlanchedAlmond));  Single NesneselAralik = 2;

  public void KubYarat()  {

    Material material;    GeometryModel3D UcgenselModel;    UcgenGecis = new MeshGeometry3D();    //Şeklin oluşturulabilmesi için point değerleri belirleniyor.    Point3D point0 = new Point3D(1, 5, 5);    Point3D point1 = new Point3D(1, 5, -5);    Point3D point2 = new Point3D(-1, 5, 5);    Point3D point3 = new Point3D(-1, 5, -5);    Point3D point4 = new Point3D(1, -5, 5);    Point3D point5 = new Point3D(1, -5, -5);    Point3D point6 = new Point3D(-1, -5, 5);    Point3D point7 = new Point3D(-1, -5, -5);

    //Form"umuzun koordinatlarına gore point"ler yerlestiriliyor.    UcgenGecis.Positions.Add(point0);    UcgenGecis.TextureCoordinates.Add(new System.Windows.Point(0, 2000));    UcgenGecis.Positions.Add(point1);    UcgenGecis.TextureCoordinates.Add(new System.Windows.Point(2000, 2000));    UcgenGecis.Positions.Add(point2);    UcgenGecis.TextureCoordinates.Add(new System.Windows.Point(0, 0));    UcgenGecis.Positions.Add(point3);    UcgenGecis.TextureCoordinates.Add(new System.Windows.Point(2000, 0));    //Koordinat ekseninde belirtmediğimiz koordinatları direk yerleştiriyor.    UcgenGecis.Positions.Add(point4);    UcgenGecis.Positions.Add(point5);    UcgenGecis.Positions.Add(point6);    UcgenGecis.Positions.Add(point7);    //Kup ve Ucgenler baslatiliyor.    UcgenGecis.TriangleIndices.Add(2);    UcgenGecis.TriangleIndices.Add(0);    UcgenGecis.TriangleIndices.Add(3);

    UcgenGecis.TriangleIndices.Add(3);    UcgenGecis.TriangleIndices.Add(0);    UcgenGecis.TriangleIndices.Add(1);    //Geri    UcgenGecis.TriangleIndices.Add(7);    UcgenGecis.TriangleIndices.Add(4);    UcgenGecis.TriangleIndices.Add(6);

    UcgenGecis.TriangleIndices.Add(5);    UcgenGecis.TriangleIndices.Add(4);    UcgenGecis.TriangleIndices.Add(7);

    //Asagi    UcgenGecis.TriangleIndices.Add(1);    UcgenGecis.TriangleIndices.Add(0);    UcgenGecis.TriangleIndices.Add(5);

    UcgenGecis.TriangleIndices.Add(5);    UcgenGecis.TriangleIndices.Add(0);    UcgenGecis.TriangleIndices.Add(4);

    //Yukari    UcgenGecis.TriangleIndices.Add(6);    UcgenGecis.TriangleIndices.Add(2);    UcgenGecis.TriangleIndices.Add(7);

........................................

........................................

........................................

    material = new DiffuseMaterial( new SolidColorBrush(System.Windows.Media.Colors.Aquamarine) );    UcgenselModel = new GeometryModel3D(UcgenGecis, material);    ModelVisual3D model;     model=new ModelVisual3D();    model.Content = UcgenselModel;

    RafGorunumuYuklenmesi();

Şeklimizin oluşabilmesi için gerekli noktaları dizi içine atıyoruz.     private void KompleksObjeEkle()    {        DockPanel dp = new DockPanel();        dp.Background = Brushes.YellowGreen;

        Label y = new Label();        y.Background = Brushes.YellowGreen;        y.Content = "Yil";        y.Margin = new Thickness(2);        dp.Children.Add(y);        DockPanel.SetDock(y, Dock.Top);

        TextBox text = new TextBox();        text.Text = "Ay";        text.Margin = new Thickness(2);        dp.Children.Add(text);        DockPanel.SetDock(text, Dock.Bottom);

        Ekle(dp);   }

Ayları sistemin diline göre yılı kontrol ettikten sonra çekmecelerin üstüne yazıyor.    public void RafGorunumuYuklenmesi()   {        ModelVisual3D isik = new ModelVisual3D();        isik.Content = new AmbientLight(System.Windows.Media.Colors.White);        RafGorunumu.Camera = new PerspectiveCamera(new Point3D(-3, 15, -2), new Vector3D(7, -10, 2), new Vector3D(1, 0, 0), 1000);        RafGorunumu.Children.Add(isik);        ModelVisual3D Ampul=new ModelVisual3D();        RafGorunumu.Children.Add(Ampul);        RafGorunumu.MouseMove += new MouseEventHandler(RafGorunumu_MouseYukari);        RafGorunumu.MouseDown += new MouseButtonEventHandler(RafGorunumu_MouseAsagi);    }

   public void Ekle(Visual l)   {        Text.Add(l);

        //Goruntusel olarak çizim kontrolleri yaratılıyor.        ModelVisual3D EkstraKub = new ModelVisual3D();        Model3DGroup ModelGrup = new Model3DGroup();        GeometryModel3D Model3d = new GeometryModel3D();

        //Kübün standart geometriksel modellenmesi        Model3d.Geometry = (MeshGeometry3D)UcgenGecis;

        //Modelim çizim özelliklerine göre metaryellerinin yaratılması...        DiffuseMaterial visualMaterial = new DiffuseMaterial(new VisualBrush(l));        Model3d.Material = visualMaterial;

        ModelGrup.Children.Add(Model3d);        EkstraKub.Content = ModelGrup;        Model.Add(Model3d);

        //Seklimize görülebilecek kadar raf ekleniyor.        RafGorunumu.Children.Add(EkstraKub);

 

        // Küp ler basamak görüntüsüne kavuşması sağlanıyor.         EkstraKub.Transform = new TranslateTransform3D(NesneselAralik * (Text.Count-1), 0, 0);         DonusumUygulama(Model3d);    }

Not:Çekmecelerimizin şekli oluşturuluyor.Şimdiye kadar neler yaptığımızı temle olarak toparlarsak.WPF kullandığımız için ek olarak çağırmamız gereken kütüphaneleri çağırdık.Daha sonra şeklimizin oluşabilmesi bir dizi tanımladık ve tanımladığımız dizi yardımıyla şeklimizi oluşturlacağı noktaları tanımladık.Sistemin zamanı ve dili yardımıyla çekmecelerimizin kapaklarına ayları yazdırdık. Son olarak ise media ve media3d kütüphaneleri kullanılarak şeklimiz düşündüğümüz görünümüne kavuşmuş oluyor.Bu kod parçacıklarını VisualStudio ile oluşturduktan sonra tekrar Expression Blend ortamına giriyoruz.Çağırdığımız .net 2.0 kütüphanelerin Blend tarafından tanınması için referances klasörüne eklememiz gerekiyor( References sağ klik AddReference ).Eklemek istediğimiz *.dll" leri C:WINDOWSMicrosoft.NETFrameworkv2.0.50727 klasörünün içersinden ulaşabiliriz.Not:*.dll" ler eklenirken unutulmamalıdır ki System.***.dll şeklinde bilgisayarımızın içerisinde bulunmaktadır.Gerekli bütün işlemlerimizi bitirdikten sonra yapmamız gereken tek bir şey kaldı.En eğlenceli olan derlemek.Karşımıza çıkan görüntü gerçekten düşündüğümüze yakın oluyor.Kısaca neler öğrendiğimizi toplarlamak gerekirse,Expression Blend nedir, nereden temin edilebilir ve çalışma alanı nasıldır hakkında bilgi edindik.Daha sonra WPF ile uygulama geliştirmek istersek nasıl yollar izlemeliyizin ve nasıl yapmalıyızın üzerinde durduk.Bilgisayar grafiklerini kullanarak ayları 12 çekmecede toparladık. Umarım yararlı olmuştur. WPF ve Expression Blend kullanmanız dileğiyle.

Döküman Arama

Başlık :

Kapat