WPF - Sayfa(Page) Kavramı, Navigasyon İşlemleri ve XBAP

Perşembe, 4 Ekim 2007 05:20 by bsenyurt

Yıllardır ister büyük çaplı ister küçük çaplı olsun pek çok proje web tabanlı olarak geliştirilmektedir. Projelerde bu tip bir seçime gitmenin en büyük nedenlerinden biriside web uygulamalarındaki dağıtım modelinin(Deployment Model) Windows tabanlı olanlara göre çok daha kolay olmasıdır. Her ne kadar .Net 2.0 ile birlikte gelen ClickOnce veya daha öncesinden beri var olan ActiveX gibi dağıtımı kolaylaştırabilecek teknolojiler var olsada bunlar Web uygulamalarına olan yönelimi azaltamamıştır. Sonuç itibariyle web tabanlı uygulamalarda, yazılan parçaları yorumlayacak bir tarayıcı penceresinin(Browser) olması yeterlidir. Geriye kalan, söz konusu tarayıcı pencerelerinin yorumlayacağı HTML içeriklerinin oluşturulmasıdır. Bu amaçlada son derece gelişmiş sunucu(Server-Side) veya istemci taraflı(Client-Side) uygulama geliştirme modelleri mevcuttur. Asp.Net bu modellerden yanlızca birisidir. Ancak web tabanlı uygulamalarda tarayıcı tarafından bakıldığında dağıtım dışında sağlanan başka avantajlarda vardır. Örneğin, tarayıcı penceresi yardımıyla uygulama(Application) alanı içerisinde bir sayfadan diğerine geçmek bir başka deyişle navigasyon işlemleri ile dolaşmak çok kolaydır. Bu tip bir kullanım kolaylığını Windows uygulamalarına kazandırmak ekstra kodlamayı gerekirmektedir.

Microsoft, .Net Framework 3.0 ile birlikte Windows uygulamalarının tarayıcı pencereleri içerisinde çalıştırılabilmesini sağlayacak bir yenilik getirmektedir. Kısacası XBAP(XAML Browser Applications) olarak adlandırılan bu modelde, kısıtlamaları ile birlikte bir WPF(Windows Prensetation Foundation) uygulamasını bir tarayıcı penceresinde açmak mümkündür. Yazı dizimizde bu konuyada değiniyor olacağız. Ama öncesinde bunların temelini oluşturan sayfa(Page) kavramını anlamak gerekmektedir.

WPF uygulamalarını sayfa tabanlı(Page-Based) olacak şekilde tasarlayabilmekteyiz. Burada sayfadan kasıt Page tipinden bir nesnedir. WPF mimarisinde sayfa tabanlı uygulamalarda kendi içlerinde iki ana parçaya ayrılmaktadır. Bunlardan birincisi XBAP uygulamaları, diğeri ise kendi başına çalışan(Stand-Alone) uygulamalardır. Sayfalar(Pages) aslında daha önceki makalelerimizde de incelediğimiz Window tipine benzetilebilir. Lakin arada çok önemli bir fark vardır. Window tipi temel olarak bir taşıyıcı(Container) görevini üstelenebilmektedir. Bu sebeptende ContentControl tipinden türetilmiştir. Ne varki Page tipi doğrudan FrameworkElement tipinden türemektedir. Dolayısıyla Page tiplerinin kullanılabilmesi için bunu servis edecek bir sunucuya(Host) ihtiyaç vardır. Söz konusu özet bilgilere göre sayfa bazlı(Page-Based) uygulamaları aşağıdaki gibi kategorize edebiliriz.

Standalone (Kendi başına çalışan uygulamalar)	NavigationWindow içerisinde kullanılabilen sayfalar.
	Bir pencerede(Window) yer alan Frame veya Frame' ler içerisinde kullanılabilen sayfalar.
	Başka bir sayfa(Page) içerisindeki Frame veya Frame' lerde kullanılabilen sayfalar.
XBAP(Xaml Browser Applications) Uygulamaları	Internet Explorer veya destek veren başka bir tarayıcı(Browser) üzerinde çalışabilen sayfalar. Lightweight olarakta adlandırılan basit web tabanlı dağıtım modeli için uygun bir yapı sunmaktadır.

Sayfa tabanlı(Page-Based) uygulamalarda kullanılan genel tipler aşağıdaki sınıf diagramında(Class Diagram) görüldüğü gibidir.

Yukarıdaki sınıf diagramında sayfa-tabanlı(Page-Based) uygulamalarda başrol oynayan sınıflardan(class) bazıları yer almaktadır. Window sınıfı daha önceki windows programlamada yer alan Form sınıfının karşılığı olarak düşünülebilir. Bir içerik kontrolüdür(ContentControl). Bu nedenle kendi içerisinde başka elementleride barındırmaktadır. Söz gelimi Window içerisinde bir Frame tanımlanıp bu Frame içerisinde de farklı sayfalar(Page) yer alabilir. Frame tipi aslında bir sayfa içerisinde bağımsız bir parça olaraktanda düşünülebilir. Frame' leri bir Page veya Windows elementi içerisinde kullanabiliriz. Temel görevleri aslında web uygulamalarından bilinen benzeri ile aynıdır. Bir başka deyişle taşıyıcı kontrol içerisinde başka sayfaların(Page) gösterilebilmesini sağlamaktadır. Bu taşıyıcı özelliği nedeni ilede tahmin edileceği gibi ContentControl sınıfından türemektedir. NavigationWindow, içerisinde Page elementlerini içerebilen bir tiptir. Varsayılan olarak Page elementi içeren bir XAML içeriği code-behind dosyası ile birlikte çalıştırıldığında çalışma zamanında otomatik olarak bir NavigationWindow nesnesi örneklenmektedir. NavigationWindow nesneleri çalışma zamanında dinamik olaraktanda örneklenebilir ve sayfa içeriklerini göstermesi sağlanabilir.

Bu kısa teorik bilgilerden sonra dilerseniz basit örnekler yardımıyla konuyu daha iyi anlamaya çalışalım. Eğer aynı pencere üzerinde yer alacak ve aralarında geçişler yapılabilecek sayfalardan bahsediyorsak doğal olaraktan bunların arasında dolaşabilmek gerekmektedir. Dolaşma işlemleri için kullanılabilecek en basit kontrol Hyperlink bileşenidir. Bu bileşenin NavigateUri özelliğinden yararlanılarak başka bir sayfaya geçilmesi, aynı sayfa içerisinde veya başka bir sayfa içerisinde yer alan bir noktaya gidilmesi(burada anchor benzeri bir kullanımdan bahsediyoruz), başka bir NavigationWindow içerisinde bir sayfaya ve hatta var olan geçerli bir Url adresine gidilmesi sağlanabilir. Dolayısıyla ilk örneğimizde bu durumu analiz etmeye çalışıyor olacağız. Bu amaçla Visual Studio 2008 Beta 2 sürümünde yeni bir WPF uygulaması açıp XAML içerikleri başlangıçta aşağıdaki gibi olan iki sayfa(Page) tasarlamamız yeterlidir.

NOT : Page tiplerini bir WPF uygulamasına eklerken öğelerden(Item) yararlanılabilir. Bunun için projeye sağ tıklayıp Add New Item penceresinden yada, doğrudan sağ tıklayınca çıkan menülerden Add->Page ile gerçekleştirebiliriz.

MainPage.xaml

<Page x:Class="PageKullanimi.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Ana Sayfa" WindowHeight="250" WindowWidth="400" WindowTitle="Azon Giriş Sayfası" Loaded="Page_Loaded">
    <Page.Background>
        <ImageBrush ImageSource="Iceberg.jpg" Opacity="0.4"/>
    </Page.Background>
    <Grid>
        <Label Foreground="Black" FontSize="15" FontWeight="Bold" Height="30" HorizontalAlignment="Left" VerticalAlignment="Top" Width="113" Margin="9,21,0,0">
            <Hyperlink NavigateUri="PageX.xaml" ToolTip="Bir sonraki sayfaya geçmenizi sağlar">Sonraki Sayfa</Hyperlink>
        </Label>
        <Button Name="btnBilgiSayfasi" Background="LightGray" Width="120" Height="30" FontSize="12" FontWeight="Bold" HorizontalAlignment="Left" Margin="9,107,0,0" VerticalAlignment="Top">
            <Hyperlink Foreground="Red" NavigateUri="Page2.xaml">Bilgi Giriş Sayfası</Hyperlink>
        </Button>
        <TextBox Name="txtHosgeldinMesajim" Margin="9,60,33,0" Height="21" VerticalAlignment="Top" />
    </Grid>
</Page>

MainPage içerisinde ilk dikkati çeken noktalardan birisi Page elementi ve özellikleridir. WindowHeight ve WindowWidth özellikleri ile çalışma zamanındaki NavigationWindow penceresinin boyutları set edilmektedir. WindowTitle özelliği ile sayfanın NavigationWindow içerisinde gösterilirken sahip olacağı başlık değeri verilmektedir. Title özelliği ise, navigasyon işlemlerinin yapıldığı Combobox içerisindeki başlık bilgisini belirlemektedir. Aşağıdaki şekil çalışma zamanındaki bir ekran görüntüsü olup bahsedilen özellikleri ifade etmektedir.

NOT : Page sınıfının Window sınıfında olduğu gibi Show veya Hide gibi metodları bulunmamaktadır. Bunun en büyük nedeni Page sınıflarına ait nesne örnekleri aralarında gezinirken navigasyon kontrollerinden yararlanılabilmesidir. Dolayısıyla klasik windows programcılığından bildiğimiz Show veya Hide gibi işlemlere gerek kalmamaktadır.

Bunların dışında MainPage içerisinde Label ve Button kontrollerine ait elementler içerisinde Hyperlink alt elementleri kullanılmıştır. Hyperlink bileşeni bağımsız bir element olarak kullanılamamaktadır. Dolayısıyla Inline-Flow tipinden bir kontroldür. Diğer taraftan bu elementin NavigateUri özelliği ile gidilmek istenen sayfalar belirtilmektedir.

NOT : Hyperlink elementi Page yerine bir Window içerisinde kullanılmak istendiğinde belirtilen adrese otomatik olarak gidilemeyecektir. Böyle bir durumda Window sınıfının RequestNavigate olayının bilinçli olarak ele alınması ve yönlendirme işleminin manuel olarak yapılması gerekmektedir.

Label kontrolünde yer alan Hyperlink elementinde kasıtlı olarak projede yer almayan PageX.xaml' e gidilmeye çalışılmaktadır. Burada amaç olmayan bir adrese gidilmek istendiğinde ne olacağının analiz edilmesidir. Button kontrolü içerisinde yer alan Hyperlink elementinde ise, XAML içeriği aşağıda yer alan Page2 isimli sayfaya gidilmektedir.

Page2.xaml

<Page x:Class="PageKullanimi.Page2" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" WindowTitle="Bilgi Giriş Sayfası" Title="Bilgi Girişi" Loaded="Page_Loaded">
    <Grid>
        <Label FontSize="12" FontWeight="Bold" Height="25" HorizontalAlignment="Left" VerticalAlignment="Top" Width="85" Margin="0,24,0,0">Tc Kimlik No</Label>
        <Label FontSize="12" FontWeight="Bold" HorizontalAlignment="Left" Width="85" Margin="0,83,0,0" Height="25" VerticalAlignment="Top">Semt</Label>
        <Label FontSize="12" FontWeight="Bold" Height="25" HorizontalAlignment="Left" VerticalAlignment="Top" Width="85" Margin="0,46,0,0">Aranan Hat</Label>
        <Button FontSize="14" Margin="125,117,62,0" Name="btnKontrolSayfasi" Click="btnKontrolSayfasi_Click" Height="24" VerticalAlignment="Top">
            Kontrol Sayfası
        </Button>
        <TextBox Name="txtTcNo" Height="21" Margin="120,27,60,0" VerticalAlignment="Top" />
        <TextBox Name="txtArananHat" Height ="21" Margin="120,57,60,0" VerticalAlignment="Top" />
        <TextBox Name="txtSemt" Height ="21" Margin="120,89,60,0" VerticalAlignment="Top" />
    </Grid>
</Page>

İlk olarak örneği çalışma zamanında test ederek işe başlayalım. Uygulamanın yürütülmeye başlaması halinde MainPage.xaml sayfasının örneklenmesi için App.xaml' e ait Application elementi içerisindeki StartupUri özelliğinin değeri MainPage.xaml olarak ayarlanmıştır. Aşağıdaki Flash görselinde ilk çalışma hali gösterilmektedir.

Dikkat edilecek olursa çalışma zamanında(Run-Time) otomatik olarak bir navigasyon çubuğu oluşturulmuştur. İlk aşamada bu çubuk üzerindeki düğmeler pasiftir. Aktif olmaları için sayfalar arasında geçiş yapılması gerekmektedir. Sayfalar arası geçiş yapıldıktan sonra navigasyon düğmeleri ile ileri ve geri yönlü hareketler yapılabilir. Bununla birlikte Combobox kontrolünden yararlanılaraktanda diğer sayfalara daha kolay bir şekilde geçiş yapılmasıda sağlanabilir. Bu örnekte PageX.xaml sayfasına geçiş yapılmasını sağlayan Label kontrolüne basılmamıştır. Bu yapıldığı takdirde söz konusu sayfa olmadığı için aşağıdaki ekran görüntüsünde yer alan bir çalışma zamanı istisnası(exception) alınacaktır.

Görüldüğü gibi basit bir IOException alınmıştır. Elbetteki programatik olarak uygulamayı tasarlarken olmayan sayfalara gidilmemesini sağlamak geliştiricinin görevidir. Lakin NavigateUri ile var olan bir sayfa dışında geçerli bir URL adresinede gidilebilmesi sağlanabilmektedir. Bir başka deyişle var olan bir web sayfasını çalışma zamanında oluşturulan NavigationWindow içerisinde bir sayfa olarak göstermek mümkündür. Bu gibi durumlarda gidilmek istenen URL veya Sayfa bilgisinin geçerli olmaması halinde programın istem dışı bir şekilde sonlanmasının önüne geçmek için Application nesnesinin NavigationFailed olayını ele almak ve içerisinde istisna bilgisini kontrollü bir şekilde yakalamak en doğru yaklaşım olacaktır. Yukarıdaki örnekte bunu uygulamak istediğimiz App.xaml ve App.xaml.cs içeriklerinin aşağıdaki gibi tasarlanması yeterlidir.

App.xaml;

<Application x:Class="PageKullanimi.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="MainPage.xaml" NavigationFailed="Application_NavigationFailed">
<Application.Resources>
</Application.Resources>
</Application>

App.xaml.cs;

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Windows;

namespace PageKullanimi
{
    public partial class App : Application
    {
        private void Application_NavigationFailed(object sender, System.Windows.Navigation.NavigationFailedEventArgs e)
        {
            if (e.Exception != null)
            {
                MessageBox.Show(e.Uri.ToString() + " adresi bulunamadı");
               e.Handled = true;
            }
        }
    }
}

Örnekte basit olması açısında sadece hataya neden olsan sayfanın Uri bilgisi bir MessageBox içerisinde gösterilmektedir. Olay metoduna gelen NavigationFailedEventArgs tipinden e parametresinin Handled özelliğine true değeri atanmasının sebebi hatanın kontrollü bir şekilde ele alındığının belirtilmesidir. Aksi durumda program yine hata sonrası, kullanıcıya oluşan hatanın gönderilip gönderilmeyeceğini soran hepimizin yakından tanıdığı mesaj kutusu ile sonlandırılacaktır. Burada yakalanan hatalar çok doğal olarak başka amaçlarlada değerlendirilebilir. Örneğin Log' lanarak, oluşan hatalar ile ilişkili genel istatistik ve analizlerin yapılması sağlanabilir.

Hyperlink kontrolünü kullanarak web sayfalarınada gidilebildiğinden bahsetmiştik. Bunun dışında bir sayfa içerisinde yer alan herhangibir konuma gidilmeside sağlanabilirki bu durum parçalı navigasyon(Fragment Navigation) olarak adlandırılmaktadır. Şimdi bu iki kullanım şeklini ele alacağımız bir örnek üzerinden ilerleyelim. Bu amaçla projemize Page3.xaml ve Page4.xaml sayfalarını aşağıdaki içerikleri ile eklediğimizi düşünebiliriz.

Page3.xaml;

<Page x:Class="PageKullanimi.Page3" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" WindowTitle="Doğrulama Sayfası" Title="Doğrulama" WindowHeight="250" WindowWidth="400">
    <Grid>
        <Button Name="btnCSHarpNedir" FontSize="14" FontWeight="Bold" Height="25" Margin="20,36,30,0" VerticalAlignment="Top">
            <TextBlock>
                <Hyperlink Foreground="Red" NavigateUri="http://www.csharpnedir.com">C#Nedir?</Hyperlink>Sayfasına Gider.
            </TextBlock>
        </Button>
        <Button Name="btnIceberg" FontSize="14" FontWeight="Bold" Height="25" VerticalAlignment="Top" Margin="20,90,30,0">
            <TextBlock>
                <Hyperlink NavigateUri="Page4.xaml#txtBilgi" Foreground="Red">Iceberg</Hyperlink>
            </TextBlock>
        </Button>
    </Grid>
</Page>

Sayfanın içerisinde kullanılan iki adet Hyperlink kontrolü bulunmaktadır. Bunlardan birisi C#Nedir? sitesine, diğeri ise Page4.xaml sayfası içerisinde txtBilgi isimli bileşenin olduğu yere yönlendirme yapmaktadır. İkinci navigasyon işlemi aslında parçalı navigasyon(Fragment Navigation) işlemi için bir örnektir. Öyleki Page4.xaml sayfası içerisinde yer alan txtBilgi isimli kontrol sayfanın alt kısmında yer almaktadır. Bu nedenle sayfa içerisindeki bu yere navigasyon işlemi ile gidilmesi ve odaklanılması mümkün olabilmektedir.

Page4.xaml;

<Page x:Class="PageKullanimi.Page4" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Antartika Iceberg" WindowTitle="Iceberg">
    <Grid>
        <ScrollViewer VerticalScrollBarVisibility="Visible">
            <Canvas Height="299" Width="284">
                <Image Canvas.Left="18" Canvas.Top="51" Height="104" Name="image1" Width="150" Source="Iceberg.jpg" />
                <Label Canvas.Left="18" Canvas.Top="26" Height="23" Name="label1" Width="120">Antartika Hakkında</Label>
                <Label Canvas.Left="18" Canvas.Top="166" Height="23" Name="label2" Width="120">
                    <Hyperlink NavigateUri="Page4.xaml#txtBilgi">Genel Bilgi</Hyperlink>
                </Label>
                <TextBox Height="25" Name="txtBilgi" Canvas.Left="18" Canvas.Top="274" Width="249" />
            </Canvas>
        </ScrollViewer>
    </Grid>
</Page>

Page4.xaml içerisinde de bu sayfadaki txtBilgi kontrolüne odaklanılmasını sağlayan bir Hyperlink bileşeni bulunmaktadır. Dikkat edilecek olursa parçalı navigasyon işlemlerinde NavigateUri özelliğinde # işaretinden sonra bir bilgi yer almaktadır. Bu bilgi gidilmek istenen kontrolün Name özelliğinin(Property) değeridir. Örneğin çalışma zamanındaki işleyişi aşağıdaki Flash animasyonunda olduğu gibidir.

Görüldüğü gibi Page3.xaml içerisinde yer alan düğme kontrollerine basıldığında C#Nedir? sayfasına veya Page4.xaml içerisindeki txtBilgi isimli TextBox kontrolünün olduğu yere gidilmektedir. Herhangibir internet veya intranet adresine gidilmesini sağlayan teknikte mutlaka hata kontrolü yapılmalıdır. Diğer taraftan bir web sayfasına gidildiğinde sayfada görünen kısım klasik windows programlamadan tanıdığımız WebBrowser kontrolünün sunduğu ortama benzemektedir. Bu sebepten dolayı elde edilen sayfa içerisinde arama yapmak, dinamik kod çalıştırmak gibi işlemler yapılamamaktadır.

NOT : Parçalı navigasyon(Fragment Navigation) işleminin olabilmesi için, söz konusu sayfa içerisinde aşağı yukarı hareket edilebilmesi bir başka deyişle scrolling olması gerekmektedir. Bu amaçla ScrollViewer kontrolünden yararlanılabilir. Söz konusu kontrolün VerticallScorllBarVisibility ve HorizontalScrollBarVisibility özelliklerine ilgili değerler atanarak dikey veya yatay yönde kaydırma çubuklarının(Scroll Bar) gösterilmesi(yada tam tersi) sağlanabilir.

Navigasyon işlemleri istenirse manuel olarak kod tarafından da gerçekleştirilebilir. Bu noktada NavigationWindow içerisinde üst kısımda görünen navigasyon kontrolleri ve menünün yaptığı işlerin kod yardımıylada gerçekleştirilmesi mümkündür. Bunun için NavigationService tipinden ve üyelerinden(Members) yararlanılabilir. Sıradaki örnekte yeni bir sayfaya geçiş işlemini kod ile nasıl yapabileceğimize bakıyor olacağız. Page2.xaml içerisindeki btnKontrolSayfasi isimli Button düğmesine tıklandığında Page3.xaml sayfasına geçilmesini sağlamak için ilgili olay metodunda aşağıdaki kodları yazmak yeterli olacaktır.

private void btnKontrolSayfasi_Click(object sender, RoutedEventArgs e)
{
this.NavigationService.Navigate(new Page3());
}

NavigationService referansını Button bileşenine ait Click olay metodu içerisine yakaladıktan sonra Navigate fonksiyonuna parametre oalrak Page3 tipinin yeni bir nesne örneği verilmektedir. Böylece Page3 nesne örneği oluşturulup NavigationWindow içerisinde gösterilmesi sağlanmaktadır. Buna göre örneğin çalışma zamanındaki durumu aşağıdaki Flash görselindeki gibi olacaktır.

İstenirse çalışma zamanında yeni bir NavigationWindow oluşturulması ve bir sayfanın bu örnek üzerinde açılması sağlanabilir. Aşağıdaki örnek kod parçası ile, düğmeye basıldığı zaman Page3 isimli sayfanın yeni bir pencere içerisinde açılması sağlanmaktadır.

private void btnKontrolSayfasi_Click(object sender, RoutedEventArgs e)
{
    NavigationWindow nvgWnd = new NavigationWindow();
    Page3 pg3 = new Page3();
    pg3.WindowTitle = "Yeni Pencerede Açılan Doğrulama Sayfası";
    pg3.Title = "Doğrulama(Yeni)";
    pg3.WindowWidth = 300;
    pg3.WindowHeight = 240;
    //pg3.ShowsNavigationUI = false;
    nvgWnd.Content = pg3;
    nvgWnd.Show();
}

İlk olarak yeni bir NavigationWindow nesne örneği oluşturulmaktadır. Sonrasında ise bu pencerede gösterilmek istenen sayfa örneklenir. Sayfanın WindowTilte, Title, WindowWidth, WindowHeight gibi özellikleri set edildikten sonra NavigationWindow nesne örneğinin Content özelliğine oluşturulan Page3 nesne örneği atanır. Son olarak Show metodu ile yeni pencerenin gösterilmesi sağlanmaktadır. Buradaki yorum satırı açılırsa eğer, yeni pencerede navigasyon kontrollerinin gösterilmemesi sağlanmış olur. Uygulamayı bu şekilde test ettiğimizde aşağıdaki Flash görselindeki etkiler görülecektir.

Sayfalar istenirse Frame' ler içerisinde gösterilebilirler. Böylece bir NavigationWindow içerisinde birden fazla Frame kullanılarak birden fazla sayfanın aynı anda gösterilmesi sağlanabilir. Örneğin, içerisinde harici bir web sitesini, uygulamanın kendisi, yardım dökümanını barındıracak şekilde bir pencere geliştirilebilir. Frame tipi kendi içerisinde çeşitli elementler barındırabilmektedir ancak genel kullanım amacı Page tiplerini taşımasıdır. Bu tanımlamalar Frame tipinin webdeki kullanım şeklini tam olarak andırdığınıda göstermektedir. Konuyu daha net anlayabilmek için bir örnek üzerinden ilerlemekte fayda olacağı kanısındayım. Bu amaçla projeye aşağıdaki XAML içeriğine sahip yeni bir pencere(Window) eklediğimizi düşünelim.

<Window x:Class="PageKullanimi.FrameKullanimi" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Frame Kullanimi" Height="400" Width="300">
    <Grid Margin="2">
        <Grid.RowDefinitions>
            <RowDefinition/>
           <RowDefinition/>
        </Grid.RowDefinitions>
        <Frame NavigationUIVisibility="Automatic" Grid.Row="0" BorderBrush="Black" BorderThickness="3" Source="Page3.xaml"/>
        <Frame Grid.Row="1" BorderBrush="Gold" BorderThickness="3" Source="Page2.xaml"/>
   </Grid>
</Window>

Frame kullanımını kolaylaştırmak için pencere içerisinde iki satırdan oluşan bir Grid kontrolü konulmuştur. Bu amaçla Grid kontrolü içerisine RowDefinition elementleri ile iki satır eklenmiştir. Hangi Frame' in hangi satırda gösterileceğini belirlemek için Grid.Row elementlerinden yararlanılmaktadır. Her Frame elementinin Source niteliklerine(attribute) atanan değerler ile içlerinde gösterecekleri sayfalar belirlenmektedir. NavigationUIVisibility niteliğine atanan değer ile navigasyon kontrolünün Frame içerisinde gösterilip gösterilmeyeceği veya örnekteki gibi bunun otomatik olarak set edilip edilmeyeceği belirlenebilir. Söz konusu Frame' ler dikkat edilecek olursa Page yerine bir Window elementi içerisinde kullanılmıştır. Örnek yürütüldüğünde aşağıdaki Flash animasyonunda olduğu gibi bir çalışma zamanı sonucu elde edilir.

Flash animasyonundan görülebileceği gibi ilk etapta navigasyon kontrolleri gösterilmemektedir. Ancak Frame' ler içerisinde yer alan sayfalar üzerindeki kontroller yardımıyla hareket edildikten sonra navigasyon kontrolleri görülmektedir. Tabi istenirse NavigationUIVisibility özelliğine Visible değeri atanarak navigasyon kontrolünün başlangıçta çıkmasıda sağlanabilir. Yukarıdaki örnekte meydana gelen işlemler aşağıdaki grafikle daha net anlaşılabilir.

İstenirse sayfalar başka sayfaların içerisinde de kullanılabilir. Böyle bir durumda iç içe sayfalar(Nested-Page) söz konusu olmaktadır. Aşağıdaki XAML içeriğinde bir nested-page tasarımı örneği görülmektedir.

XAML içeriği;

<Page x:Class="PageKullanimi.NestedPageKullanimi" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Nested Page Orneği" WindowWidth="300" WindowHeight="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="89" />
            <RowDefinition Height="211" />
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0">
            <Label Foreground="Red" FontSize="14" FontWeight="Bold">Arama</Label>
            <TextBox Text="Aranacak kelimeyi giriniz"/>
            <Button Name="btnAra" Content="Ara" FontSize="12" FontWeight="Bold" Background="Gold" Foreground="Black"/>
        </StackPanel>
        <Frame NavigationUIVisibility="Automatic" Grid.Row="1" BorderBrush="Black" BorderThickness="3" Source="Page3.xaml"/>
    </Grid>
</Page>

Dikkat edilecek olursa Page elementi içerisinde normal elementler dışında birde Frame elementi kullanılmaktadır. Bu element içerisinde Source niteliği ile gösterilecek olan sayfa belirtilmektedir. Böylece çalışan sayfa içerisinde birbirlerine bağlı başka sayfalarında gösterilebilmesi sağlanmaktadır. Olayı aşağıdaki grafik ile daha net kavrayabiliriz.

Uygulamanın çalışma zamanındaki görüntüsü aşağıdaki Flash animasyonunda olduğu gibidir.

Burada dikkat çekici noktalardan biriside Frame içerisinde sayfalar arasında gezinirken navigasyon kontrolünün sayfanın üst kısmında çıkmış olmasıdır. Bu durumda Frame' lerin kendi navigasyon çubuklarına sahip olması sağlanabilir. Bunun için Frame elementinin JournalOwnerShip adı verilen niteliğinden yararlanılır. Bu nitelik Automatic, OwnsJournal ve UsesParentJournal olmak üzere üç farklı değerden birisini alabilir. OwnsJournal değeri seçildiğinde aşağıdaki ekran görüntüsünde olduğu gibi Frame' in navigasyon kontrolü kendi içerisinde çıkacak, sayfanın kendi navigasyon kontrolü ise en üst tarafta yer alacaktır. Doğal olarak bunlar birbirleriylede karışmayacak şekilde çalışmaktadır.

UsesParentJournal değerinin seçilmesi halinde ise, Frame elementinin navigasyon kontrolü bu örneğin ilk versiyonunda olduğu gibi üst tarafta yer alacaktır. Aslında burada analiz edilmesi gereken bir durum daha vardır. Buda sayfanın kendisinin navigasyon işlemlerine sahip olması halidir. Yani aşağıdaki grafikteki gibi bir senaryo olduğunu düşünelim.

Dikkat edileceği üzere Frame içerisinden başka iki sayfaya daha geçilebilmektedir. Diğer taraftan sayfanın kendiside(yani Frame' ide içeren Page) Page2.xaml sayfasına geçiş yapabilmektedir. Bu tip bir durumda UsesParentJournal değerinin seçilmesi özellikle XBAP uygulamalarında oldukça işe yarayacaktır. Söz konusu kullanımda sayfalar çok fazla parçalandığından zaman zaman takibin zorlaştığıda görülmektedir. Dolayısıyla Nested-Page tekniğinin bir alternatif olarak bilinmesinde ve uygun vakkalar bulunduğunda ele alınmasında yarar vardır.

Yazımızın içerisinde belirttiğimiz gibi navigasyon işlemlerini manuel olarak kod tarafından da yapabiliriz. Burada önemli olan nokta NavigationService özelliği ile elde edilecek referans olacaktır.Bununla birlikte bir sayfanın navigasyon süreci içerisinde talep edilmesi halinde neler olduğunun bilinmesinde de yarar vardır. Bir başka deyişle, navigasyon sürecindeki yaşam döngüsünü bilmekte yarar vardır. Temelde süreç bir sayfanın talep edilmesi ile başlar. Bu talep işlemi basit bir Hyperlink kontrolü ile olabileceği gibi, NavigationService sınıfının Navigate metodu ilede olabilir. Sonrasında talep edilen sayfanın yeri tespit edilir. Tahmin edileceği üzere burada bir sorun olması halinde çalışma zamanı istisnası oluşacaktır. Sayfa yeri tespit edildikten sonra bilgileri getirilir. Örneğin talep edilen sayfa bir internet sayfası ise download işlemi gerçekleşir. Bu arada eğer sayfanın indirilmesi sırasında ilişkili kaynaklar var ise bunlarında getirilmeside söz konusudur. Takip eden adımda sayfa için bir ayrıştırma(parsing) işlemi uygulanır ve sayfanın nesne ağacı(Object Tree) oluşturulur. Bu işlemi takiben sayfaya ait Initialized ve Loaded olaylarıda sırasıyla tetiklenir. Son aşamada sayfa Render işlemine tabi tutulur ve gösterilir. Bu noktada eğer parçalı navigasyon(Fragment Navigation) işlemi yapılmışsa ilgili kontrole gidilmesi sağlanır. Aşağıdaki temsili grafik bu işleyişi kısaca özetlemektedir.

Birde bu süreç içerisinde tetiklenen bazı olaylar söz konusudur. Bu olaylar Application, Frame, NavigationWindow yada NavigationService' in kendisi tarafından ele alınabilir. Daha çok tercih edilen, söz konusu olayları Application nesnesi seviyesinde ele almaktır. Böylece uygulama içerisinde yer alabilecek tüm sayfalar için ortak bir noktada olayların kontrol edilebilmesi sağlanmış olur. Burada bahsedilen olaylar Navigating, Navigated, NavigationProgress, LoadCompleted, FragmentNavigation, NavigationStopped ve NavigationFailed' dır. Bu olayların işleyiş sırası aşağıdaki şekildeki gibidir.

İlk olarak süreç bir sayfanın talep edilmesi ile başlar. Sonrasında ise ilgili olaylar tetiklenir. Aşağıdaki tabloda söz konusu olaylar ile ilişkili bilgiler verilmektedir.

Olay(Event)	Olay Hakkında Kısa Bilgi
Navigating	Yeni bir navigasyon talebi geldiğinde çalışan olaydır.
Navigated	Navigasyon başlamıştır ve talep edilen sayfa ile ilgili bilgiler gelmektedir. Ancak sayfanın tamamı henüz gelmemiştir.
NavigationProgress	Bu olaya ilişkin metod yazıldığında, sayfanın yüklenmesi tamamlanıncaya kadar bilgilendirme yapılması sağlanabilir. Örneğin sayfanın yüzde olarak kaçının tamamlandığı bilgisi gösterilebilir. Aslında bu olay klasik windows programlamadaki BackgroundWorker kontrolünün ProgressChange olayınınkine benzer bir görev üstlenmektedir. NavigationProgress olayı, talep edilen sayfa ile ilgili her 1Kb bilgi geldiğinde tetiklenmektedir.
LoadCompleted	Talep edilen sayfanın ayrıştırma(Parse) işlemi tamamlanmıştır. Ancak ilgili sayfanın Initialized ve Loaded olayları henüz çalışmamıştır.
FragmentNavigation	Eğer parçalı navigasyon(Fragment Navigation) söz konusu ise bu olay tetiklenir. Bu olay ilgili kontrole doğru gidilirken çalışmaktadır.
NavigationStopped	NavigationService sınıfının static StopLoading metoduna yapılan çağrı sonucu tetiklenen olaydır. Bazı durumlarda uzun süren navigasyon işlemlerinde(örneğin bir web sayfası talebinde) kullanıcı tarafından işlemin durdurulması istenebilir. Böyle bir durumda StopLoading metoduna başvurulması halinde bu olay tetiklenmektedir. (StopLoading' i çalışma zamanında çağırmak son derece kolaydır. Nitekim WPF mimarisinde navigasyon işlemleri asenkron olarak yürütülmektedir.)
NavigationFailed	Navigasyon işlemi sırasında bir hata oluşursa tetiklenen olaydır. Bu olay içerisinde oluşan hata ile ilişkili detaylı bilgiye ulaşılabilir ve söz konusu bilgiler örneğin loglama amacı ile kayıt altına alınabilir yada kullanıcı farklı bir şekilde yönlendirilerek uygulamanın sağlıklı bir şekilde çalışması sağlanabilir.

Doğal olarak bu olayların tetiklenmesi belirli koşullara bağlıdır. Söz gelimi bir sayfaya doğru navigasyon işleminin başlatılabilmesi için Hyperlink kontrolünün NavigateUri özelliğinden yada NavigationService sınıfının Navigate metodundan yararlanılır. Navigate metodunun aşırı yüklenmiş olan versiyonları kullanılarak yukarıda bahsi geçen olaylara veri aktarımıda söz konusu olabilmektedir. Söz gelimi navigasyonun başladığı sürenin gönderilip ilgili olaylarda güncel süre ile arasındaki fark hesap edilerek işlemlerin ne kadar sürdüğü ortalama olarak tespit edilebililir. Yada navigasyon işleminin başlatıldığı sayfanın içerisinde bulunduğu NavigationWindow referansının gönderilmesi sağlanarak, Application seviyesindeki olaylarda ele alınması sağlanabilir.

Burada manuel olarak navigasyon işlemleri adına ismini sıkça duyduğumuz NavigationService sınıfının başka güçlü metodlarıda vardır. Söz gelimi navigasyon sürecinde yer alan sayfalar arasında ileri veya geri doğru gidilebilmesini sağlamak amacıyla GoBack ve GoForward metodlarından yararlanılabilir. Yanlız bu metodlar yardımıyla hareket edilirken herhangibir sebeple hedef sayfa bulunamassa çalışma zamanında InvalidOperationException alınır. Bunun önüne geçmek içinse CanGoBack ve CanGoForward özelliklerinin değerlerine bakılabilir. Bu konu ile ilişkili bir örneği denemenizi şiddetle tavsiye ederim. (Yazımızı çok fazla uzatacağından bu tarz bir örneği şu an için geliştirmeyeceğiz. Bu konuyu başka bir makalede detaylı bir şekilde incelemeye çalışcağız.)

XBAP Hakkında

Gelelim sayfalar ile ilgili bir diğer konuya. Yazımızın başında sayfa bazlı(Page-Based) uygulamaların geliştirilmesinde kullanılan modellerden bahsederken XBAP(Xaml Browser Applications) tekniğinede değinmiştik. XBAP uygulamalarında sayfalar tarayıcı pencerede(browser) gösterilmektedir. Şu an için Internet Exploere 6.0 ve üstü ile Mozilla Firefox' un son sürümünde XBAP uygulamaları çalıştırılabilmektedir. (En azından makaleyi yazdığım sıralarda bu tarayıcılar ile yapılan testlere göre...)

Varsayılan olarak XBAP uygulamalarında bazı kısıtlamalar(Restrictions) vardır. Bunlar tahmin edileceği gibi Code Access Security kurallarının uygulanmasınında bir sonucudur. Örneğin XBAP uygulamalarında istemci taraflı olaraktan dosyalara yazmak, veritabanlarına bağlanmak, registry işlemleri yapmak yada başka pencereleri tarayıcı penceresi içerisinde popup şekline açmak varsayılan olarak yasaklanmıştır. Bu tarz ihtiyaçların olması durumunda WPF uygulamasını normal bir windows uygulaması olarak yazmak ve ClickOnce gibi bir dağıtım modeli ile yaymak daha doğru bir yaklaşımdır. Yinede kısıtlama(Restriction) ayarları ile proje özellikleri üzerinden oynanarak istenirse söz konusu işlemlerin yapılması sağlanabilir.

XBAP uygulamaları varsayılan olarak istemci bilgisayardaki tarayıcı penceresine ait tampona(Cache) atılırlar. Bir başka deyişle ilk talep edildiklerinde istemci bilgisayara indirilirler(Download). Burada bir yükleme(install) işlemi söz konusu değildir. Fakat yine proje ayaları ile oynayaraktan uygulamanın istemciye install edilmesi sağlanabilir. Diğer taraftan install edilmemesinin avantajları vardır. Öyleki, uygulamadaki değişiklikler istemci tarafından otomatik olarak algılanıp son sürümün herhangibir sorgu penceresine gerek kalmadan indirilmesi ve çalıştırılması söz konusudur.

Çok doğal olarak XBAP uygulamalarının çalışabilmesi için indirildikleri bilgisayar sisteminde Microsoft .Net Framework 3.0 sürümünün yüklü olması gerekmektedir. Eğer yüklü değilse ilgili uygulama çalıştırıldığında .Net Framework 3.0 indirilmeye çalışılacaktır.

Visual Studio 2008 Beta 2 ile bir XBAP uygulaması oluşturmak son derece basittir. Tek yapılması gereken proje şablonlarından aşağıdaki resimde görüldüğü gibi WPF Browser Application öğesini seçmektir.

Bu işlemin sonucunda içerisinde varsayılan olarak bir sayfa(Page) içeren bir uygulama oluşturulur. Test olması amacıyla uygulamaya ikinci bir sayfa(Page) daha ekleyip bu sayfalar arasında Hyperlink ile geçişler yapmaya çalıştığımızı düşünelim. Bu amaçla Page1.xaml ve Page2.xaml içeriklerinin aşağıdaki gibi olduğunu düşünelim.

Page1.xaml;

<Page x:Class="MerhabaXBAP.Page1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Ana Sayfa" WindowTitle="Giriş Sayfası" Background="LightGray" WindowHeight="250" WindowWidth="250" VerticalAlignment="Top" HorizontalAlignment="Left">
    <Grid>
        <Label Height="33" HorizontalAlignment="Left" Name="label1" VerticalAlignment="Top" Width="120" FontSize="14" FontWeight="Bold">
            <Hyperlink NavigateUri="Page2.xaml">Sayfa 2</Hyperlink>
        </Label>
    </Grid>
</Page>

Page2.xaml;

<Page x:Class="MerhabaXBAP.Page2" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="İkinci Sayfa" WindowTitle="Sayfa 2" Background="Gold" Loaded="Page_Loaded" VerticalAlignment="Top" HorizontalAlignment="Left" WindowHeight="250" WindowWidth="250">
    <Grid>
        <Label Height="35" Name="label1" VerticalAlignment="Top" FontSize="14" FontWeight="Bold" HorizontalAlignment="Left" Width="120">
           <Hyperlink NavigateUri="Page1.xaml">Sayfa 1</Hyperlink>
        </Label>
    </Grid>
</Page>

Uygulama çalıştırıldığında sayfaların WindowTitle niteliklerine atanan değerler otomatik olarak Tab' da ve tarayıcı penceresinin başlık kısmında görülecektir. Diğer taraftan burada navigasyon kontrolleri oluşturulmayacak, otomatik olarak tarayıcının navigasyon kontrolleri işin içerisine dahil edilecektir. Şimdi güvenlik ile ilişkili kısıtlamaları test etmek amacıyla Page2.xaml sayfasının Loaded olayını yükleyelim ve içerisine aşağıdaki kodları yazdığımızı düşünelim.

Page2.xaml.cs;

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.IO;

namespace MerhabaXBAP
{
    public partial class Page2 : Page
    {
        public Page2()
        {
            InitializeComponent();
        }

        private void Page_Loaded(object sender, RoutedEventArgs e)
        {
            using (FileStream stream = new FileStream("C:\\Test.txt", FileMode.Append, FileAccess.Write))
            {
                using (StreamWriter writer = new StreamWriter(stream))
                {
                   writer.WriteLine(DateTime.Now.ToString() + " ek bilgi");
                }
            }
        }
    }
}

Bu durumda uygulamayı çalıştırıp Page2 isimli sayfaya geçmeye çalıştığımızda SecurityException tipinden bir istisna aldığımızı görürüz. Aşağıdaki ekran görüntüsünde bu durum ifade edilmektedir.

Daha öncedende belirttiğimiz gibi bu istisnanın sebebi varsayılan Code Access Security ayarlarıdır. Hata mesajındanda görüleceği gibi FileIOPermission yetkisi olmadığından söz konusu kodlar çalışmayıp istisna vermiştir. Ancak proje özelliklerine girip ilgili izni(Permission) aşağıdaki şekilde görüldüğü gibi vererek dosyaya yazma işleminin gerçekleştirilebilmesi sağlanabilir.

Bu ayarlardan sonra uygulama tekrardan test edilirse Test.txt isimli dosyanın C dizini altında oluşturulduğu ve içerisine bilgi yazıldığı görülür. Buradaki seçeneklerden bir diğeri olan This is a full trust application seçilerek, istenirse tüm kısıtlamaların ortadan kaldırılması ve istemci tarafından yürütülebilmesi sağlanabilir. Ancak bu XBAP uygulamalarının birincil amacı değildir.

Bir XBAP uygulamasını dağıtırken(Deploye) uygulamaya ait exe, manifesto ve xbap dosyalarının üçünün birden istemci uygulamaya kopyalanması yeterli bir seçenektir. Elbette söz konusu dosyalar bir intranet sisteminde ortak bir yola(Path) konularaktanda istemcilerin buradan başlatma işlemini gerçekleştirmesi sağlanabilir. Sonuçta varsayılan olarak uygulama, istemci bilgisayarın tarayıcı programının kullandığın ön bellek alanına indirilecektir. Yukarıda geliştirimiş olduğumuz XBAP örneğine baktığımızda Debug klasörü altında aşağıdaki şekilde görülen dosyaların oluşturulduğunu görürüz.

Burada yer alan dosyalardan exe uzantılı olan, XBAP uygulamasının derlenmiş halini içermektedir. Bir başka deyişle assembly' ın kendisidir e ILDASM, Metadata, manifesto gibi bilgileri içermektedir. Ne varki söz konusu exe tek başına çalıştırılabilen bir dosya değildir. Bu sebepten üzerinde çift tıklandığında hiç bir etkileşim olmayacaktır. Asıl çalıştırıcı dosya XBAP uzantılı olan XML dosyasıdır. Bu dosyanın içeriğinde, uygulamanın giriş noktasını işaret eden bilgi vardır. Açıkçası bu dosya çalıştırıldığında istemci bilgisayardaki varsayılan tarayıcı uygulaması devreye girecek ve exe yürütülmeye başlanacaktır. XBAP uzantılı dosyası içerisinde aynı zamanda program yazılırken üretilen dijital imzada yer almaktadır. Bu imza özellikle güncelleme işlemlerinde önem kazanmaktadır. (Elbette istenirse uygulamanın proje özelliklerine gidilip Signing kısmında başka bir imza üretilip kullanılabilir.) Manifesto dosyasında ise, uygulamanın çalışması için gerekli olan diğer programlara ait bilgiler yer almaktadır. Söz gelimi uygulamanın çalışması için gerekli .Net Framework versiyonu, bağlı olan diğer assmebly(Class Library gibi)' lar veya uygulamadaki kodların neler yapabileceğini belirten izin(Permission) yetkileri gibi bilgiler yer almaktadır. Ne varki dağıtım işlemi özellikle ilgili uygulamalarda güncellemeler yapıldığı takdirde tekrarlanmak zorunda olabilir. Bu vakka ClickOnce ile ilgilide olduğundan ve makalemizin konusunu aştığından bu yazı dizimizde ele alınmayacaktır. Umuyorumki ilerleyen zamanlarda ele alabiliriz.

Bu makalemizde WPF(Windows Presentation Foundation) ile birlikte hayatımıza giren yeni kavramlardan birisi olan sayfa-tabanlı(Page-based) uygulamaları tanımaya çalıştık. Konunun detayları için sizlere 1000 sayfalık Pro WPF: Windows Presentation Foundation in .NET 3.0 kitabı tavsiye ederim.

Böylece geldik uzun bir makalemizin daha sonuna. Bu cümleye kadar sabırla okuduğunu için son teşekkür ederim. Bir sonraki makalemizde görüşünceye dek hepinize mutlu günler dilerim.

d24c57c5-fe9b-4b0a-ba8c-953d0f25b57e|0|.0

Tags:		wpf, xbap
Categories:		WPF
Actions:		E-mail \| del.icio.us \| Permalink \| Yorumlar (0) \| Comment RSS

WPF Temel Animasyon İşlemleri - 2

Pazartesi, 1 Ekim 2007 19:35 by bsenyurt

Bir önceki makalemizde Windows Prensetation Foundation(WPF) uygulamalarında animasyon işlemlerinin temel animasyon tipleri(Basic Animation Types) yardımıyla nasıl gerçekleştirilebileceğini incelemeye başlamıştık. Bu makalemizde animasyon işlemleri üzerindeki yönetimin biraz daha fazla olmasını sağlamak için farklı teknikleri göz önüne alıyor olacağız. Her zaman olduğu gibi konuyu daha iyi kavrayabilmek adına örnekler üzerinden ilerlemekte fayda olduğu kanısındayım. Dilerseniz hiç vakit kaybetmeden ilk örneğimiz ile başalayım. Hatırlanacağı üzere, WPF uygulamalarında bileşenlerin rotasyon işlemleri için RotateTransform, ScaleTransform ve benzeri tiplerin kullanıldığını görmüştük. Bu tip transformasyon işlemlerini animasyon tipleri ile birlikte kullanmak isteyebiliriz. Söz gelimi bir Button kontrolünün 3 saniye içerisinde kendi ekseninde 360 derece dönmesini ve bu sırada boyutlarınında 2 katına çıkarak tekrardan eski haline dönmesini istediğimizi düşünelim. Bu tip bir animasyon işleminin Buttton kontrolünün üzerine mouse ile gelindiğinde başlatılmasını ve 3 saniyelik zaman dilimi içerisinde mouse ile kontrolün terk edilmesi halinde de durmasınıda sağlayabiliriz. Burada temel animasyon tiplerinden olan DoubleAnimation oldukça işe yarayacaktır. Herşeyden önce animasyon tipinin RotateTransform ve ScaleTransform tiplerindeki uygun özellikleri kontrol edecek şekilde ayarlanması gerekir. Bu senaryoyu gerçekleştirmek için XAML içeriği aşağıda verilen bir pencere(Window) oluşturulması yeterli olacaktır.

XAML içeriği;

Burada dikkat edilmesi gereken noktalardan birisi, RotateTransform ve ScaleTransform elementlerinin DoubleAnimation tiplerinde kullanılabilmesi için x:Name nitelikleri ile isimlendirilmiş olmalarıdır. Diğer taraftan RotateTransform, Button bileşenin verilen açı kadar döndürülmesini sağlamaktadır. Buna göre ilk DoubleAnimation elementi 3 saniyelik zaman çizgisi(TimeLine) içerisinde açının değerinin 360 derece olmasını sağlamaktadır. Sonrasında gelen dört DoubleAnimation tipi ise ilk 1.5 saniyelik zaman dilimi içerisinde ScaleTransform elementinin ScaleX ve ScaleY değerlerini önce iki buçuk katına çıkarmakta sonrasında ise tekrar eski haline döndürmektedir. Söz konusu animasyon işlemleri MouseEnter olayı tetiklendiğinde başlatılmaktadır. Diğer taraftan MouseLeave olayı tetiklendiğinde, bir başka deyişle mouse ile Button kontrolü üzerinden çıkıldığında animasyon işlemi durdurulmaktadır. Durdurma işlemi için StopStroyboard elementi kullanılır. Bu elementin hangi animasyon işlemini durduracağını belirtmek için BeginStroyboardName niteliğine(attribute) ilgili değerin atanması gerekir. Örneğimizde bu değer, BeginStroyboard elementindeki Name niteliğinin değeri olan strBrd' dir. Buna göre istersek birden fazla Storyboard' un olduğu bir senaryoda Name niteliğinden yararlanarak hangisinin durdurulacağını, duraksatılacağını(Pause) yada çıkartılacağını(Remove) belirleyebiliriz.

NOT: WPF(Windows Presentation Foundation) mimarisinde farklı Storyboard tipleri vardır.

BeginStoryboard : Storyboard' un başlatılmasını sağlar.
PauseStoryboard : Storyboard duraksatılır.
ResumeStoryboard : Duraksatılan storyboard kaldığı yerden devam eder.
RemoveStoryboard : Storyboard kaldırılır.
SetStoryboardSpeedRatio : Storyboard içerisinde animasyonların hız oranı değiştirilebilir.
SkipStoryboardToFill : Eğer Stroyboard içerisinde tanımlanmış bir Fill periyodu varsa animasyonun otomatik olarak buraya atlaması sağlanır.

Örneği yürüttüğümüzde çalışma zamanında(Run-time) aşağıdaki Flash görselinde yer alan etkileri izleyebiliriz. (Flash dosyasının boyutu 264 Kb olduğundan yüklenmesi zaman alabilir. Dosyanın boyutunun küçük olması için kalitesi düşürülmüştür. Bu nedenle kitap animasyon hareketi sırasında iz bırakmaktadır. Gerçek uygulamada elbetteki böyle bir iz yoktur.)

Benzer işlemleri kod tarafında yapmakta oldukça kolaydır. Bunun için aşağıdaki kodlara ve XAML içeriğine sahip pencereyi ele alabiliriz.

XAML içeriği;

Kod içeriği;

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Windows.Media.Animation; // Animasyon tiplerinin yer aldığı isim alanıdır(Namespace)

namespace AnimasyonIslemleri
{
    public partial class KodlaRotateAnimasyon : Window
    {
        private void AnimasyonuOlustur()
        {
            // Storyboard oluşturulur
            Storyboard strBrd = new Storyboard();

            // Birinci DoubleAnimation tipi oluşturulur.
            // İlk parametre To değeridir ve burada 360 dereceyi işaret etmektedir. İkinci parametre ise Duration değeridir.
            DoubleAnimation dblAni1 = new DoubleAnimation(360, new Duration(TimeSpan.FromSeconds(3)));
            // Animasyon tipinin RTrans adına sahip elementin AngleProperty özelliğine uygulanacağı belirtilir.
           Storyboard.SetTargetName(dblAni1, "RTrans");
           Storyboard.SetTargetProperty(dblAni1, new PropertyPath(RotateTransform.AngleProperty));
            // Animasyon tipi Storyboard' a eklenir.
            strBrd.Children.Add(dblAni1);

            // İkinci DoubleAnimation tipi oluşturulur.
            // İlk parametre To değeridir ve burada 2.5 katını işaret etmektedir. İkinci parametre ise Duration değeridir. Buna göre zaman çizgisinin ilk 1.5 saniyesi içerisinde Button bileşeninin ScaleX değeri 2.5 kat artmaktadır.
            DoubleAnimation dblAni2 = new DoubleAnimation(2.5, new Duration(TimeSpan.FromSeconds(1.5)));
            // Animayonun STrans isimli ScaleTransform elementi içerisindeki ScaleX özelliğine uygulanacağı belirtilir.
            Storyboard.SetTargetName(dblAni2, "STrans");
            Storyboard.SetTargetProperty(dblAni2, new PropertyPath(ScaleTransform.ScaleXProperty));
            // Animasyon tipi Storyboard' a eklenir.
            strBrd.Children.Add(dblAni2);

            // Üçüncü DoubleAnimation tipi oluşturulur.
            // İlk parametre To değeridir ve burada 2.5 katını işaret etmektedir. İkinci parametre ise Duration değeridir. Buna göre zaman çizgisinin ilk 1.5 saniyesi içerisinde Button bileşeninin ScaleY değeri 2.5 kat artmaktadır.
            DoubleAnimation dblAni3 = new DoubleAnimation(2.5, new Duration(TimeSpan.FromSeconds(1.5)));
            // Animayonun STrans isimli ScaleTransform elementi içerisindeki ScaleY özelliğine uygulanacağı belirtilir.
            Storyboard.SetTargetName(dblAni3, "STrans");
            Storyboard.SetTargetProperty(dblAni3, new PropertyPath(ScaleTransform.ScaleYProperty));
            // Animasyon tipi Storyboard' a eklenir.
            strBrd.Children.Add(dblAni3);

            // Zaman çizgisinin 3ncü saniyesine gelindiğinde Button kontrolünün ScaleX değeri ilk haline döner.
            DoubleAnimation dblAni4 = new DoubleAnimation(1, new Duration(TimeSpan.FromSeconds(3)));
            Storyboard.SetTargetName(dblAni4, "STrans");
            Storyboard.SetTargetProperty(dblAni4, new PropertyPath(ScaleTransform.ScaleXProperty));
            // Animasyon tipi Storyboard' a eklenir.
            strBrd.Children.Add(dblAni4);

            // Zaman çizgisinin 3ncü saniyesine gelindiğinde Button kontrolünün ScaleY değeri ilk haline döner.
            DoubleAnimation dblAni5 = new DoubleAnimation(1, new Duration(TimeSpan.FromSeconds(3)));
            Storyboard.SetTargetName(dblAni5, "STrans");
            Storyboard.SetTargetProperty(dblAni5, new PropertyPath(ScaleTransform.ScaleYProperty));
            // Animasyon tipi Storyboard' a eklenir.
            strBrd.Children.Add(dblAni5);

            // Mouse ile Button alanı üzerinde gelindiğinde animasyon başlatılır.
            btnMerhaba.MouseEnter += delegate(object sender, MouseEventArgs e)
                                                    {
                                                        /* İkinci parametre Storyboard' un kontrol edilebileceğini gösterir. Bir başka deyişle programatik olarak animasyonun durdurulması, duraksatılması ve benzeri işlemlerin yapılabilmesi sağlanır. */
                                                        strBrd.Begin(this,true);
                                                    };

            btnMerhaba.MouseLeave += delegate(object sender, MouseEventArgs e)
                                                    {
                                                        // Storyboard' un başlattığı animasyon çıkartılır. Dolayısıyla Button açısal konum ve büyüklük olarak ilk değerlerine döner.
                                                        strBrd.Stop(this);
                                                    };
        }

        public KodlaRotateAnimasyon()
        {
            InitializeComponent();
            AnimasyonuOlustur();
        }
    }
}

Kod yapısında dikkat edilmesi gereken önemli noktalardan birisi, MouseLeave olayının gerçekleşmesi halinde var olan amimasyonun durdurulması(Stop) işleminin Storyboard nesne örneğine ait Stop metodu ile gerçekleştirimiş olmasıdır. Lakin burada Stop metodunun işe yarayabilmesi için animasyon Begin metodu ile başlatılırken ikinci parametrenin true olarak verilmesi şarttır. Bu parametrenin true olarak verilmesi halinde yanlızca Stop metodu değil, Pause, Resume, Remove gibi yönetsel fonksiyonelliklerinde kullanılabilir hale gelmesi sağlanmaktadır.

Animasyon işlemlerinde zaman çizgileri (Timeline) içerisinde yer alan KeyFrame' lerin yönetilmesi ve bu sayede daha güçlü hareketlerin sağlanabilmeside mümkündür. Bu amaçla WPF yapısı içerisine 3 temel KeyFrame tipi konulmuştur. Bunlar LinearDoubleKeyFrame, DiscreteDoubleKeyFrame, SplineDoubleKeyFrame tipleridir. Söz konusu tiplerin ne şekilde kullanıldıklarını örnekler ile incelediğimizde konuyu daha rahat kavrayabiliriz. Sıradaki örneğimizde LinearDoubleKeyFrame tipini kullanıyor olacağız. Bu amaçla ilk olarak aşağıdaki XAML çıktısını içeren bir pencere (Window) hazırladığımızı düşünelim.

XAML içeriği;

Dikkat edileceği üzere örnekte kullanılan LienarDoubleKeyFrame elementleri DoubleAnimationUsingKeyFrames elementi içerisinde yer almaktadır. Buna göre KeyFrame tiplerinin TipAdıUsingKeyFrames notasyonu ile tanımlanmış tipler içerisinde olması gerektiği ortadadır. Peki burada yer alan LinearDoubleKeyFrame elementleri ne işe yaramaktadır?

Value özelliği ile tahmin edileceği gibi DoubleAnimationUsingKeyFrames elementinde belirtilen kontrol ve ilgili özelliğin yeni değeri belirlenir. KeyTime niteliği ilede, özelliğin zaman çizelgesi içerisinde belirtilen anda değerini alması sağlanır. Bir başka deyişle örnekte kullanılan Dortgen isimli Rectangle elementinin pencerenin(Window) üst kısmından olan uzaklığı, zaman çizelgesi(timeline) içerisinde Frame noktalarında farklı değerlere set edilmektedir. Aslında durumu daha iyi kavramak için pencerenin çalışma zamanındaki çıktısına bakmakta fayda vardır. Aşağıdaki Flash animasyonunda bu durum işaret edilmektedir.(Flash dosyasının boyutu 322 Kb olduğundan yüklenmesi zaman alabilir. Dosyanın boyutunun küçük olması için kalitesi düşürülmüştür. Bu nedenle kitap animasyon hareketi sırasında iz bırakmaktadır. Gerçek uygulamada elbetteki böyle bir iz yoktur.)

Görüldüğü gibi dörtgenimiz zaman çizelgesinin 2nci saniyesinde pencerenin üst kenarının 160 piksel, 4ncü saniyesinde tekrardan 0 piksel, 6ncı saniyesinde 100 piksel, 8nci saniyesinde 40 piksel, 10ncu saniyesinde ise 80 piksel uzağına gelmektedir. Sonrasında ise bu animasyon hareketini tersine doğru yapmaktadır. Bunun için Storyboard elementinin AutoReverse özelliğine true değerinin atanması yeterli olmaktadır. Durumu aşağıdaki şekil ile daha net bir şekilde anlayabiliriz.

Aynı örneği kod yardımıylada gerçekleştirebiliriz. Bunun için aşağıdaki XAML içeriğine ve kodlarına sahip bir pencere(Window) geliştirmemiz yeterli olacaktır.

XAML içeriği;

Kod içeriği;

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Windows.Media.Animation;

namespace AnimasyonIslemleri
{
    public partial class KodlaMerhabaKeyFrameAnimasyon : Window
    {
        private void AnimasyonuHazirla()
        {
            // DoubleAnimationKeyFrames nesnesi örneklenir.
            DoubleAnimationUsingKeyFrames dblKeyFrames = new DoubleAnimationUsingKeyFrames();
            // Animasyon tipi, kontrol ve özelliğini ilişkilendirecek olan StoryBoard oluşturulur.
            Storyboard strBrd = new Storyboard();
            // Animasyon sona erdiğinde aynı rotadan geriye doğru dönmesi için AutoReverse özelliğine true değeri atanır
            strBrd.AutoReverse = true;
            // Animasyonun sürekli olması için RepeatBehavior özelliğine Forever değeri atanır.
            strBrd.RepeatBehavior = RepeatBehavior.Forever;
            // Hedef kontrol olarak Rectangle tipinden olan Dortgen seçilir
            Storyboard.SetTargetName(dblKeyFrames, "Dortgen");
            // Animasyon değerlerinin uygulanacağı özellikl olarak Canvas' ın Top özelliği seçilir.
            Storyboard.SetTargetProperty(dblKeyFrames, new PropertyPath(Canvas.TopProperty));
            // KeyFrame değerleri belirlenir.
            // İlk 1 saniyede Canvas dikeylemesine 120 pikselinci uzaklığa gelecektir
            dblKeyFrames.KeyFrames.Add(new LinearDoubleKeyFrame(120, KeyTime.FromTimeSpan(new TimeSpan(0, 0, 1))));
            // 2nci saniyede Canvas dikeylemesine 0 pikselinci uzaklığa gelecektir
            dblKeyFrames.KeyFrames.Add(new LinearDoubleKeyFrame(0, KeyTime.FromTimeSpan(new TimeSpan(0, 0, 2))));
            // 3ncü saniyede Canvas dikeylemesine 100 pikselinci uzaklığa gelecektir
            dblKeyFrames.KeyFrames.Add(new LinearDoubleKeyFrame(100, KeyTime.FromTimeSpan(new TimeSpan(0, 0, 3))));
            // 4ncü saniyede Canvas dikeylemesine 50 pikselinci uzaklığa gelecektir
            dblKeyFrames.KeyFrames.Add(new LinearDoubleKeyFrame(50, KeyTime.FromTimeSpan(new TimeSpan(0, 0, 4))));
            // 5nci saniyede Canvas dikeylemesine 75 pikselinci uzaklığa gelecektir.
            dblKeyFrames.KeyFrames.Add(new LinearDoubleKeyFrame(75, KeyTime.FromTimeSpan(new TimeSpan(0, 0, 5))));
            // 6nci saniyede Canvas dikeylemesine 25 pikselinci uzaklığa gelecektir.
            dblKeyFrames.KeyFrames.Add(new LinearDoubleKeyFrame(25, KeyTime.FromTimeSpan(new TimeSpan(0, 0, 6))));
            // Animasyon tipi StoryBoard nesnesine eklenir
            strBrd.Children.Add(dblKeyFrames);
            // Animasyonun, Mouse ile Dortgen in üzerine gelindiğinde başlaması sağlanır.
            Dortgen.MouseEnter += delegate(object sender, MouseEventArgs e)
                                                {
                                                    strBrd.Begin(this);
                                               };
        }
        public KodlaMerhabaKeyFrameAnimasyon()
        {
            InitializeComponent();
            AnimasyonuHazirla();
        }
    }
}

Kod tarafında dikkat edilmesi gereken noktalardan birisi LinearDoubleKeyFrame nesne örneklerinin DoubleAnimationUsingKeyFrames tipinin KeyFrames koleksiyonunda tutuluyor olmasıdır. KeyFrames özelliği üzerinden çağırılan Add metodu ile ilgili nesnelerin koleksiyona eklenmesi sağlanır. Oldukça eğlenceli değil mi? Gelin LinearDoubleKeyKeyFrame nesnelerinin kullanıldığı başka bir örnek ile devam edelim. Bu yeni örnekte bir öncekinden farklı olarak Canvas' ın Top ve Left özelliklerini rastegele oranlarda değiştiriyor olacağız. İşte örnek XAML içeriği ve kodlarımız.

XAML içeriği;

Kod içeriği;

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Windows.Media.Animation;

namespace AnimasyonIslemleri
{
    public partial class KodlaKeyFrameAnimasyon2 : Window
    {
        Random rnd = new Random();
        Storyboard strBrd = new Storyboard();

        public void AnimasyonuYurut()
        {
           double randomT = rnd.Next(1, 250);
            double randomL = rnd.Next(1, 250);
            Title=String.Format("İlk nokta {0}:{1} İkinci Nokta {2}:{3}",randomT.ToString(),randomL.ToString(),(randomT - 25).ToString(),(randomL - 25).ToString());

            strBrd.AutoReverse = false;
            strBrd.RepeatBehavior = new RepeatBehavior(1);

            DoubleAnimationUsingKeyFrames keyFrm1 = new DoubleAnimationUsingKeyFrames();
            keyFrm1.KeyFrames.Add(new LinearDoubleKeyFrame(randomT, KeyTime.FromTimeSpan(new TimeSpan(0, 0, 3))));
            keyFrm1.KeyFrames.Add(new LinearDoubleKeyFrame(randomT-25, KeyTime.FromTimeSpan(new TimeSpan(0, 0, 5))));

            Storyboard.SetTargetName(keyFrm1, "dortgenim");
            Storyboard.SetTargetProperty(keyFrm1, new PropertyPath(Canvas.TopProperty));
            strBrd.Children.Add(keyFrm1);

            DoubleAnimationUsingKeyFrames keyFrm2 = new DoubleAnimationUsingKeyFrames();
           keyFrm2.KeyFrames.Add(new LinearDoubleKeyFrame(randomL, KeyTime.FromTimeSpan(new TimeSpan(0, 0, 3))));
            keyFrm2.KeyFrames.Add(new LinearDoubleKeyFrame(randomL-25, KeyTime.FromTimeSpan(new TimeSpan(0, 0, 5))));

            Storyboard.SetTargetName(keyFrm2, "dortgenim");
            Storyboard.SetTargetProperty(keyFrm2, new PropertyPath(Canvas.LeftProperty));
            strBrd.Children.Add(keyFrm2);

            strBrd.Begin(this);
        }

        void dortgenim_MouseEnter(object sender, MouseEventArgs e)
        {
            AnimasyonuYurut();
        }

        public KodlaKeyFrameAnimasyon2()
        {
            InitializeComponent();
            dortgenim.MouseEnter += new MouseEventHandler(dortgenim_MouseEnter);
        }
    }
}

Tahmin edileceği üzere dortgenin Top ve Left özelliklerini animayon içerisinde kullanmak istediğimizden iki farklı DoubleAnimationUsingKeyFrames nesne örneği kullanılması gerekmektedir. Bu nesne örnekleride kendi içlerinde farklı LinearDoubleKeyFrame nesnelerine sahiptir. Örneğin çalışma zamanındaki(run-time) çıktısı aşağıdaki Flash görselindeki gibi olacaktır. (Flash dosyasının boyutu 454 Kb olduğundan yüklenmesi zaman alabilir. Dosyanın boyutunun küçük olması için kalitesi düşürülmüştür. Bu nedenle kitap animasyon hareketi sırasında iz bırakmaktadır. Gerçek uygulamada elbetteki böyle bir iz yoktur.)

LinearDoubleKeyFrame tipi söz konusu değerlere ulaşılırken akıcı bir görselliğin olmasını sağlar. Bunun dışında DiscreteDoubleKeyFrame tipi kullanılaraktan nesnenin belirtilen animasyonda bir sonraki değerine sıçrayarak geçmesi sağlanabilir. Aslında bu durumu anlamanın en iyi yolu örnek bir senaryo üzerinde ilerlemektir. Bu amaçla aşağıdaki XAML çıktısına sahip bir pencere(Window) tasarladığımızı düşünelim.

XAML içeriği;

Örnekte iki adet DoubleAnimationUsingKeyFrames elementi kullanılmıştır. Bunlardan birisi Canvas tipinin Top özelliği üzerinde diğeri ise Left özelliği üzerinden animasyon işlemlerinin yürütülmesini olanaklı kılmaktadır. Her biri kendi içerisinde birden fazla DiscreteDoubleKeyFrame tipi içermektedir. DiscreteDoubleKeyFrame elementleri KeyTime niteliğinde belirtilen anda, animasyon uygulanan kontrolün ilgili özelliğinin value niteliği ile belirtilen değerde olmasını sağlamaktadır. Söz gelimi animasyondaki zaman çizelgesinin 2nci saniyesinde Top değeri 30 piksel, 1.5nci saniyesinde Left değeri 150 piksel olacak şekilde belirlenmektedir. Daha öncede belirtildiği gibi kontrolün söz konusu koordinat noktalarına ulaşması sırasında akıcı bir efekt yerine sıçrama(Jump) efekti uygulanmaktadır. Her halde bir yerden bir yere ışınlanmanın WPF' cesinin bu olduğunu söyleyebiliriz. Bu durumu aşağıdaki Flash görselinden daha net bir şekilde analiz edebiliriz.

Elbetteki aynı örneği kod yardımıylada gerçekleştirebiliriz. Bunun için aşağıdaki XAML içeriğine ve kodlara sahip bir pencere hazırlamamız yeterli olacaktır.

XAML içeriği;

Kod içeriği;

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Windows.Media.Animation; // Animasyon tiplerini içeren isim alanıdır

namespace AnimasyonIslemleri
{
    public partial class KodlaDiscreteKullanimi : Window
    {
        private void AnimasyonuHazirla()
        {
            // Storyboard nesnesi örneklenir
            Storyboard strBrd = new Storyboard();
            // Animasyonun sürekli tekrar edeceği belirtilir
            strBrd.RepeatBehavior = RepeatBehavior.Forever;
            // Animasyonun zaman çizgisini tamamladığında aynı yoldan geriye dönmesi sağlanır
            strBrd.AutoReverse = true;

            // Dortgen nesnesinde Canvas' ın Top özelliği üzerinde Frame bazlı animasyon yapılmasını sağlayacak şekilde DoubleAnimationUsingKeyFrames nesnesi örneklenir
            DoubleAnimationUsingKeyFrames dblA1 = new DoubleAnimationUsingKeyFrames();
            Storyboard.SetTargetName(dblA1, "Dortgen");
            Storyboard.SetTargetProperty(dblA1, new PropertyPath(Canvas.TopProperty));

            // Frame' lerdeki Top özelliğinin değerleri belirtilir. Bunun için DiscreteDoubleKeyFrame nesneleri örneklenerek KeyFrames koleksiyonuna eklenir.
            dblA1.KeyFrames.Add(new DiscreteDoubleKeyFrame(150, KeyTime.FromTimeSpan(new TimeSpan(0, 0, 1))));
            dblA1.KeyFrames.Add(new DiscreteDoubleKeyFrame(30, KeyTime.FromTimeSpan(new TimeSpan(0, 0, 2))));
            dblA1.KeyFrames.Add(new DiscreteDoubleKeyFrame(120, KeyTime.FromTimeSpan(new TimeSpan(0, 0, 3))));
            dblA1.KeyFrames.Add(new DiscreteDoubleKeyFrame(60, KeyTime.FromTimeSpan(new TimeSpan(0, 0, 4))));
            dblA1.KeyFrames.Add(new DiscreteDoubleKeyFrame(90, KeyTime.FromTimeSpan(new TimeSpan(0, 0, 5))));
            dblA1.KeyFrames.Add(new DiscreteDoubleKeyFrame(75, KeyTime.FromTimeSpan(new TimeSpan(0, 0, 6))));
            // DoubleAnimationUsingKeyFrames nesne örneği Storyboard' a alt element olarak eklenir.
            strBrd.Children.Add(dblA1);

            DoubleAnimationUsingKeyFrames dblA2 = new DoubleAnimationUsingKeyFrames();
            Storyboard.SetTargetName(dblA2, "Dortgen");
            Storyboard.SetTargetProperty(dblA2, new PropertyPath(Canvas.LeftProperty));

            dblA2.KeyFrames.Add(new DiscreteDoubleKeyFrame(150, KeyTime.FromTimeSpan(new TimeSpan(0,0, 0, 1,500))));
            dblA2.KeyFrames.Add(new DiscreteDoubleKeyFrame(30, KeyTime.FromTimeSpan(new TimeSpan(0, 0,0, 2,500))));
            dblA2.KeyFrames.Add(new DiscreteDoubleKeyFrame(120, KeyTime.FromTimeSpan(new TimeSpan(0, 0,0, 3,500))));
            dblA2.KeyFrames.Add(new DiscreteDoubleKeyFrame(60, KeyTime.FromTimeSpan(new TimeSpan(0, 0,0, 4,500))));
            dblA2.KeyFrames.Add(new DiscreteDoubleKeyFrame(90, KeyTime.FromTimeSpan(new TimeSpan(0, 0, 0,5,500))));
            dblA2.KeyFrames.Add(new DiscreteDoubleKeyFrame(75, KeyTime.FromTimeSpan(new TimeSpan(0, 0, 0,6,500))));
            strBrd.Children.Add(dblA2);

            // Pencere yüklendikten sonra
            Loaded += delegate(object sender, RoutedEventArgs e)
                            {
                                // Animasyon başlatılır
                                strBrd.Begin(this);
                            };

        }
        public KodlaDiscreteKullanimi()
        {
            InitializeComponent();
            AnimasyonuHazirla();
        }
    }
}

Frame tabanlı animasyon işlemlerinde LinearDoubleKeyFrame ve DiscreteDoubleKeyFrame tipleri dışında kullanılabilen bir diğer sınıfta SplineDoubleKeyFrame' dir. Bu tip sayesinde, animasyon işlemi sırasındaki ileri ve geri yönlü hareketlerde, hızlanma ve yavaşlama oranları daha net bir şekilde belirlenebilir. Söz konusu hızlanma verilerini belirlemek için, sadece 0.0 ile 1.0 arasında değerler alabilen KeySpline özelliğinden yararlanılır. Aşağıdaki XAML içeriğine sahip örnekte SplienDoubleKeyFrame tipi kullanılmaktadır.

XAML içeriği;

Bu örneğin çalışma zamanındaki çıktısı aşağıdaki Flash animasyonunda olduğu gibidir.(Flash dosyasının boyutu 298 Kb olduğundan yüklenmesi zaman alabilir.)

Dikkat edilecek olursa düşey düzlemde hareket eden resim 3 saniyelik zaman dilimi içerisinde pencerenin üst noktasından 200 piksel aşağıya gelmektedir. Ancak bu hareketi sırasında KeySpline niteliğinde belirtilen değerler nedeni ile düşey olarak hızlanarak ve ters yönde de yavaşlayarak ilerlemektedir. KeySpline niteliğindeki değerler ile oynayarak daha farklı etkiler de elde edilebilir. Hatta bu değerler ile oynayarak farklı etkilerin nasıl oluşturulabileceğini incelemenizi şiddetle tavsiye ederim. Aynı örnek kod yardımıylada aşağıdaki gibi geliştirilebilir.

XAML içeriği;

Kod içeriği;

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Windows.Media.Animation; // Animasyon tiplerini içeren isim alanıdır

namespace AnimasyonIslemleri
{
    public partial class KodlaSplineKullanimi : Window
    {
        private void AnimasyonuHazirla()
        {
            // Storyboard nesnesi örneklenir, animasyonun tekrarlı ve geriye dönüşlü olacak şekilde çalışacağı belirlenir
            Storyboard strBrd = new Storyboard();
            strBrd.RepeatBehavior = RepeatBehavior.Forever;
            strBrd.AutoReverse = true;

            DoubleAnimationUsingKeyFrames dblA = new DoubleAnimationUsingKeyFrames();

            // SplineDoubleKeyFrame nesnesi eklenir. Üçüncü parametre ile hızlanma ve yavaşlama değerleri belirlenir.
            dblA.KeyFrames.Add(new SplineDoubleKeyFrame(200, KeyTime.FromTimeSpan(new TimeSpan(0, 0, 3)), new KeySpline(0.3, 0, 0.9, 0.3)));
            // Animasyonun Dortgen isimli nesneye ve içinde bulunduğu Canvas' ın Top özelliğine uygulanacağı belirlenir
            Storyboard.SetTargetName(dblA, "Dortgen");
           Storyboard.SetTargetProperty(dblA, new PropertyPath(Canvas.TopProperty));

            // Animasyon nesnesi Storyboard' a alt element olarak eklenir
            strBrd.Children.Add(dblA);

            // Pencerenin yüklenmesi tamamlandıktan sonra
            Loaded += delegate(object sender, RoutedEventArgs e)
                            {
                                // Animasyon başlatılır
                                strBrd.Begin(this);
                            };
        }
        public KodlaSplineKullanimi()
        {
            InitializeComponent();
           AnimasyonuHazirla();
        }
    }
}

Bu örneklerdende anlaşılacağı üzere farklı veri tipleri için yazılmış olan Frame bazlı animasyon tipleri olduğunu söyleyebiliriz. Geliştirilen örnekler double tipi ile çalışan özellikler üzerinde Frame bazlı animasyonlar geliştirilebilmesi için DoubleAnimationUsingKeyFrames tipini kullanmaktadır. Ancak bu tip dışında ColorAnimationUsingKeyFrames, PointAnimationUsingKeyFrames, ByteAnimationUsingKeyFrames vb... sınıflarda yer almaktadır. Tüm bu Frame bazlı animasyon tipleri LinearTipAdıKeyFrame, DiscreteTipAdıKeyFrame ve SplineTipAdıKeyFrame sınıflarına ait nesne örnekleri ile çalışabilmektedir. Tabiki bu durum her veri türü için geçerli değildir. Söz gelimi StringAnimationKeyFrames tipi sadece DiscreteStringKeyFrame sınıfına ait nesne örneklerini taşıyabilir. Dolayısıyla enterpoasyon(Interpolation) efektleri gerçekleştirilemez.

Sıradaki örnekte bir Button kontrolünün Text özelliğinin içeriğini Frame bazlı animasyon işleminde nasıl ele alabileceğimizi inceleyeceğiz. Bu amaçla XAML içeriği aşağıdaki gibi olan bir pencere tasarladığımızı düşünelim.

XAML içeriği;

Bu örneğin çalışma zamanındaki işleyişi aşağıdaki Flash görselinde olduğu gibidir. DiscreteStringKeyFrame elementlerine ait Value nitelikleri tahmin edileceği üzere, animasyonun bağlandığı kontrolün ilgili özelliğindeki string bilginin t anında ne olacağını belirtmekte kullanılmaktadır. KeyTime niteliğine verilen değerler ile söz konusu t anları belirtilir.

Elbetteki bu örnekteki animasyon etkisi kod yardımıylada geliştirilebilir. Aşağıdaki kod parçalarında bu duruma bir örnek verilmektedir.

XAML içeriği;

Kod içeriği;

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Windows.Media.Animation;

namespace AnimasyonIslemleri
{
    public partial class KodlaStringKeyFrameAnimasyon : Window
    {
        string slogan = "CSharp az keyword ile çok iş yapmamızı sağlayan bir dildir";

        private void AnimasyonuHazirla()
        {
           Storyboard strBrd = new Storyboard();
            strBrd.RepeatBehavior = RepeatBehavior.Forever;

            StringAnimationUsingKeyFrames strA = new StringAnimationUsingKeyFrames();
            string[] kelimeler = slogan.Split(' ');
            strBrd.Duration = TimeSpan.FromSeconds(kelimeler.Length + 1);
            for(int i=1;i<=kelimeler.Length;i++)
            {
                strA.KeyFrames.Add(new DiscreteStringKeyFrame(kelimeler[i-1],KeyTime.FromTimeSpan(TimeSpan.FromSeconds(i))));
            }
            Storyboard.SetTargetName(strA, "btnMerhaba");
            Storyboard.SetTargetProperty(strA, new PropertyPath(Button.ContentProperty));
            strBrd.Children.Add(strA);
            btnMerhaba.MouseEnter += delegate(object sender, MouseEventArgs e)
                                                    {
                                                        strBrd.Begin(this);
                                                    };
        }
        public KodlaStringKeyFrameAnimasyon()
        {
            InitializeComponent();
           AnimasyonuHazirla();
        }
    }
}

Bu kez, bir slogan cümle içerisindeki kelimeler boşluk karakterine göre Split metodu ile ayrıştırılmakta ve elde edilen string dizisindeki her bir kelime için DiscreteStringKeyFrame temelli, saniyede bir artan animasyon uygulanmaktadır. Bu örnek kod parçasının çalışma zamanındaki çıktısı ise aşağıdaki Flash görselindeki gibi olacaktır.

Makalemizde son olarak bir bileşenin belirli bir rota üzerinde hareket etmesinin animasyon teknikleri ile nasıl gerçekleştirilebileceğini incelemeye çalışacağız. Önceki makalelerimizden hatırlayacağınız gibi, Path ve PathGeometry tiplerini kullanarak birbirlerine bağlı yayların çizilmesi mümkündür. Bu tip bir elementin oluşturacağı rotayı takip eden bir bileşen söz konusu olduğunda, animasyon tiplerinden TipAdıAnimationUsingPath isimlendirmesi ile tanımlananlardan yararlanbiliriz. Örneğin bir PathGeometry ile tanımlanan rotada hareket edecek bir nesnenin içinde bulunduğu Canvas' ın Top ve Left özellikleri söz konusu ise DoubleAnimationUsingPath tipini kullanabiliriz. Aşağıdaki XAML çıktısında bu durum örneklenmeye çalışılmaktadır.

XAML içeriği;

Söz konusu örnekte, Storyboard elementi içerisinde DoubleAnimationUsingPath alt elementi kullanılmaktadır. Bu elementlerden iki adet tanımlanmasının sebebi, Dortgen isimli nesnenin Top ve Left özelliklerinin ayrı ayrı değiştirilmesi gerekliliğidir. DoubleAnimationUsingPath tipinde yer alan niteliklerden Storyboard.TargetName ile animasyonun hangi kontrole uygulanacağı belirtilir ki bu örnekte söz konusu kontrol Dortgen isimli Rectangle dır. Storyboard.TargetProperty nitelikleri ise Rectangle' ın içerisinde bulunduğu Canvas' ın Top ve Left özelliklerinin değerleri üzerinde hareketlendirmeler yapılacağını belirtir. PathGeometry nitelikleri tahmin edileceği üzere rota bilgisini içeren pencere kaynağını (Windows Resource) işaret etmektedir. MSDN kaynakları Resource olarak yapılan bu tip tanımlamaların animasyon işlemlerinde performans yönünden olumlu katkı yapacağını belirtmektedir. Static kaynak olarak tanımlanan YolGeometrisi isimli veri kümesi yardımıyla Path elementinin rota bilgiside verilmektedir. Bunun içinde Path elementinin Data niteliğine değer ataması yapılmıştır. Bu örneğin çalışma zamanındaki çıktısı aşağıdaki Flash animasyonunda olduğu gibidir. (Flash dosyasının boyutu 352 kb olduğundan yüklenmesi zaman alabilir.)

Görüldüğü gibi WPF mimarisinde gerek XAML tarafında gerekse kod tarafında animasyon işlemleri için son derece etkili yollar kullanılabilmektedir. Bence burada önemli olan noktalardan biriside işaretleme dili içerisinde bu tip gelişmiş fonksiyonelliklerin geliştirilebilmesidir. İlerleyen makalelerimizde WPF ile ilgili farklı konularada değinmeye çalışacağız. Böylece geldik bir makalemizin daha sonuna. Bir sonraki makalemizde görüşünceye dek hepinize mutlu günler dilerim.

Örnek Uygulama için Tıklayın

0f4774e8-e2b0-498a-a5da-5db1b8a7ad84|0|.0

Tags:		wpf
Categories:		WPF
Actions:		E-mail \| del.icio.us \| Permalink \| Yorumlar (0) \| Comment RSS

WPF Temel Animasyon İşlemleri - 1

Çarşamba, 26 Eylül 2007 19:03 by bsenyurt

Windows uygulamalarında kullanıcılara görsel bir şölen sunmak için animasyon işlemlerinden yararlanılır. Ne varki söz konusu animasyonları gerçekleştirebilmek amacıyla zorlu olan bazı süreçlerin aşılması gerekmektedir. Burada aslında, GDI+(Graphics Device Interface) alt yapısını(Infrastructure) daha etkili kullanmak adına daha çok ve daha karmaşık kodların yazılması, form üzerinde animasyonun zaman çizelgesine göre Timer bileşenleri ile Interval özelliği ve Tick olayı(event) gibi üyelerlerle uğraşılması ve hatta yeri geldiğinde ana iş parçasının(Main Thread) bozabileceği durumların önüne geçmek için özel tedbirler alınması söz konusudur. Hele birde işin içerisine üç boyutlu(3D) nesneler girdiğinde ve bunların üzerinde kullanıcı etkileşimli olayların tetiklenebilmesi de istendiğinde programıcının geliştirme süreci hem zorlaşacak hemde uzayacaktır. Tabiki günümüzde bu tip işlemleri gerçekleştirmek için ele alına pek çok kolaylaştırıcı yazılım vardır. Ancak bir olaya .Net Windows programcısı olarak bakıyor olacağız. Durumun zorluğunu daha net anlayabilmek adına, basit olarak form üzerinde yer alan bir Button kontrolünün yükseklik(Height) ve genişlik(Width) özelliklerinin sürekli olarak belirli oranlarda büyüyüp küçüldüğünü düşünelim. Bunu Windows programlamada nasıl yapmamız gerektiğini hayal edin. Her şeyden önce sürenin söz konusu olduğu bu senaryoda bir Timer bileşenin var olması ve Tick olayının uygun şekilde ele alınması(Handle) gerekmektedir. Oysaki WPF (Windows Presentation Foundation) mimarisinde bu ve benzeri animasyon işlemleri çok daha kolay, hızlı ve güçlü bir şekilde gerçekleştirilebilmektedir. İşte bu makalemizde söz konusu durumu incemeleye başlayacak ve WPF mimarisinde temel animasyon işlemlerine değineceğiz. WPF mimarisinin söz konusu animasyon geliştirme işlerini nasıl kolaylaştırdığını görmek adına aşağıda XAML(eXtensible Application Markup Language) çıktısı aşağıda görülen örnek ile hızlı bir şekilde başlamakta yarar olacağı kanısındayım.

XAML içeriğinde yer alan elementler ve nitelikleri(attributes) hakkında konuşmadan önce bu pencerenin çalışma zamanına bir bakalım. Aşağıdaki Flash animasyonunda çalışma zamanındaki(run-time) durum görülmektedir. Dikkat edilecek olursa pencere(Window) üzerindeki Button kontrolünün Width ve Height özelliklerinde genişlemeler olmaktadır. Dikkat çekici bir diğer noktada animasyonun, mouse ile Button kontrolü üzerine gelindiğinde başladığıdır. Bununla birlikte söz konusu aminasyon sürekli olarak devam etmektedir.

Gelelim XAML içeriğinde neler yapıldığına. Daha önceki makalelerimizden de hatırlanacağı gibi Button bileşeninin arka planında LinearGradientBrush elementi ile geçişli renklerden oluşan bir dolgu efekti kullanılmaktadır. Button elementinin içerisinde animasyon özelliklerinin belirtildiği yer Button.Triggers alt elementi ile başlamaktadır. Hemen altta yer alan EventTrigger elementinin RoutedEvent niteliğine atanan değer ile animasyonun hangi olayın tetiklenmesi sonrası başlatılacağı belirtilmektedir. Örneğimizde MouseEnter olayı bu amaçla kullanılmaktadır. Burada olay adı belirtilirken tipAdı.Özellikadı (örneğin Button.MouseEnter gibi) şeklinde olmasına dikkat edilmelidir. Aksi durumda bir istisna(Exception) alınması muhtemeldir. Dolayısıyla temel anlamda animasyonların başlatılabilmesi için olaylardan yararlanılabildiğini ve bunların ilgili kontrollere birer tetikleyici(Trigger) ile bağlandığını söyleyebiliriz.

NOT : Bir kontrolün animasyon işlemlerinde kullanılabilmesi için IAnimatable arayüzünü uyarlamış(Implement) olması gerekmektedir. Söz gelimi Button bileşeninin sınıf diagramındaki(Class Diagram) görüntüsüne bakıldığında IAnimatable arayüzünü uyarladığı açık bir şekilde görülebilir.

Animasyon işlemlerinde önemli olan noktalardan birisi kontrolün veya şeklin hangi özelliğinin değerinin, ne şekilde değiştirileceğidir. İlk örnekte Button kontrolünün Width ve Height özelliklerinin değerlerinin her ikisi birden değiştirilmektedir. Peki WPF mimarisinde hangi kontrolün hangi özelliğinin değerinin, ne şekilde değiştirileceği nasıl belirlenmektedir? İşte bu noktada devreye StoryBoard tipi ve alt elementleri girmektedir.

NOT : StoryBoard tipi hangi kontrolün hangi özelliği üzerinde nasıl bir animasyon uygulanacağını belirleyip bunu başlatmak ve belirli bir tetikleyici(Trigger) olaya bağlamak için kullanılan önemli bir sınıftır.

Örnek XAML içeriğinde dikkat edilecek olursa StoryBoard elementi altında iki adet DoubleAnimation elementi tanımlanmıştır.

NOT : WPF içerisinde yer alan temel animasyon tipleri(Basic Animation Types) uygun veri türleri ile çalışacak şekilde tasarlanmışlardır. Bu tiplerin adları DoubleAnimation, ColorAnimation, PointAnimation, VectorAnimation örneklerinde olduğu gibi TürAdıAnimation kelimelerinden oluşmaktadır. Animasyon tipleride IAnimatable arayüzünü uyarlamaktadır. Söz gelimi örnekte kullanılan DoubleAnimation tipinin sınıf diagramındaki(Class Diagram) görüntüsü aşağıdaki gibidir.

Ayrıca söz konusu animasyon tipleri Animatable isimli abstract sınıfdan da türemektedir. Buna göre ilgili abstract sınıfı ve arayüzü kullanarak kendi animasyon tiplerimizde yazabiliriz. WPF içerisinde temel animasyon tipleri dışında yer alan animasyon tipleride vardır. ColorAnimationUsingKeyFrames gibi. Bu tipleri ilerleyen makalelerimizde incelemeye çalışıyor olacağız.

Burada animasyon tipinin kullanımı ve özellikleri hakkında biraz konuşmakta yarar vardır. Örnekte yer alan Button kontrolünün animasyon etkisi oluşturan özellikleri Width ve Height üyeleridir. Bu özellikler Double tipinden değerler alabilmektedir. Bu nedenle StoryBoard içerisinde tanımlanan animasyon tipleri DoubleAnimation tipindendir. Dolayısıyla animasyon işleminde kullanılacak olan kontrol özelliği için, uygun olan animasyon tipinin seçilmesi gerekmektedir. DoubleAnimation tipi içerisinde oldukça önemli nitelik(attribute) tanımlamaları yer almaktadır. Bunlardan StoryBoard.TargetName niteliği ile animasyonun uygulanacağı kontrol seçilmektedir ki örnekte bu btnMerhaba isimli Button kontrolüdür. Diğer taraftan StoryBoard.TargetProperty niteliği ile kontrolün hangi özelliğinin animasyon işleminde kullanılacağı belirtilir. From niteliği ile hedef özelliğin hangi değerden başlayacağı, To niteliği ilede hedef özelliğin ilgili değerinin hangi değere kadar gelebileceği belirtilir.

Bir başka deyişle Button kontrolünün genişliği 100 değerinden 150 değerine gelecekse From niteliğine 100, To niteliğine ise 150 değerleri atanır. Burada istenirse By niteliği kullanılarak değerin artış oranıda belirtilebilir. Çok doğal olarak animasyonun ne kadar süre devam edeceği bilgisinin de belirtilmesi gerekmektedir. Bu amaçla DoubleAnimation tipinin Duration niteliği kullanılmaktadır. Duration niteliği temelde saat:dakika:saniye şeklinde bir değer almaktadır. Buna göre örnek XAML içeriğinde yer alan 0:0:1 değeri animasyondaki zaman çizgisinin (Timeline) 1 saniye olacağını belirtmektedir. RepeatBehavior niteliği ile animasyonun tekrar sayısı belirtilir. Örnekte verilen Forever değerine göre animasyon sürekli olarak devam edecektir. Son olarak AutoReverse değerine true atanarak, 1 saniyelik animasyon sona erdiğinde işlemlerin tekrar başlangıç haline tersten bir animasyon ile gitmesi sağlanmaktadır. Bu nedenle Flash animasyonunda görüldüğü gibi kontrol büyüdükten sonra aynı animasyon etkisi ile tersten küçülmüş ve ilk haline gelmiştir.

İlk örnekte söz konusu animasyon işlemleri için XAML elementlerinden ve niteliklerinden(attributes) yararlanılmıştır. Çok doğal olarak kod ile dinamik olarak aynı etkiler oluşturulabilir. Sıradaki örneğimizde kod tarafında animasyon işlemlerinin nasıl yapılabileceğini incelemeye çalışacağız. Bu amaçla penceremize(Window) ait XAML içeriğini ve kodlarını aşağıdaki gibi hazırladığımızı düşünelim.

XAML içeriği;

Kod içeriği;

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Windows.Media.Animation; // Animasyon tiplerini barındıran isim alanıdır

namespace AnimasyonIslemleri
{
    public partial class KodlaMerhabaAnimasyon : Window
    {
        private void AnimasyonuHazirla()
        {
            // Button kontrolünün Width özelliği üzerinde animasyon işlemi yaptıracağımızdan ve Width özelliği Double tipinden değerler aldığından DoubleAnimation tipi kullanılmaktadır.
            // İlk parametre From
            // İkinci parametre To
            // Üçüncüd parametre animasyonun süresi
            DoubleAnimation dblAnmtr = new DoubleAnimation(100, 150, new Duration(new TimeSpan(0, 0, 0, 3)));
            // Animasyonun tekrar sayısı belirtilir.
            dblAnmtr.RepeatBehavior = new RepeatBehavior(2);

            // Yeni bir StoryBoard oluşturulur
            Storyboard strBrd = new Storyboard();
            // DoubleAnimation tipi bu storyBoard' a eklenir
           strBrd.Children.Add(dblAnmtr);
            // Hedef kontrol belirlenir
            Storyboard.SetTargetName(dblAnmtr, btnMerhaba.Name);
            // Animasyon işleminde Button kontrolünün hangi özelliğinin değiştirileceği belirtilir.
           Storyboard.SetTargetProperty(dblAnmtr,new PropertyPath(Button.WidthProperty));
            // Animasyon Begin metodu ile Button üzerine Mouse ile gelindiğinde başlatılır
            btnMerhaba.MouseEnter += delegate(object sender, MouseEventArgs e)
                                                   {
                                                       strBrd.Begin(this);
                                                    };
        }

        public KodlaMerhabaAnimasyon()
        {
            InitializeComponent();
            AnimasyonuHazirla();
        }
    }
}

Bu kez animasyon işlemleri kod tarafında gerçekleştirilmektedir. Örnekte ilk olarak DoubleAnimation tipinden bir örnek oluşturulmuş ve yapıcı metodu içerisinde bazı ilk değerlerin (From, To, Duration gibi) verilmesi sağlanmıştır. Sonrasında ise RepatBehavior özelliği ile tekrar sayısı belirtilmektedir. Bu örnekte bir öncekinden farklı olarak Forever değeri yerine 2 kullanılmıştır. Buna göre söz konusu animasyon sadece iki kere tekrar edecektir. Sonrasında ise her zamanki gibi animasyonu, kontrol ve kontrolün özelliği ile ilişkilendirecek StoryBoard nesne örneği oluşturulur. Animasyonun başlatılması için yine kontrolün MouseEnter olayı göz önüne alınmıştır. Animasyon işlemi için StoryBoard nesne örneğinin Begin metodunu kullanmak yeterlidir. Ancak bu metodun uygun olay için tetiklenmesini sağlamak gerekmektedir. Bu amaçlada isimsiz bir metod(anonymous method) yazılarak hem Button kontrolünün MouseEnter olayı tanımlanmış hemde gerçekleştiğinde işletilmesi istenen kodlar belirlenmiştir. Örneğin çalışma zamanındaki çıktısı aşağıdaki Flash animasyonunda olduğu gibidir.

Gelelim bir diğer örneğe. Önceki örneklerde Button kontrolonün boyutlarını ele alan animasyon tipi kullanılmıştır. Sıradaki örnekte ise ColorAnimation tipi başrolü oynamaktadır. Tahmin edileceği gibi bu tip, bir rengin başka bir renge dönüşümünün animasyon olarak gerçekleştirilmesini sağlamaktadır. Örneğin XAML içeriği aşağıdaki gibidir.

ColorAnimation tip olarak kullanıldığında kontrollerin renk değeri alabilen özelliklerinin animasyon işlemlerinde kullanılabileceği anlaşılmaktadır. Örnekte Button kontrolünün arka plan dolgusu animasyon içerisine katılmaktadır. Bu nedenle ColorAnimation kontrolünün ele alacağı kontrol ve özellik DoubleAnimation tipinin kullanıldığı örneklerdekinden biraz daha farklıdır. Dikkat edilecek olursa SolidColorBrush elementi içerisinde DolguRengi ismi x:Name niteliği yardımıyla tanımlanmıştır. Bu isim StoryBoard.TargetName niteliğinde kullanılmaktadır. Bir başka deyişle StroyBoard tipinin XAML içeriğindeki SolidColorBrush elementini bulması kolaylaştırılmaktadır. Bunun en büyük nedenlerinden birisi SolidColorBrush elementinin Button elementinin altında kalmış olması ve Button tipine isim ile erişilebiliyor olmasına rağlem aynı işin söz konusu SolidColorBrush için sağlanamıyor olmasıdır. Diğer taraftan animasyonda kullanılacak özellik değeride StoryBoard.TargetProperty elementi içerisinde ele alınırken (SolidColorBrush.Color) yazım stili kullanılmaktadır. Animasyona göre, Button kontrolünün arka plan rengi kırmızından maviye doğru değişecek ve sonrasında tekrardan maviden kırmızıya dönecektir(AutoReverse=true olduğu için). Animasyondaki zaman çizelgesinin(Timeline) süresi 6 saniyedir. Aşağıdaki Flash animasyonunda uygulamanın çalışma zamanındaki(Run-time) görüntüsü yer almaktadır.

Aynı etki aşağıdaki kod parçası yardımıyla dinamik olaraktan da gerçekleştirilebilir.

XAML İçeriği;

Kod İçeriği;

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Windows.Media.Animation; // Animasyon tiplerini içeren isim alanıdır(Namespace)

namespace AnimasyonIslemleri
{
    public partial class KodlaRenkliAnimasyon : Window
    {
        private void AnimasyonuAyarla()
        {
            // Animasyon tipi oluşturulur.
            // İlk parametre başlangıç rengini işaret eder (From)
            // İkinci parametre bitiş rengini işaret eder (To)
            // Üçüncü parametre zaman çizgisinin süresidir
            ColorAnimation clrAnmtr = new ColorAnimation(Colors.Red, Colors.Blue, new Duration(new TimeSpan(0, 0, 6)));
            // Animasyonun sürekli tekrar edeceği belirtilir
            clrAnmtr.RepeatBehavior = RepeatBehavior.Forever;

            // Animasyonu kontrol ve özelliği ile ilişkilendirecek StoryBoard nesnesi örneklenir.
            Storyboard strBrd = new Storyboard();
            strBrd.Children.Add(clrAnmtr);
            Storyboard.SetTargetName(clrAnmtr, "firca"); // SolidColorBrush kontrolünün x:name niteliğinin değeri ile animasyon uygulanacak kontrol belirtilmiş olur.
            Storyboard.SetTargetProperty(clrAnmtr, new PropertyPath(SolidColorBrush.ColorProperty)); // SolidColorBrush kontrolünün Color özelliği üzerinde animasyonun uygulanacağı belirtilir.

            // Animasyon yine MouseEnter olay metodunda Begin metodu ile başlatılır.
            btnMerhaba.MouseEnter += delegate(object sender, MouseEventArgs e)
                                                    {
                                                       strBrd.Begin(this);
                                                    };
        }
        public KodlaRenkliAnimasyon()
        {
            InitializeComponent();
           AnimasyonuAyarla();
        }
    }
}

Yukarıdaki kodun yer aldığı pencere çalıştırıldığında, bir önceki örnekteki ile aynı etkinin oluştuğu görülecektir.

Yazımıza PointAnimation tipini ele alacağımız son bir örnek ile devam edelim. PointAnimation tipi adındanda anlaşılacağı üzere Point tipinden değerler alabilen kontrol özellikleri(Control Property) üzerinde animasyon işlemleri gerçekleştirilebilmesi amacıyla kullanılır. Örnek olarak aşağıdaki XAML içeriğini ele alabiliriz.

XAML içeriği;

Burada örnek olarak Path tipinden bir şekil(Shape) kullanılmış ve EllipsGeometry tipinden yararlanılarak bir daire oluşturulmuştur. Burada Point tipinden değer alan üye Center özelliğidir. Bu anlamda PointAnimation tipinin hedef aldığı kontrol aslında EllipseGeometry nesnesidir. Bu işaretlemeyi yapabilmek için yine x:Name niteliğinden yararlanılmıştır. Diğer taraftan EllipsGeometry nesne örneğinin Center özelliği animasyon işlemine tabi tutulacağından StoryBoard.TargetProperty niteliğine Center değeri verilmiştir. PointAnimation tipi basit olarak kontrolün bir zaman çizgisi(Timeline) içerisinde belirli bir koordinata doğru hareket etmesini sağlamaktadır. Buna göre örnekteki daire şekli, 15:15 noktasından 285:15 noktasına doğru 1.75 saniyelik zaman dilimi içerisinde hareket edecek ve AutoReverse özelliğine true değerinin atanması nedeniylede bu süre sonunda tekrardan geriye ilk konumuna gidecektir. Tahmin edileceği üzere RepeatBehavior niteliğinin değerinin true olması bu işlemi sürekli kılacaktır. Burada diğer örneklerden farklı olarak animasyon işleminin tetiklendiği olay olarak Path.Loaded seçilmiştir. Buna göre Path, söz konusu pencere(Window) üzerine yüklendikten sonra animasyon işlemi doğrudan başlayacaktır. Örneğin çalışma zamanındaki görüntüsü aşağıdaki Flash görselinde olduğu gibidir.

Aynı işleyişi kod tarafında gerçekleştirmek istersek aşağıdaki satırları kullanmamız yeterli olacaktır.

XAML içeriği;

Kod içeriği;

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Windows.Media.Animation; // Animasyon tiplerini içeren isim alanıdır

namespace AnimasyonIslemleri
{
    public partial class KodlaNoktaAnimasyon : Window
    {
        private void AnimasyonuBaslat()
        {
            // Nokta animasyonu için gerekli tip oluşturulur
            // İlk parametre başlangıç noktası koordinatlarıdır From
            // İkinci parametre bitiş noktası koordinatlarıdır To
            // Üçündü parametre zaman çizelgesinin süresidir Duration
            PointAnimation pntAnmtr = new PointAnimation(new Point(15, 15), new Point(285, 15), new Duration(new TimeSpan(0, 0, 0,1,75)));

            // Animasyonu kontrol ve özelliği ile ilişkilendirecek olan StoryBoard oluşturulur
           Storyboard strBrd = new Storyboard();
            // Animasyon tipi StoryBoard' a eklenir
            strBrd.Children.Add(pntAnmtr);
            // Animasyonun sonundan tekrardan geriye doğru gidileceği belirtilir
            strBrd.AutoReverse = true;
            // Animasyonun sürekli devam edeceği belirtilir
            strBrd.RepeatBehavior = RepeatBehavior.Forever;
            // Animasyonun uygulanacağı EllipsGeometry tipi seçilir. Buradaki ikinci parametre XAML tarafındaki x:Name niteliğinin değeridir
            Storyboard.SetTargetName(pntAnmtr,"daireGeo");
            // Animasyonun uygulanacağı özellik seçilir.
            Storyboard.SetTargetProperty(pntAnmtr, new PropertyPath(EllipseGeometry.CenterProperty));
            // Animasyonun, Daire isimli Path yüklendikten sonra başlatılması için Loaded olay metodu yüklenir.
           Daire.Loaded += delegate(object sender, RoutedEventArgs e)
                                        {
                                            strBrd.Begin(this);
                                        };
        }
        public KodlaNoktaAnimasyon()
        {
            InitializeComponent();
            AnimasyonuBaslat();
        }
    }
}

WPF içerisinde kullanılan temel animasyon tipleri(Basic Animation Types) sadece yazımızda bahsetiklerimiz ile sınırlı değildir. System.Windows.Media.Animation isim alanında(Namespace) yer alan diğer animasyon tiplerinin listesi aşağıdaki gibidir.

ByteAnimation
DecimalAnimation
Int16Animation
Int32Animation
Int64Animation
Point3DAnimation
QuaternionAnimation
Rotation3DAnimation
RectAnimation
SingleAnimation
SizeAnimation
TicknessAnimation
Vector3DAnimation
VectorAnimation

Görüldüğü gibi kontrollerin pek çok farklı tipteki özelliği için yazılmış temel animasyon tipleri vardır. Animasyon ile ilgili işlemler bu makalede ele aldıklarımız ile sınırlı değildir elbeteki. 3 boyutlu (3D) animasyon, KeyFrame' lerin kullanımı ve dahası da var. Animasyon işlemleri ile ilgili bu ilk yazımızda temel animasyon tiplerinin tanımaya ve onları anlamaya çalıştık. Böylece geldik bir makalemizin daha sonuna. Bir sonraki makalemizde görüşünceye dek hepinize mutlu günler dilerim.

Örnek Uygulama için Tıklayın

5192c5b2-e785-4c78-a5e9-3a891af272ab|0|.0

Tags:		wpf
Categories:		WPF
Actions:		E-mail \| del.icio.us \| Permalink \| Yorumlar (0) \| Comment RSS

WPF - Grafik İşlemlerinde Fırçaların(Brushes) Kullanımı

Salı, 18 Eylül 2007 20:08 by bsenyurt

Windows Presentation Foundation(WPF) ile ilgili bir önceki makalemizde, iki boyutlu(2D) grafiklerin çizilmesi amacıyla kullanılan fırçaları(Brushes) incelemeye çalışmıştık. Bu makalemizde ise iki boyutlu şekilleri(Shapes) araştırıyor olacağız. Vektörel grafiklerde şekillerin(Shapes) büyük önemi vardır. Nitekim temel şekiller kullanılarak asıl resimler ve görüntüler kolaylıkla elde edilebilir. Bir CAD uygulamasının karmaşık çizelgelerinden, eğlenceli çocuk programlarında kullanılan vektörel grafiklere kadar pek çok alanda temel şekiller yeterli olmaktadır. Söz gelimi bir şehrin imar planlamasında kullanılacak bir programda iki boyutlu olarak düşünüldüğünde dörtgenler, daireler, elipsler, poligonlar ve düz çizgiler evlerin, yolların, arsaların, parkların ifade edilmesi için yeterlidir. Senaryolar arttırılabilir ve daha geniş alanlarda düşünülebilir. Ancak temel olarak gereken şekiller bellidir. WPF kendi bünyesinde iki boyutlu çizimlerin gerçekleştirilebilmesi amacıyla aşağıda belirtilen şekilleri(Shapes) sunmaktadır.

Ellips : Bu tip yardımıyla içi dolu veya boş tam daire yada elipslerin çizilmesi mümkündür.
Line : Düz çizgilerin çizilmesini sağlayan tiptir. Başlangıç ve bitiş koordinatları düz çizginin çizilmesi için yeterlidir.
Rectangle : Dört köşeli şekillerin çizilmesinde kullanılan tiptir. İçi boş veya dolu dikdörtgen yada kare gibi şekillerin çizilebilmesini sağlar.
Polygon : N sayıda köşeden oluşan poligonların çizilmesinde kullanılır. Bir üçgen olabileceği gibi bir çokgen de olabilir. Diğer taraftan düzgün köşeli olmayan bir poligonda oluşturulabilir. Ayrıca poligonların içi boş veya dolu olacak şekilde oluşturulabilmesi de mümkündür.
Polyline : Birbirlerine bitiş noktalarından bağlı bir başka deyişle uç uca eklenmiş düz çizgilerin(Line) çizilmesini sağlayan tiptir.
Path : Birbirlerine son noktalarından bağlı olan düz çizgi veya eğri (Curve) gibi toplu şekillerin çizidirilmesini sağlayan tiptir. Farklı şekillerin bir arada kullanılabilmesini sağlamak için geometri(Geometry) tiplerinden yararlanır.

WPF, XAML(eXtensible Application Markup Language) tabanlı bir ortam sunduğundan, grafiksel şekillerin tasarım zamanında element bazlı olarak geliştirilmeleri ve sonuçlarının görülmesi mümkündür. GDI+ mimarisinde aynı durum düşünüldüğünde sonuçların ancak çalışma zamanında(run-time) elde edilebildiği unutulmamalıdır. Bu nedenle WPF bize büyük avantaj sağlamaktadır.

Bu kısa bilgilerden sonra örneklerimizi geliştirerek şekilleri daha yakından tanımaya çalışalabiliriz. Her zamanki gibi örneklerimizi geliştirirken Visual Studio 2008 Beta 2 sürümünden yararlanıyor olacağız. Bu nedenle, final sürümünde özellikle IDE bazlı bazı değişiklikler olma ihtimali olduğunu baştan belirtelim. İlk örneğimizde Ellips tipinden yararlanıyor olacağız. Bu amaçla Window nesnemizin XAML içeriğini aşağıdaki gibi tasarladığımızı düşünelim.

Bu örnekte altı adet elips çizdirilmektedir. Ellips tipinin Fill niteliği(attribute) yardımıyla dolgu deseni belirtilebilir. Bunun dışında width ve height nitelikleri eşit oldukları takdirde tam bir dairenin çizilmesi söz konusudur. Diğer hallerde ise, yatay doğrultuda veya dikey doğrultuda uzayan bir elips oluşumu söz konusu olmaktadır. Kenar çizgilerini renk ve kalınlık olarak belirlemek amacıyla Stroke ve StrokeTickness niteliklerine değer atamaları yapılmaktadır. Stroke niteliği tahmin edileceği üzere geçerli bir fırça(Brush) ile eşleştirilebilir. Buda çizginin dolu bir renk dışında desenli olabileceği hatta içinde resim barındırabileceği anlamına gelmektedir.

NOT : Stroke ve StrokeTickness nitelikleri diğer şekillerde de ye almaktadır. Bu nedenle tüm şekillerin çizgilerinin olabileceğini söyleyebiliriz.

Yukarıdaki XAML içeriğini Visual Studio 2008 Beta 2 ortamındaki çıktısı aşağıdaki gibi olacaktır.

Şekillerin bu biçimde yatay veya dikey düzlemlerde oluşturulması haricinde, açısal olaraktanda yerleştirilmesi istenebilir. Bunu bir elips üzerinde GDI+ ile gerçekleştirmek oldukça zor ve zahmetlidir. Oysaki WPF içerisinde yer alan Transform tipleri kullanılarak bu işlemler son derece kolay bir şekilde gerçekleştirilebilir.

NOT : Transoform’ dan kasıt, şeklin açısal olarak konumunun değiştirilebilmesi, büyüklüğünün ayarlanabilmesi, kendi ekseni üzerinde veya farklı bir orjine göre döndürülebilmesi, şeklin x veya y düzlemleri üzerinde yer değiştirmesi yada eğilip bükülmesi gibi aksiyonlardır.

İkinci örneğimizde bu durum incelenmektedir. Yeni penceremizin XAML içeriğinin aşağıdaki gibi olduğunu düşünelim.

Burada dikkat edilmesi gereken en önemli nokta, Ellips.LayoutTransform elementinin içeriğidir. Bu elementin altında yer alan RotateTransform elementi içerisinde Angle niteliği ile bir açı değeri belirtilmektedir. Bu açı değeri, şeklin x,y eksenine göre farklı bir derecede döndürülmesini sağlamaktadır. Örnek XAML içeriğinde 45 derece ve 135 derecelik açılar ile döndürülmüş iki elips yer almaktadır. Bu içeriğin tasarım zamanındaki çıktısı aşağıdaki gibi olacaktır.

Atomu WPF ile daha kolay çizebildiğimizi söyleyebiliriz. Bu tip dönüştürme(Transform) işlemleri sadece RotateTransform ile sınırlı değildir. Yazımızın ilerleyen kısımlarında diğer Transform modellerinede kısaca değinmeye çalışacağız. Çok doğal olarak rotasyonların programatik olarak gerçekleştirilmesi gereken vakkalar olacaktır. Yukarıdaki atom çizelgesininin benzerini kod tarafında oluşturmak istersek, element ve niteliklerin karşılığı olan uygun sınıf(class) ve özellikleri(property) kullanmak yeterli olacaktır. Üçüncü örneğimizde bu durum incelenmektedir. Bu amaçla yeni penceremizin XAML ve kod içeriğini aşağıdaki gibi tasarladığımızı düşünelim.

XAML içeriği;

Kod içeriği;

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace GrafiklerleCalismak
{
    public partial class KodlaElipsTransform : Window
    {
        private void ElipsCiz(Ellipse elps, int width, int height, int angle,Color color)
        {
            elps.Width = width;
            elps.Height = height;
            elps.Stroke = new SolidColorBrush(color);
            elps.StrokeThickness = 2;
            elps.LayoutTransform = new RotateTransform(angle);
            grdEllips.Children.Add(elps);
        }
        private void Cizdir()
        {
            ElipsCiz(new Ellipse(), 125, 40, 270,Colors.Red);
            ElipsCiz(new Ellipse(), 40, 125, 90,Colors.Gold);
            ElipsCiz(new Ellipse(), 125, 40, 45, Colors.DarkBlue);
            ElipsCiz(new Ellipse(), 125, 40, 135,Colors.Lavender);
        }

        public KodlaElipsTransform()
        {
            InitializeComponent();
            Cizdir();
        }
    }
}

Bir kaçtane elipsi farklı renk, çizgi, çizgi kalınlığı ve açıda çizdirmek istediğimizden yardımcı olacak ElipsCiz isimli bir metod tasarlanmıştır. Bu metod, parametre olarak gelen Ellips nesne örneğini alıp, genişlik(Width), yükseklik(Height), Çizgi rengi(Stroke), Çizgi kalınlığı(StrokTickness) ve rotasyon için gerekli açı(Angle) değerlerini set etmektedir. Dikkat edilecek olursa, rotasyon işlemi için RotateTransform tipine ait bir nesne örneklenmekte ve yapıcı metoda(Constructor) açı değeri verilmektedir. Sonrasında ise bu nesne örneği, Ellips nesne örneğinin LayoutTransform özelliğine atanmaktadır. Söz konusu kod parçası yürütüldüğünde çalışma zamanında(run-time) aşağıdakine benzer bir ekran görtüntüsü ile karşılaşılır.

Yine kod yardımıyla elips çizdirmeye örnek olması açısından aşağıdaki pencerede(Window) göz önüne alınabilir.

XAML içeriği;

<Window x:Class="GrafiklerleCalismak.KodYardimiylaElips" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="White" Title="KodYardimiylaElips" Height="300" Width="300">
    <Grid>
        <Grid Name="grdTahta" Margin="0,74,0,8" Background="Gold" />
        <Button Height="23" HorizontalAlignment="Left" Margin="10,20,0,0" Name="btnCiz" VerticalAlignment="Top" Width="75" Click="btnCiz_Click">Çizdir</Button>
    </Grid>
</Window>

Kod içeriği;

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace GrafiklerleCalismak
{
    public partial class KodYardimiylaElips : Window
    {
        private void ElipsCiz()
        {
            grdTahta.Children.Clear();
            Random rnd=new Random();
            for (int i = 0; i < 3; i++)
            {
                Ellipse elps = new Ellipse();
                elps.Width = rnd.Next(50, 100);
                elps.Height = rnd.Next(50, 100);
                elps.Stroke = new SolidColorBrush(Colors.Black);
                elps.StrokeThickness = rnd.Next(1, 5);
               grdTahta.Children.Add(elps);
            }
        }

        public KodYardimiylaElips()
        {
            InitializeComponent();
        }

        private void btnCiz_Click(object sender, RoutedEventArgs e)
        {
            ElipsCiz();
        }
    }
}

Bu kez bir düğmeye basılması ile rastgele üretilen değerlere göre elipslerin çizdirilmesi sağlanmaktadır. Bu amaçla 50 ile 100 arasında rastgele genişlik ve yükselik değerleri elde edebilmek için meşhur Random sınıfına ait nesne örneğinden ve Next metodundan yararlanılmaktadır. Çoğu zaman oygun programlamada şekilsel olarak bazı oyun karakterlerinin saha üzerinde rastgele konumlarda çıkması istenebilir. İşte bu noktada Random sınıfına ait metodlar ve WPF ile gelen yeni şekil çizme teknikleri işimizi oldukça kolaylaştırmaktadır.

Kod yardımıyla gerçekleştirilen örneklerde dikkat edilmesi gereken noktalardan birisi, oluşturulan şekillerin mutlaka bir taşıyıcıya eklenmiş olmalarıdır. Söz gelimi yukarıdaki örneklerde Ellips nesne örnekleri Grid bileşenine alt element olarak, Children özelliğinin Add metodundan yararlanılarak eklenmektedir. Son pencereye(Window) ilişkin olarak aşağıdaki ekran görüntüsünde çalışma zamanında(run-time) oluşabilecek bir örnek çıktı yer almaktadır.

Sıradaki örneğimizde poligonların nasıl çizilebileceğini incelemeye çalışacağız. Poligonlar, çok sayıda köşeden oluşabilen ve kapalı olarak tasarlanabilen şekillerdir. Poligonlar sayesinde basit bir üçgen çizilebileceği gibi bir onaltıgen’ de çizilebilir. Yada düzensiz bir kapalı şekil oluşturulabilir. Burada önemli olan köşe noktalarının belirlenmesidir. Köşe noktalarının belirlenmesinde Point tipinden yararlanılır. Point tipi x ve y koordinatlarını bünyesinde taşımaktadır. Polygon tipi, köşe noktalarını Points isimli bir koleksiyonda taşımaktadır. Şimdi aşağıdaki XAML içeriğini göz önüne alalım.

Örnekte iki adet Polygon elementi tanımlanmıştır. Bunlardan ikincisine -45 derecelik bir açısal döndürme işlemi uygulanmıştır. Her iki Polygon nesne örneğinin köşe noktaları Polygon.Points alt elementi(child element) içerisinde yer alan Point alt elementleri ile belirtilmektedir. Polygon nesnelerinin kenar çizgileri Stroke ve StrokTickness niteliklerine atanan değerler yardımıyla set edilmiştir. Diğer taraftan Polygon’ ların dolgu rengi Fill özelliklerine atanan standart fırça(Brush) renkleri ile ayarlanmaktadır. Söz konusu XAML içeriğinin Visual Studio 2008 Beta 2 ortamındaki tasarım zamanı(design-time) çıktısı ise aşağıdaki gibi olacaktır.

Bir poligon kod yardımıylada oluşturulabilir. Sıradaki örneğimizde bir üçgenin kod yardımıyla oluşturulması ve düğmeye basılaraktan onbeşer derecelik artan açılar ile döndürülmesi örneklenmektedir. Bu amaçla yeni penceremize(Window) ait XAML ve kod içeriklerini aşağıdaki gibi tasarladığımızı düşünelim.

XAML içeriği;

<Window x:Class="GrafiklerleCalismak.KodYardimiylaPolygonKullanimi" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="White" Title="Kod Yardımıyla Polygon" Height="300" Width="300">
    <Grid Name="grdTahta">
        <Button Height="23" HorizontalAlignment="Left" Margin="8,19,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click">Çevir</Button>
    </Grid>
</Window>

Kod içeriği;

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Timers;

namespace GrafiklerleCalismak
{
    public partial class KodYardimiylaPolygonKullanimi : Window
    {
        Polygon plgy;
        int sayac = 1;

        private void Cizdir()
        {
            plgy = new Polygon();
            plgy.Points.Add(new Point(50, 50));
            plgy.Points.Add(new Point(150, 50));
            plgy.Points.Add(new Point(150, 150));
            plgy.Stroke = new SolidColorBrush(Colors.LightSalmon);
            plgy.StrokeThickness = 2;
            grdTahta.Children.Add(plgy);
        }

        public KodYardimiylaPolygonKullanimi()
        {
            InitializeComponent();
            Cizdir();
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            plgy.LayoutTransform = new RotateTransform(sayac*15);
            sayac++;
        }
    }
}

Penceremizin yapıcı metodu(constructor) içerisinde Cizdir metodu ile bir Polygon nesne örneği oluşturulmakta ve Grid kontrolünün alt elementi olarak eklenmektedir. Polygon nesne örneği bir üçgeni temsil edeceğinden Points koleksiyonunda sadece üç nokta(Point) eklemesi yapılmıştır. Döndürme işleminin gerçekleştirildiği yer düğmenin Click olay(event) metodudur. Burada dikkat edilecek olursa yine LayoutTransform özelliğine bir değer ataması yapılmaktadır. Bu atama sırasında yeni bir RotateTransform nesnesi örneklenmekte ve parametre olarak artan bir açı değer verilmektedir. Uygulama test edildiğinde çalışma zamanında aşağıdaki Flash animasyonunda yer alan çıktı elde edilecektir. (Flash dosyasını görebilmek için Flasy Player’ ın sisteminizde yüklü olması gerekmektedir.)

Şimdiki örneğimizde düz çizgileri nasıl çizdirebileceğimizi incelemeye çalışacağız. Düz çizgi için Line tipi kullanılmaktadır. Bir çizgi için belkide en önemli özellikler Stroke, StrokeTickness, X1, X2, Y1 ve Y2’ dir. X ve Y özellikleri yardımıyla çizginin başlangıç ve bitiş noktaları belirlenir. Örneğin aşağıdaki XAML içeriğini ele alalım.

Bu içeriğin tasarım zamanındaki(design-time) çıktısı aşağıdaki gibi olacaktır.

Dikkat edileceği üzere farklı kalınlık, renk ve lokasyonlarda yer alan çizgiler elde edilmektedir. Çizgiler özellikle kod tarafındada zaman zaman ele alınırlar. Söz gelimi bir harita üzerinden bir şehirden bir şehire doğru olabilecek hava yolu rotalarının belirlenmesi amacıyla çizgilerden yararlanılabilir. Bunu çok basit olarak sembolize etmek amacıyla aşağıdaki XAML ve kod içeriğini göz önüne alabiliriz.

XAML içeriği;

Kod içeriği;

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace GrafiklerleCalismak
{
    public partial class KodYardimiylaLineKullanimi : Window
    {
        Point basilanNokta;

        public KodYardimiylaLineKullanimi()
        {
            InitializeComponent();
        }

        private void imgHarita_MouseDown(object sender, MouseButtonEventArgs e)
        {
            basilanNokta=e.GetPosition(grdTahta);
        }

        private void imgHarita_MouseUp(object sender, MouseButtonEventArgs e)
        {
            Line yol = new Line();
            yol.Stroke = new SolidColorBrush(Colors.Red);
            yol.StrokeThickness = 2;
            yol.X1 = basilanNokta.X;
            yol.Y1 = basilanNokta.Y;
            Point bitisNoktasi = e.GetPosition(grdTahta);
            yol.X2 = bitisNoktasi.X;
            yol.Y2 = bitisNoktasi.Y;
            grdTahta.Children.Add(yol);
        }
    }
}

Bu örnekte haritayı göstermesi için bir Image kontrolü kullanılmaktadır. Image kontrolünün source özelliğine atanan değer ile arka plan dünya haritası olarak gösterilmektedir. Kullanıcılar çalışma zamanında mouse’ un tuşuna basıp bir noktadan başka bir noktaya gittiklerinde ve mouse’ un tuşunu bıraktıklarında Line nesne örneği oluşturulmaktadır. Bunun için Image kontrolü üzerinde mouse tuşuna basılma ve bırakılma anlarının yakalanması gerekir. Söz konusu anlar aşina olduğumuz MouseDown ve MouseUp olay metodlarında yakalanırlar. GDI+ ile aynı işlemleri nasıl yaptığımızı hatırlarsak eğer, kontrolün MouseDown olayına gelen parametre ile X ve Y değerlerini ayır ayrı aldığımızı görürüz. Burada durum biraz daha farklıdır. Nitekim MouseUp ve MouseDown olay metodlarında yer alan MouseButtonEventArgs parametresi, mouse tuşuna basıldığında o noktadaki X ve Y koordinatlarını yeni bir Point tipi olarak geriye döndürmektedir. GetPosition metodu X ve Y koordinatları, üzerinden alınmak istenen kontrolüde parametre olarak alır. Örnekte bu parametreye Grid kontrolünün referansı verilmiştir. Dolayısıyla Grid kontrolündeki X ve Y değerleri elde edilebilmektedir.

Mouse üzerinde basılan tuş bırakıldığında ise çizginin çizilme işlemi gerçekleştirilmektedir. Line nesne örneğinin X1 ve Y1 değerleri tahmin edileceği gibi, MouseDown içerisinde yer alan GetPosition ile elde edilen basilanNokta değişkeninden gelmektedir. Çizginin son noktası ise bu kez MouseUp olay metodu içerisindeki GetPosition çağrısı ile alınmakta ve Line nesne örneğinin X2 ve Y2 değerlerine aktarılmaktadır. Son olarak oluşturulan çizgi, Grid bileşenine alt element olarak eklenmektedir. Bu ekleme işleminin bize getirdiği önemli bir avantaj vardır. Yine GDI+ ile Windows programlama yaptığımızı düşünecek olursak, aynı senaryoda ekrana çizgiler çizdirmek için Graphics nesnesninin DrawLine metodundan yararlanıldığını görürüz. Ne varki bu metod hep son çizginin çizilmesine öncekilerin ise kaybolmasına neden olmaktadır. Oysaki WPF mimarisinde şekiller bir taşıyıcının alt elementi olarak eklendiklerinden son çizilen şekilden öncekiler ekrandan kaybolmamaktadır. Bu durumu GDI+ ile Windows programlamada gerçeklemek için WPF’tekine benzer bir mantık ile hareket edilmekte ve ekranda duran çizgilerin sürekli hatırlanması için koleksiyonalardan yararlanılması gerekmektedir. Yukarıdaki kodun çalışma zamanındaki ekran çıktısı aşağıdaki Flash animasyonunda olduğu gibidir.(Flash dosyasını görebilmek için Flasy Player’ ın sisteminizde yüklü olması gerekmektedir.)

Bu örneği daha da geliştirmeye çalışmanızı öneririm. Oldukça fazla eksiği var. Söz gelimi, mouse tuşuna basıp sürüklerken farklı renkte bir çizginin çıkartılarak gidilen rotanın gösterilmesi sağlanabilir. Mouse bırakıldığında ise asıl rengini alan rota ortaya çıkar. Üstelik örnek kodda sağ tuşa veya sol tuş kontrolü yapılmamıştır. Belkide klavyeden tuş kombinasyonları katarak sadece düz çizgi değil eğrilerin çizdirilmesinide sağlayabiliriz. Bu örneğin geliştirilmesini siz değerli okurlarıma bırakıyorum.

Gelelim Path bileşenine. Bu tip aslında kendi içerisinde birden fazla düz çizgi veya eğriyi barındırabilecek şekilde tasarlanmıştır. Temelde şekiller birbirleriyle uç uca eklenecen şekilde yeni bir grafik oluşturmaktadırlar. Dilerseniz örnek üzerinden ilerleyerek konuyu daha iyi anlamaya çalışalım. Bu amaçla aşağıdaki gibi bir XAML içeriği oluşturduğumuzu göz önüne alalım.

Path elementi içerisinde farklı şekillerin uç uca eklenmesi işini geometri tipleri üstlenmektedir. Bu geometri tipleride kendi içlerinde segmentler halinde şekilleri barındırmaktadır. Kullanılabilecek olan geometri tipleri aşağıdaki gibidir.

Örnekte söz konusu geometri tiplerinden PathGeometry kullanılmaktadır. PathGeometry elementinin altında yer alan tüm şekiller Segment anahtar kelimesi ile bitmektedir. Buna göre, BezierSegment ile başlayan şekiller dizisi sırasıyla, ArcSegment, LineSegment, QuadraticBezierSegment, PolyLineSegment ve PolyBezierSegment ile devam eder. Tüm bu alt elementleri farklı nitelikleri ile değişik çizgilerin oluşturulması sağlanmaktadır. BezierSegment elementinin nitekikleri sayesinde üç noktadan bükülmüş bir eğri çizimi yapılabilmektedir. ArcSegment elementinin nitelikleri ile, başlangıç koordiantları, genişlik yükseklik değerleri, eğilme açısı ve saat yönü yada saatin ters yönünde çizilecek yaylar oluşturulabilmektedir. Burada PolyLineSegment’ i altında belirtilen noktalar uç uca bağlı düz çizgilerin oluşturulmasını sağlarken, PolyBezierSegment elementi altındaki noktalarda, uç uca eklenmiş eğrilerin oluşturulmasını sağlamaktadır. Örneğin tasarım zamanındaki çıktısı aşağıdaki gibi olacaktır.

Dikkat edilecek olursa, tüm çizgiler ister eğri ister düz olsunlar, uç uca eklenerekten birleştirilmiştir. Bu nedenle Path tipini örneğin harita gibi arka planlarda yolların birleştirilmesi amacıyla kullanabiliriz.

Bu yazımızda son olarak basit anlamda dönüştürme(Transform) işlemlerine bakıyor olacağız. Transform denilince aklımıza gelmesi gerekenler bir şeklin yön, büyüklük, düzlemsel koordinat gibi değerlerinin değiştirilmesidir. Bu sayede bir şekli herhangibir açıda döndürebilir, ebatlarını ayarlayabilir yada herhangibir düzlem üzerinde öteleyebiliriz. Transform işlemlerinde beş farklı tip rol oynamaktadır. Bu tipler aşağıdaki gibidir.

RotateTransform : Şeklin belirtilen bir açıda, kendi ekseninde yada belirtilen orijine göre farklı bir eksende döndürülmesini sağlamak için kullanılır. Söz gelimi bir şeklin farklı açılardan gösterilmesinin sağlanmasında önemli rol oynamaktadır.
ScaleTransform : Şeklin ebatlarının eşit oranda yada farklı oranlarda arttırılması yada azaltılmasında kullanılır. Örneğin Zoom işlemlerinde bu tip çok faydalı olacaktır.
SkewTransform : Şeklin bükülmesini yada eğilmesini sağlamak amacıyla kullanılan tiptir.
TranslateTransform : Şeklin x veya y düzlemleri üzerinde farklı noktalara ötelenmesi amacıyla kullanılan tiptir.
MatrixTransform : Resim işlemede önemli bir yere sahip olan matris algoritmalarının iki boyutlu şekiller üzerinde de uygulanabilmesini sağlayan tiptir. Diğer Transform tipleri ile gerçekleştirilmesi zor olan dönüştürmelerde kullanılmaktadır. Bu tipi ilerleyen yazılarımızda ele almaya çalışacağız.

Şimdi basit bir örnek ile RotateTransform ve ScaleTransform tiplerinin nasıl kullanılabileceğini incelemeye çalışalım. Bu amaçla XAML ve kod içeriklerini aşağıdaki gibi geliştirdiğimizi düşünelim.

XAML içeriği;

<Window x:Class="GrafiklerleCalismak.TransformKullanimi" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="White" Title="Transform Kullanımı" Height="292" Width="330">
    <Grid Name="grdTahta" Width="309" Height="253">
        <Rectangle Fill="Gold" Stroke="Black" StrokeThickness="2" Name="dortgen" Width="100" Height="40" />
        <Slider Minimum="1" Maximum="5" ValueChanged="sldScale_ValueChanged" Height="21" Margin="110,14,89,0" Name="sldScale" VerticalAlignment="Top" />
        <Label Height="23" HorizontalAlignment="Left" Margin="0,12,0,0" Name="label1" VerticalAlignment="Top" Width="92">Scale Transform</Label>
        <Slider Height="21" Margin="110,49,89,0" Maximum="360" Minimum="0" Name="sldRotate" ValueChanged="sldRotate_ValueChanged" VerticalAlignment="Top" />
        <Label Height="23" HorizontalAlignment="Left" Margin="0,47,0,0" Name="label2" VerticalAlignment="Top" Width="92">Rotate Transform</Label>
    </Grid>
</Window>

Kod içeriği;

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace GrafiklerleCalismak
{
    public partial class TransformKullanimi : Window
    {
        public TransformKullanimi()
        {
            InitializeComponent();
        }

        private void sldScale_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            TransformYap();
        }

        private void sldRotate_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            TransformYap();
        }

        private void TransformYap()
        {
            if (sldRotate != null
               && sldScale != null)
            {
                TransformGroup grp = new TransformGroup();
                grp.Children.Add(new ScaleTransform(sldScale.Value, sldScale.Value));
                grp.Children.Add(new RotateTransform(sldRotate.Value));
                dortgen.LayoutTransform = grp;
            }
        }
    }
}

Kullanıcı Slider kontrollerindeki çubuğu hareket ettirdikçe ekran üzerindeki dörtgenin kendi ekseni üzerinde dönmesi veya büyüklüğünün değişmesi amaçlanmaktadır. Bu, aynı şekle birden fazla dönüştürme işleminin uygulanmasını gerektirmektedir. Bir başka deyişle Rectangle nesne örneğinin LayoutTransform özelliğine hem ScaleTransform hemde RotateTransform nesne örneklerinin atanması gerekmektedir. Bunun için TransformGroup adı verilen nesne örneklerinden yararlanılır. TransformGroup tipi, sahip olduğu Children özelliği ile sunduğu koleksiyon içerisinde farklı Transform tiplerini taşıyabilmektedir. Dolayısıyla TransformYap metodu içerisinde bu şekilde bir kodlama yapılmaktadır. Uygulamanın çalışma zamanındaki görüntüsü aşağıdaki Flash animasyonunda olduğu gibidir.(Flash dosyasını görebilmek için Flasy Player’ ın sisteminizde yüklü olması gerekmektedir. Dosya boyutu 220 Kb olduğundan yüklenmesi zaman alabilir.)

Böylece geldik bir makalemizin daha sonuna. Bu makalemizde WPF(Windows Presentation Foundation) uygulamalarında iki boyutlu grafik(2D Graphics) işlemlerinde kullanılabilecek şekilleri ele almaya çalıştık. Son olarak basit bir transform işleminin örnek bir dörtgen üzerinde nasıl gerçekleştirileceğine değindik. Buradaki bilgilerden yola çıkarak çok daha kolay grafik işlemleri gerçekleştirebileceğimizi ve eski Windows programlamadaki GDI+ ile zorlandığımız vakkaları daha etkin bir biçimde yapabileceğimizi görmüş bulunuyoruz. İlerleyen makalelerimizde WPF ile ilişkili başka konularada değiniyor olacağız.Tekrardan görüşünceye dek hepinize mutlu günler dilerim.

Örnek Uygulama için Tıklayın

36b62688-2d9b-4d5d-83c5-009107608101|0|.0

Tags:		wpf
Categories:		WPF
Actions:		E-mail \| del.icio.us \| Permalink \| Yorumlar (0) \| Comment RSS

WPF - Grafik İşlemlerinde Şekillerin(Shapes) Kullanımı

Salı, 18 Eylül 2007 20:02 by bsenyurt

Windows Presentation Foundation(WPF) ile ilgili bir önceki makalemizde, iki boyutlu(2D) grafiklerin çizilmesi amacıyla kullanılan fırçaları(Brushes) incelemeye çalışmıştık. Bu makalemizde ise iki boyutlu şekilleri(Shapes) araştırıyor olacağız. Vektörel grafiklerde şekillerin(Shapes) büyük önemi vardır. Nitekim temel şekiller kullanılarak asıl resimler ve görüntüler kolaylıkla elde edilebilir. Bir CAD uygulamasının karmaşık çizelgelerinden, eğlenceli çocuk programlarında kullanılan vektörel grafiklere kadar pek çok alanda temel şekiller yeterli olmaktadır. Söz gelimi bir şehrin imar planlamasında kullanılacak bir programda iki boyutlu olarak düşünüldüğünde dörtgenler, daireler, elipsler, poligonlar ve düz çizgiler evlerin, yolların, arsaların, parkların ifade edilmesi için yeterlidir. Senaryolar arttırılabilir ve daha geniş alanlarda düşünülebilir. Ancak temel olarak gereken şekiller bellidir. WPF kendi bünyesinde iki boyutlu çizimlerin gerçekleştirilebilmesi amacıyla aşağıda belirtilen şekilleri(Shapes) sunmaktadır.

Ellips : Bu tip yardımıyla içi dolu veya boş tam daire yada elipslerin çizilmesi mümkündür.
Line : Düz çizgilerin çizilmesini sağlayan tiptir. Başlangıç ve bitiş koordinatları düz çizginin çizilmesi için yeterlidir.
Rectangle : Dört köşeli şekillerin çizilmesinde kullanılan tiptir. İçi boş veya dolu dikdörtgen yada kare gibi şekillerin çizilebilmesini sağlar.
Polygon : N sayıda köşeden oluşan poligonların çizilmesinde kullanılır. Bir üçgen olabileceği gibi bir çokgen de olabilir. Diğer taraftan düzgün köşeli olmayan bir poligonda oluşturulabilir. Ayrıca poligonların içi boş veya dolu olacak şekilde oluşturulabilmesi de mümkündür.
Polyline : Birbirlerine bitiş noktalarından bağlı bir başka deyişle uç uca eklenmiş düz çizgilerin(Line) çizilmesini sağlayan tiptir.
Path : Birbirlerine son noktalarından bağlı olan düz çizgi veya eğri (Curve) gibi toplu şekillerin çizidirilmesini sağlayan tiptir. Farklı şekillerin bir arada kullanılabilmesini sağlamak için geometri(Geometry) tiplerinden yararlanır.