Silverlight etiketindeki makaleler 2. sayfa

07 Nis 2009

Sem Göksu Açık Kaynak Kodlu Blog Sistemi

Kategori:
Yazılım
Etiketler:
ASP.NET Sem Göksu Blog Sistemi Silverlight SQL Server 2005
82 Yorum

Sem Göksu Blog Sistemi
Sem Göksu Blog Sistemi ile kendi bloğunuzu oluşturabilirsiniz. Blog içerisinde Caching, SQL Paging, Re-Write Path gibi bir çok konu işlenmiştir.

Kullanılan Teknolojiler

- ASP.NET 3.5
- ASP.NET AJAX 1.0
- Silverlight
- JavaScript
- Enterprise Library 3.0
- SQL Server 2005

Blog Özellikleri

- İçerikler
- Makaleler
- Kitap Önerileri
- Çalışmalar
- Silverlight Fotoğfraf Galerisi
- Kaynaklar
- Takip ettiklerim
- IE 8 Hızlandırıcı
- RSS
- Tema
- Arama
- Yorum
- Arşiv
- CMS

Blog sistemini indirmek için http://www.semgoksu.com/semgoksu.rar adresini kullanabilirsiniz. Rar dosyası içerisinde bulunan semgoksu.sql isimli dosyayı çalıştırdığınız da veritabanınız hazır olacak. Bloğu kendinize uyarlamak için web.config içerisindeki ayarları yapmanız yeterli olacaktır. Bu ayarlar,

Connection String
Bloğun kullanacağı veritabanı için gerekli olan ConectionString bilgisi.

Host
Email gönderimi için gerekli olan host bilgisi.

Email
Email'in gönderileceği email hesabı.

Password
Email adresinin şifresi.

SenderEmail
Gönderilecek olan mail adresi.

SiteName
Blog ile ilgili açıklama.

SiteOwner
Bloğun sahibi

SiteLink
Bloğun adresi.

SiteShortLink
Bloğun kısa adresi.

AdminUser
CMS'e girişte kullanacağınız kullanıcı adı.

AdminPass
CMS'e girişte kullanacağınız şifre.

Bloğu kullandıktan sonra bana bilgi verirseniz çok sevinirim :)

01 Nis 2009

Silverlight 3 Beta - Assembly Caching(Önbellekleme)

Merhaba arkadaşlar, bu makalemizde Silverlight 3 Beta ile birlikte gelen Assembly Caching (Önbellekleme) özelliğini inceliyor olacağız.

Silverlight 2.0 ile birlikte Silverlight uygulamaları XAP dosyalarında dağıtılmaya başlamıştı. XAP dosyalarının (aslında ZIP dosyası) içerisinde Silverlight uygulamamızda kullandığımız assemly(DLL) ’ler yer alıyordu ve bu yüzden XAP dosyalarının boyutu da büyüyordu. Silverlight 3 Beta ile birlikte Assembly Caching özelliği geldi ve Silverlight uygulamalarına Referans edilen assembly dosyaları XAP dosyası içinde değil de kullanıcının makinesine internet üzerinden(microsoft.com’dan) indirilip kullanılıyor. XAP dosyasının içinde assembly’ler yer almayacağı için XAP dosyasının da boyutu da küçülüyor. Bunun dezavantajı da var, eğer o anda internet bağlantımız yoksa Silverlight uygulamamız çalışmayacaktır

Yeni bir Silverlight uygulaması oluşturalım ve projemizi derleyip oluşan XAP dosyasını inceleyelim. (XAP dosyasını Win Zip ya da Win Rar ile açabiliriz)

Resim 1

ZAP dosyamız 290 KB görünüyor. Şimdi XAP dosyasının içindeki dosyalara bakalım.

Resim 2

Projemize referans olarak eklediğimiz Assembly(DLL)’ler XAP dosyası içerisinde yer alıyor. Boyut olarak da bir hayli büyümüş ve daha da büyüyebilir. Son olarak XAP içerisinde yer alan AppManifest.XAML dosyasını açalım ve inceleyelim.

<Deployment xmlns=http://schemas.microsoft.com/client/2007/deployment
xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
EntryPointAssembly="SL30AssemblyCaching" EntryPointType="SL30AssemblyCaching.App"
RuntimeVersion="3.0.40307.0">
    <Deployment.Parts>
        // Referans gösterdiğimiz Assembly’ler…
        <AssemblyPart x:Name="SL30AssemblyCaching" Source="SL30AssemblyCaching.dll" />
        <AssemblyPart x:Name="System.ComponentModel.DataAnnotations" Source="System.ComponentModel.DataAnnotations.dll" />
        <AssemblyPart x:Name="System.ComponentModel" Source="System.ComponentModel.dll" />
        <AssemblyPart x:Name="System.Data.Services.Client" Source="System.Data.Services.Client.dll" />
        <AssemblyPart x:Name="System.Json" Source="System.Json.dll" />
        <AssemblyPart x:Name="System.Windows.Ria" Source="System.Windows.Ria.dll" />
        <AssemblyPart x:Name="System.Xml.Linq" Source="System.Xml.Linq.dll" />
    </Deployment.Parts>
</Deployment>

Silverlight 3 Beta ile gelen Assembly Caching özelliğini kullanalım. Bu özelliği kullanabilmemiz için Silverlight uygulaması üzerinde sağ tıklayarak properties’i açalım. Açılan pencerede “Reduce Xap size by caching framework assamblies” seçeneğini seçelim. (Default olarak seçili gelmiyor)

Resim 3

Şimdi projemizi tekrar derleyelim ve XAP dosyasını tekrar inceleyelim.

Resim 4

Dosya boyutu 63 KB’a düşmüş, XAP Dosyasını açalım ve içindeki dosyalara bakalım.

Resim 5

Son olarak XAP içindeki AppManifest.XAML dosyasına da açıp bakalım, içeriğinin değiştiğini göreceğiz.

<Deployment xmlns=http://schemas.microsoft.com/client/2007/deployment
xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
EntryPointAssembly="SL30AssemblyCaching" EntryPointType="SL30AssemblyCaching.App"
RuntimeVersion="3.0.40307.0">
    <Deployment.Parts>
        <AssemblyPart x:Name="SL30AssemblyCaching" Source="SL30AssemblyCaching.dll" />
        <AssemblyPart x:Name="System.Windows.Ria" Source="System.Windows.Ria.dll" />
        </Deployment.Parts>
    <Deployment.ExternalParts>
    // Referans gösterdiğimiz assembly’ler uygulama browser da çalıştığı anda indirilecek.
    <ExtensionPart Source="http://go.microsoft.com/fwlink/?LinkID=142565" />
        <ExtensionPart Source="http://go.microsoft.com/fwlink/?LinkID=141727" />
        <ExtensionPart Source="http://go.microsoft.com/fwlink/?LinkId=142566" />
        <ExtensionPart Source="http://go.microsoft.com/fwlink/?LinkId=142567" />
        <ExtensionPart Source="http://go.microsoft.com/fwlink/?LinkId=142576" />
    </Deployment.ExternalParts>
</Deployment>

XAP içinde yer alan assembly’ler artık burada yer almıyor. Assembly yerine indirileceği linkler yer alıyor. Silverlight uygulaması browser da çalıştığında Silverlight uygulaması bu linkleri kullanılarak ilgili assembly dosyalarını kullanıcının makinesine microsoft.com’dan indirecek.

Silverlight uygulması derlenirken bu linkleri C:\program files\microsoft sdks\silverlight\v3.0\libraries\client klasöründeki *.extmap.xml dosyalarından alıyor. Eğer burada ilgili dosya yoksa XAP içerisine assembly'nin kendisini atıyor.

<?xml version="1.0"?>
<manifest xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
    <assembly>
        <name>System.Windows.Controls.Data.DataForm</name>
        <version>2.0.5.0</version>
        <publickeytoken>31bf3856ad364e35</publickeytoken>
        <relpath>System.Windows.Controls.Data.DataForm.dll</relpath>
      <extension downloadUri="http://go.microsoft.com/fwlink/?LinkID=142573"/>
    </assembly>
</manifest>

Bu makalenin de sonuna geldik başka bir makale de görüşmek üzere. Silverlight ile kalın ;)

Sem GÖKSU
www.semgoksu.com | www.yazilimgunlugu.com
sem.goksu@yazilimgunlugu.com

Kaynaklar
msdn.com
silverlight.net

31 Mar 2009

Silverlight 3 Beta - Data Kontrolleri ile İş Uygulamaları Geliştirme

Merhaba arkadaşlar, bu makalemizde Silverlight 3 Beta ile birlikte gelen DataForm kontrolü ile DataGrid kontrolünü birlikte kullanarak bir iş uygulaması geliştireceğiz.

Silverlight 3 Beta ile birlikte data kontrollerinin çok geliştirildiğini önceki yazılarımda özellikle vurgulamıştım. Bu makalemizde de bu data kontrollerini kullanarak bir iş uygulaması geliştireceğiz. Uygulamamızda kategoriler ve bu kategoriler ait ürünlerin listelendiği bir uygulama geliştireceğiz. DataForm kontrolünde kategorileri, DataGrid kontrolünde de bu kategoriye ait olan ürünleri listeleyeceğiz. Eğer bu kontroller ile ilgili yeterince bilgimiz yoksa öncelikle aşağıdaki makaleleri okumanızı öneririm.

DataGrid Kontrolü
DataGrid Kontrolü Kolon Yapıları
Web-Servisten Gelen Verinin Listelenmesi
DataForm Kontrolüne Genel Bakış

Yeni bir Silverlight projesi oluşturalım. Örneğimizde SQL Server 2005 örnek veritabanı olan AdventureWorks’u kullanacağız. Silverlight da doğrudan veritabanı erişimi olmadığı için XML Web servisi ile veriyi alacağız. Bunun için projemize web servisi ekleyelim. Servisimizin içinde Urun ve Kategori için iki nesne ve iki metot oluşturalım. İlk metot kategoriler için ikincisi de ürünler için olacak.

[WebService1.asmx]

publicclass WebService1 : System.Web.Services.WebService
{
    public class Kategori // Kategoriler için Entity
    {
        public int KategoriID { get; set; }
        public string KategoriAdi { get; set; }
    }

    public class Urun // Ürünler için Entity
    {
        public int UrunID { get; set; }
        public string UrunAdi { get; set; }
        public decimal ListeFiyati { get; set; }
    }

    [WebMethod]
    public List<Kategori> KategorileriGetir()// Web servisten geriye dönecek olan kategori listesi
    {
        List<Kategori> kategoriler = new List<Kategori>();
        SqlConnection cnn = new SqlConnection("server=.; DataBase=AdventureWorks; uid=sa; pwd=sa12345");
        SqlCommand cmd = new SqlCommand("Select ProductSubCategoryID, Name From Production.ProductSubCategory", cnn);
        cnn.Open();
        SqlDataReader dr = cmd.ExecuteReader();
        while (dr.Read())
        {
            kategoriler.Add(new Kategori() { KategoriID = dr.GetInt32(0), KategoriAdi = dr.GetString(1) });
        }
        cnn.Close();
        return kategoriler;
    }

    [WebMethod]
    public List<Urun> UrunleriGetir(int ProductSubcategoryID)//Web servisten geriye dönecek olan Ürün Listesi. Parametre olarak CategoryID’yi aldı.
    {
        List<Urun> urunler = new List<Urun>();
        SqlConnection cnn = new SqlConnection("server=.; DataBase=AdventureWorks; uid=sa; pwd=sa12345");
        SqlCommand cmd = new SqlCommand("Select ProductID, Name, ListPrice From Production.Product Where ProductSubCategoryID=@ProductSubCategoryID", cnn);
        cmd.Parameters.AddWithValue("@ProductSubcategoryID", ProductSubcategoryID);
        cnn.Open();
        SqlDataReader dr = cmd.ExecuteReader();
        while (dr.Read())
        {
            urunler.Add(new Urun() { UrunID = dr.GetInt32(0), UrunAdi = dr.GetString(1), ListeFiyati = dr.GetDecimal(2) });
        }
        cnn.Close();
        return urunler;
    }
}

Servisimiz hazır. Şimdi Silverlight uygulamamıza dönelim. Silverlight formumuza bir DataGrid ve DataForm ekleyelim. DataForm kontrolünün fieldlarını istersek kendimiz de oluşturabiliriz. Bunun için AutoGenerateFields özelliğini false yapalım ve fieldlarını kendimiz belirleyelim. Aynı şekilde DataGrid kontrolünün de kolonlarının otomatik olarak oluşmasını engelleyelim ve kolonlarını kendimiz belirleyelim.

[XAML]

<UserControl xmlns:dataControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm" xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" x:Class="SL3DataFormGridVew.MainPage"
xmlns=" http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x=" http://schemas.microsoft.com/winfx/2006/xaml"
Width="500" Height="360">
// Animasyon da olsun
<UserControl.Resources>
    // Silverlight 3 Beta ile gelen easing animasyonları kullanalım.
    <Storyboard x:Name="oyna">
        <DoubleAnimation Storyboard.TargetName="dgUrunler" Storyboard.TargetProperty="Opacity" From=".2" To="1" Duration="00:00:01">
            // DoubleAnimastion’ın EasingFunction isimli dependency bir property’si var. Bu Property herhangi bir easing animasyonu atayabiliriz.
            <DoubleAnimation.EasingFunction>
                <QuarticEase EasingMode="EaseInOut"></QuarticEase>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
    </Storyboard>
</UserControl.Resources>
<Canvas x:Name="LayoutRoot" Background="White">
    // Kategorilerin listeleneceği DataForm Kontrolü. AutoGenerateFields özelliğini false yaptık ve içerisinde ki fieldlar otomatik olarak oluşturulmasını engelledik.
    <dataControls:DataForm x:Name="dgKategoriler" AutoGenerateFields="False" Width="480" Canvas.Top="10" Canvas.Left="10" Height="150">
        // DataForm kontrolünün fiedlarını belirliyoruz.
        <dataControls:DataForm.Fields>
            // Yeni bir field ekliyoruz.
            // FieldLabelContent => Kontrolün etiket bilgisi
            // isReadOnly => Bu fieldda yer alan Kontrol sadece okunabilir olacak
            // Binding => Verikaynağından gelen değeri bağlıyoruz.
            // FieldLabelPosition => Kontrolün eiketi nerede görünsün
            <dataControls:DataFormTextField FieldLabelContent="Kategori ID" IsReadOnly="True" Binding="{Binding KategoriID}" FieldLabelPosition="Top">
            </dataControls:DataFormTextField>
            <dataControls:DataFormTextField FieldLabelContent="Kategori Adı" Binding="{Binding KategoriAdi}" FieldLabelPosition="Top">
            </dataControls:DataFormTextField>
        </dataControls:DataForm.Fields>
    </dataControls:DataForm>
     // Kategoriye ait ürünlerin yer aldığı DataGrid Kontrolü. AutoGenerateColumns özelliğini false yaparak kolonların otomatik olarak oluşturulmasını engelledik.
    <data:DataGrid x:Name="dgUrunler" AutoGenerateColumns="False" Canvas.Top="170" Canvas.Left="10" Width="480" Height="180">
        // Datagrid’e kolonları ekleyelim
        <data:DataGrid.Columns>
            // Header => Kolonum başlık bilgisi
            // Binding => Verikaynağından gelen değeri bağlıyoruz.
            <data:DataGridTextColumn Header="Ürün ID" Binding="{Binding UrunID}"></data:DataGridTextColumn>
            <data:DataGridTextColumn Header="Ürün Adı" Binding="{Binding UrunAdi}"></data:DataGridTextColumn>
            <data:DataGridTextColumn Header="Liste Fiyatı" Binding="{Binding ListeFiyati}"></data:DataGridTextColumn>
        </data:DataGrid.Columns>
    </data:DataGrid>
</Canvas>
</UserControl>

Dizayn olarak her şey hazır. Artık Web servise bağlanıp verileri çekebiliriz. Bunun için Silverlight projemize gelelim ve sağ tıklayarak “Add Service Reference” diyelim. Discover butonuna tıkladığımız da servisi otomatik olarak bulacaktır. OK butonuna basalım ve servisi ekleyelim.

Resim 1

Servise bağlandıktan sonra yapmamız gereken tek şey servisten gelen veriyi kontrollere bağlamak olacak.

[C#]

public partial class MainPage : UserControl
{
    // Web Servis’in örneğini oluşturalım
    WebService1SoapClient servis = new WebService1SoapClient();
    public MainPage()
    {
        InitializeComponent();
        // Uygulama ilk yüklendiğinde çalışan Loaded event listenerini oluşturalım.
        this.Loaded += span style='color: blue'>new RoutedEventHandler(MainPage_Loaded);
        // Hatırlayacak olursanız, Web servisleri varsayılan olarak Asenkron olarak çalışıyordu. Burada Servisten kategorilerin getirildiğinde çalışacak olan event listeneri oluşturalım.
        servis.KategorileriGetirCompleted += new EventHandler<SL3DataFormGridVew.ServiceReference1.KategorileriGetirCompletedEventArgs>(servis_KategorileriGetirCompleted);
        // DataForm kontrolünden kategoriler arasında geçerken çalışacak olan event listeneri luşturalım.
dgKategoriler.CurrentItemChanged += new EventHandler<EventArgs>(dgKategoriler_CurrentItemChanged);
        // Servisten Ürünler getirildikten sonra çalışacak olan event listeneri oluşturalım.
        servis.UrunleriGetirCompleted += new EventHandler<UrunleriGetirCompletedEventArgs>(servis_UrunleriGetirCompleted);
    }

    void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        // Servise Kategorileri getirecek olan metot için istekte bulunuyoruz.
        servis.KategorileriGetirAsync();
    }

    void servis_KategorileriGetirCompleted(object sender, SL3DataFormGridVew.ServiceReference1.KategorileriGetirCompletedEventArgs e)
    {
        // Gelen sonucu DataForm’un ItemsSource özelliğine bağlıyoruz.
        dgKategoriler.ItemsSource = e.Result;
    }

    void dgKategoriler_CurrentItemChanged(object sender, EventArgs e)
    {
        // Seçili olan elemanı bir kategori nesnesine atadık. Object döndüğü içinde cast ettik.
        Kategori kategori = (Kategori)dgKategoriler.CurrentItem;
        // Servise Ürünleri getirecek olan metot için istekte bulunuyoruz.
        servis.UrunleriGetirAsync(kategori.KategoriID);
    }

    void servis_UrunleriGetirCompleted(object sender, UrunleriGetirCompletedEventArgs e)
    {
        // Ürünler geldiğinde animasyonu oynatalım.
        oyna.Begin();
        // Gelen sonucu datagarid’in ItemsSource özelliğine bağlıyoruz.
        dgUrunler.ItemsSource = e.Result;
    }
}

Sonuca bakalım,

Resim 2

İstediğimiz gibi kayıtlar arasında gezinebilir ve ürünlerin de değiştiğini ve animasyonun da çalıştığını görebiliriz.. Bu makalenin de sonuna geldik başka bir makale de görüşmek üzere. Silverlight ile kalın ;) Makale de kullandığımız örneği indirmek için tıklayınız

Sem GÖKSU
www.semgoksu.com | www.yazilimgunlugu.com
sem.goksu@yazilimgunlugu.com

Kaynaklar
msdn.com
silverlight.net

27 Mar 2009

Silverlight 3 Beta - Network Bağlantısını Algılama

Merhaba arkadaşlar, bu makalemizde Silverlight 3 Beta ile gelen yeniliklerden biri olan Network bağlantısının durumunun nasıl kontrol edildiğine bakacağız.

Silverlight 3 Beta ile birlikte gelen yeniliklerden biri de Network bağlantısının durumunun kontrol edilebilmesidir. Daha önceki yazılarımda da belirtmiştim, Silverlight uygulamalarını artık browser dışına taşıyabiliyoruz. Browser dışında çalışan uygulama oyun ve banner ise sorun olmayacaktır fakat uygulama veri ile entegreli olarak çalışıyorsa ve bağlantı yoksa hata verecektir. Burada hata olmasını istemiyorsak network bağlantısını kontrol edip ona göre işlem yaptırmamız gerekir. Bunu yapabilmemiz için ilk olarak projemizin referanslarına System.Net.NetworkInformation isimli namespace’i eklememiz gerekiyor. Bu namespace içinde kullanabileceğimiz iki tane abstract class var. NetworkInterface, NetworkChange

using System.Net.NetworkInformation;

NetworkInterface
Bu sınıfın içinde GetIsNetworkAvailable isimli geriye Boolean değer döndüren bir metot var. Bu metot o andaki bağlantının durumunu kontrol ediyor. Eğer bağlantı varsa geriye true, bağlantı yoksa geriye false değer dönüyor.

NetworkInterface.GetIsNetworkAvailable()

NetworkChange
Bu sınıf içinde de bir NetworkAddressChangedEventHandler isimli bir event var. Bu event network bağlantısının durumu değiştiğinde yani bağlantı kesildiğinde yada bağlantı geldiğinde çalışıyor.

NetworkChange.NetworkAddressChanged += new NetworkAddressChangedEventHandler(NetworkChange_NetworkAddressChanged);

Yeni bir Silverlight uygulaması oluşturalım ve formumuza TextBlock ve Rectangle kontrolü ekleyelim. TextBlock kontrolünün Text özelliğinde bağlantı durumu görüntülenecek. Rectangle nesnesini fill özelliğinde de network bağlantısının durumuna göre değiştireceğiz.

[XAML]

İlk olarak bağlantının durumunu kontrol eden bir metot yazalım. Bu metot bağlantının durumuna göre TextBlock ve Rectangle nesnesinin özelliklerini değiştirecek. Form ilk çalıştığında ve bağlantı durumu değiştiğince tetiklenecek olan eventleri oluşturalım. Her iki event içinde de yazdığımız metodu çağıracağız.

[C#]

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
// Eklemeyi unutmuyoruz…
using System.Net.NetworkInformation;

namespace SL30Networking
{
    public partial class MainPage : UserControl
    {
        // Bu metot ile bağlantının durumunu kontrol edip TextBlock ve Rectangle nesnesinin özelliklerini değiştiriyoruz.
        private void NetworkuKontrolEt()
        {
            // Bağlantının durumunu kontrol eden metot. Eğer bağlantı varsa true, yoksa false döner.
            if (NetworkInterface.GetIsNetworkAvailable()) // Bağlantı varsa çalışacak
            {
                durumText.Text = "Bağlantı Durumu : Bağlantı var";
                durumu.Fill = new SolidColorBrush(Colors.Green);
            }
            else // Bağlantı yoksa çalışacak
            {
                durumText.Text = "Bağlantı Durumu : Bağlantı yok";
                durumu.Fill = new SolidColorBrush(Colors.Red);
            }
        }

        public MainPage()
        {
            InitializeComponent();
            // Bağlantının durumu değiştiğinde çalışacak olan event listeneri oluşturuyoruz
            NetworkChange.NetworkAddressChanged += new NetworkAddressChangedEventHandler(NetworkChange_NetworkAddressChanged);
            this.Loaded+= new NetworkAddressChangedEventHandler(NetworkChange_NetworkAddressChanged);
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            // Form ilk yüklendiğinde oluşturduğumuz metodu çağıralım.
            NetworkuKontrolEt();
        }

        void NetworkChange_NetworkAddressChanged(object sender, EventArgs e)
        {
            // Bağlantınun durumu değiştiğinde tekrar oluşturduğumuz metodu çağıralım.
            NetworkuKontrolEt();
        }
    }
}

Şimdi bağlantımız varken uygulamamızı çalıştıralım.

Evet bağlantı var ve Rectangle nesnemiz yeşil renkte. Bağlantıyı kopartalım,

Uygulamamıza dönelim tekrar,

Bağlantının olmadığını görebiliyoruz.

Bu makalenin de sonuna geldik başka bir makale de görüşmek üzere. Silverlight ile kalın ;)

Sem GÖKSU
www.semgoksu.com | www.yazilimgunlugu.com
sem.goksu@yazilimgunlugu.com

Kaynaklar
msdn.com
silverlight.net

24 Mar 2009

Silverlight 3 Beta – 3D Efektleri (Perspective Transforms)

Merhaba arkadaşlar, bu makalemizde Silverlight 3 Beta ile gelen 3D efektlerinin Silverlight uygulamalarında nasıl kullanıldığına bakacağız.

Silverlight 2’nin en büyük eksiklerinden biri 3D efektlerinin olmamasıydı. Silverlight 3 Beta ile birlikte bu eksiklik de giderildi ve artık Silverlight uygulamalarında 3D efektlerini kullanabiliyoruz. Tabi şunu da özellikle belirtmekte fayda var. Silverlight henüz 3D-Engine desteklemiyor. Yani yaptığımız uygulama gerçek bir 3D uygulaması olmayacaktır.

Silverlight 3 Beta UIElementlerine 3D Efektleri uygulayabilmek için her UIElementin ”Projection” isimli bir propertysi var. Eğer bir kontrole 3D efekti uygulamak istiyorsak UIElementin Projection özelliğini kullanmak zorundayız. Örnek kullanımı aşağıdaki gibidir.

[XAML]

<UIElement.Projection>
<PlaneProjection Rotation="Deger"></PlaneProjection>
</UIElement.Projection>

UIElementlerin Projection özelliği abstract bir tiptir. PlanProjection da bu tipten kalıtılarak oluşturulmuş bir tiptir. Böylece nesnelerin Projection özelliğine PlaneProjection tipini atayabiliriz.

[C#]

UIElement.Projection = new PlaneProjection() { Rotation = deger };

İlk olarak PlaneProjection tipinde yer alan bazı özellikleri inceleyelim. PlaneProjection'ın 12 tane özelliği var.

RotationX
UIElementin dönme merkezinin, X koordinatında döndürülmesini sağlar.

RotationY
UIElementin dönme merkezinin, Y koordinatında döndürülmesini sağlar.

RotationZ
UIElementin dönme merkezinin, Z koordinatında döndürülmesini sağlar.

CenterOfRotationX, CenterOfRotationY, CenterOfRotationZ özelliklerini kullanarak nesnenin dönme merkezini taşıyabiliriz. Bu özellikler 0 ile 1 arasında bir değer alabilir. 0 En üst nokta 1 ise an alt noktadır. Default değerleri x ve y için 0.5, z için 0’dır.

LocalOffsetX, X ekseninde nesne ile Plane(3D alanı) arasındaki mesafeyi belirler.
LocalOffsetY, Yekseninde nesne ile Plane(3D alanı) arasındaki mesafeyi belirler.
LocalOffsetZ, Z ekseninde nesne ile Plane(3D alanı) arasındaki mesafeyi belirler.
GlobalOffsetX, X ekseninde nesne ile ekran arasındaki mesafeyi belirler.
GlobalOffsetY, Y ekseninde nesne ile ekran arasındaki mesafeyi belirler.
GlobalOffsetZ,Z ekseninde nesne ile ekran arasındaki mesafeyi belirler.

Yeni bir Silverlight uygulaması oluşturalım ve projemize bir Rectangle, 6 slider ekleyelim. Rectangle nesnesinin Projection özelliğindeki Rotation X,Y Z ve CenterOfRotation X,Y,Z Özelliklerine bağlayacağız. Böylece Silverlight 3 Beta ile gelen bir diğer yenilik olan Kontrollerin birbirine bağlanması konusunu incelemiş olacağız. XAML kodumuz aşağıdaki gibidir.

[XAML]

<Canvas x:Name="LayoutRoot" Background="White" Width="400" Height="300" >

// Rectangle nesnesi oluşturalım
<Rectangle x:Name="Kare" Width="100" Height="100" Fill="Red" Canvas.Top="50" Canvas.Left="140">
    // Projection özelliğine PlaneProjecytion nesnesi ile 3D efektleri için özellikleri belirleyelim.
    // Rectangle nesnesinin CenterOfRotation özelliklerini belirledik. Böylece nesnenin dönme merkezi default değerler olarak atandı
    <Rectangle.Projection>
    <PlaneProjection x:Name="Kare3d" CenterOfRotationX="0.5" CenterOfRotationY="0.5" CenterOfRotationZ="0"/>
</Rectangle.Projection>
</Rectangle>

// Kare3d isimli PlaneProjection nesnesinin RotationX özelliğini slider kontrolünün value özelliğine bağlıyoruz. Böylece slider kontrolünün valuesi değiştikçe Nesnenin RotationX özelliğide değişecek.
<Slider Minimum="0" Maximum="360" Width="180" Value="{Binding ElementName=Kare3d, Mode=TwoWay, Path=RotationX}" Canvas.Left="20" Canvas.Top="200"/>

// Kare3d isimli PlaneProjection nesnesinin RotationY özelliğini slider kontrolünün value özelliğine bağlıyoruz. Böylece slider kontrolünün valuesi değiştikçe Nesnenin RotationY özelliğide değişecek.
<Slider Minimum="0" Maximum="360" Width="180" Value="{Binding ElementName=Kare3d, Mode=TwoWay, Path=RotationY}" Canvas.Left="20" Canvas.Top="230" />

// Kare3d isimli PlaneProjection nesnesinin RotationZ özelliğini slider kontrolünün value özelliğine bağlıyoruz. Böylece slider kontrolünün valuesi değiştikçe Nesnenin RotationZ özelliğide değişecek.
<Slider Minimum="0" Maximum="360" Width="180" Value="{Binding ElementName=Kare3d, Mode=TwoWay, Path=RotationZ}" Canvas.Left="20" Canvas.Top="260"/>

// Kare2 nesnesinin CenterOfRotationX özelliğini slider kontrolünün value özelliğine bağlıyoruz. Böylece slider kontrolünün valuesi değiştikçe Nesnenin CenterOfRotationX özelliğide değişecek.
<Slider Minimum="0" Maximum="1" Width="180" Value="{Binding ElementName=Kare3d, Mode=TwoWay, Path=CenterOfRotationX}" Canvas.Top="200" Canvas.Left="210"/>

// Kare3d isimli PlaneProjection nesnesinin CenterOfRotationY özelliğini slider kontrolünün value özelliğine bağlıyoruz. Böylece slider kontrolünün valuesi değiştikçe Nesnenin CenterOfRotationY özelliğide değişecek.
<Slider Minimum="0" Maximum="1" Width="180" Value="{Binding ElementName=Kare3d, Mode=TwoWay, Path=CenterOfRotationY}" Canvas.Top="230" Canvas.Left="210"/>

// Kare3d isimli PlaneProjection nesnesinin CenterOfRotationZ özelliğini slider kontrolünün value özelliğine bağlıyoruz. Böylece slider kontrolünün valuesi değiştikçe Nesnenin CenterOfRotationZ özelliğide değişecek.
<Slider Minimum="0" Maximum="1" Width="180" Value="{Binding ElementName=Kare3d, Mode=TwoWay, Path=CenterOfRotationZ}" Canvas.Top="260" Canvas.Left="210"/>

// Bilglendirme için kullanacağımız TextBlock kontrolleri
<TextBlock Canvas.Top="180" Canvas.Left="20" Width="87" Height="16" FontWeight="Bold" Text="Rotation">TextBlock>
<TextBlock Canvas.Top="180" Canvas.Left="210" Height="16" Width="118" Text="CenterOfRotation" FontWeight="Bold"/>
<TextBlock Canvas.Top="200" Canvas.Left="4" Height="16" Width="8" Text="X" FontWeight="Bold"/>
<TextBlock Canvas.Top="230" Canvas.Left="4" Height="16" Width="8" Text="Y" FontWeight="Bold"/>
<TextBlock Canvas.Top="260" Canvas.Left="4" Height="16" Width="8" Text="Z" FontWeight="Bold"/>

</Canvas>

Uygulamayı test edebiliriz artık. Test etmek için tıklayınız

Bu makalenin de sonuna geldik başka bir makale de görüşmek üzere. Silverlight ile kalın ;)

Sem GÖKSU
www.semgoksu.com | www.yazilimgunlugu.com
sem.goksu@yazilimgunlugu.com

Kaynaklar
MSDN
Silverlight SDK

›