Blog

  • 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]
<UserControl x:Class="SL3BetaSaveFileDialogKontrolu.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300">
<Canvas x:Name="LayoutRoot" Background="White">
    <Button x:Name="btnAc" Content="Aç" Width="100" Height="30" Canvas.Top="10" Canvas.Left="10"></Button>
    <Button x:Name="btnKaydet" Content="Kaydet" Width="100" Height="30" Canvas.Left="120" Canvas.Top="10"></Button>
    <TextBox x:Name="txtIcerik" Text="İçerik" Width="380" Height="240" Canvas.Left="10" Canvas.Top="50"></TextBox>
</Canvas>
</UserControl>

İ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&#xa;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>


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

  • 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]
<UserControl xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" x:Class="SL3BetaBasedOnStyles.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  Width="400"   Height="300">
<Grid Background="White">
<Grid.Resources>

<!—
Ortak özellikler için Base Style, Bu style’ı uygulayan bütün style’lar bu style’ın tüm özelliklerini devralacak. TargetType özelliği ile bu sitilin hangi kontrole uygulanacağını belirtiyoruz.
-->
<Style x:Key="BasedStyle" TargetType="Control">
<!-- Setter ile bu sitili uygulayacak kontrol için özellik(property) ve o özelliğe atanacak değeri(Value) belirtiyoruz.-->
<Setter Property="FontSize" Value="14"></Setter>
<Setter Property="Width" Value="200"></Setter>
<Setter Property="Margin" Value="5"></Setter>
</Style>

<!--
1. Button için Style, BasedOn özelliği ile belirtilen style’ın tüm özellikleri devralınır. BasedOn style daki tüm özellikleri burada uygulamışız gibi uygulanır
-->
<Style x:Key="Button1Style" TargetType="Control" BasedOn="{StaticResource BasedStyle}">
<Setter Property="Background" Value="Blue"></Setter>
<Setter Property="Foreground" Value="Red"></Setter>
</Style>

<!-- 2. Button için Style -->
<Style x:Key="Button2Style" TargetType="Control"BasedOn="{StaticResource BasedStyle}">
<Setter Property="Background" Value="Red"></Setter>
<Setter Property="Foreground" Value="Navy"></Setter>
</Style>
</Grid.Resources>
<StackPanel>
<!— BasedStyle uygulanan button -->
<Button Style="{StaticResource BasedStyle}" Content="Based Button"></Button>
<!— Button1Style’i uygulanan button -->
<Button  Style="{StaticResource Button1Style}" Content="Button 1"></Button>
<!— Button2Style’i uygulanan button -->
<Button Style="{StaticResource Button2Style}" Content="Button 2"></Button>
</StackPanel>
</Grid>
</UserControl>

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]
<!--
TextBox için Style oluşturduk ve Button2 için oluşturduğumuz Button2Style’ini uyguladık. TargetType olarak TextBox değerini atadık. Bu style artık sadece ve sadece TextBox kontrolüne uygulanabilecek. -->
<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

  • 21 Mar 2009

Silverlight 3 Beta – Silverlight Uygulamalarının Browser Dışına Alınması
Merhaba arkadaşlar, bu makalemizde Silverlight 3 Beta ile birlikte gelen bir diğer yenilik olan Silverlight uygulamalarının browser dışına alınmasına(out of browser) bakacağız.

Silverlight 3 Beta ile çok güzel özelliklerin geldiğini söylemiştik. Fark yaratacak bir yenilikte Browser da çalışan Silverlight uygulamalarının offline ortama alınabilmesi. Evet yanlış duymadınız browser üzerinde çalışan bir Silverlight uygulamasının Masaüstüne ya da Start Menu’ye alıp browser ile hiçbir bağlantısı olmadan çalıştırabiliyoruz.

Bu özelliği Silverlight uygulamamıza kazandırmak için yapmamız gereken şey çok basit. Silverlight uygulamasının bulunduğu projesinin Properties klasörü içinde yer alan AppManifest.xml dosyasını düzenlememiz yeterli olacaktır.

[XML]
<Deployment xmlns="http://schemas.microsoft.com/client/2007/deployment"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Deployment.Parts />
<Deployment.ApplicationIdentity>
<ApplicationIdentity ShortName="KisayolAdi" Title="Silverlight uygulamasının Form Başlığı">
<ApplicationIdentity.Blurb>
Uygulama İle ilgili açıklama
</ApplicationIdentity.Blurb>

<!—Uygulamada göstereceğimiz iconları yazıyoruz.-->
<ApplicationIdentity.Icons>
<Icon Size="16x16">1.png</Icon>
<Icon Size="32x32">2.png</Icon>
<Icon Size="64x64">3.png</Icon>
<Icon Size="128x128">4.png</Icon>
</ApplicationIdentity.Icons>

</ApplicationIdentity>
</Deployment.ApplicationIdentity>
</Deployment>

 

Silverlight uygulaması üzerinde sağ tıklayarak “Intall KisayolAdi onto this computer” seçeneğini tıklayalım. Eğer bu işlemi kod ile yaptırmak istiyorsak ilgili yere App.Current.Detach(); yazmamız gerekiyor.



Start Menuyü seçelim ve Start Menüyü açalım.



Uygulamamız start menüye eklenmiş durumda. Şimdi Silverlight uygulamamızı çalıştıralım.



Browser’dan bağımsız çalışan Silverlight uygulamamız hazır !

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

  • 20 Mar 2009

Silverlight 3 Beta – Kontrollerin Birbirine Bağlanması
Merhaba arkadaşlar, bu makalemizde Silverlight 3 Beta ile birlikte gelen Silverlight UIElementlerin birbirine nasıl bağlandığını (UI Element to Element Binding) inceliyor olacağız.

Silverlight 3 beta ile birlikte kontrolleri ve özelliklerini birbirine bağlayabiliyoruz. WPF içerisinde bu özellik olmasına rağmen Silverlight için yepyeni bir özelliktir. Bu özellik ile birlikte eventler arasında dolaşıp kod yazmadan kontrolleri ve özelliklerini birbirine bağlayabileceğiz.

Örneğin, ComoBox’dan seçim yapıldığında seçilen değeri TextBlock kontrolünün Text özelliğine bağlayabiliriz. Geriye gidip daha önce bu işi nasıl yaptığımızı hatırlayalım.

Yeni bir Silverlight projesi oluşturalım. Formumuza bir ComboBox ve bir tane de TextBlock kontrolü ekleyelim.

[XAML]

<UserControl x:Class="Silverlight3ElementToElement.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Canvas x:Name="LayoutRoot"Background="White" >
<TextBlock x:Name="tbTakim" Width="150" Canvas.Left="15" Canvas.Top="10"></TextBlock>
<ComboBox x:Name="cmbTakimlar" Width="150" Canvas.Top="30" Canvas.Left="10">
</ComboBox>
</Canvas>
</UserControl>

ComboBox’dan bir seçim yaptığımızda çalışan SelectionChanged isimli bir event var. Bu event de ComboBox’dan seçtiğimiz değeri TextBlock’un Text özelliğine atayabiliriz. İlk olarak UserControl için Loaded Event Listener’ini oluşturup ComboBox’a eleman ekleyelim. Daha sonra da atama işlemini yapacağomız SelectionChanged event listenerini oluşturalım.

[C#]

publicMainPage()
{
InitializeComponent();
// Event Listenerları oluşturalım.
this.Loaded += new RoutedEventHandler(MainPage_Loaded);
cmbTakimlar.SelectionChanged += new SelectionChangedEventHandler(cmbTakimlar_SelectionChanged);
}

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
// Listbox’a eleman ekliyelim
cmbTakimlar.Items.Add("Fenerbahçe");
cmbTakimlar.Items.Add("Galatasaray");
cmbTakimlar.Items.Add("Beşiktaş");
cmbTakimlar.Items.Add("Trabzon Spor");
}

void cmbTakimlar_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
// Atama işlemini yapalım.
tbTakim.Text = cmbTakimlar.SelectedItem.ToString();
}

Eskiden bu şekilde kod yazarak kontrolleri ve özelliklerini birbirine bağlayabiliyorduk. Silverlight 3 Beta ile birlikte artık kontrolleri birbirine bağlamak çok daha kolay.

[Kullanımı]

<UIElement Text="{Binding BağlanacakÖzellik, ElementName=BağlanacakKontrol}"></UIElement >

Şimdi yukarıda event listener ile yaptığımız bağlama işlemini Silverlight 3 Beta ile gelen yeni özellik ile yapalım.

[XAML]

<UserControlx:Class="Silverlight3ElementToElement.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300">
<Canvas x:Name="LayoutRoot" Background="White" >
// TextBlock kontrolünün Text özelliği ile ComoBox kontrolünün SelectedItem özelliğini birbirine bağladık. ComboBox’ın SelectedItem özelliği ne ise TextBlock kontrolünün Text özelliği de o olacak.
<TextBlock x:Name="tbTakim" Width="150" Canvas.Left="15" Canvas.Top="10" Text="{Binding SelectedItem,ElementName=cmbTakimlar}"></TextBlock>
<ComboBox x:Name="cmbTakimlar" Width="150"Canvas.Top="30" Canvas.Left="10">
</ComboBox>
</Canvas>
</UserControl>

Resim 1

Hiç kod yazmadan kontrolleri birbirine bağladık :) 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