Expression Blend etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Expression Blend etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

Salı, Haziran 08, 2010

Expression Studio 4

Expression Studio 4 sürümü ile bizlerin kullanımına açıldı. Blend, Web, Encoder, Design, Media, SkechFlow gibi başarılı ürünleri bünyesinden barındıran geliştirme araçları topluluğu Ultimate ve Proffesional sürümleri ile satışa çıkarılmıştır. İndirmek isteyen kullanıcılar bu adresten yararlanabilirler..

Salı, Ağustos 04, 2009

WPF - UserControllerin Toolbox 'a Eklenmesi

Windows Presentation Foundation ile çalışırken ortak bir tasarım şablonunu sık sık kullanmak gerekebilir. Bu durumda arka planda yer alan yüzlerce satır kodu yeni formaların içerisinde kullanmak yerine User Control oluşturarak çok daha hızlı bir şekilde kullanabilmemiz mümkün olacaktır. User Control kullanmanın en büyük avantajı benzer işlemleri yapacak modülleri her kullanımda tasarlamak ve yeniden arka plan kodlarını yazarken harcanacak zaman yerine hazırlanacak olan bir User Control ile benzer işleri yapacak yapıları tek seferde yapabileceğiz. Peki hazırlamış olduğumuz User Controllere nereden erişebiliriz. Bu yazımızda hazırlamış olduğumuz User Controlleri Visual Studio ortamında toolbox 'a nasıl ekleyeceğimizi inceliyor olacağız.

İlk olarak yapılması gereken bir User Control oluşturmak olacaktır. Bu işlem için Visual Studio 2008, Visual Studio 2010, Expression Blend 2 ya da Expression Blend 3 üzerinde geliştirebilmeniz mümkündür. Biz bu sefer örneğimizi Visual Studio 2010 Beta1 üzerinde geliştireceğiz. (Diğer ürünler üzerinde de aynı işlemleri uygulamanız durumunda herhangi bir farklılık ile karşılaşmayacaksınız.)

mak58_1_1

User Control ü hazırlayacağımız projeyi oluşturduk. Bir de bu User Control ü kullanacağımız WPF uygulaması oluştuyoruz. İşlemler sonrasında Solution Explorer ekranında aşağıdaki dosyalar oluşmuştur.

mak58_1_2

UserControl projesinin içerisinde yer alan UserControl1.xaml dosyanın içerisine aşağıda yer alan kod bloğunu ekliyoruz.

UserControl1.xaml
<UserControl x:Class="WpfMyControl.UserControl1"
                    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                    mc:Ignorable="d"
                    d:DesignHeight="300" d:DesignWidth="300">
    <Canvas>
        <Path Fill="Blue" Margin="15,15,15,15">
            <Path.Data>
                <EllipseGeometry x:Name="GeometrikEllipsim" Center="0,0" RadiusX="15" RadiusY="15"/>
            </Path.Data>
            <Path.Triggers>
                <EventTrigger RoutedEvent="Path.Loaded">
                    <BeginStoryboard Name="BaslaAnimasyon">
                        <Storyboard>
                            <PointAnimation Storyboard.TargetProperty ="Center" Storyboard.TargetName="GeometrikEllipsim"
                                                    Duration="0:0:3" From="0,0" To="156,267" RepeatBehavior="Forever"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Path.Triggers>
        </Path>
    </Canvas>
</UserControl>

User Control 'ü oluşturduk. Şimdi ise oluşturulmuş olan User Control 'e ikon ekleyeceğiz. Sebebi ise Toolbox 'a eklendiğinde kontrolün yanında bizim istediğimiz ufak bir ikonun gözükmesidir.

İlk olarak yapılması gereken UserControl1.xaml.cs kod dosyasını Using System.Drawing isim alanını eklemek olacaktır. Bu isim alanını projemize ekleyeceğimiz ikonu göstermek için kullanacağız. Ayrıca ekleyecek olduğumuz resmin sürekli projemizde entegre olabilmesi için Resource dosyasına ekliyoruz. Peki Resource lara nereden ulaşabiliriz. Visual Studio 2010 ekranında yer alan menülerden Project-> ProjectProperties ->Resources adımlarını izleyerek ulaşılabilmesi mümkündür.

mak58_1_3

İkon oluşturduktan ya da var olan bir ikonu ekledikten sonra bu resme ilişkin özelliklerden resource dosyasına gömülü olarak çalışmasını belirten seçeneği seçiyoruz.

mak58_1_4

Oluşturma işlemi gerçekleştirilen UserControl 'ün cs kod dosyasına resource içerisine eklemiş olduğumuz resmi görebilmesi için aşağıdaki gibi bir düzenleme yapıyoruz

UserControl1.xaml.cs
using System.Windows.Controls;
using System.Drawing;

namespace WpfMyControl
{
    /// <summary>
    /// Interaction logic for UserControl1.xaml
    /// </summary>
    ///
    [ToolboxBitmap(typeof(UserControl1))]
    public partial class UserControl1 : UserControl
    {
        public UserControl1()
        {
            InitializeComponent();
        }
    }
}

Artık UserControl oluşturma işlemini tamamlamış bulunuyoruz. Uygulamamızı built ettikten sonra WPF projelerinde yer alan Toolbox 'larda nasıl kullanılacağını inceleyelim.

Genel .Net bilgilerimizden ötürü eğer bir sınıf, control v.b. projeler derlendiği zaman arka planda kullanılabilir bir *.dll dosyası oluşturulmaktadır. Bizlerde WPF uygulaması açıkken toolbox üzerinde sağ tıklama yaptıktan sonra ChoosItems seçeneğine tıklayarak oluşturulan dll 'i ekliyoruz ve çalışabilir duruma geliyoruz.

mak58_1_5

Oluşturulan UserControl 'ün dll 'ini buluyoruz.

mak58_1_6

Eklediğinizde toolbox içerisinde kontrol aşağıdaki gibi gözükecektir.

mak58_1_7

Bu işlem sonucunda kendi User Control ümüzü olşuturmuş ve WPF uygulamalarında kullanılmak üzere toolbox ın içerisine eklemiş bulunuyoruz. Tekrar hatırlatmak gerekirse özellikle iş uygulamalarında benzer işlemleri tekrar tekrar yaparak çalışmak istenmeyen durumlar arasında yer almaktır. User Control ler yardımı ile çok fazla kullanılacak bir işlemi sadece bir kez hazırladıktan sonra onu bileşen olarak sürekli kullanabilmemize olanak vardır. Bu işlem bizim süreçlerimizi oldukça oldukça hızlandıracaktır.

Umarım yararlı olabilmiştir.

Turhal Temizer

info@turhaltemizer.com

Cumartesi, Temmuz 11, 2009

Silverlight 3.0 Final& Expression Studio 3.0 RC sürüm yayınlandı.

Web uygulamalarında RIA uygulamalarına en kapsamlı şekilde kullanılmasına olanak tanıyan Microsoft Silverlight teknolojisinin 3.0 sürümü artık tam sürümü ile hazırdır.

HD Medya uygulamaları, tarayıcı dışında çalışabilen uygulamalar hazırlayabilmemize artık olanak tanınabilecektir. Ayrıca Expression Studio ailesi Rc sürümüne Silverlight 3.0 sürümü ise final sürüm durumuna getirilmiştir.

www.silverlight.net/getStarted

Çarşamba, Haziran 17, 2009

Silverlight 2.0 – Çalışma Anında Otomatik Kontrol Eklenmesi

Silverlight web forma eklemiş olduğumuz button kontrolü yardımı ile sınırsız button kontrolü eklenmesini açıklayan XAML ve C# kodunu vereceğim. Bu örneği kullanarak diğer kontrolleri de ekleyebilmeniz mümkündür.

XAML
<UserControl x:Class="Controls.Page"
    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="myCanvas">
        <Button x:Name="btnIsMy" Content="Oylesine duruyor..." Canvas.Left="10" Canvas.Top="10"/>
        <Button x:Name="btnAnother" Content="Another" Canvas.Left="10" Canvas.Top="30"/>
        <CheckBox x:Name="rushOrder" Content="Rush" Canvas.Left="10" Canvas.Top="50"/>
    </Canvas>
</UserControl>

C#
using System.Windows;
using System.Windows.Controls;

namespace Controls
{
    public partial class Page
    {
        public Page()
        {
            InitializeComponent();
            btnAnother.Click += BtnAnotherClick;
        }

        private double _newButtonPosition = 100.0;

        void BtnAnotherClick(object sender, RoutedEventArgs e)
        {
            var b = new Button {Content = "Ben yaşıyorum"};
            b.SetValue(Canvas.LeftProperty, 10.0);
            b.SetValue(Canvas.TopProperty, _newButtonPosition);
            _newButtonPosition += 30.0;
            b.Width = 100;
            b.Height = 20;
            b.IsEnabled = true;
            b.Click += b_Click;
            myCanvas.Children.Add(b);
        }

        static void b_Click(object sender, RoutedEventArgs e)
        {
            var btn = sender as Button;
            if (btn == null) return;
            btn.Content = "Basma...";
            btn.IsEnabled = false;
        }
    }
}

Umarım yararlı olabillr. İyi çalışmalar…

Cumartesi, Temmuz 19, 2008

Silverlight 2.0 - Kontrollerin Özelleştirilmesi, VSM ve Yenilikleri

Microsoft, Silverlight ‘ı gün geçtikçe benzersiz bir yapı haline dönüştürüyor. Günler geçtikçe kontroller, aspx desteği derken Asp.Net ‘te pek alışık olmadığımız bir durum olan kontrollerin özelleştirmesi özelliği Beta2 sürümü ile eklenmiş olduğunu gözlemleyebiliyoruz. Peki, Silverlight bugüne gelene kadar ne tür gelişmeler gösterdi.

Alpha1 sürümünde JavaScript ve HTML ile interaktif web uygulamaları geliştirebiliyorduk.
Alpha2 sürümü ile yukarıdakilere ek olarak XAML ‘de eklendi.
Beta1 sürümünde WPF ‘te kullanılan kütüphane kısmen geçirilmeye başlandı.
Silverlight 1.0 sürümünde yukarıda bahsettiğimiz deneme işlemleri uygulanabilir düzeye getirildi.
Silverlight 1.1 sürümünde buton gibi temel kontroller Silverlight bünyesine eklendi.
Silverlight 2.0 Beta1 ile web servis işlemlerinden veri bağlamaya kadar bir çok özellik eklendi fakat en çok dikkat çekeni kullanılabilir Silverlight kontrolü sayısı arttırıldı.
Silverlight 2.0 Beta2 sürümü ile ise Beta1 sürümünden eklenen bir çok özellik geliştirildi. Asya dilleri eklendi. En çok göze çarpan özelliği ise Expression Blend ürünü ile Silverlight kontrollerinin düzenlenebilmesi olmuştur.

Silverlight ‘ın günümüze kadar geçirmiş olduğu gelişim temel olarak bu şekildedir. Tabii saydığımız özelliklere ek olarak video streaming özelliği en popüler olanıdır. Videoların gösterilme süreleri o kadar iyileşti ki web üzerinden canlı yayınlar yapılabildi ve HD videoların fragmanları sorunsuz bir biçimde kullanıcılara izletilebildi.

Eski sürümlerde neler yapabildiğimiz ile ilgili ayrıntılı bilgilere ulaşmak isterseniz daha önceden yayınlanmış olan makaleleri okumanızı öneririz.

Silverlight 2 Beta2 ile uygulama geliştirebilmeniz için http://www.microsoft.com/downloads/results.aspx?pocId=&freetext=silverlight%202%20beta2&DisplayLang=en adresinden gerekli bileşenleri bilgisayarınıza indirdikten sonra kurarak kullanmaya başlayabilirsiniz. Ayrıca yazımızda kontrollerin özelleştirilmesi işlemleri Expression Blend 2.5 June Preview ile yapacağız. Bu programı kullanabilmeniz için gerekli link ise http://www.microsoft.com/downloads/results.aspx?pocId=&freetext=expression%20blend%202.5%20june%20preview&DisplayLang=en adresinden yararlanabilirsiniz. Gerekli programları edindiğimize göre artık yazımızın içeriğini incelemeye başlayabiliriz.

KULLANICI KONTROLLERİ
Silverlight ilk sürümlerinde WPF ‘e yetişmesi uzun yıllar alacağı konusunda söylentiler varken şu anda WPF ‘te bile olmayan kontrolleri bünyesinde barındırmaktadır. Özellikle DataGrid kontrolü WPF ‘te olmadığı halde Silverlight 2.0 Beta2 ‘de yerini almıştır.



Bu ve diğer kontrollere ek olarak TabPanel kontrolü de Beta2 sürümü ile bizlerin kullanımına sunulmuştur. Şu an itibari ile Silverlight2 Beta2 sürümünde 30 ‘ün üzerinde kontrol bulunmaktadır. Geliştiricileri tarafından yapılan açıklamada ise 2.0 sürümü tamamlandığı zaman 100 ‘ün üzerinde kontrolün bizlere sunulacağı belirtilmiştir.

Kontrollerin Özelleştirilmesi
WPF ve Silverlight ile son kullanıcılar için hazırlanmış olan kontroller Expression Blend yardımı ile özelleştirilebilmektedir. Özelleştirdiğimiz kontrolleri daha sonrasında geliştirmiş olduğumuz uygulamada XAML kod tarafına ekleyerek kullanılabilir düzeye getirilebilmesi mümkündür.

Şimdi Expression Blend yardımı ile kontrolleri nasıl özelleştirebileceğimize göz atalım. Bu işlemi yaparken ilk olarak slider kontrolünden yararlanacağız.

İlk olarak Expression Blend 2.5 June Preview ’den Silverlight 2 projesi oluşturuyoruz. Sonrasında ise uygulama ekranımıza bir tane slider kontrolü ekleyerek işlemlerimize başlıyoruz.



Slider kontrollerini ekledikten sonra şimdi düzenleme işlemini gözlemleyeceğiz. İlk olarak yapmamız gereken kontrolün üzerinde fare ile sağa tıkladıktan sonra çıkan menüden Edit Control Part ‘ı seçeceğiz. Sonrasında çıkan seçenekten Edit a Copy seçeneğine tıklayarak işlemimizi yapmaya devam edeceğiz.



Bu seçeneği seçtiğimizde karşımıza aşağıdaki gibi ekran gelecektir.



Karşımıza çıkan ekranda Name(Key) yazan bölüme istediğimiz ismi verdikten sonra tamam diyerek slider kontrolünü özelleştirebilmemiz mümkündür. Bu verdiğimiz isim app.xaml ‘in içerisinde tutulur ve daha sonradan yapacak olduğumuz işlemleri bu isim altında tutar ve kullanacağımız zaman arka planda bu name ‘i kullanacaktır.

Kontrolü özelleştirebilmemiz için sol tarafta yer alan menüde Template yazan bölümden yararlanacağız. Bu tasarı bölümü bizlere hazırlanan kontrolün hangi nesnelerin toplanması sonucunda oluşturulduğunu göstermektedir. Tasarı bölümünde yer alan ilk dörtgen bölümünde çizginin kalınlığı uzunluğu ve kaydırma butonunun yapısı ile ilgili özellikler tutulmaktadır. Diğerinden ise dikey özellikler yer almaktadır.



Temel olarak bir değişiklik yapmak gerekirse HorizontalThumb ‘ı seçerek uygulamamın çalışma ekranında kaydırma çubuğunun kalınlığını değiştiriyoruz. Sonucunda ise ekranımızda oluşan görüntü aşağıdaki gibi olur.



Gördüğünüz gibi oldukça kolay bir biçimde kontrolleri özelleştirebilmemiz mümkündür. Bu yaptığımız işlemleri uygulayarak diğer bütün kontrolleri de özelleştirebilmemiz mümkündür.

Visual State Manager (VSM) Yapısı
Silverlight ve WPF ‘te hazırlamış olduğumuz kontrollere standart kontrollerden farklı olması için özel işlemler uygulamak isteriz. Örneğin, fare ile kontrolün üzerinde gelindiğinde tıklandığında gibi işlemler sonucunda farklılıkların olmasını isteyebiliriz. Gerçekleştirebilmek için ise yapmamız gereken XAML kod tarafında oldukça fazla kod oluşturan animasyon işlemlerini kullanırız. Arka planda oluşturulan fazla satır kodlar ise kontrol kullanılacağı sırada çağırılacağı için web uygulamalarında yani Silverlight uygulamalarında yavaş çalışmasına sebep olabilir. Web uygulamalarında yaşanabilecek sorunları engellemek için farklı bir çözüm üretilmesi gerekiyordu ve bunun için Visual State Manager (VSM) hazırlanılmış ve biz geliştiricilere sunulmuştur.

VSM, standart olarak hazırlanmış olan kontrolleri özelleştirme işlemimiz ile birlikte fare ile ilgili standart özellikleri de yapılandırabilmemize olanak tanımaktadır. Bizlere kazandırdığı en büyük avantaj ise daha önceden hazırlanmış olan bir animasyon işleminin yeniden düzenlenebilmesi oldukça uğraştırırken VSM kullanarak hazırlanmış olanlar dinamik olarak düzenlenebilmesi mümkündür.

Şimdi VSM ‘i örnek üzerinden incelemeye çalışalım.

Expression Blend ile Silverlight 2 uygulaması açtıktan sonra çalışma ekranımıza bir adet buton sürükleyip bırakıyoruz.



Eklemiş olduğumuz butonun üzerine sağ tıklama yaparak karşımıza çıkan menüden Edit Control Part ‘ı seçiyoruz. Karşımıza çıkan menüden Edit a Copy ‘ı seçerek işlemimizi yapmaya devam ediyoruz.



Edit a Copy seçeneğini tıkladığımız zaman bize aşağıdaki gibi bir ekran çıkmaktadır.



Kontrollerin özelleştirilmesi konusunda da değindiğimiz gibi vermiş olduğumuz name app.xaml içerisinde tutulacak ve kontrol üzerinde yapacak olduğumuz işlemlerin kullanılması için gerekli olan name çağırılması işleminin yapılmasını sağlıyoruz.

Bu işlem sonrasında asıl konumuz olan VSM için gerekli olan state menüsü sol bölümde karşımıza gelmektedir.



State bölümünde Base seçili iken buton kontrolümüzün arka plan ve kenar renklerini değiştireceğiz. Bunun için Template bölümünde Background ve BackgroundGradient özelliklerini değiştireceğiz.



Yaptığımız değişiklik sonucunda butonumuz aşağıdaki gibi olmuştur.



Fare üzerinde gibi özellikleri değiştirmek istediğimizde ise State bölümünde MouseOver seçeneğine ait özelliği değiştirdiğinizde işlemimizi gerçekleştirmiş oluruz.



Temel olarak VSM tasarımcılar ile web geliştiriciler arasındaki uyumu arttıracak ve hazırlanan tasarımların tam anlamında kullanılabilmesine olanak tanıyacak bir özelliktir.

Textbox
Textbox kontrolünde ve genel olarak yazı yazılabilecek bütün kontroller için IME3 adı verilen Asya ve diğer farklı yazım türü olan karakterler eklenmiştir.



Animasyon ve Grafik Sistemi
Silverlight ile hazırlanmış olan animasyon uygulamaları web tarayıcılarda gösterildiğinde çalıştırılan bilgisayarın grafik sisteminde zorlamaya sebep olmaktaydı. Bunun sebebi ise Silverlight, WPF tabanlı olduğu için animasyon uygulamaları çalıştırırken grafik kartının sürücüsünü kullanmak istemektedir. Fakat bu bir web uygulaması için performans yavaşlatıcı bir durumdur. Grafik kartını zorlama oranı beta2 sürümü ile iyileştirilmiş. Tam sürümünde ise zorlama oranının en minimum düzeye getirileceği Silverlight geliştiricileri tarafından açıklanmıştır.

WPF ile uyumu
Silverlight ‘ın gelişimi WPF ‘e oranla daha hızlı olduğu için şu anda aralarında ki uyum azalmış giib gözüküyor. .Net Fw 3.5 Sp1 çıktıktan sonra ise Silverlight ‘ta yapılan değişikler WPF ile uyumlu hala getirilerek XAML kod tarafında yazılan uygulamaların iki platformda da belirli oranda çalışması sağlanacak.

Web Servis
Silverlight ‘ta daha önce SOAP ile web servisi kullanılması mümkündü. Fakat Beta2 sürümü ile WCF servislerinin kullanımı mümkün hal almıştır.

Veri (DATA)

Data Grid
Beta2 sürümünde eklenen bu kontrol de sayfanın boyutuna göre otomatik şekillendirilme, sütunlarda yer alan sonuçların sıralanabilmesi gibi özellikler mümkün kılınmıştır.

NOT: WPF ‘te şu an itibari ile DataGrid kontrolü bulunmamaktadır. .Net Framework 3.5 Sp1 ile ekleneceği düşünülmektedir.

Data Binding
Hataların, zengin içerikli yazıların bağlanabilmesi gibi özellikleri bünyesinde barındırmaktadır.

Silverlight ‘ın gelişimi

Silverlight gün geçtikçe yalnızca animasyon yapabildiğimiz ve video yayınlayabildiğimiz bir yapı olmaktan çıkarak son kullanıcılar için oldukça zevkli uygulamalar geliştirilebilecek, Asp.Net ‘te yapabileceğimiz bir çok işlemi yapabileceğimiz bir yapı olma yolunda ilerlemektedir. Silverlight 2.0 sürümü tamamlandığı zaman web uygulamalarında birçok yazılımcı Asp.Net yerine Silverlight ‘ı deneyecektir. Çünkü kullanıcılara sunduğu zevk ve kolaylık Asp.Net ‘e göre daha fazla olacaktır.

Sonuç olarak yazımızda nelere değindiğimizi hatırlamak gerekirse, Silverlight ‘ın bugüne kadar geçirdiği değişime değindikten sonra kontrollerin özelleştirilmesine, VSM ‘e , Silverlight 2.0 Beta2 ‘de genel özellikler yönünde ne tür değişiklikler yapıldığını ve son olarak da Silverlight ‘ın geleceğe dair gelişiminde ne tür gelişmeler yaşanabileceğine değinmeye çalıştık.

Umarım yararlı olmuştur.

Turhal TEMİZER

Kaynaklar
Silverlight.Net

Çarşamba, Mayıs 14, 2008

WPF - Styles

Web programlama ile ilgilenenler CSS ‘in ne kadar yararlı olduğunu bilirler. Bilmeyenler için ise kısa bir bilgilendirme yapalım. Web sayfamızda kullanacak olduğumuz tasarımları, yazı fontlarını, renkleri ve daha birçok özelliği belirleyebildiğimiz dosyalardı. Daha sonrasından ise belirlemiş olduğumuz bu tasarımları gerekli yerlerde kullanarak hem zaman kaybından kurtulurken hem de web sayfamızda ekstra kod yazmaktan kurtuluyorduk.

Bu makalemizde Web uygulamalarından aşina olduğumuz stil işlemlerinin Windows Presentation Foundation ile nasıl yapabileceğimizi incelemeye çalışacağız.

Not: Visual Studio 2008 sp1 beta1 , .Net Framework 3.5 sp1 beta1 ve .Net Framework 3.0 sp2 beta1 12 Mayıs 2008 tarihinde bizlerin kullanımına sunulmuştur. Kullanmak isteyenler www.microsoft.com/download adresinden gerekli linki bularak indirebilirler. Fakat kurulması için sisteminizde kurulu olan beta ürünleri kaldırmanız gerekmektedir. Bu özellikle Silverlight 2,0 beta1 kullanan geliştiricileri ilgilendirmektedir. Beta ürünleri sildiğimizde geliştirme yapıyorsak nasıl devam edeceğiz derseniz ise SP1 beta1 ‘i kurduğunuz zaman silmiş olduğunuz yazılımlar geri yüklenecek ve diğer yazılımlarınızda eksikleri giderilmiş olarak bizlere sunulacaktır.

Stil işlemlerini uygulama üzerinden anlatmaya çalışacağız. Uygulamamızı ise Visual Studio 2008 ürünü ile gerçekleştiriyor olacağız. VS2008 ‘i olmayan geliştiriciler ise isterlerse Expression Blend veya C# Express Edition ile de yapacak olduğumuz uygulamaları yapabilmeleri mümkündür. Bahsettiğimiz herhangi bir ürün ile WPF application projesi oluşturarak stil işlemlerini incelemeye başlayabiliriz.

Stil işlemlerini incelerken uygulayacak olduğumuz senaryoyu özetlemek gerekirse. Ekranımızı kullanabileceğimiz iki sütuna bölerek bu sütunlara listbox ve buton kontrollerini ekleyeceğiz. Bu kontrolleri ve değerlerini ilk olarak bu kontrollere dâhil stil işlemleri ile daha sonrada style sınıfını kullanarak kontrollerimizde nasıl kullanabileceğimizi inceleyeceğiz.

Uygulamamızda kullanacak olduğumuz çalışma alanını iki sütuna bölüyoruz. Daha sonrada Listbox ve üç tane buton ekliyoruz.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <ListBox Width="200" Height="150" Grid.Column="0" VerticalAlignment="Top">
        <ListBoxItem>Deger 1</ListBoxItem>
        <ListBoxItem>Deger 2</ListBoxItem>
        <ListBoxItem>Deger 3</ListBoxItem>
        <ListBoxItem>Deger 4</ListBoxItem>
        <ListBoxItem>Deger 5</ListBoxItem>
    </ListBox>
    <StackPanel Grid.Column="1" Orientation="Vertical" VerticalAlignment="Top">
        <Button>Ekle</Button>
        <Button>Duzenle</Button>
        <Button>Sil</Button>
    </StackPanel>
</Grid>

Çalışacak olduğumuz alanının tasarımını belirledik. Şimdi ise eklemiş olduğumuz kontrollere en temel yöntemle tasarım ile ilgili özelliklerini aktarmaya başlayalım. Özelliklerimize ekranda nerede olacağına , köşe renklerine, arka plan renklerine ve yazı boyutlarını belirliyoruz. Ayrıca butonlara belirttiğimiz özelliklere ek olarak yazı stili de ekliyoruz. Sizler farklı yazı stilleri eklemek isterseniz XAML kod tarafında işlemlerinizi yapmak yerine form üzerindeki kontrollere ait özelliklerden font-family seçeneğinden bulabilirsiniz.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <ListBox Width="200" Height="150" Grid.Column="0" VerticalAlignment="Top">
        <ListBoxItem Margin="0,2,0,3" Foreground="Red" FontSize="18">Deger 1</ListBoxItem>
        <ListBoxItem Margin="0,2,0,3" Foreground="Red" FontSize="18">Deger 2</ListBoxItem>
        <ListBoxItem Margin="0,2,0,3" Foreground="Red" FontSize="18">Deger 3</ListBoxItem>
        <ListBoxItem Margin="0,2,0,3" Foreground="Red" FontSize="18">Deger 4</ListBoxItem>
        <ListBoxItem Margin="0,2,0,3" Foreground="Red" FontSize="18">Deger 5</ListBoxItem>
    </ListBox>
    <StackPanel Grid.Column="1" Orientation="Vertical" VerticalAlignment="Top">
        <Button Foreground="DarkBlue" Background="LightSkyBlue"
                    FontSize="15" FontFamily="French Script MT">Ekle</Button>
        <Button Foreground="DarkBlue" Background="LightSkyBlue"
                    FontSize="15" FontFamily="French Script MT">Duzenle</Button>
        <Button Foreground="DarkBlue" Background="LightSkyBlue"
                    FontSize="15" FontFamily="French Script MT">Sil</Button>
    </StackPanel>
</Grid>

Yukarıdaki kullanım biçimini sıkça uygulamalarımızda kullanıyorduk. Bu kullanım biçimini web uygulamalarında CSS kullanmadığımız zamanlarda görünen sayfaya tasarım bilgilerinin yazılması gibi kabul edebiliriz. WPF uygulamalarında ise bizim çalışma alanımızın dışında kalan bölümler stil dosyalarını belirleyeceğimiz bölümler olarak kullanacağız.

Eğer ki Expression Blend(EB) ile tasarım yapıyorsanız şimdi bahsedeceğimiz yönteme hiçte yabancı olmadığınızı fark edeceksiniz. Çünkü EB ile hazırladığınız tasarımlarda arka planda oluşturulmak olan XAML kodlar ekstra kod fazlalığını minimuma indirerek oluşturmaktadır. Bu sebepten ötürüde stil, animasyon gibi işlemlere ait kodları tek tek kontrollere eklemek yerine stil işlemleri stil sınıfına animasyon işlemlerini de Triggers sınıfına ekleyerek kullanmamızı sağlamaktadır.

Bizim hazırlayacak olduğumuz işlemlerin EB ile nasıl yapıldığını anlattıktan sonra şimdi bizde style sınıfını kullanarak tasarım işlemlerimizi miraslanabilir duruma getirebiliriz.

Penceremize ait özellikleri özkaynaklarında (resource) belirterek tekrardan kullanılabilir olmasına olanak tanıyoruz.



<Window.Resources>
    <Style x:Key="lb1" TargetType="ListBoxItem">
        <Setter Property="Margin" Value="0,2,0,3" />
        <Setter Property="Foreground" Value="Red" />
        <Setter Property="FontSize" Value="18" />
    </Style>
</Window.Resources>

Biraz önce kontrol içerisine eklemiş olduğumuz özelliklerin hepsini özkaynak olarak belirttik. Şimdi ise belirtmiş olduğumuz bu özkaynakları şimdi nasıl kullanacağımıza değinelim.

<ListBoxItem Margin="0,2,0,3" Foreground="Red" FontSize="18">Deger 1</ListBoxItem>

ListBox ‘a ait özellikleri en basit anlamda bu biçimde tanımlarken şu anda Style sınıfını kullanarak x:Key olarak belirlediğimiz attribute ‘e bağlayacağız.

<ListBox Width="200" Height="150" Grid.Column="0" VerticalAlignment="Top">
    <ListBoxItem Style="{StaticResource lb1}">Deger 1</ListBoxItem>
    <ListBoxItem Style="{StaticResource lb1}">Deger 2</ListBoxItem>
    <ListBoxItem Style="{StaticResource lb1}">Deger 3</ListBoxItem>
    <ListBoxItem Style="{StaticResource lb1}">Deger 4</ListBoxItem>
    <ListBoxItem Style="{StaticResource lb1}">Deger 5</ListBoxItem>
</ListBox>

ListBox kontrolünde değerleri tanımlamış olduğumuz ListBoxItem ‘ın özelliklerinde Style sınıfından tanımlanmış olan özelliğine statik olarak değeri bağlıyoruz.

Şimdi ise butonumuza ait özellikleri özkaynak olarak ayarlayalım. Style sınıfını kullanım yöntemine dikkat ettiyseniz standart olarak kontrollerde kullandığımız tasarım bilgilerini Setter sınıfının içerisinde özelliğini ve değerini belirleyerek kullanıyoruz. Setter ‘ın içerisinden tanımlamış olduğumuz özelliklere ilişkin değerler intellisence ile bize sunulmamaktadır. Bizler bu özelliklere ilişkin değerleri normalde kontrolün içerisinde kullanmış olduğumuz özelliklerden yararlanarak belirliyoruz.

Style kullanmadan önceki buton kontrolümüze ilişkin görüntü;

<Button Foreground="DarkBlue" Background="LightSkyBlue"
            FontSize="15" FontFamily="French Script MT">Ekle</Button>

Kullanmış olduğumuz style sınıfı;

<Style x:Key="ekleButon" TargetType="Button">
    <Setter Property="Foreground" Value="DarkBlue"/>
    <Setter Property="Background" Value="LightSkyBlue"/>
    <Setter Property="FontSize" Value="15"/>
    <Setter Property="FontFamily" Value="French Script MT"/>
</Style>
    <Style x:Key="duzenleButon" TargetType="Button">
    <Setter Property="Foreground" Value="DarkBlue"/>
    <Setter Property="Background" Value="LightSkyBlue"/>
    <Setter Property="FontSize" Value="15"/>
    <Setter Property="FontFamily" Value="French Script MT"/>
</Style>
<Style x:Key="silButon" TargetType="Button">
    <Setter Property="Foreground" Value="DarkBlue"/>
    <Setter Property="Background" Value="LightSkyBlue"/>
    <Setter Property="FontSize" Value="15"/>
    <Setter Property="FontFamily" Value="French Script MT"/>
</Style>

Belirmiş olduğumuz stilleri biraz önce ListBox kontrolünden kullandığımız gibi bağlamamız gerekecektir. Yukarıdaki stil dosyalarını kontrol ederken kafanıza ufak bir soru takılabilir. “Stillerde kullanılan bütün özellikler aynı olduğundan tek bir stilin içerisinde kullanıla bilemiyormuydu ? “diyebilirsiniz. Tabii ki de benzerlik olduğu durumlardan tek bir stil sınıfında toparlamak mümkün olacaktır. Fakat daha sonra yapacak olduğumuz değişikliklerden ötürü üç buton içinde ayrı ayrı stil ayarladık.

Buton kontrollerimizde stilleri kullanma şeklimiz;

<StackPanel Grid.Column="1" Orientation="Vertical" VerticalAlignment="Top">
    <Button Style="{StaticResource ekleButon}">Ekle</Button>
    <Button Style="{StaticResource duzenleButon}">Duzenle</Button>
    <Button Style="{StaticResource silButon}">Sil</Button>
</StackPanel>

Temel olarak stillerimizi oluşturduk ve gerekli olan kontrollerimize bağlamalarını yaptık. Şimdi isterseniz ekran görüntüsünün nasıl gözüktüğüne göz atalım.



Stilleri daha önceden oluşturupta kontrollere bağladığımızda herhangi bir sorun oluşmadan kontrollerimizin gerekli stillerine kavuştuğunu görürüz. Ayrıca dikkatinizi çekmek istediğimiz bir nokta var. Uygulamamızda kullanacak olduğumuz stillere ilişkin özellikleri çalışma penceremizin özkaynaklarına eklemeden önce XAML kod tarafımızın çok karmaşık olduğunu görürüz. Stillere ilişkin bilgileri özkaynak sınıfının içerisine eklediğimizde ise hem XAML kod tarafında oluşan karmaşık görüntüyü ortadan kaldırdı hem de bizleri aynı özellikleri defalarca kez yazmaktan kurtardı.

Şimdi ise düzenle ve sil butonlarımıza ilişkin stil özelliklerinde ufak değişiklikler yapalım. Sil butonunun dikkat çekmesi için yazı renklerini rengini kırmızı, düzenle butonunki ise yeşil olarak belirleyelim.

<Style x:Key="duzenleButon" TargetType="Button">
    ***
    <Setter Property="Foreground" Value="DarkGreen"/>
    ***
</Style>
<Style x:Key="silButon" TargetType="Button">
    ***
    <Setter Property="Foreground" Value="Red"/>
    ***
</Style>

Butonlara ilişkin stil özelliklerinde bu ufak değişiklikleri yaptıktan sonra uygulamamızı tekrardan çalıştırdığımızda değişikliklerin uygulandığını göreceksiniz.

ListBox kontrollerinde kullandığımız bütün kontrollere aynı stil sınıfını bağlamıştık. Şimdi ise hepsi için ayrı ayrı stiller oluşturacağız. Ekleyecek olduğumuz stiller de ana özellikler aynı olmakta birlikte yalnızca yazıların renklerini değiştireceğiz.

<Style x:Key="lb1" TargetType="ListBoxItem">
    <Setter Property="Margin" Value="0,2,0,3" />
    <Setter Property="Foreground" Value="Red" />
    <Setter Property="FontSize" Value="18" />
</Style>
<Style x:Key="lb2" TargetType="ListBoxItem">
    <Setter Property="Margin" Value="0,2,0,3" />
    <Setter Property="Foreground" Value="Blue" />
    <Setter Property="FontSize" Value="18" />
</Style>
<Style x:Key="lb3" TargetType="ListBoxItem">
    <Setter Property="Margin" Value="0,2,0,3" />
    <Setter Property="Foreground" Value="Green" />
    <Setter Property="FontSize" Value="18" />
</Style>
<Style x:Key="lb4" TargetType="ListBoxItem">
    <Setter Property="Margin" Value="0,2,0,3" />
    <Setter Property="Foreground" Value="Yellow" />
    <Setter Property="FontSize" Value="18" />
</Style>
<Style x:Key="lb5" TargetType="ListBoxItem">
    <Setter Property="Margin" Value="0,2,0,3" />
    <Setter Property="Foreground" Value="Cyan" />
    <Setter Property="FontSize" Value="18" />
</Style>

Özelliklerini değişitirdiğimiz listbox stillerini tek tek kontrollerine bağlamamız gerekmektedir. Onu da aşağıdaki gibi yapıyoruz.

<ListBox Width="200" Height="150" Grid.Column="0" VerticalAlignment="Top">
    <ListBoxItem Style="{StaticResource lb1}">Deger 1</ListBoxItem>
    <ListBoxItem Style="{StaticResource lb2}">Deger 2</ListBoxItem>
    <ListBoxItem Style="{StaticResource lb3}">Deger 3</ListBoxItem>
    <ListBoxItem Style="{StaticResource lb4}">Deger 4</ListBoxItem>
    <ListBoxItem Style="{StaticResource lb5}">Deger 5</ListBoxItem>
</ListBox>



Stil işlemlerini yaparken kafamıza şöyle bir soru takılabilir. “Tek bir stil sınıfında tanımlamış olduğumuz özellikleri diğer stil sınıflarına özelliklerini miraslayamaz mıyız?”. Bu sorunu cevabı tabii ki de evet olacaktır. Çünkü dikkat sizlerde dikkat etmişsinizdir ki hem ListBox kontrolü için hem de Buton kontrolü için hazırmış olduğumuz stillerde birbirlerini tekrarlayan özellikler oldukça fazladır. Bizlerde bu tür işlemleri uygulamalarımızda daha az kod yazabilmek için yaptığımızdan dolayı farklı çözüm yolları üretmemiz gerekecektir. Style sınıfının özelliklerini incelediğimizde Baseon özelliği dikkatimizi çekmektedir. Bu özellik başka bir stil sınıfındaki özellikleri kullanıldığı sınıfa miraslayabilmeye olanak tanıyor. Miraslama işlemini ise hazırlamış olduğumuz stilleri kontrollere bağladığımız biçimde kullanacağız.



Stillerde yer alan benzer özellikleri sadece tek bir stil sınıfında kullanarak diğer stil sınıflarına miraslama yani bağlama yapacağız. Bu işlemleri aşağıdaki gibi yapabilmemiz mümkündür.

<Window.Resources>
    <Style x:Key="lb1" TargetType="ListBoxItem">
        <Setter Property="Margin" Value="0,2,0,3" />
        <Setter Property="Foreground" Value="Red" />
        <Setter Property="FontSize" Value="18" />
    </Style>
    <Style x:Key="lb2" TargetType="ListBoxItem" BasedOn="{StaticResource lb1}">
        <Setter Property="Foreground" Value="Blue" />
    </Style>
    <Style x:Key="lb3" TargetType="ListBoxItem" BasedOn="{StaticResource lb1}">
        <Setter Property="Foreground" Value="Green" />
    </Style>
    <Style x:Key="lb4" TargetType="ListBoxItem" BasedOn="{StaticResource lb1}">
        <Setter Property="Foreground" Value="Yellow" />
    </Style>
    <Style x:Key="lb5" TargetType="ListBoxItem" BasedOn="{StaticResource lb1}">
        <Setter Property="Foreground" Value="Cyan" />
    </Style>
    <Style x:Key="ekleButon" TargetType="Button">
        <Setter Property="Foreground" Value="DarkBlue"/>
        <Setter Property="Background" Value="LightSkyBlue"/>
        <Setter Property="FontSize" Value="15"/>
        <Setter Property="FontFamily" Value="French Script MT"/>
    </Style>
    <Style x:Key="duzenleButon" TargetType="Button" BasedOn="{StaticResource ekleButon}">
        <Setter Property="Foreground" Value="DarkGreen"/>
    </Style>
    <Style x:Key="silButon" TargetType="Button" BasedOn="{StaticResource ekleButon}">
        <Setter Property="Foreground" Value="Red"/>
    </Style>
</Window.Resources>

Değişikleri yaptıktan sonra kodlarımızın ne kadar azaldığına görüyoruz. Bu sayede hem çalışma alanımızın boyutu küçüldü hem de bizler tekrardan stilleri düzenlemek istediğimizde çok daha kolay bir biçimde bu işlemi yapabilir duruma geldik.

Yaptığımız değişiklikler sonucunda ekran görüntüsünde ise herhangi bir değişiklik olmamıştır.



Son olarak butonlara iki farklı renkten oluşan arka plan stili ayarlayacağız. Bunu yapabilmemiz için stil sınıfında Background özelliğinin alt özelliklerinden olan LinearGradientBrush yararlanacağız. Ayrıca bir buton üzerinden değişiklik yaptığımız diğer butonlar o butonun özelliklerine bağlı olduğu için değişiklikler otomatik olarak aktarılacaktır. Bu sebepten ötürü yalnızca ekleButon stili üzerinde değişiklik yapıyoruz.

<Style x:Key="ekleButon" TargetType="Button">
    <Setter Property="Foreground" Value="DarkBlue"/>
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                <GradientStop Offset="0" Color="CornflowerBlue"/>
                <GradientStop Offset="1" Color="Bisque"/>
            </LinearGradientBrush>
        </Setter.Value>
    </
Setter>
    <Setter Property="FontSize" Value="15"/>
    <Setter Property="FontFamily" Value="French Script MT"/>
</Style>

Yapmış olduğumuz değişiklik sonucunda ekran görüntümüz ise aşağıdaki gibi olmuştur.



Stil işlemleri ile birlikte tasarımlarımızı ekleyebileceğimiz iki yöntem daha bulunmaktadır. Kısaca bu iki yönteme değinmeye çalışalım. Bunlardan birincisi yazımızda da değinmiş olduğumuz window.resource çalışma alanımızın özkaynaklarıdır. Bu sınıf içerisinde style dahil olmak üzere birçok özelliği saklayabilmemiz mümkündür. En sık olarak kullanılan yöntemde yaptığımız tasarımları özkaynak olarak saklamaktır. Çünkü uygulama çalıştırıldığında bu sınıf içerisindeki değerler kullanılmak üzere belleğin bir köşesinde tutulduğundan ötürü animasyon ve tasarım işlemlerinin kullanılması esnasından bu iki işlemden kaynaklanan performans kaybını minimuma indirgeyecektir.

Kullanabileceğimiz bir diğer yöntem ise ControlTemplate ‘dir. Kullanıcı arayüzünde sıklıkla kullanılacak olan kontrolleri stilleri ile birlikte tanımlamamıza olanak tanımaktadır. İşlevi ise UserControllere oldukça fazla benzemektedir. Daha sonraki yazılarımızda ControlTemplate 'e ilişkin özelliklere değinmeye çalışacağız.

Sonuç olarak yazdıklarımızı toparlamak gerekirse, stil işlemlerini neden kullanmamız gerektiğine değinerek yazımıza başlamıştık. Sonrasında en acemi yöntem ile kontrollerimize tasarımsal özellikler ekledik. Bu özellikleri eklediğimizde XAML kod tarafının ne kadar karmaşıklaştığını ve kullanacak olduğumuz kontrol sayısının 3 - 5 değil de 100-200 olduğu durumlarda içinden çıkılamayacak bir durum oluşacağını göz önüne alarak kullanmış olduğumuz tasarım özelliklerini stil sınıfının özelliklerine nasıl kullanacağımıza değindik. En son olarak stil sınıflarında benzer olarak kullanılan özelikleri yalnızca bir kez tanımlayarak diğer stil sınıflarına nasıl miraslayacağımız gördük.

Umarım yararlı olmuştur.

Yazımızda değinmiş olduğumuz uygulamanın kaynak kodlarına linkten erişebilirsiniz.

Pazartesi, Mayıs 12, 2008

WPF - Kendi Kullanıcı Kontrolmüzün (User Control) Oluşturulması

Windows Presentation Foundation ‘ın bizlere kattığı yenilikleri ve maksimum kullanıcı deneyimini günler geçtikçe daha iyi anlamaya başladık. Bu avantajları sağlayan en önemli etmenlerden biride özelleştirilebilir kullanıcı kontrolleri olmuştur. Bizlere sunulan kullanıcı kontrollerini dilediğimiz şekilde kullanarak son kullanıcıların hoşlarına giden uygulamalar hazırlayabiliyoruz. Fakat bazı noktalarda bu kontroller işlerimizi tam anlamıyla göremeyebiliyorlar. Bu durumlarda bizlerin yapması gereken ise kendi kullanıcı kontrollerimizi oluşturmak oluyor.

Kendilerimizin hazırlamış olduğu kullanıcı kontrollerini oluştururken Visual Studio (VS) ve Expression Blend (EB) ‘den yararlanabilmemiz mümkündür. EB ile hazırlamış olduğumuz kullanıcı kontrollerine işlevliğin yanı sıra birçok güzel animasyonda ekleyebilmemiz mümkün oluyor. EB ile tasarımını bitirmiş olduğumuz kontrolleri de rahatlıkla VS üzerinden kullanabilmemiz mümkün oluyordu. Bir diğer seçeneğimiz ise hiç işin tasarım ve animasyon yanlarına girmeden VS ile de sade tasarımlar oluşturabilmemiz mümkün oluyor. İşte biz bu yazımızda kendi kullanıcı kontrollerimizi (UserControl) nasıl oluşturacağımıza değinmeye çalışıyor olacağız. Konumuzu incelerken de örnek üzerinden değinerek daha akılda kalmasına olanak tanınacaktır.

Kendi kullanıcı kontrollerimizi geliştirme gereksinime ihtiyaç duymamız birçok sebepten ötürü doğmuştur. Bunlar kontrollerin yapmak istediğimiz işlemleri yerine getiremememizden tutunda yetersiz gördüğümüz özelliklerine kadar daha birçok düşünce aklımıza gelebilir. Bu durumda yapmamız gereken kendi isteklerimizi karşılayacak olan bir kontrol geliştirmek olacaktır.

Kullanıcı kontrollerimizi geliştirmeye başlarken ilk yapmamız gereken VS ‘den bir WPF uygulaması açmak olacaktır. Daha sonra yapmamız gereken ise oluşturmuş olduğumuz uygulamaya bir kullanıcı kontrolü eklemek olacaktır. İşlemimiz için iki yol vardır. Project-->AddUserControl yolunu takip etmektir.



Diğer yol ise Project-->Add NewItem yolunu takip edip karşımıza çıkan menüden UserControl (WPF) seçeneğini seçerek oluşturabiliriz.



İki farklı UserControl ekleme yolu gördük. Bu iki seçeneğin bir birinden farklı yerlerde olmasının içerik açısından hiçbir farklılığı yoktur. Sadece kolaylık olması açısından UserControl seçeneği ek olarak ayrı bir seçenek olarak sunulmuştur.

UserControl ümüzü yukarıda bahsettiğimiz iki yöntemden biri ile ekleyerek karşımıza gelen XAML dosyayı incelemeye başlayabiliriz. Ben bu uygulama için UserControl e “KontrolTurhal” adını verdim. Sizler istediğiniz ismi verebilirsiniz.



Eklenmiş olan kullanıcı kontrolüne değinelim. Karşımıza çıkan bir XAML dosyanın UserControl olduğunu anlayabilmemizin en kolay yolu ilk tag a bakmamız olacaktır. Burada UserControl yazdığına dikkat ediniz. Bunun anlamı ise yapmış olduğumuz işlemlerin diğer XAML dosyalar ve C# kod tarafında UserControl olarak algılanacağıdır. UserControl dışında Window, Page en çok kullanılan formlardır. User Control ise bu formlarda kullanılacak olan bileşenleri hazırlamamıza olanak tanır. Yukarıdaki resimde eklemiş olduğumuz UserControl ‘ün hangi sınıfa ait olduğunu yani hangi projede kullanılacağını belirtildiği yer ise x:Class bölümüdür. Oraya dikkat ederseniz KullaniciKontrol projesinin içerisine KontrolTurhal UserControl ‘ünün oluşturulduğunu rahatlıkla görebilirsiniz.

Artık kullanıcı kontrolümüzü oluşturmaya başlayabiliriz. Kullanıcı kontrollerini oluştururken dikkat etmemiz gereken en önemli özellik kullanıcıların neleri yapacağını düşünerek hareket etmemiz olacaktır.

Kullanıcı kontrolümüzü oluşturmaya başlarken ilk olarak DockPanel alanına ilişkin özellikleri tanımlıyoruz daha sonrada bir Border element tanımlayıp ona ait özellikleri belirlemeye başlıyoruz. Belirlediğimiz bu özellikler aşağıda görülmektedir.

KontrolTurhal.xaml
<UserControl x:Class="KullaniciKontrol.KontrolTurhal"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<DockPanel LastChildFill="True">
<Border DockPanel.Dock="Top" CornerRadius="4,4,0,0" Width="Auto"
Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Background="Beige" BorderBrush="Brown" BorderThickness="1">
<TextBlock x:Name="txt_baslik" Width="Auto" Height="Auto"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></TextBlock>
</Border>
<Border DockPanel.Dock="Top" CornerRadius="0,0,4,4" Width="Auto"
Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
BorderBrush="Brown" BorderThickness="1,0,1,1" MinWidth="100px" MinHeight="100px">
<TextBlock x:Name="txt_icerik" Width="Auto" Height="Auto"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></TextBlock>
</Border>
</DockPanel>
</UserControl>

Belirmiş olduğumuz özelliklerin sonucunda kontrolümüzün aldığı ilk görüntü aşağıdaki gibi olmuştur.

Hazırlamış olduğumuz form kontrolüne dikkat ederseniz başlık ve içerik bölümlerinden oluşmakta ve bu bölümlere TextBlock yardımı ile yazı yazabilmekteyiz. Böyle bir kontrol tasarlamamızın amacı uygulamalarımızda başlık ve içerikten oluşan bu bölüm kullanacağımız zaman tek tek kontrolleri birleştirip oluşturmak yerine daha kullanışlı olması açısından böyle bir uygulama geliştirilmesine karar verilmiştir.

Şimdi içeriklerinin daha dinamik bir biçimde değiştirilebilmesi için C# kod tarafına özellikleri belirtmeye başlıyoruz. Özelliklerimiz başlıktan ve içerikten gelecek olan değerler için olacaktır. Hazırlamış olduğumuz C# kodu aşağıdaki gibidir.

KontrolTurhal.xaml.cs
using System;
using System.Windows;
using System.Windows.Controls;

namespace KullaniciKontrol
{

public partial class KontrolTurhal : UserControl
{
public KontrolTurhal()
{
InitializeComponent();
}

public string BaslikTxt
{
get {
return this.txt_baslik.Text;
}
set {
this.txt_baslik.Text = value;
}
}

public string IcerikTxt
{
get {
return this.txt_icerik.Text;
}
set {
this.txt_icerik.Text = value;
}
}
}
}

Yukarıda hazırlamış olduğumuz kod bloğunu kısaca açıklamak gerekirse, başlık ve içeriğe ilişkin özellikleri tanımladık. Ayrıca hazırlamış olduğumuz bu sınıfta dikkat edilecek olan bir nokta kullanılacağı projede kullanılabilecek olduğunun belirtilmiş olmasıdır. Bu bahsettiğimiz duruma namespace ile tanımlanmış bölümde görebilirsiniz. Ayrıca bu belirtme sayesinde XAML dosyamızda hazırladığımız kontrolü rahatlıkla kullanabileceğiz.

UserControl ümüzü bu şekilde ana uygulamamıza çağırmak istersel yapmamız gereken başlıca şey onu uygulamaya eklemek olacaktır. Bunun için ise kullanacağımız yöntem xmlns ile yapılacaktır. xmlns:… üç nokta ile belirttiğimiz yere kontrolü tanımlamımız gerekecektir. Bunun için yapmamız gerekecek User Control Custom ‘ı uccustom olarak belirtmek olacaktır. Sonrasında bizden CLR ‘ı belirtmemizi isteyecektir. Bizde elimizde bulunan isim alanlarını tanımlayarak işlemi bitirmiş olacağız. Dikkat ederseniz biraz önce bahsetmiş olduğumuz sınıftaki nameSpace ‘i kullanmış olacağız.

Not: User Control Custom olarak belirttiğimiz bölümü istediğimiz biçimde tanımlayabilmemiz mümkündür. Benim böyle bir şeyi tercih etmemim sebebi yaptığımız işlemin harici kullanıcı kontrolü hazırlamak olduğundan ötürü akılda daha kalıcı olması açısından öyle belirttim. Sizler xmlns:turhal (isim örnek amaçlıdır) biçiminde yazarak ta kullanabilirsiniz. Bu durumda aşağıda anlatacak olduğumuz işlemleri belirttiğiniz isme göre yapmanız gerekecektir.

,

Artık harici kontrollerimizi uygulamamızın ana ekranında kullanabilir duruma gelmiş durumdayız. Şimdi yapacak olduğumuz diğer kontrolleri kullanırmış gibi uygulamamıza eklememiz olacaktır. Tabii bunu yaparken dikkat etmemiz gereken bir nokta var. hazırladığımız olan kontrol bileşen paletinde değilde uygulamamız içerisinde olduğundan ötürü xmlns ile tanımlamış olduğumuz isme göre işlemlerimiz yapmamız gerekmektedir. Şimdi bunu nasıl yapacağımızı göz atalım.



Kullanıcı sınıfımızı çağırdıktan sonra kod tarafında tanımlamış olduğumuz özellikleride kullanabiliyoruz.



Intellisence sonucunda bizim tanımlamış olduğumuz özellikleri de tanımlıyoruz. Oluşturduğumuz XAML kodu aşağıdadır.

<Window x:Class="KullaniciKontrol.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:uccustom="clr-namespace:KullaniciKontrol"
Title="Kullanici Kontrolleri" Width="300" Height="300">
<Grid>
<uccustom:KontrolTurhal Width="200px" Height="150px"
IcerikTxt="Icerigimizi giriyoruz."
BaslikTxt="Basligi giriyoruz.">
</uccustom:KontrolTurhal>
</Grid>
</Window>

Uygulamamızı çalıştırdığımız zaman ekran görüntümüzde aşağıdaki gibidir.



Kontrolümüzün içerikleri istediğimiz şekilde gerçekleşti. Hazırlamış olduğumuz kontrolde başlık ve içerik bir biçimde tanımlamış olduğumuz özellikleri doldurarak oluşturduğumuz tasarımın içerisinde yazdıklarımızı görmüş oluyoruz. Ayrıca özelliklerimizi Properties penceresinden de görebiliyoruz.



Kontrolümüzü kullanma ile ilgili birkaç noktaya değinmeye çalışalım. İçerik ve başlık biçiminde yazılarımızı girebildiğimizden bahsetmiştik. Diğer kontrolleri göz önüne aldığımızda kendi içerik özelliklerinin dışından varsayılan olarak taglar arasında yazılanları kullanıcı kontrolü dâhilinde gösterebilmektedir. Bunların en bariz örneği de <TextBlock> kontrolüdür. Bu kontrolde Text=”deneme” biçiminde içeriğini belirlerken aynı zamanda <TextBlock>deneme</TextBlock> şeklinde de tanımlayabiliyoruz. Fakat bizim hazırlamış olduğumuz kontrolü göz önüne alırsak IcerikTxt=”” özelliğinin içeriğine yazmış olduğumuz yazıyı buradan kaldırıp ta <uccustom:KontrolTurhal>Deneme</uccustom:KontrolTurhal> biçiminde yazdığımızda hazırlamış olduğumuz kontrolü ortadan kaldırarak sadece yazmış olduğumuz deneme yazısı formumuzda gözükecektir. Kontrolümüzde yazdığımız kodları yokmuş gibi varsayacaktır. Ana amacımız bu durumu ortadan kaldırmak olmalıdır. Fakat daha önce bu durumun nasıl gerçekleştiğine dair ekran görüntüsüne göz atalım.



Kodumuzu bu şekilde düzenlediğimizde karşımıza çıkan ekran görüntüsüne göz atalım.



Ekran görüntüsüne dikkat ederseniz biraz önce bahsettiğimiz sorun gerçekleşmiş olacaktır. Bu durumun ortadan kaldırılması için yapacağımız işlemleri incelemeye çalışalım.

Kontrol.Turhal.xaml.cs kod bölümüne tekrar dönelim. Yaptığımız işlem Markup ‘ların dışarında olduğu için Markup isim alanını çağırmamız gerekecektir.



System.Windows.Markup isim alanını sınıfımıza ekledikten sonra bu isim alanına ait olan Attribute (öz nitelik) lerinden ContentPropery ‘i kullanarak Markup kodlamada taglar dışına yazılanları IcerikTxt gibi algılanmasını sağlayacağız. Bu işlemi yaparken ContentProperty özniteliğinin özelliğine IcerikTxt ‘yi atamamız gerekecektir. Ekleyecek olduğunuz öz niteliği kullanıcı kontrolüne ait olan sınıfın hemen üstüne yazmamız gerekmektedir. Yoksa hata verecek ve yaptığımız özelliği varsayılan olarak kullanamadığını bize bildirecektir.



Bu değişiklik sonrasından uygulamamızı tekrardan derlediğimizde içerik özelliği ile karşılaştığımız sorunu halletmiş olacağız.



Şimdi de uygulamamızda başka bir noktaya göz atalım. Hazırlamış olduğumuz kontrollerde varsayılan olarak gelen ve kullanıcı kontrolüne içerik eklememize olanak tanıyan Content özelliği bulunmaktadır. Bu özelliği kullanmak istediğimiz aynı biraz önce karşılaştığımız gibi bir sorun ile karşı karşıya kalırız. Yine boş bir ekranda yalnızda Content özelliğine yazılmış olan yazı bizleri karşılamaktadır.

Bu durumdan kurtulabilmemiz için yapmamız gereken işlem ise, kullanıcı kontrolümüzü tanımladığımız sınıfa tekrardan giderek aşırı yüklenmeye korumalı bir sınıf oluşturmamız gerekmektir.

Oluşturacak olduğumuz sınıf içerik değişikliklerini koruyacağı için onContentChanged üyesini seçerek işlemlerimizi yapabiliriz.



KontrolTurhal.xaml.cs ‘a eklemiş olduğumuz korumalı sınıfa ait kod bloğu aşağıdaki gibidir.

protected override void OnContentChanged(object oldContent, object newContent)
{
if (oldContent!=null)
{
throw new NotSupportedException("Kullanmis oldugunuz kontrole iki adet içerik giremezsiniz.");
}
}

Değişikliklerimizi yapıp Content özelliğine değer girdikten sonra uygulamamızı derlediğimizde biraz önce belirttiğimiz mesaj kullanıcılara hata olarak sunulmaktadır.



Bu hata mesajını verdirterek kullanıcıya aynı görevi yapan iki özelliği kullanmasını da engellemiş oluyoruz. Daha sonra Content özelliğine yazdığımız değerleri kaldırdıktan sonra uygulamamızı derlediğimizde kontrolümüzün sorunsuzca çalıştığını göreceğiz.

Sonuç olarak bu yazımızda nelere değindiğimizi kısaca toparlamak gerekirse, ilk olarak WPF uygulamalarına bir UserControl eklemek istediğimizde bunu nasıl yapacağımıza değindik. Daha sonra Uygulamamıza eklemiş olduğumuz UserControl ‘ün XAML ve C# içeriğini nasıl oluşturabileceğimize inceledikten sonra ana uygulamamızda kontrolümüzü nasıl kullanabileceğimize değindik. Son olarak ise diğer kontroller ile kendi kontrolümüzü karşılaştırarak ne tür eksikleri olduğuna göz attıktan sonra bu eksikleri nasıl düzeltebileceğimize değindik.

Umarım yararlı olmuştur.

Yazımızda değinmiş olduğumuz uygulamanın kaynak kodlarına linkten erişebilirsiniz.

turhal.temizer@csharpnedir.com

Cuma, Mayıs 02, 2008

Galata Tours Silverlight.net Showcase 'de

Biraz önce silverlight.net topluluğundan güzel bir mail aldım. Fransa 'da yer alan turizm şirketine yaptığım web sayfasının intro sayfası görülebilecekler listesine eklenmiş. Müşterilerimizin beğenisini kazanan bu tasarımın bütün dünyacada görülebilecek olması hem benim açımdan hemde Galata-Tours yöneticileri açısından güzel bir his olacak.

Sitenin gerçek site tam olarak işleme girmedi. Test için yazdığım latince kelimeler bile hala duruyor. :) Ana site Fransızca olacağı için böyle bir süreç geçiyor.

Intro sayfayı merak edenler için linki: www.galata-tours.com

Intro sayfaya ilişkin silverlight.net/showcase 'den bir ekran görüntüsüde altta yer almaktadır.

galata-tours 

Daha boş bir zaman bulduğum zaman ise sitenin içeriğini WPF browser uygulaması (XBAP) ile tekrardan düzenleyeceğim. Ama o zamana kadar ASP.Net ile kalsa da olur. :)

Pazartesi, Mart 17, 2008

Expression Web 2.0 News

What's new in Expression Web 2.0 ?
PHP
Open up your PHP websites to the visual world of standards-based design by using advanced code editing features and effortless browser previewing. Microsoft Expression Web 2 enables you to preview PHP pages in your web browser without installing a separate development server or having to upload your website to a server. Just click the Preview in Browser button and you're done. Code view provides customizable color coding to help you identify the different components in your PHP syntax, and also provides PHP IntelliSense (auto complete), which lets you quickly look up and insert code. PHP IntelliSense options let you control the amount of IntelliSense that is provided. You can efficiently insert common PHP code snippets in eitherDesign view or Code view from the Insert menu. When you want to reuse content on multiple PHP pages, such as for a header or navigation menu, you can use a PHP include and preview it in Design view. Formatting marks in Design view identify your PHP script and enable you to modify the script outside Code view.
Byte order mark options
When you're designing documents encoded as Unicode UTF-8, a byte order mark (BOM) is typically a good thing to have embedded in your documents. But if you're working with PHP pages, or use a server or other tools that do not support a BOM, an embedded BOM can cause unwanted characters to appear in your document, or can create other issues. Expression Web 2 lets you add or remove a BOM in existing documents, and control whether a BOM is added to new documents.
Silverlight 1.0
Microsoft Silverlight is a cross-browser, cross–platform plug-in for delivering rich interactive applications for the web. You can use Expression Web 2 to either modify the HTML file that was generated by your Silverlight-authoring program or insert a Silverlight-based application into a web page.
Flash and Windows Media
Expression Web 2 lets you insert Flash SWF and Windows Media files into your pages, edit their properties, and preview your Flash files in Design view. In addition, you can insert and run any other type of ActiveX control, such as QuickTime or RealPlayer.
Photoshop Import
Expression Web 2 enables you to generate a .png, .gif, or .jpeg file from a Photoshop .psd file and select the Photoshop layers you want to include or exclude from the image. After using Expression Web 2 to generate a web-optimized image, you can quickly start Adobe Photoshop to modify the original .psd file and then update the image that you generated with Expression Web.
ASP.NET AJAX
Expression Web 2 provides you with ASP.NET AJAX server controls that enable you to quickly create web pages that include a rich user experience with responsive and familiar user interface (UI) elements. By using AJAX features, you can improve the user experience with web pages that are richer, that are more responsive to user actions, and that behave like traditional client applications.
ASP.NET AJAX server controls supported by Expression Web 2 include the UpdatePanel, Timer, UpdateProgress, ScriptManager, and ScriptManagerProxy controls.

Note To work with these controls in Expression Web 2, you must install ASP.NET AJAX or the .NET Framework 3.5. See Microsoft .NET Framework 3.5 or ASP.NET AJAX 1.0 in the Microsoft Download Center online.
Custom ASP.NET controls
Expression Web 2 supports custom ASP.NET controls that you have put in the BIN folder of your website. You can preview custom controls and access the Common Tasks smart tag menu in Design view, edit properties, and use IntelliSense and syntax checking in Code view.
You can use custom ASP.NET controls developed by others, such as those featured in theControl Gallery on the Microsoft ASP.NET website, or create custom controls by using a visual design tool such as Microsoft Visual Studio.

ASP.NET data controls
Expression Web 2 provides the new DataPager and ListView ASP.NET controls. The ListView control is useful for displaying data in any repeating structure, similar to the DataList and Repeater controls. Unlike those controls, the ListView control supports edit, insert, and delete operations, and also sorting and paging. You use the DataPager control to enable users to page through data in a ListView control.
Note To work with these controls in Expression Web 2, you must install the .NET Framework 3.5. See Microsoft .NET Framework 3.5 in the Microsoft Download Center online.
FTP publishing
Expression Web 2 enables you to set the FTP publishing mode to Passive FTP or normal FTP, and save your FTP user name and password.
CSS
The Design view in Expression Web 2 now renders the CSS overflow property. The Compatibility Reports in Expression Web 2 now check external CSS files, in addition to embedded style sheets, for compatibility with the CSS schema you specify.
HTML file extension
Expression Web 2 lets you set your preference for the default HTML file name extension.
Alphabetized HTML attributes
A new setting in the Code Formatting options in the Page Editor Options dialog box enables you to control whether HTML attributes are alphabetized or not in the code of your web pages. By default, tag attributes are now written in alphabetical order when Expression Web 2 adds HTML tags to your page. Existing tags in a page are affected by the new setting only if you apply the Reformat HTML command to the page.

Bilsayayarımda kurulu olan Yazılımlar

Bu aralar bilgisayarınızı kullnırken hangi programları yüklüyorsunuz diye sorular almaya başladım. O yüzden buradan bilgisayarımda kurulu olan yazılımların listesi veriyorum. Ayrıca bilgisayara kurulmadan çalışan Java editörü Eclipse ve bu editörü kullanırken server olarak kullandığım apache-tomcat listede gözükmemektedir.

  • 2007 Microsoft Office Suite Service Pack 1 (SP1)
  • ADO.NET Entity Framework 1.0 (Pre-Release Version)
  • Adobe AIR
  • Adobe Anchor Service CS3
  • Adobe Asset Services CS3
  • Adobe Bridge CS3
  • Adobe Bridge Start Meeting
  • Adobe Camera Raw 4.0
  • Adobe CMaps
  • Adobe Default Language CS3
  • Adobe Device Central CS3
  • Adobe Dreamweaver CS3
  • Adobe ExtendScript Toolkit 2
  • Adobe Extension Manager CS3
  • Adobe Flash Player ActiveX
  • Adobe Flash Player Plugin
  • Adobe Help Viewer CS3
  • Adobe PDF Library Files
  • Adobe Setup
  • Adobe Type Support
  • Adobe Update Manager CS3
  • Adobe Version Cue CS3 Client
  • ATK0100 ACPI UTILITY
  • avast! Antivirus
  • Bilisim Sözlügü 1.0 b140
  • BisonCam, USB2.0
  • CCleaner (remove only)
  • Crystal Reports Basic for Visual Studio 2008
  • Dassault Systemes Software Prerequisites x86
  • FlashGet 1.9.6.1073
  • Foxit Reader
  • GDR 3054 for SQL Server Database Services 2005 ENU (KB934458)
  • GDR 3054 for SQL Server Reporting Services 2005 ENU (KB934458)
  • GDR 3054 for SQL Server Tools and Workstation Components 2005 ENU (KB934458)
  • Highlight Viewer (Windows Live Toolbar)
  • Hotfix for Microsoft Visual Studio Team System 2008 Team Suite - ENU (KB946344)
  • Hotfix for Microsoft Visual Studio Team System 2008 Team Suite - ENU (KB946581)
  • Hotfix for Microsoft Visual Studio Team System 2008 Team Suite - ENU (KB947173)
  • iTunes
  • K-Lite Mega Codec Pack 1.25
  • Map Button (Windows Live Toolbar)
  • MATLAB Family of Products Release 14
  • Microsoft .NET Compact Framework 2.0 SP2
  • Microsoft .NET Compact Framework 3.5
  • Microsoft .NET Framework 3.5
  • Microsoft ASP.NET 3.5 Extensions CTP
  • Microsoft ASP.NET Futures (July 2007)
  • Microsoft ASP.NET MVC Preview 2
  • Microsoft Device Emulator version 3.0 - ENU
  • Microsoft Document Explorer 2008
  • Microsoft Document Explorer 2008 (6001.18000.367)
  • Microsoft Expression Blend 2 December Preview
  • Microsoft Expression Blend 2.5 March 2008 Preview
  • Microsoft Expression Design SP1
  • Microsoft Expression Web
  • Microsoft Expression Web MUI (English)
  • Microsoft Expression Web Service Pack 1 (SP1)
  • Microsoft Office 2003 Web Components
  • Microsoft Office Access MUI (English) 2007
  • Microsoft Office Access Setup Metadata MUI (English) 2007
  • Microsoft Office Enterprise 2007
  • Microsoft Office Excel MUI (English) 2007
  • Microsoft Office Groove MUI (English) 2007
  • Microsoft Office Groove Setup Metadata MUI (English) 2007
  • Microsoft Office InfoPath MUI (English) 2007
  • Microsoft Office OneNote MUI (English) 2007
  • Microsoft Office Outlook MUI (English) 2007
  • Microsoft Office PowerPoint MUI (English) 2007
  • Microsoft Office Professional Edition 2003
  • Microsoft Office Proof (English) 2007
  • Microsoft Office Proof (French) 2007
  • Microsoft Office Proof (Spanish) 2007
  • Microsoft Office Proofing (English) 2007
  • Microsoft Office Publisher MUI (English) 2007
  • Microsoft Office Shared MUI (English) 2007
  • Microsoft Office Shared Setup Metadata MUI (English) 2007
  • Microsoft Office Visio 2007 Service Pack 1 (SP1)
  • Microsoft Office Visio MUI (English) 2007
  • Microsoft Office Visio Professional 2007
  • Microsoft Office Visual Web Developer 2007
  • Microsoft Office Visual Web Developer MUI (English) 2007
  • Microsoft Office Word MUI (English) 2007
  • Microsoft Silverlight
  • Microsoft Silverlight 2.0 SDK Beta1
  • Microsoft Silverlight Tools Beta 1 for Visual Studio 2008
  • Microsoft SQL Server 2005
  • Microsoft SQL Server 2005 Backward compatibility
  • Microsoft SQL Server 2005 Compact Edition [ENU]
  • Microsoft SQL Server 2005 Reporting Services
  • Microsoft SQL Server 2005 Tools
  • Microsoft SQL Server 2008
  • Microsoft SQL Server 2008 Tools
  • Microsoft SQL Server Compact 3.5 Design Tools ENU
  • Microsoft SQL Server Compact 3.5 ENU
  • Microsoft SQL Server Compact 3.5 for Devices ENU
  • Microsoft SQL Server Database Publishing Wizard 1.2
  • Microsoft SQL Server Native Client
  • Microsoft SQL Server Setup Support Files (English)
  • Microsoft SQL Server VSS Writer
  • Microsoft VC Redist 2008 (6001.18000.367)
  • Microsoft Visual C++ 2008 Redistributable - x86 9.0.21022
  • Microsoft Visual C++ Compilers 2008 Standard Edition - enu - x86
  • Microsoft Visual Studio 2005 Tools for Office Runtime
  • Microsoft Visual Studio 2005 Web Deployment Projects
  • Microsoft Visual Studio 2008 Performance Collection Tools - ENU
  • Microsoft Visual Studio Team System 2008 Team Suite - ENU
  • Microsoft Visual Studio Web Authoring Component
  • Microsoft Windows SDK .NET Framework Tools
  • Microsoft Windows SDK for Visual Studio 2008 .NET Framework Tools
  • Microsoft Windows SDK for Visual Studio 2008 SDK Reference Assemblies and IntelliSense
  • Microsoft Windows SDK for Visual Studio 2008 Tools
  • Microsoft Windows SDK for Windows Server 2008 (6001.18000.367)
  • Microsoft Windows SDK for Windows Server 2008 .NET Documentation (6001.18000.367)
  • Microsoft Windows SDK for Windows Server 2008 Common Utilities (6001.18000.367)
  • Microsoft Windows SDK for Windows Server 2008 Headers and Libraries (6001.18000.367)
  • Microsoft Windows SDK for Windows Server 2008 Samples (6001.18000.367)
  • Microsoft Windows SDK for Windows Server 2008 Utilities for Win32 Development (6001.18000.367)
  • Microsoft Windows SDK for Windows Server 2008 Win32 Documentation (6001.18000.367)
  • Microsoft Windows SDK Intellisense and Reference Assemblies (6001.18000.367)
  • Microsoft Windows SDK MDAC Headers and Libraries (6001.18000.367)
  • Microsoft Windows SDK Net Fx Interop Headers And Libraries (6001.18000.367)
  • Mozilla Firefox (2.0.0.12)
  • MSDN Library for Visual Studio 2008 - ENU
  • New York Times - Times Reader
  • Paint.NET v3.22
  • Picasa 2
  • QuickTime
  • Realtek AC'97 Audio
  • Security Update for Excel 2007 (KB946974)
  • Security Update for Office 2007 (KB947801)
  • Security Update for Outlook 2007 (KB946983)
  • Smart Menus (Windows Live Toolbar)
  • Update for Microsoft Visual Studio Team System 2008 Team Suite - ENU (KB949325)
  • Update for Outlook 2007 Junk Email Filter (kb947945)
  • VC Runtimes MSI
  • Virtual Earth 3D (Beta)
  • Visual Studio 2005 Tools for Office Second Edition Runtime
  • Visual Studio Tools for the Office system 3.0 Runtime
  • Winamp
  • Windows Live Favorites for Windows Live Toolbar
  • Windows Live installer
  • Windows Live Messenger
  • Windows Live Sign-in Assistant
  • Windows Live Toolbar Extension (Windows Live Toolbar)
  • Windows Live Tools for Microsoft Visual Studio CTP
  • Windows Live Writer
  • Windows Mobile 5.0 SDK R2 for Pocket PC
  • Windows Mobile 5.0 SDK R2 for Smartphone
  • Windows Mobile 6.0 SDK Standart for Pocket PC
  • Windows Mobile 7.0 alpha SDK
  • Windows SDK Intellidocs
  • WinRAR archiver
  • Yurtici Kargo - 1
  • Yurtici Kargo - 2

Çok karmaşık bir liste gibi gözüksede genel yoğunluğu Visual Studio, MS Office oluşturmaktadır.

Pazar, Mart 09, 2008

Silverlight 2.0 - Genel Yapısı ve Kurulum Sorununun Giderilmesi



Bu makalemizde Silverlight teknolojisindeki yenilikleri incelemeye çalışacağız.

Silverlight ilk olarak 2007’nin mayıs ayında duyurulmuştu. Microsoft web adresinin alt başlığı olarak Surface ile birlikte videolarına ve ekran tasarımlarına erişerek inceleyebiliyorduk. Tabii bu iki ürünü incelerken Surface ‘in gerçek bir alet olduğunu düşünürsek bilim kurgu filmleri gerçekleşmiş gibi düşünmüştük. Peki, Surface ile aynı zaman aralığında duyurulan Silverlight neydi? Videoları incelendiği zaman dinamik web sayfaları yardımıyla inanılmaz animasyonlar yapabilecek ve parmaklarımızla bu sayfaları kontrol edebilecektik. Aynı zamanda bir ekran da birden fazla video izleyebilme imkânımız doğacak ve bu imkân sayesinde canımızın istediği bir an istediğimiz videoya geçiş yapabilecektik.

Peki, bu ilk görüntüler esnasında bize ilk olarak hangi yazılımı getiriyordu. Bu
yazılımda tartışmasız olarak Flash ’tı. Flash bu bahsettiğimiz işlemleri yapabilecek kapasiteye sahipti. Fakat bu videoların hepsi sistemden çekilecek ve istendiği zaman hepsi birlikte hareket ettirilebilecekti. Flash animasyonların ağırlığı Adobe firması dahil olmak üzere herkesin kabul ettiği bir sorundu. Zaten bu sorunun ortadan kaldırılması içinde Adobe Flex ’in yeni sürümü çıkarılmıştı. Bu ürün ise programlama teknikleri yardımıyla çok daha performanslı uygulamalar geliştirilebilmesine olanak tanıyordu. Bu durumlar karşısında Microsoft ‘un planlarında yer alan Silverlight hem Flex ile rekabet edilebilecek bir ürün olacaktı hem de C# ve
VB kodları ile bütün yazılımcılar için geliştirme olanağı sunacaktı. Fakat birden çıkartılmış olması 0,X sürümlerinde yalnızca çok basite indirgenmiş XAML kod ve
JavaScript kullanılabiliyordu. Zaman ilerleyip 1,0 sürümü çıkarıldığında ise XAML kod yapısının içeriği güçlendirilmiş ve JavaScript ile yazılmaya devam edilmişti. Fakat şöyle bir soru takılıyordu bizlerin kafasına. Silverlight yönetilebilen kodlar yardımı ile geliştirilecekti. Eğer Silverlight yalnızca JavaScript ve XAML ile geliştirilebilecekse neden bu kadar reklam yapıldı biçiminde tepkiler gelmeye başlamıştı. Aynı zamanda birçok yazılımcıda hem güvenlik açısından hem de Web servislerini desteklememesinden ötürü bu ürünü beğenmeyebiliyorlardı. Ayrıca ASP.NET ile alıştığımız form kontrollerinde de hiç biri Silverlight bünyesinde yer almıyordu. Fakat unutulan bir şey vardı. Bu Silverlight ‘ın bebek adımlarıydı. Bir bebek ilk başta emeklemeyi öğrenir daha sonra yürümeye başlardı. Eğer ki direk koşturmaya çalıştırırsak bunu başarabilmesini bile beklememiz hayal olurdu.

Zaman ilerledi ve Silverlight ‘ın eksikleri yazılımcılardan gelen geri bildirimler ile geliştirilmeye çalışıldı. Bu gelişimin sonucunda ise çok basitte olsa kod tarafında da yönetilebilen Silverlight bizlerin karşısına çıktı. Bu Silverlight ‘ın sürümü ise 1,1 ‘dir. Artık animasyon işlemlerini ve çizimlerimizi yalnızca XAML ile değil C# veya VB ile de yapabiliyorduk. Bu özellik yazılımcıları Silverlight ‘a biraz daha çekmeye başladı. Bu ilgi otomatik olarak Silverlight ‘ın özelliklerini daha iyi keşfedilmesine yol açtı. Bunlardan belki de en dikkat çekeni animasyon, grafik ve video işlemlerinde verdiği performanslar olmuştur. Bu performansta Add-in ile Silverlight.js JavaScript ’i arasında güzel uyum ön plandadır. Fakat video işlemlerinde alınan performans biraz sıra dışıydı. Bu sıra dışılığı sağlayan etmen ise HD Video ‘ları çok iyi performans ile göstermesini sayabiliriz.

Yukarıdaki paragraflarda genel olarak Silverlight ‘ın bu günkü durumuna gelene kadar hangi ilerlemeleri gösterdiğini özetlemiş bulunduk. Şimdi ise Silverlight 2.0 ile ilgili özelliklere değinmeye başlayalım.

Silverlight 2.0 ile gelen en büyük özellik form kontrollerinin artık kullanılabilmesidir. Formumuza sürükle bırak işlemleri ile formumuzun üzerine bırakabilmekte ve rahatça kullanmamıza olanak tanınmıştır. Peki, tek değişiklik form kontrollerimidir. Tabii ki de değil. Arka planda işleyen yönetilebilir kod tarafında bulunan birçok fonksiyon ve sınıfta da değişiklikler, eklemeler ve çıkarmalar olmuştur. Bu değişikliklerin neler olduğuna bir sonraki yazımızda değinmeye çalışacağız.

Genel olarak bir kez daha Silverlight ‘ın genel yapısına değinmeye çalışalım.

Silverlight, web uygulamalarında görüntü ve animasyon içerikleri bakımından yüksek kalitede son kullanıcı ara yüzleri geliştirmemize olanak tanıyan bir yapıdır. Silverlight, Flash uygulamalar ile alışmış olduğumuz web üzerinde ki animasyon ve enteraktif işlemleri daha performanslı biçimde kullanılabilmemize olanak tanımıştı. Bu olanaklar Silverlight ilk çıktığı günden bu yana kullanıcılar tarafında sıkça test edilmiştir. İlk yapılan uygulamalar JavaScript desteği ile olmuştur. Tabii bu JavaScript ile yapılmış uygulamalar XAML ’in gücüde alınarak çok daha başarılı uygulamalar çıkması sağlanmıştır.

XAML veya Silverlight gibi kavramların ortaya çıkmasına sebep olan yapı ise .net Framework ile aramıza katılan Windows Presentation Foundation olmuştur. WPF, masaüstü uygulamalarında grafik kartını da kullanarak oldukça performanslı ve farklı uygulamalar geliştirmemizi sağlayabilmektedir. WPF ile hazırlanmış form kontrollerinin en çok kullanılanları ise Windows Vista, Office 2007 ve Windows Live Messenger olmuştur. Bu uygulamaların formları WPF yardımı ile yapılmıştır. Aynı zamanda WPF ile tarayıcı uygulamalarının da yapılması mümkündür. Bu tür uygulamalara da XBAP denmektedir. Bu terimler hakkında daha önceden yayınlanmış yazılarımızı okuyabilirsiniz.

Silverlight ile WPF arasındaki bağlantı ise WPF/E ile ortaya çıkmıştır. WPF/E, WPF ’i web ortamında herkesin kullanabilmesi için düşünülen bir ürün olarak ortaya çıkmıştır. Daha sonrasında bu ürün Silverlight adını alarak aramıza katılmış ve 2.0 sürümüne kadar gelmiştir. İşte Silverlight ile WPF arasındaki temel ilişki bu yöndedir.

Silverlight ‘ın genel gelişimi incelenildiğinde özelliklerinin gittikçe WPF ‘ye benzediği su götürmez bir gerçek olarak karşımıza çıkmaktadır. Bu durum webte de ortaya çıkacak sonuç ise alıştığımız animasyon işlemlerinin performanslarında yaklaşık 3 ile 4 kat arasındaki artışlara sebep olacaktır.

Silverlight, 2.0 teknoloji ile nasıl bir görünüme kavuştuğuna değinmeye çalışalım.

WPF ve XAML ile yaratılmış olan grafik, animasyon ve zengin metin dosyaları Silverlight bünyesinde XAML ‘in taşıyıcılığı sayesinde sorunsuz bir biçimde kullanılabilmektedir.

Silverlight uygulamalarında dünyaca kabul edilmiş JavaScript dilleri kullanılmaya devam etmektedir. JavaScript sayesinde Silverlight uygulamalarında WPF unsurlarını daha da kuvvetlendirebilmiş olarak kullanabiliriz.

Silverlight ile hazırlamış olduğumuz tasarımlar popüler olan bütün web tarayıcılarında sorunsuz bir biçimde çalışmaktadır. Hatta en iyi performansı Mozilla Firefox ile vermektedir.

Silverlight JavaScript ile yapmış olduğu uyumu Asp.net ve AJAX ile de sağlamaktadır. Bu uyumun getirdiği katkıların başında MVC yapısının daha rahat kullanılabilmesi ve oluşturulan yeni fonksiyonların sınıflarda tutularak çağırılabilmesine olanak tanımasıdır.

.net Framework ile alışılagelmiş programlama modelleri ve araçlar kullanılabilmektedir. Silverlight uygulamalarında ilk zamanlarda yalnızca JavaScript kullanılırken şu anda C#.net ve VB.net ‘te sorunsuz bir biçimde kullanılabilmektedir. Bu kullanılma olanağı ile de uygulamaların web üzerinde aldıkları performanslarında gözle görülür bir artış olmuştur.

Silverlight kullanırken yapacak olduğumuz veri tabanı sorgularını daha performanslı bir biçimde yapmak için LinQ desteği de getirilmiştir.

Asp.net uygulamalarında kullanılmak istendiğinde Asp.net 3.5 ext. ile daha önceden hazırlanmış olan bileşenlerin kullanılması mümkün kılınmıştır.

Bu özelliklere göz attıktan sonra 2.0 sürümü ile Silverlight ‘a gelen yeni elementlere göz atmakta fayda vardır. Bu unsurlara göz atarken yazı ile incelemek yerine grafik üzerinde incelemek çok daha mantıklı olacaktır.



Yukarıdaki grafiklere dikkat ettiyseniz veri yapıları için LinQ, form kontrolleri için WPF, web servisleri için WCF eklenmiştir. DLR, BCL, CLR ve DRM yapıları da Silverlight yapısına eklenmiş bulunuyor. XAML ile taşıyıcı katman olarak yerini sağlam bir biçimde korumuştur.

Silverlight uygulamaları tarayıcılarda derlenirken yönetilebilir kodlar sayesinde performans konusunda önemli bir artış gözlenmektedir.

Eğer Silverlight uygulamaları tarayıcıda çalıştırılmak istendiğin de Plug-in yüklü değilse ekranda Silverlight logosu gözükecek ve bu logoya tıklandığı taktirde Silverlight eklentisi indirilecek ve sistemimize kurulacaktır.

Silverlight uygulamaları yaratılmak istendiğinde, web sayfaları HTML ve WPF elementler ile birlikte oluşturulmaktadır. Bu uygulamalarda daha özel grafikler ve çizim işlemleri için ise XAML yardımı ile geliştirebilmemiz mümkündür.

Silverlight uygulamaları geliştirmek istediğimizde ise Visual Studio 2008 veya Expression Blend ile geliştirilebilmesi mümkündür. .net IDE ‘si ile C# uygulamaları geliştirmek istediğimizde ise aşağıdaki işlemleri yapmamız gerekmektedir.



Silverlight 2.0 ile uygulama açmak istediğimizde ise daha önceden olduğundan farklı olarak web üzerinde yayınlanacak olan Silverlight uygulamaları açmamıza olanak tanımaktadır. Bir diğer seçenek ise daha önceden yaptığımız gibi bir test sayfası yaratarak geliştirilen uygulamalar yapılabilmektedir. Bu iki seçenek ile ilgili ekran görüntüsü ise aşağıdaki gibidir.



Daha önceden bahsedilen gibi Silverlight 2.0 ‘a form kontrolleri eklenmiştir. Bu form kontrolleri de uygulama açıldığı zaman araç kutusunda yer almaktadır. Bu kontroller ise aşağıdaki gibidir.



Bu form kontrollerini ise özelleştirmek istediğimiz zaman devreye Expression Blend girmektedir. Bu ürün ile Silverlight arasındaki ilişki XAML iledir. Blend ile özelleştirdiğimiz form kontrollerine ait özellikler XAML ile Silverlight uygulamasına taşınabilmektedir.

Peki, uygulamaları Expression Blend ile uygulama geliştirmek istediğimiz zaman izlememiz gereken yok yeni projeyi seçerek Silverlight uygulamalarından biri seçilerek uygulamayı yarat seçeneği seçilir.



Silverlight 2.0 uygulamasına form kontrollerinden birini eklediğimiz zaman ise karşımıza aşağıdaki gibi bir görünüm çıkmaktadır. Bu arada henüz VS2008 uygulamasında araç kutusundan sürüklenen bileşen form üzerinde direk oluşmamaktadır. Bu kontrol oluşturmak istiyorsak XAML tarafına sürüklememiz yeterli olacaktır. XAML kod bölümünde bu kontrole ait olan kod otomatik olarak oluşturulacaktır.



XAML kod tarafı



Asp.net ile Silverlight uygulaması eklemek istediğimizde ise Asp.net3.5 ext. ile gelen bileşenler bizlere oldukça yardımcı olacaktır. Örneğin aşağıdaki ekran görüntüsü Silverlight Streaming video ile ilgili bir bileşenin *.aspx
dosyasına eklenmesi sonucu oluşan görüntüdür.



Yukarıdaki bilgiler ışığında temel olarak Silverlight 2.0 ‘ı tanımış oluyoruz. Yazımızda bahsettiğimiz değişen fonksiyon bilgilerini bir sonraki yazımızda belirteceğiz.

Yazımıza Silverlight 2.0 VS tools kurulurken karşılaşılan hatanın çözümüne değinerek devam edelim. Silverlight 2.0 uygulamaları geliştirmek için gerekli olarak aracı kurmak istediğimizde karşımıza bir hata ekranı çıkmaktadır. Bu hata ekranı aşağıdaki gibi gözükmektedir.



1. Visual Studio 2008 RTM is not installed.
2. The Web Authoring feature of Visual Studio is not installed.
3. A previous version of the Silverlight Runtime is installed.
4. A previous version of the Silverlight SDK is installed.
5. The Visual Studio Update KB949325 is installed.
6. A previous version of Silverlight Tools is installed.

Bu sorunun çözümü ile ilgili en kısa cevap daha önceden yüklenmiş olan Silverlight 2 beta1 SDK yı silmeniz ve VS aracını tekrardan kurmayı denemeniz olacaktır.

Eğer ki hala çözüm oluşmadıysa aşağıdaki adımların takip edilmesi gerekmektedir.

İlk olarak Visual Studio ‘nun tamamlanmış sürümünün bilgisayarımızda kurulu olması gerekmektedir. Bu ürünler Standart, Professional, Team System ’dır. Eğer ki Visual Studio ‘nun express ürünlerinden birini kullanıyorsanız maalesef Silverlight 2.0 uygulamasını yalnızca Expression Blend ile geliştirebileceksiniz. Ama VS ile ben uygulama geliştirmek istiyorum diyorsanız bu takdirde yukarıda bahsettiğimiz ürünlerin deneme sürümlerini kurarak uygulama geliştirmeniz mümkün olacaktır. Bu işlemler gerçekleştirildiği taktirde birinci adımımızı tamamlamış olacağız.

İkinci adımda ise Web Authoring Component of Visual Studio ‘nun kurulu olması gerekmektedir. Peki, bu bileşenin kurulu olup olmadığını nasıl anlayabiliriz. Program ekle kaldır menüsünden kurulu olan programlara göz atılarak kontrol edilebilir.



Eğer bu bileşen bilgisayarınızda kurulu değilse Visual Studio DVD ‘nizin içerisinde WCU\WebToolsCore yolu ile bileşenin kurulum dosyasına erişebilmeniz mümkündür. Bu bileşenin sisteminize kurduğunuz zaman ikinci adımı da tamamlamış olacaksınız.

Üçüncü adımda ise bilgisayarımızda Visual Studio güncelleştirmelerinden KB949325 ‘in yüklü olmaması gerekmektedir. Bu güncelleştirmenin yüklü olup olmadığını anlamak için ise program ekle kaldır menüsünde güncelleştirmeleri göster seçeneğine bakarak bu güncelleştirmenin olup olmadığını kontrol ederiz. Eğer varsa da tekrardan tool ile kurulabilmesi için silmemiz gerekmektedir.



Bu seçeneği de hallettikten sonra bir sonraki seçenek olan eski versiyon SDK ve template ‘lerin silinmesi gerekmektedir. Bu işlem için yine program ekle kaldır menüsü kullanılacaktır. Bu çıkan listeden Visual Studio 2005 Silverlight Template ‘in silinmesi gerekmektedir.



Bu aracın kaldırılması uzun sürebiliyor. Kaldırılması için beklenilmesi gerekmektedir.

Eğer Silverlight VS tools Beta1 kurmadan SDK ‘sını kurduysanız bu uygulamaları da bilgisayarınızdan kaldırmanız gerekmektedir. Çünkü bu uygulama kendi bilgilerini Visual Studio üzerine kaydedecektir. Bunu silmemizin nedeni ise VS2008 aracını kurduğumuz zaman bu SDK ‘nın otomatik olarak kurulacak olmasıdır.

Yukarıdaki işlemleri gerçekleştirdikten sonra ise tek yapmamız gereken Silverlight 2.0 Visual Studio tools Beta1 ‘i kurmak olacaktır. Bu kurulumun sonucunda Silverlight dosyalarının görüntüleyebilmemiz için gerekli olan yürütme dosyası, SDK ’sı ve Visual Studio içerisinde yer alacak olan form kontrolleri sistemimize yüklenmiş olacaktır.

Sonuç olarak bu yazımızda Silverlight ‘ın gelişim sürecini, Silverlight 2.0 ile gelen temel yenilikleri ve kurulum esnasında en çok karşılaşılan hatayı nasıl çözeceğimize değinmiş olduk.

Hata çözümlemede ekran görüntüleri konusunda yardımını aldığım BradleyB ’ye teşekkürlerimi sunuyorum.

Umarım yararlı olmuştur.