Silverlight 2 etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Silverlight 2 etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

Perşembe, Mart 04, 2010

Silverlight: Merged Dictionaries

Silverlight ile uygulama geliştirirken resource dosyalarını kullanmanın en pratik yoludur MergedDictionaries. Ancak bunu kullanabilmek için çok az XAML bilmek gerekmektedir ve kullanım şekli aşağıdaki gibidir.

< ResourceDictionary >
    < ResourceDictionary.MergedDictionaries >
        < ResourceDictionary Source="BlueResourceDictionary.xaml" / >
    < / ResourceDictionary.MergedDictionaries >
< / ResourceDictionary >


 Bazı uygulama geliştiriciler "bu kullanımı kod ile yapabilir miyiz?" ya da "nasıl yapabiliriz?" şeklinde sorular sormaktadırlar. Bu mümkündür ve kullanım şekli aşağıdaki gibidir.


 var dictionary = Application.Current.Resources; dictionary.MergedDictionaries.Clear();
var dict = new ResourceDictionary { Source = new Uri("Blue.xaml", UriKind.Relative) };
dictionary.MergedDictionaries.Add(dict);



Kolay gelsin...








Perşembe, Haziran 18, 2009

Silverlight 2.0 – SQL İşlemleri için WCF ve Linq To SQL Kullanım

Silverlight uygulamları RIA yapısında oldukları için direk sql işlemleri ile çalışmak yerine bunları bir servis olarak oluşturup kullanmamız önerilmektedir. Bu sebepten ötürü veri tabanı işlemlerimizi yapmak için ister Linq Data Model oluşturduktan sonra WCF servisine querynin yapılacağı metota bağlyoruz. Sonrasında Silverlight projesine Web service referance olarak ekledikten sonra gerekli işlemleri yaparak istediğimiz data kontrollerine ekleyebilinmesi mümkündür.

Sırası ile yapılması aşağıdaki adımları uygularsanız sizin projenizde sorunsuz bir biçimde çalışacaktır.

  • Silverlight projesi oluşturuyoruz.
  • Oluşturulan web projesine Linq To SQL Data Model ekliyoruz.
  • Oluşturulan web projesine WCF Service ekliyoruz ve aşağıdaki kodları interface ve sınıfa ekliyoruz.

IService1.cs

using System.Collections.Generic;
using System.ServiceModel;

namespace SQLData.Web
{
    // NOTE: If you change the interface name "IService1" here, you must also update the reference to "IService1" in Web.config.
    [ServiceContract]
    public interface IService1
    {
        [OperationContract]
        List<Customer> GetCustomerGetByLastName(string lastName);
    }
}

Service1.cs

using System.Collections.Generic;
using System.Linq;

namespace SQLData.Web
{
    // NOTE: If you change the class name "Service1" here, you must also update the reference to "Service1" in Web.config.
    public class Service1 : IService1
    {

        #region IService1 Members

        public List<Customer> GetCustomerGetByLastName(string lastName)
        {
            var ctx = new DataClasses1DataContext();
            var matchingCustomer = from cust in ctx.Customers
                                   where cust.LastName.StartsWith(lastName)
                                   select cust;
            return matchingCustomer.ToList();
        }

        #endregion
    }
}

  • Yukarıdaki işlemleri gerçekledikten sonra webconfigte ws service content özelliğini basic olarak değiştiriyoruz.
  • Uygulamayı derliyoruz.
  • Sİlverlight uygulaması üzerine ilk olarak Silverlight.Data.Control assembly ‘ını projeye ekliyoruz. Bu işlem silverlight uygulamasında DataGrid kontrolünü kullanabilmenize olanak tanıyacaktır.
  • Silverlight uygulamasına WCF service ini referans olarak ekliyoruz.
  • Sonrasında Page.xaml ve page.xaml.cs ‘e aşağıdaki kod bloklarını ekliyoruz

Page.xaml

<UserControl x:Class="SQLData.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:my="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
    Width="700" Height="300">
    <Grid x:Name="LayoutRoot" Background="White" ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition />
            <RowDefinition Height="30" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>       
        <TextBlock Text="Lütfen Arayacağınız kişinin soyadını giriniz.." Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left"/>
        <TextBox x:Name="txtLastName" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Right" Width="150" Text="Lütfen arayın..."/>
        <my:DataGrid x:Name="grd" AlternatingRowBackground="Beige" AutoGenerateColumns="True" Width="700" Height="200" CanUserResizeColumns="True" Grid.Row="1"/>
        <Button x:Name="btnClick" Grid.Row="2" HorizontalAlignment="Center" Content="Ara"/>
    </Grid>
</UserControl>

Page.xaml.cs

using System;
using System.Windows;
using System.Windows.Controls;

namespace SQLData
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
            Loaded += new RoutedEventHandler(Page_Loaded);
        }

        void Page_Loaded(object sender, RoutedEventArgs e)
        {
            btnClick.Click += new RoutedEventHandler(btnClick_Click);
        }

        void btnClick_Click(object sender, RoutedEventArgs e)
        {
            ServiceReference1.Service1Client webService = new SQLData.ServiceReference1.Service1Client();
            webService.GetCustomerGetByLastNameCompleted += new EventHandler<SQLData.ServiceReference1.GetCustomerGetByLastNameCompletedEventArgs>(webService_GetCustomerGetByLastNameCompleted);
            webService.GetCustomerGetByLastNameAsync(txtLastName.Text);
        }

        void webService_GetCustomerGetByLastNameCompleted(object sender, SQLData.ServiceReference1.GetCustomerGetByLastNameCompletedEventArgs e)
        {
            grd.ItemsSource = e.Result;
        }
    }
}

Yukarıdaki işlemleri adım adım yaptıktan sonra projemizi çalıştırdığımız da sorunsuzca uygulamamız çalışacaktır. Yaptığımız işlem ise soyadını girdiğimiz kullanıcıları DataGrid kontrolünde listelemektir.

Not: Linq To Sql Data Model de SQL Server 2008 veri tabanı örneklerinden AdventureWorks_LT veri tabanından Customer tablosunu kullandık.

Herkese mutlu günler diliyorum.

Ç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…

Perşembe, Mayıs 21, 2009

Visual Studio 2010 Beta1 – Kurulum ve Genel Bakış

Gün içerisinde çalışmanın dışında bir de Visual Studio 2010 ‘u kurmakla zaman harcadım. Web installer versionu ile kurduğum VS ‘in kurulum ile ilgili ekran görüntülerini size yazının devamında sunuyor olacağım. Bir çok yenilikle bizlere sunulacak olan VS2010 ilk Beta1 sürümü ile karşımızda. F# ‘tan paralel programlamaya ide güncellemesine kadar nice yeni özelliklerle biz yazılımlacıları mutlu etmeye geliyor.

Kurulum aşaması;

yeni1

yeni2

yeni3

yeni4

yeni5

Yukarıdaki işlemler sonucunda uygumala kurulmuş oluyor. Kurulum sonrası bizi karşılayan ekrandaki değişiklik oldukça köklüdür.

yeni6

yeni7

Zaman içerisinde daha detaylı bilgi vereceğim.

Pazar, Ocak 11, 2009

SmoothHD – Silverlight ile HD Video Streaming

Silverlight ‘ın HD görüntüleri çok hızlı bir şekilde yayınlayabilmesi özelliği (streaming) sayesinde bir çok görüntüyü çok yüksek kalitede artık internetten izleyebilme olanağına sahibiz.

Bu olanaklar ile yapılmış uygulamaları araştırırken www.Smoothhd.com isimli bir siteye denk geldim. Standart bir ADSL bağlantı hızı ile hiç takılmadan videoları izleyebilmemize olanak tanımaktadır. Ben içeriğini de çok beğendim. Sizlerinde beğeneceğini umarak paylaşmak istedim.

İyi eğlenceler…

Salı, Ekim 14, 2008

eclipse4SL – Eclipse for SilverLight

An Open Source, feature-rich and professional RIA application development environment for Microsoft Silverlight in Eclipse. Detail for click

Cumartesi, Ağustos 09, 2008

Sharepoint için Silverlight --> Blueprint

Çalıştığım şirketteki pozisyonum gereği belli bir süredir Sharepoint, WSS, MOSS gibi teknloljileri inceliyorum ve uygulama geliştiriyorum. Bu araştırmalarım esnasında Silverlight ile Sharepoint 'in entegreli olarak çalışabildiğine ve buna da Blueprint dendiğini gördüm.
Silverlight uygulamalarını sharepoint üzerinde çalıştırmak istediğimizde bizden hangi versiyon ile çalışmak istediğimiz hangi kod dosyası ile geliştirme yapmak istediğimiz gibi işlemleri yapmamızı istemektedir.
Kullanmak isteyenler ilk olarak bir Virtual PC indirmelidir. Daha sonra Microsoft tarafında 30 günlük deneme sürümü olarak hazırlanan ve içerisinde MOSS ve WSS kurulu olan Windows Server 2003 'ü indirmeleri gerekmektedir. Daha sonrasında ise yapacağınız uygulamalar geliştirmek olacaktır.
İyi çalışmalar...
Not: Blueprint ile ilgili daha ayrıntılı bilgi için İngilizce olarak yazılmış olan yazıda yer alan linklerden yararlanabilirsiniz...

Silverlight Blueprint for Sharepoint

Did you ever want to integrated Silverlight with SharePoint? Check out the brand new Silverlight Blueprint for SharePoint site:http://www.ssblueprints.net/sharepoint/ !

At U2U we've created the six samples of the Blueprint that illustrate the integration options. You can read more details on Patrick's blog and Karine's blog (she posted some screenshots). The Blueprint will also be announced by Bill Gates during the SharePoint Conference keynote later today, the SharePoint team blogged

Pazar, Temmuz 20, 2008

Silverlight 2.0 - DeepZoom Teknolojisi

Windows Presentation Foundation ile yapılmış ilk örnekleri incelerken kütüphaneler için yapılmış uygulamalar ve kullanılan teknikler bizleri oldukça şaşırtmıştı. Kütüphanelerde yer alan kitaplar çok yüksek çözünürlüklerle tarandıktan sonra kitap haline getirilerek kullanıma sunuluyordu. Fakat ufak bir detay dikkatimizi çekmekteydi. Bu da gözükecek olan resimlerin tamamı net değildi. Yalnızca yakınlaştırılan nokta netleşiyor, diğer noktalar ise bulanık kalmaya devam ediyordu. Bu yöntem sayesinde o çok büyük boyutlu resmin tamamının gösterilmesi için gerekli zaman beklenilmesi yerine kullanıcının istediği nokta netleştirilerek daha hızlı işlem yapılması sağlanmaktaydı.

Zaman ilerledikçe bu tür uygulamaları Silverlight ile de yapıldığını gördük. Fakat 1.x sürümü ile yapılan uygulamalarda çok uzun satırlarca JavaScript kodu yazılması gerektiği için geliştiricilerin tercih sıralamasında geride kalıyordu. Silverlight ‘ın 2.0 sürümüne ilişkin çalışmalarda bu güzel özelliğin kullanıcılar ve geliştiriciler tarafında çok beğenildiğinin fakat geliştirme kısmına gelindiğinde zorluklarından ötürü kaçınıldığının farkına varılmıştır. Bu düşünce sonucunda ise ek yazılımlar yardımı ile geliştiricilere yardım edilmesine olanak tanınmak istenmiştir.

Bu yazımızda Silverlight 2.0 ile gelen yeni özelliklerden birisi olan DeepZoom ‘u inceliyor olacağız. DeepZoom teknolojisi internet üzerinde gösterilmesi zor olabilecek çok büyük çözünürlükteki resimleri alıp o anda ekranda görebileceğiniz kadarını netleştirerek gösteriyor, teknik olarak bunu da resimleri parçalara ayırarak ve farklı çözünürlüklerde kaydederek yapıyor, böylelikle bir son kullanıcı rahatlıkla 2-3 GB’lık resimleri bile tek bir ekranda görüntüleyebiliyor. Özellikle HD Fotoğraflar ile birlikte bu teknolojinin daha fazla artacaktır.

DeepZoom fikrinin ortaya atılmasını sağlayan proje SeaDragon projesidir. Bu proje esnasında kullanılan tekniklerin tamamına yakını DeepZoom uygulamasında da kullanılmaktadır. Peki, DeepZoom ‘u nasıl elde edebiliriz. Microsoft ‘un web sayfası yardımı ile
bu linkten
indirilmesi mümkündür. 4.4 mb ‘lik bir kurulum dosyası indikten sonra bilgisayarımıza kurulum yapıyoruz. Kurulumdan sonraki ilk ekranda karşımıza aşağıdaki gibi bir ekran gelmektedir.



Kullanım ekranı Expression Blend ‘e oldukça fazla benzemektedir. Uygulamamızı oluşturmaya yeni bir proje oluştur seçeneğine tıkladıktan sonra karşımıza çıkacak olan ekrana tamam diyerek başlıyoruz.

Uygulamamızı nasıl oluşturacağımıza değinmeden önce DeepZoom ‘un kullandığı mantığı birde görüntüsel olarak incelersek daha mantıklı olacaktır. DeepZoom büyük bir resmin küçük bir parçasını net olarak kullanıcıya sunarken diğer kısımları sistemi yavaşlatmamak için net olarak göstermemektedir.


Resimden de dikkat edeceğiniz üzere büyük boyutlu bir tamamı ama daha küçük bir biçimde gösterilmektedir. Kullanıcı resmi kendisine yaklaştırdıkça odak noktası dışındaki noktalarda netleşerek büyük boyuttaki resmin netliğine kavuşacaktır.

DeepZoom ‘un çalışma mantığı ile ilgili bu ufak bilgiyi de edindikten sonra uygulama geliştirmeye devam edebiliriz. Şimdi yapmamız gereken yakınlaştırıp uzaklaştıracak olduğumuz resimleri uygulamamıza eklemek olacaktır.



Resimleri çalışmamıza ekledikten sonraki görüntü aşağıdaki gibi olacaktır.



Şimdi yapacağımız işlem ise arka plan olarak bir resmi seçtikten sonra onun üzerine diğer resimleri eklemek olacaktır. Bu işlem için Compose menüsünün kullanılması gerekmektedir.



Ekranımızda Layer View yazan bölümde ekranda yer alan resimlerimizin görünüp görünmemesini gibi özelliklerini ayarlayabiliyoruz.

Bunda sonra yapacağımız işlem ise uygulamanın yayınlanabilir duruma getirilmesi olacaktır. Export menüsüne tıkladıktan sonra karşımıza çıkan ekranda gerekli olan özellikler yer almaktadır.



Export butonuna tıkladığımız zaman ise uygulamamız hazır duruma gelmiş olacaktır. Uygulamayı kullanabileceğimiz seçenekler yayınlama işleminin hemen sonrasında bizlere sunulmaktadır.



Web uygulaması ile göster dediğimizde ise karşımıza oldukça iyi bir uygulama çıkacaktır.












Eğer ki Flash animasyon tamamlanmışsa üzerinde sağa tıkladıktan sonra play seçeneğini seçtiğiniz zaman yeniden görüntüleyebilmeniz mümkündür.

Uygulamamızın çalışması tam istediğimiz gibi görünüyor. Ama kafamıza takılan birkaç soru var. “Uygulamanın çalışmasını sağlayan dosyanın içerisinde neler var?” , ”Hangi kodlar arka planda oluşmuş?” Bu soruların cevapları için ilk olarak uygulanın oluşturulduğu klasöre gitmemiz gerekmektedir. DeepZoom uygulamalarını
C:\Users\Turhal\Documents\Expression\Deep Zoom Composer Projects yolundaki klâsöre oluşturmaktadır. Biz uygulamamızı bulabilmek için bu dizin içerisinden kendi projemizi bularak sonrasında
source images isimli klasörün içerisine bakarak oluşturulan proje dosyalarını ve resimleri bulabilmemiz mümkündür.



Eğer ki uygulamamızın kod tarafında bir değişiklik yapmak istersek DeepZoomProject klasörünü kullanabilir. Web tarafında kullanmamız gereken dosyalar için ise
DeepZoomProjectWeb klasörü isteklerimizi karşılamaya yetecektir.

Kod tarafında nelerin oluşturulduğuna göz atalım şimdide. İlk olarak projemizde resimleri görüntüleyebildiğimiz
Page.XAML dosyasının içerisindeki kodlara göz atıyoruz.

Açtığımız anda dikkatimizi çeken şey Silverlight 2.0 ile gelen MultiScaleImage nesnesinin kullanıldığına ve çağırılan resimlerin bu nesne ile oluşturulan alanın içerisinde gözükmesi sağlandığını görürüz.


Uygulamamızda gösterilen ekranın kod tarafında oluşturulan C# kodlarına göz atarsak…

C#


using System;
using System.Collections.Generic;
using
System.Linq;
using System.Net;
using System.Windows;
using
System.Windows.Controls;
using System.Windows.Documents;
using
System.Windows.Input;
using System.Windows.Media;
using
System.Windows.Media.Animation;
using System.Windows.Shapes;


namespace DeepZoomProject
{
    public partial class Page : UserControl

   
{

        Point lastMousePos = new Point();

        double _zoom = 1;
        bool
mouseButtonPressed = false;
        bool mouseIsDragging = false;
        Point
dragOffset;
        Point currentPosition;

        public double ZoomFactor
        {

           
get { return _zoom; }
            set { _zoom = value; }
        }

        public Page()

       
{
            InitializeComponent();

            //
            // Blend yardımcı ile XAML
özellikler oluşturuluyor.
            //
            this.msi.Source = new
DeepZoomImageTileSource(new Uri("GeneratedImages/dzc_output.xml", UriKind.Relative));


            //
            // MultiScaleImage yükleniyor
            //
            this.msi.Loaded += new
RoutedEventHandler(msi_Loaded);

            //
            // MultiScaleImage yüklendikten
sonra diğer bütün resimler yüklenmeye başlıyor
            //
            this.msi.ImageOpenSucceeded
+= new RoutedEventHandler(msi_ImageOpenSucceeded);

            //
            // Klavyeden
basılan tuşları algılıyor.
            //
            this.MouseMove += delegate(object sender,
MouseEventArgs e)
            {
                if (mouseButtonPressed)
                {
                    mouseIsDragging =
true;
                }
                this.lastMousePos = e.GetPosition(this.msi);
            };

            this.MouseLeftButtonDown
+= delegate(object sender, MouseButtonEventArgs e)
            {

               
mouseButtonPressed = true;
                mouseIsDragging = false;
                dragOffset = e.GetPosition(this);

               
currentPosition = msi.ViewportOrigin;
            };

            this.msi.MouseLeave +=
delegate(object sender, MouseEventArgs e)
            {
                mouseIsDragging = false;

           
};

            this.MouseLeftButtonUp += delegate(object sender,
MouseButtonEventArgs e)
            {
                mouseButtonPressed = false;
                if (mouseIsDragging
== false)
                {
                    bool shiftDown = (Keyboard.Modifiers & ModifierKeys.Shift)
== ModifierKeys.Shift;

                    ZoomFactor = 2.0;
                    if (shiftDown) ZoomFactor
= 0.5;
                    Zoom(ZoomFactor, this.lastMousePos);
                }
                mouseIsDragging =
false;
            };

            this.MouseMove += delegate(object sender, MouseEventArgs
e)
            {
                if (mouseIsDragging)
                {
                    Point newOrigin = new Point();

                   
newOrigin.X = currentPosition.X - (((e.GetPosition(msi).X - dragOffset.X) /
msi.ActualWidth) * msi.ViewportWidth);
                    newOrigin.Y = currentPosition.Y -
(((e.GetPosition(msi).Y - dragOffset.Y) / msi.ActualHeight) * msi.ViewportWidth);

                   
msi.ViewportOrigin = newOrigin;
                }
            };

            new MouseWheelHelper(this).Moved
+= delegate(object sender, MouseWheelEventArgs e)
            {
                e.Handled = true;

               
if (e.Delta > 0)
                    ZoomFactor = 1.2;
                else
                    ZoomFactor = .80;


                   
Zoom(ZoomFactor, this.lastMousePos);
            };
        }

        void msi_ImageOpenSucceeded(object
sender, RoutedEventArgs e)
        {
        }

        void msi_Loaded(object sender,
RoutedEventArgs e)
        {
            Zoom(.5, new Point(this.ActualWidth / 2, this.ActualHeight
/ 2));
        }

        public void Zoom(double zoom, Point pointToZoom)
        {

           
Point logicalPoint = this.msi.ElementToLogicalPoint(pointToZoom);
            this.msi.ZoomAboutLogicalPoint(zoom,
logicalPoint.X, logicalPoint.Y);
        }


    }
}



Şeklinde oluşturulduğunu görürüz. Yukarıdaki kod bloğunda bizleri dikkatini çeken bölüm farenin hareketi sonucunda görüntünün nasıl hareket ettiği bloktur
C#



this.MouseMove += delegate(object sender, MouseEventArgs e)
{
   
if (mouseIsDragging)
        {
           
Point newOrigin = new Point();
           
newOrigin.X = currentPosition.X - (((e.GetPosition(msi).X - dragOffset.X) /
msi.ActualWidth) * msi.ViewportWidth);
           
newOrigin.Y = currentPosition.Y - (((e.GetPosition(msi).Y - dragOffset.Y) /
msi.ActualHeight) * msi.ViewportWidth);
           
msi.ViewportOrigin = newOrigin;
       
}
};


Yukarıdaki kod bloğunda ekran üzerindeki son pozisyonu alındıktan sonra fare ile sürüklenen, yakınlaştırılan değerleri alınarak yeni değerlere atanıyor. Sonrasında ise ekran üzerindeki yeni yeri belirlenebiliyor.

Projemizde oluşturulan kod bloklarından biride Farenin sürükleme topu ile yapılmış işlemlerin nasıl algılanacağına ait sınıftır.

C#


using System;
using System.Net;
using System.Windows;

using System.Windows.Controls;
using System.Windows.Documents;
using
System.Windows.Ink;
using System.Windows.Input;
using
System.Windows.Media;
using System.Windows.Media.Animation;
using
System.Windows.Shapes;
using System.Windows.Browser;

namespace
DeepZoomProject
{
    // Courtesy of Pete Blois
    public class
MouseWheelEventArgs : EventArgs
    {
        private double delta;
        private
bool handled = false;

        public MouseWheelEventArgs(double delta)
        {

           
this.delta = delta;
        }

        public double Delta
        {
            get { return
this.delta; }
        }

        // Use handled to prevent the default browser
behavior!
        public bool Handled
        {
            get { return this.handled; }
            set
{ this.handled = value; }
        }
    }

    public class MouseWheelHelper

   
{

        public event EventHandler<MouseWheelEventArgs> Moved;
        private
static Worker worker;
        private bool isMouseOver = false;

        public
MouseWheelHelper(FrameworkElement element)
        {

            if (MouseWheelHelper.worker
== null)
            MouseWheelHelper.worker = new Worker();
            MouseWheelHelper.worker.Moved
+= this.HandleMouseWheel;
            element.MouseEnter += this.HandleMouseEnter;

           
element.MouseLeave += this.HandleMouseLeave;
            element.MouseMove += this.HandleMouseMove;

       
}

        private void HandleMouseWheel(object sender, MouseWheelEventArgs
args)
        {
            if (this.isMouseOver)
            this.Moved(this, args);
        }


       
private void HandleMouseEnter(object sender, EventArgs e)
        {
            this.isMouseOver
= true;
        }

        private void HandleMouseLeave(object sender, EventArgs
e)
        {
            this.isMouseOver = false;
        }

        private void
HandleMouseMove(object sender, EventArgs e)
        {
            this.isMouseOver = true;

       
}

        private class Worker
        {
            public event EventHandler<MouseWheelEventArgs>
Moved;
           

            public Worker()
            {

                if (HtmlPage.IsEnabled)
                {

                   
HtmlPage.Window.AttachEvent("DOMMouseScroll", this.HandleMouseWheel);

                   
HtmlPage.Window.AttachEvent("onmousewheel", this.HandleMouseWheel);

                   
HtmlPage.Document.AttachEvent("onmousewheel", this.HandleMouseWheel);
                }


            }

            private void HandleMouseWheel(object sender, HtmlEventArgs args)

           
{
                double delta = 0;

                ScriptObject eventObj = args.EventObject;


                if (eventObj.GetProperty("wheelDelta") != null)
                {
                    delta = ((double)eventObj.GetProperty("wheelDelta"))
/ 120;

                    if (HtmlPage.Window.GetProperty("opera") != null)
                    delta
= -delta;
                }
                else if (eventObj.GetProperty("detail") != null)
                {

                   
delta = -((double)eventObj.GetProperty("detail")) / 3;

                    if (HtmlPage.BrowserInformation.UserAgent.IndexOf("Macintosh")
!= -1)
                    delta = delta * 3;
                }

                if (delta != 0 && this.Moved !=
null)
                {
                    MouseWheelEventArgs wheelArgs = new MouseWheelEventArgs(delta);

                   
this.Moved(this, wheelArgs);

                    if (wheelArgs.Handled)
                    args.PreventDefault();

               
}
            }
        }
    }
}

Bu sınıfta ise farenin kaydırma topu ile yapılan hareketleri algılayarak uygulamamıza ait sınıfın içerisinde oluşturulan yakınlaştırma ve uzaklaştırma ile ilgili kod bloğunda kullanılmaktadır.

Sonuç olarak Silverlight 2.0 ‘ın yeni özelliklerinden olan DeepZoom ‘u incelemeye çalıştık. Çok büyük boyutlardaki resimleri web uygulamalarında tamamını göstermek yerine yaklaştırdıkça belirli alanlarını göstererek performansı nasıl arttırabileceğimize değinmeye çalıştık.

Bir sonraki Silverlight makalemizde ise MultiScaleImage kontrolü otomatik olarak değilde kendimiz kullanarak uygulama geliştirmek istersek nasıl yapabileceğimize değinmeye çalışacağız.

Umarım yararlı olmuştur.
turhal.temizer@csharpnedir.com

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

Cuma, Haziran 20, 2008

Free Silverlight Datagrid from DevExpress

header_top

The folks at DevExpress are releasing a FREE DataGrid for Silverlight.

Here are come of the features.....

  • Data Grouping against multiple Silverlight Grid columns
  • Data Sorting against multiple Silverlight Grid columns
  • Comprehensive Summary Computation support against multiple Silverlight Grid columns
  • Column Movement
  • Column Resizing
  • Column Auto-Width
  • Row Editing
  • Row Preview (with animation)
  • Template Support (for cell content, cell editing, row preview and headers)
  • Auto Height Support for cells, headers, and totals.
  • Virtual StackPanel Row Container (simply means we are able to handle an unlimited number of rows)
  • Focused Row and Focused Cell
  • Multi-Row Selection Cell Text Wrapping
  • Vertical/Horizontal Lines
  • Multiple column types/editors

Click here for more info

Cuma, Mayıs 02, 2008

Silverlight 2.0 - Uygulama Alanımızın Kontrol Edilmesi

Silverlight 2.0 ile uygulamalar geliştirmeye bir önceki yazımızda başlamıştık. İlk olarak Silverlight 2.0 ‘ın proje dosyaları konusunda bize sağlamış olduğu yeniliklere göz attıktan sonra 2.0 sürümü ile eklenmiş olan Silverlight kontrollerinden yararlanarak ilk uygulamamızı geliştirmiştik. Uygulamamızda tek bir buton yer alıyordu ve üzerine tıklandığı zaman içeriğini yönetilebilir kod tarafından değiştirebiliyorduk. Bu ufak örneğimiz ile Silverlight 2.0 dünyasına giriş yapmış bulunuyoruz. Hazırlamış olduğumuz web uygulamalarında ekranımızı istediğimiz oranda yönetebilmemiz gerekmektedir. Web formumuzda yer alan kontrollerimizi belirli alanlarda bulundururken, formumuzun çeşitli bölgelerine farklı farklı kontroller eklememiz gerekmektedir. Yukarıda vermiş olduğumuz bilgileri göz önünde tutarak bu yazımızda web formumuzu nasıl yönetebileceğimize değinmeye çalışacağız.

Web Formu Yönetebilmek

Windows Presentation Foundation ve Silverlight kullanmış olduğumuz formlar üzerinde sınırları zorlayacak ölçülerde değişiklik yapılmasına olanak tanımaktadırlar. Geliştiriciler için sağlanan bu kolaylıklar sayesinde ekran üzerinde yer alan bir kontrolün hangi noktada nasıl duracağından üstüne tıklandığında ne tür animasyonlar yapacağına kadar birçok kullanıcı arayüzü tabanlı işlem yapabiliyoruz. Ayrıca forma eklediğimiz kontrollerin dinamik animasyonlar alabilmesini ve internet tarayıcımızın boyut değişikliği durumunda form üzerinde yer alan kontrollerimizin de form üzerinde otomatik olarak boyutlanmasını sağlayabiliyoruz. Geliştiriciler Windows Presentation Foundation da form yüzeyinde yer alan kontrolleri istediğimiz şekilde boyutlandırarak kullanabiliyordu. WPF ‘te de form yüzeyi yönetilirken en çok kullanılan panel yapıları Silverlight Beta1 ‘in içerisine eklenmiştir. Şimdi bu panellerden en önemli üç tanesini açıklamaya çalışalım.

Canvas
StackPanel
Grid

Canvas Panel

Canvas panel ’i en basit anlamda açıklamaya çalışırsak, form üzerine eklemiş olduğumuz kontrollerin pozisyon ve koordinat bilgilerini belirtebildiğimiz en temel form yüzeyidir.

Canvas nesnesinde kullanılan öğeler, XAML dosyadan çağırılan “Attached Property” kontrollerin pozisyonlarına ait bilgilere sağda, solda veya ortada biçiminde bilgiler aktarılmaktadır.

Attached Property ‘de tutulan veriler form üzerinde izin verildiği düzeyde işlem yapabilmemize olanak tanımaktadır. Canvas içerisinde, bir kontrolün form üzerinde hangi noktada tutulacağına ilişkin bilgileri, “Left”, “Top” v.b. özelliklerine form koordinatlarına ait değerleri verilerek çok basit olarak form üzerindeki yerlerini belirlememize olanak tanımaktadır. Şimdi çok basit bir örnek verelim. Canvas yüzeyimizin üzerine iki adet buton ekleyeceğiz. Eklemiş olduğumuz kontrollerin canvas üzerindeki koordinat özelliklerine Left için 50 Top için ise 50 ve 150 değerlerini vereceğiz. XAML kod tarafında belirttiğimiz özellikleri eklersek,


Canvas yüzeyinde kullanabileceğimiz koordinat noktalarına ilişkin bize sunulan özellikler,


Yukarıdaki gibidir. İki form kontrolümüzü uygulamamıza ekledikten sonra derlediğimiz zaman ise web tarayıcımızda aşağıdaki gibi bir görünüm elde ediyoruz.


Canvas yüzeyimiz internet tarayıcımızı her ne kadar büyültüp küçültürsek küçültelim belirtmiş olduğumuz boyut kadar ekran yer kaplayacaktır. Ayrıca canvas yüzey üzerinde yer alan kontrollere de canvas üzerindeki koordinat noktalarında kesin noktalar verdiğimiz için tarayıcı boyutunda yapılacak her türlü değişiklikte kontrollerin form üzerinde kalacakları noktalar aynı olacaktır.

Canvas yüzeyimize alternatif olarak geliştirilmiş olan StackPanel ve Grid yüzeylerde yer almaktadır. Bu yüzeyler dinamik olarak kontrollere özellik atayabilmemize olanak tanımaktadır.

StackPanel

StackPanel üzerine eklediğimiz kontroller aynı değerler almaları durumunda yüzeyi eşit satırlara bölecek ve bu satırlara ne kadar kontrol belirlediysek onları yerleştirilecektir. Şimdi bahsettiğimiz bu özellik içim XAML dosyaya bütün özellikleri aynı olan üç buton ekleyelim ve sonucu hep birlikte görelim.


Buton kontrollerimizi ekledikten sonra uygulamamızı derlediğimizde internet tarayıcımızda aşağıdaki gibi bir sonuç alırız.


Eğer biz satırlar olarak değil de sütun yani yatay biçimde sıralamak istiyorsak orientation(yönelim) özelliğini Horizontal(yatay) olarak belirleyeceğiz. StackPanel varsayılan olarak orientation özelliği Vertical(dikey) olarak belirlenmiştir.


Uygulamamızı derlediğimiz zaman web form üzerinde yer alan kontrollerin otomatik olarak koordinat noktalarını değiştirdiğini göreceğiz.


Grid

Grid kontrolü yüzey yönetimi konusunda karşımıza en kompleks yapı olarak çıkıyor. Grid, geliştiricilere çoklu satır ve sütun özelliklerini sumaktadır. Dinamik olarak satır ve sütun özelliklerini belirledikten sonra form kontrollerine atayarak kullanabilmemiz mümkündür.

Satır ve sütuna ait özellikleri tanımlayabilmemiz için <Grid.RowDefination> ve <Grid.ColumnDefination>özelliklerine değerler atayabilmemiz gerekmektedir. Bu iki özellik Grid kontrolünün alt özelliklerindendir.

Şimdi bu Grid kontrolünü ve alt özelliklerini nasıl kullanabileceğimize göz atalım.


XAML dosyamızda kodlarımızı ekledikten sonra uygulamamızı derlediğimizde internet tarayıcımızda aşağıda ki gibi bir ekran görüntüsü bizi karşılayacaktır.


Grid kontrolünü kullanarak çok satır ve sütun kullanımı öğrenmiş oluyoruz. Fakat grid kontrolü ile ilgili değinecek olduğumuz bir nokta daha eğer form kontrollerinin boyutlarını tarayıcı ile otomatik olarak şekillenmesini istiyorsak Height ve Width özelliklerine Auto yerine geçen “*” ‘ı koymamız yeterli olacaktır.

Web Formda Panellerin Kullanıma Göre Sıralanması

Web formumuzun alanını iki satıra böleceğiz. Bu bölme işlemimizi yapmamızın amacı üst satıra arama bölümü yaparken alt bölümü genel bilgilendirme ekranı olarak belirleyeceğiz. Peki, biz bu işlemi satıra bölmeden de yapamaz mıydık diye kafanıza bir soru takılır. Cevabı yapabilirdik olur ama yapmış olduğumuz tasarımın sonucunda kullanıcılar internet tarayıcısı boyutlarını değiştirdikleri takdirde karşılaşacakları görüntü hiçte hoş olmaya biliyor. Göze güzel gözükmemesinin sebebi işlemlerimizi tek satırda yapacağız için ya satır ve sütuna tek değer vereceğiz ya da değerlerini otomatik olarak aldıracağız. Bu iki durumda da istenilen verim sağlanamayacağı için alanımızı iki parçaya bölüyoruz. Üst satırımızın yüksekliği özelliğine “40” değerini verirken alt satırımızın yüksekliği değerine otomatik olarak şekillenebilmesi için “*” değerini veriyoruz. Ayrıca ayırdığımız alanı görebilmemiz için Grid kontrolümüzün çizgi değerlerini de True değerine getiriyoruz.


Grid de oluşturmuş olduğumuz satır ve sütunları göstermesini istediğimiz için uygulamamız boş olduğu halde yalnızca bu çizgileri gösterecektir.


Şimdi Grid kontrolünün içerisine yeni bir alt kontrol daha ekleyelim ve bu kontrolümüzün içerisine sütunları da ekleyeceğiz. Ayrıca Grid kontrolümüzün çizgilerini yine açık tutuyoruz.


Uygulamamızı derlediğimiz zaman internet tarayıcımızda karşılaşacak olduğumuz ekran görüntüsü aşağıdaki gibidir.


Yukarıda belirttiğimiz satır ve sütun özellikleri HTML tablolardan alışık olduğumuz satır ve sütunlar ile aynı mantıkta çalışmaktadır. Bu ufak notu aklınızdan çıkarmazsanız çok daha kolaylıkla işlemlerinizi yapabilirsiniz.

Web formumuzun alanını daha rahat kullanabilmek için parçalara böldüğümüze göre artık form kontrollerimizi uygulamamıza eklemeye başlayabiliriz. <Border> kontrolü ile arama çubuğumuz yanında bir tasarım oluşturacağız ve border kontrolümüzün içerisinde yazı gözükmesi için >TextBlock> kontrolünü ekliyoruz. Arama yapabilmemiz için içerisi kullanıcı tarafından doldurulacak bir kontrol eklememiz gerekmektedir. Bunun için <WatermarkedTextBox> ekliyoruz. Son olarak ta alanımızın alt kısmının boş gözükmemesi için bir <TextBlock> daha ekliyoruz.


Uygulamamızı çalıştırdığımızda ise aşağıdaki ekran görüntüsünü elde ederiz.


Uygulamamızın Boyutunun Dinamik Olarak Değiştirilebilmesi

XAML dosyamızdaki kodları eklerken projenin boyutunu elimizle giriyoruz ve bu girdiğimiz boyut doğrultusunda uygulamalarımız oluşmaktadır. Eğer bu boyut sabitleme işlemleri ile devam edersek bizim form kontrollerimize atadığımız otomatik boyutlandırma özelliklerinin hiç biri aktif olmayacaktır. Aktif olmayacaktır sözünde anlatmak istediğimiz nokta, uygulamamızın içeriğinin boyutunu belirli sınırlar içerisinde tuttuğumuz için kullanıcılar internet tarayıcılarında herhangi bir boyut değişikliği yaptığında belirli sınırların dışına çıkmadığını görecektir. Uygulama penceresini küçülttüğünde kontrollerin dışarıda kaldığına ya da büyülttüğünde ise arka plan renginin yerine uygulama sınırları dışında beyaz bir ekran olduğunu göreceklerdir.

Şimdi bu sorunu ortadan kaldırabilmemiz için yollar arayalım.
İlk olarak uygulamamızın genişliğini sabit tutarken boyutunu daraltmayı deniyoruz.


Bu değişiklik sonrasında uygulamamızı derlediğimizde aldığmız görüntü aşağıdaki gibi olacaktır.


Dikkat edeceğiniz üzere uygulamamızda hala sınırların dışında beyazlıklar gözükmektedir. Ayrıca internet tarayıcımızın boyutunu değiştirdiğimizde kontrollerimizin yerlerin sabit kaldığına dikkat çekmek isterim.

Bu durumda aklımıza şöyle bir çözüm geliyor. HTML sayfaları hazırlarken mecbur kalmadıkça formumuzun boyutunu belirlemezdik. Kullandığımız bu tekniğin en büyük avantajı da sayfamızın internet tarayıcılar üzerinden hangi tür değişiklik yapılırsa yapılsın görünüm açısından bir bozulma oluşmamasına olanak tanımaktadır. Bizde bu mantıktan yola çıkarak uygulamamızda yer alan boyutlandırma değerlerini siliyoruz.


Uygulamamızı derlediğimizde aldığımız sonuç ise aşağıdaki gibi olmuştur.


İnternet tarayıcımızın boyutunu elimizle küçülttükten sonra,


İstediğimiz sonucu elde etmiş gibi gözüküyoruz. Artık uygulamamızı sunduğumuz kullanıcılar hangi çözünürlüğü kullanırlarsa kullansınlar sorunsuz bir biçimde kullanabileceklerdir. Ayrıca bu özelliğimiz ile TurhalDigi uygulamamıza arama bölümü de eklemiş oluyoruz.

Kısaca bu yazımızda neleri incelediğimize değinmek gerekirse, Web Formları kontrol edebilmemiz için bize sunulmuş olan üç kontrolü yani, Canvas, StackPanel ve Grid kontrollerinin temel özelliklerini inceledikten sonra Grid kontrolünden oluşturmuş olduğumuz dinamik boyut özelliklerini form kontrollerine nasıl taşıyabileceğimize değindik. En son olarak ise internet tarayıcılarının boyutlarında veya ekran çözünürlüklerinden kaynaklanan sorunları ortadan kaldırmak için otomatik boyutlandırma özelliklerini nasıl kullanabileceğimize değinmeye çalıştık.

Bir sonraki Silverlight yazımızda TurhalDigi projemiz için Digg.com adresinden çekecek olduğumuz veriler yardımı ile uygulamamızda yer alan GridView kontrolünü nasıl doldurabileceğimizi incelemeye çalışacağız.

Umarım yararlı olmuştur.

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

Kaynaklar
ScotGu Blog