Silverlight kategorisindeki makaleler 2. sayfa

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

24 Mar 2009

Silverlight 3 Beta – SaveFileDialog Kullanımı

Merhaba arkadaşlar, bu makalemizde Silverlight 3 Beta ile birlikte gelen SaveFileDialog nesnesinin kullanımı inceleyeceğiz.

Silverlight 3 Beta ile birlikte gelen SaveFileDialog ile Silverlight uygulamasındaki bir dosyayı istemci kullanıcının makinesine kaydetmemizi sağlar. Hatırlatmak da fayda var, Silverlight 2.0 ile birlikte de OpenFileDialog kontrolü Silverlight kontrol kütüphanesine eklenmişti. Bu kontrolle de istemcinin makinesindeki bir dosyayı Silverlight uygulaması içinde kullanabiliyoruz. Şöyle bir şey yapabiliriz artık, OpenFileDialog ile bir dosyayı alıp üzerinde değişiklik yapıp, SaveFileDialog kontrolü ile de kaydedebiliriz. SaveFileDialog kontrolünün bazı önemli özelliklerini inceleyecek olursak;

Filter özelliği ile SaveFileDialog ile kaydedilecek dosyanın uzantısını yada uzantılarını bu özellikle belirleyebiliri

FilterIndex özelliği ile filtreler içinde bulunan seçeneklerden hangisinin seçileceğini belirleriz.

DefaultExt özelliği ile herhangi bir filter seçmezsek DefaultExt özelliği ile belirttiğimiz uzantıyı alır

ShowDialog metodu ile SaveFileDialogu ekranda gösterebiliyoruz. Geriye Boolen bir değer döndürür.

Silverlight uygulamasında kullanıcıların Text dosyalarını açıp bu dosyalar üzerinde değişiklik yapıp kaydetmesini sağlayacak bir uygulama geliştirelim. Böylece hem OpenFileDialog hemde SavaFileDialog nesnelerini incelemiş olacağız. Bunun için Silverlight projesi oluşturalım. Projemize aç, kaydet için iki buton ve dosyadaki içeriği görüntülemek içinde bir textbox ekleyelim.

Resim 1

[XAML]

İlk olarak dosyayı OpenFileDialog nesnesini kullanarak açalım ve textbox kontrolün de gösterelim.

[OpenFileDialog]

void btnAc_Click(object sender, RoutedEventArgs e)
{
    OpenFileDialog dosyaAc = new OpenFileDialog(); // OpenFileDialog nesnesi oluşturalım.
    dosyaAc.Multiselect = false; // Çoklu seçime izin vermeyelim.
    dosyaAc.Filter = "Text Dosyaları(*.txt)|*.txt"; // Açılacak olan dosyanın uzantısı
    if (dosyaAc.ShowDialog() == true) // Bir dosya seçilmezse yada iptal’e basılırsa hata vermemesi için kontrolümüzü yapalım
    {
        string contents = "";
        StreamReader reader = new StreamReader(dosyaAc.File.OpenRead(), System.Text.Encoding.UTF8); // OpenFileDialog nesnesi ile açılan dosyayı StreamReader ile okuyalım.
        while(!reader.EndOfStream) // Okunan dosya sona geldimi
        {
            contents = reader.ReadToEnd();// Sonuna kadar oku
        }
        txtIcerik.Text = contents; // Okunan dosyanın içeriğini textbox’a ata.
        reader.Close(); // Okuyucuyla işimiz bitti kapatalım.
    }
}

Şimdide kullanıcının dosyayı SaveFileDialog nesnesi kullanarak kaydetmesini sağlayalım.

[SaveFileDialog]

void btnKaydet_Click(object sender, RoutedEventArgs e)
{
    SaveFileDialog dosyaKaydet = new SaveFileDialog(); //SaveFileDialog nesnesi oluşturalım.
    dosyaKaydet.Filter = "Text Dosyası(txt)|*.txt"; // Kaydedilecek dosya sadece txt dosya olabilisin.
    if (dosyaKaydet.ShowDialog() == true)
    {
        StreamWriter writer = new StreamWriter(dosyaKaydet.OpenFile());//Seçilen dosyayı StreamWriter ile açalım…
        writer.Write(txtIcerik.Text);// Seçilen dosyaya içeriği atayalım.
        writer.Close(); // Yazıcıyı kapatmayı unutmayalım.
    }
}

Bir dosya açalım ve dosyayı kaydedelim. Eğer dosya yoksa direk de kaydedebiliriz

Resim 2

Dosyayı kaydetmeye çalışalım. Masaüstüne kaydedelim,

Resim 3

Şimdi Masaüstüne bakalım,

Resim 4

Masaüstüne dosya kaydedilmiş, Dosyanın içine bakalım,

Resim 5

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

23 Mar 2009

Expression Blend 3 Preview ile Import İşlemleri

Expression 3 Preview ile photoshop ve illustrator dosyalarından dosya importunun nasıl yapıldığına bakacağız.

Silverligt 3 betanın çıkmasyıla birlikte Expression Blend de yenilendi ve Expression Blend 3 Preview sürümü ile karşımıza çıktı. Expression Blend'in yeni sürümünde bir çok yeni özellik bizi bekliyor. Bunlardan biri de Photoshop ve Illustrator dosyalarını Expression Blend'e aktarılabilmesidir. Yani photoshop da hazırladığınız bir PSD dosyayı kaydettikten sonra tüm katmanlarıyla birlikte Expression Blend'e import edebiliyoruz.

Bu işlemin nasıl yapıldığına bakacak olursak; İlk olarak Photoshop'u açalım ve katmanlar oluşturarak kaydedelim.

Şimdi Expression Blend 3 ile yeni bir proje oluşturalım ve File menüsünden Import Adobe Photoshop'a tıklayalım.

Photoshop dosyasında (psd) oluşturduğumuz katmanlar karşımıza geldi. Buradan hangi katmanları import etmek istiyorsak seçiyoruz. "Preserve pixel dimensions on import" seçeneğini seçersek katmanların boyutları korunur. Eğer istersek "Merge Layer" ile Katmanları birleştirebiliyoruz.

Photoshopda oluşturduğumuz bir dosyayı katmanlarıyla birlikte Expression Blend'e aldık

Oluşan XAML koduna bakalım,

[XAML]

<UserControlxmlns:dc="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm" x:Class="SilverlightHtmlRender.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Width="350"Height="180"xmlns:template="clr- namespace:SilverlightHtmlRender">

    <Gridx:Name="LayoutRoot"Background="White">
        <Canvasx:Name="photoshop"Height="180"Width="350"Clip="M0,0L350,0 350,180 0,180z">
            <Imagex:Name="Layer_1"Height="200"Width="350"Canvas.Left="0"Canvas.Top="-10"Source="photoshop_Images/Layer 1.png"/>
            <Imagex:Name="Layer_2"Height="166"Width="150"Canvas.Left="6"Canvas.Top="6"Source="photoshop_Images/Layer 2.png"/>
            <TextBlockx:Name="SILVERLIGHt_Beta_3_IMport_PHOT"Width="152"Canvas.Left="168"Canvas.Top="17"FontFamily="Tahoma"FontSize="14"FontWeight="Bold"Foreground="#FFFF0101"Text="SILVERLIGHT BETA 3
IMPORT PHOTOSHOP"TextAlignment="Left"TextWrapping="Wrap"/>
            <Imagex:Name="Layer_3"Height="86"Width="153"Canvas.Left="170"Canvas.Top="64"Source="photoshop_Images/Layer 3.png"/>
        </Canvas>
    </Grid>

</UserControl>

22 Mar 2009

Silverlight 3 Beta – BasedOn Style Kullanımı

Merhaba arkadaşlar, bu makalemizde Silverlight 3 Beta ile birlikte gelen BasedOn Styles özelliğini inceleyeceğiz.

Silverlight 3 Beta ile birlikte gelen yeniliklerden biri de BasedOn Styles özelliğidir. BasedOn Style özelliği ile aynı türde kontrollerin benzer özellikleri taşıdığı durumlar da, ortak bir sitil oluşturulup, bu sitilin kontrollere uygulanabilmesini sağlar. Buraya kadar her şey normal aslında ve fark şuradan geliyor. Örneğin elimiz de iki tane Button var. Her iki butonunda FontSize özelliği 14px, arka plan renkleri farklı. Burada şunu yapabiliyoruz. Ortak özellikler için bir style(BasedOn Style), oluşturup, ayırt edici özellikler için her iki kontrole de ayrı ayrı style oluşturuyoruz. Oluşturduğumuz BasedOn style’ı her iki kontrol için oluşturduğumuz style’lara BasedOn özelliğini kullanarak uyguluyoruz. Böylece BasedOn Style'daki bütün özellikler butonlar için oluşturduğumuz sitiller tarafından devralınacak.

Resim 1

Silverlight projesi oluşturalın ve konuyu daha detaylı olarak inceleyelim.

Projemize 3 button ekleyelim ve butonlar için style'lar oluşturalım. Button'ların ortak özelliği olduğu için de ortak özellikleri uygulayacak bir style oluşturalım.

[XAML]

Uygulamayı çalıştıralım ve sonucu görelim.

Resim 2

Button için oluşturduğumuz based style’ı, hatta button’lar için oluşturduğumuz style’ları diğer style’lara uygulayabiliriz. Uygulamamıza bir TextBox ekleyelim ve onun için de bir style yazalım.

[XAML]

<Style x:Key="TextBoxStyle" TargetType="TextBox" BasedOn="{StaticResource Button2Style}">
<Setter Property="TextAlignment" Value="Center"></Setter>
<Setter Property="FontStyle" Value="Italic"></Setter>
<Setter Property="FontWeight" Value="Bold"></Setter>
</Style>

<Button Style="{StaticResourceBasedStyle}"Content="Based Button"></Button>
<Button Style="{StaticResourceButton1Style}"Content="Button 1"></Button>
<Button Style="{StaticResourceButton2Style}"Content="Button 2"></Button>
<TextBox Style="{StaticResource TextBoxStyle}" Text="TextBox"></TextBox>

Projemizi tekrar çalıştıralım,

Resim 3

TextBox için oluşturduğumuz style’daki özellikler TextBox’a uygulanmış. Button2Style’nı BasedOn style yaptığımız için onun özellikler de uygulanmış. TextBox için oluşturduğumuz style’da TargetType özelliğini TextBox yaptığımız için artık bu style’ı sadece TextBox kontrolüne ve TextBox için oluşturacağımız diğer style’lara uygulayabiliriz.

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