Püf Noktası #58 - Silverlight Blend İçerisinde Açma

Cumartesi, 27 Şubat 2010 14:41 by ikivanc
Visual Studio içerisinde silverlight projesini açtıktan sonra Blend içerisinde açmanın kolay bir yolu mevcut. İlgili sayfaya sağ tıklayarak "Open in Expression Blend" diyerek Blend içerisinde otomatik olarak açabiliriz.


Bu şekilde kod geliştirme tarafından, tasarım tarafına geçişimiz çok daha hızlı olacaktır.

Kolay gelsin.

Püf Noktası #57 - Silverlight UserControl Düzenleme

Cuma, 26 Şubat 2010 15:52 by ikivanc
Silverlight ve WPF Projelerinde bir önceki püf noktalarındaki gibi oluşturduğumuz usercontrol'leri düzenlemek için "Objects and Timeline"dan gerekli usercontrol yapısını seçip "Edit Control" diyerek düzenleyebiliriz.


Bu şekilde sayfamızda birden fazla usercontrol tanımlıysa ve özel birer isim verdiysek, onların bulunduğu usercontrol'ü bulmak yerine, Edit Control sayesinde ilgili düzenleme controlüne kısayoldan ulaşabiliriz.

Kolay gelsin.

Püf Noktası #55 - Silverlight UserControl Oluşturma

Çarşamba, 24 Şubat 2010 10:34 by ikivanc
Blend içerisinde Silverlight projelerinde birden fazla nesneleri bir arada gruplayarak yeni bir UserControl içerisinde kullanabiliriz. Özellikle bu usercontrol oluşturma işlemi karmaşık sayfalarda ve sürekli tekrar eden yapıları bulunan sayfalarda işimizi oldukça kolaylaştıracaktır.

 

Bunun için ayrı bir kontrol oluşturacağımız nesneleri seçip sağ tıkladıktan sonra "Make Into UserControl" diyerek bunları yeni bir UserControl içersinde tanımlayabiliriz.

Karışımıza bu oluşturalan UserControl'un isminin ne olacağı sorulacak buna istediğimiz ismi vererek UserControl oluşturma işlemini tamamlayabiliriz.


Görüldüğü gibi oluşturduğumuz bu usercontrol içerisinde seçmiş olduğumuz nesneler bulunmakta.


Bu UserControl'ü oluşturduğumuz ama sayfamızda ise usercontrol'un nasıl kullanıldığını görebiliriz.



Bu şekilde tanımalamızdan sonra ana sayfamızda bulunan nesnelerimizin xaml kodu aşağıdaki gibiyken

<Button Margin="0,23,0,27" Content="Button"/>
<TextBlock Text="TextBlock" TextWrapping="Wrap"/>
<Slider Height="23" VerticalAlignment="Bottom"/>

Bunlar Oluşturduğumuz UserControl içersine taşındı ve anasayfamızdaki xaml kodu 

<local:UserControl1 Height="87" VerticalAlignment="Top"/>

şeklinde tanımlanmış oldu.

Bu şekilde ana sayfamızdaki xaml ve obje karışıklığı en aza inmiş oldu, farklı sayfalarda aynı yapıyı kullanacağımız zaman bu UserController gerçekten işimizi kolaylaştırmaktadır.

Kolay gelsin

Püf Noktası #54 - Silverlight Button Click Tanımlama

Salı, 23 Şubat 2010 14:16 by ikivanc
Blend içerisinde Silverlight ve WPF projelerinde button altında event oluşturma visual studio içerisindeki winforms uygulamaları gibi butonun üzerine çift tıklayarak yapılmıyor.  Bunun için buton'u seçip bir önceki püf noktasında anlattığımız gibi Click event'ına çift tıklayarak oluşturabiliriz. 

 
XAML Tarafında bu event "Click" içersinde tanımlanmakta

<Button Height="41" HorizontalAlignment="Right" Margin="0,177,55,0"
        VerticalAlignment="Top" Width="129" Content="Button"
        Click="btn_visibility_Click"/>


C# tarafında da bu event aşağıdaki gibi otomatik olarak tanımlanacaktır.

private void btn_visibility_Click(object sender, System.Windows.RoutedEventArgs e)
{
    btn_visibility.Content = "Tıklandı";
}

Bunu tanımladıktan sonra aşağıdaki gibi olacaktır.


Bu şekilde button altına istediğimiz C#kodunu yazabiliriz.

Kolay gelsin.

Püf Noktası #49 - Silverlight IsEnable Özelliği

Perşembe, 18 Şubat 2010 09:02 by ikivanc
Silverlight ve WPF projelerinde  bileşenlerinin erişilebilirliğini düzenlemek için IsEnable özelliğini kullanırız
  

IsEnable özelliği kaldırıldığında 


Enable ve disable olması durumları yukarıda mevcut, ve IsEnable'ı false olduğu zaman eventları da tetiklenmeyecektir.
  
Bu durumun XAML Tarafında 
  
<Button Height="41" x:Name="btn_visibility" Margin="0,65,32,0"
                HorizontalAlignment="Right" VerticalAlignment="Top"
                Width="129" Content="Button" IsEnabled="False"/> 

C#
tarafında ise
  
btn_visibility.IsEnabled = true;

Özellikleri düzenlenerek, bileşenlerin erişimleri aktif veya pasif hale getirilebilir.  

Kolay gelsin

Püf Noktası #48 - Silverlight Advanced Properties

Salı, 16 Şubat 2010 15:58 by ikivanc
Expression Blend içerisinde Properties penceresinde daha fazla özellik için, özelliklerin altkısımlarında bulunan, açılan pencere ile daha fazla özelliğe erişebiliriz.
    
 
Bu oka tıkladıktan sonra pek çok özellik ekrana gelecektir.


Bu şekilde ilgili bileşenin pek çok özelliğine erişip, uygulamalarımızı daha foksiyonel şekilde geliştirebiliriz.

Kolay gelsin.

Püf Noktası #43 - Silverlight Listboxta Son Item'ı Seçme

Perşembe, 11 Şubat 2010 08:42 by ikivanc
Silverlight ve WPF projelerinde Listbox içerisindeki item'ların sonuncusunu seçmek için SelectedIndex'i kullanabiliriz.

Bunun için C# tarafındaki kodumuz aşağıdaki gibi olacaktır.

listbox_multiple.SelectedIndex = listbox_multiple.Items.Count-1;

Böylelikle tüm item'ların sayısından 1 çıkararak, en son elemanın indisini listbox'ın selectedindex'i olarak atamış olduk. 

Kolay gelsin.

Püf Noktası #30 - Silverlight XML'i Yeniden Yükleme

Cuma, 29 Ocak 2010 16:18 by ikivanc
Bir önceki püf noktamızda yüklediğimiz XML dosyada eğer değişiklik yaptıysak bunu program çalışırken göremiyoruz. Çünkü Blend içerisinden otomatik olarak tanımladığımı XML DataSource project içerisine SampleData isminde bir klasör içinde xaml olarak saklanmaktadır.


Program çalışırken xml dosyasında bir değişiklik yaparsak veya tasarım anında değişik yaparsak bunlar projemize yansımaz. Hatta xml dosyamızı silsek de sample datamızdaki verilerle uygulamamız çalışacaktır.

Bu güncellemeyi yapmak için SampleDataSource üzerinden "Reimport Sample Data from XML" diyerek güncel xml dosyası ile verilerimizi güncelleyebiliriz.


Kolay gelsin.

Püf Noktası #29 - Silverlight XML Veri Import Etme

Cuma, 29 Ocak 2010 12:31 by ikivanc
Silverlight ve WPF projelerinde XML verilerini Blend içerisinde otomatik olarak yüklemenin kolay bir yolu mevcut.

Bunun için "Import Sample Data from XML" sekmesine tıklayıp ardından


DataSource'un adını ve XML dosyasının yolunu vererek kolaylıkla projemize dahil edebiliriz.


Örnek Xml verisi olarak photo.xml dosyasını kullandım.

<?xml version="1.0" encoding="utf-8" ?>
<fotograf>
  <foto>
    <url>1.jpg</url>
    <baslik>Ağlatmadan</baslik>
    <aciklama>Ağlatmadan'ın Açıklaması</aciklama>
  </foto>
  <foto>
    <url>2.jpg</url>
    <baslik>Anladım</baslik>
    <aciklama>Anladım'ın Açıklaması</aciklama>
  </foto>
  <foto>
    <url>3.jpg</url>
    <baslik>O'nu Hatırladıkça</baslik>
    <aciklama>O'nu Hatırladıkça'nın Açıklaması</aciklama>
  </foto>
  <foto>
    <url>4.jpg</url>
    <baslik>Sevemezdim Bu Şehri</baslik>
    <aciklama>Sevemezdim Bu Şehri'nin Açıklaması</aciklama>
  </foto>
</fotograf>

projeye bu photo.xml dosyasını ve fotoğrafları ekledikten sonra projemizde kullanabiliriz.


Görüldüğü gibi SampleDataSource1'in içerisine geldi ve hepsi string olarak görünüyor. Şimdi de bir önceki püf noktasında yaptığımız gibi sürükleyip bırakarak projeye devam edebilir.

Fakat hepsi string olduğu için fotoğraflarımız listboxta görünmeyecek ve onun yerine url adresleri listbox'ta görünecek.

Bunu da Image bileşenlerin Source özelliğine aktardığımız zaman listboxta fotoğrafları görebiliriz.

Bunu için Listboxta bu görünümleri sağlayan xaml kodu içerisinden DataTemplate özellikleri değiştirmeliyiz. Kodu aşağıdaki gibi değiştirdiğimizde
 
<DataTemplate x:Key="fotoTemplate">
  <StackPanel>
    <TextBlock Text="{Binding baslik}"/>
    <Image Source="{Binding url}" Height="64" Width="120"/>
    <TextBlock Text="{Binding aciklama}"/>
    <TextBlock Text=""/>
  </StackPanel>
</DataTemplate>

Ekran görüntümüz aşağıdaki gibi olacaktır.

Bu kolay özellik sayesinde XML verilerimizi C# tarafında kod yazmadan geliştirebiliriz.

Kolay gelsin.

Püf Noktası #28 - Silverlight Örnek Veri Tanımlama

Perşembe, 28 Ocak 2010 14:35 by ikivanc
Silverlight ve WPF projelerinde aklınızdaki tasarım fikirlerini canlandırıp uygulamak ve bileşenlerin verilerle nasıl görüneceğine bakmak için örnek veri setleri mevcuttur.

Bunun için data kısmına gelerek, add sample datasource simgesine tıklayıp "Define New Sample Data" diyerek, hayali bir örnek veritabanı oluşturuyoruz.


Gelen ekrandan datasource ismi belirleyip tamamı tıkladıktan sonra projemizde SampleDataSource isminde bir örnek datasource'umuz oluştu. Buradaki collection'ın altında istediğiniz veri tiplerini tanımlayabilirsiniz. String, Image, Boolean, Number türlerinden çeşitli veriler türetebilirsiniz. Örneğin String türü için de farklı formatlar seçebilirsiniz; Email, website, name, phonenumber ... gibi


İstersek Listbox veya başka veri gösterme component'larına rahatlıkla bu data source'u aktarabiliriz.

Çok daha kolay bi şekilde bu verileri ekrana yansıtmak istersek, Collection'ı mouse ile tasarım sayfasına sürükleyip bırakarak otomatik olarak listbox oluşturabiliriz. Veya herhangi bir property'i sürükleyip bırakırsak, onunla alakalı listboxları ekrana oluşturabiliriz.

Bu işlemi yaptıktan sonra, collection'ın içerdiği Image, Date ve Website'ın listboxta gösterimi aşağıdaki gibi olacaktır.

Blend'in bu özelliği sayesinde, bu örnek datasource'u kullanıp bindinglerle çeşitli bileşenlerimiz üzerinde verileri yansıtabilir ve test edebiliriz. Özellike listbox'ın datatemplate'ini modifiye edeceksek bu datasource işimizi çok kolaylaştırmaktadır.

Kolay gelsin.