EĞİTİM ÖĞRETİM
ORTAMLARI VE
DONANIMLARI
Ortam: Atölye, bilişim teknolojisi sınıfı, kütüphane,
İnternet, bireysel öğrenme ortamları vb.
Donanım: Bilgisayar (PC), projeksiyon, gerekli olan
yazılımlar vb.
ÖLÇME VE
DEĞERLENDİRME
Modül içinde yer alan her öğrenme faaliyetinden sonra verilen
ölçme araçları ile kendinizi değerlendireceksiniz.
Öğretmen modül sonunda ölçme aracı (çoktan seçmeli test,
doğru-yanlış testi, boşluk doldurma, eşleştirme vb.) kullanarak
modül uygulamaları ile kazandığınız bilgi ve becerileri ölçerek
sizi değerlendirecektir.
AÇIKLAMALAR
1
2
GİRİŞ
Sevgili Öğrenci,
XAML tabanlı İnternet uygulamaları geliştirmede tasarımın rolü çok büyüktür. Bu
modülde arayüz tasarımında kullanılan kontroller ve yöntemler hakkında yeterli derecede
bilgi verilmiştir.
Bu modülde kontrollerin sayfaya yerleşirilmesi için kullanılan panelleri
öğrenebileceksiniz. Ardından şekil ve nesnelerin renklendirilmesinde kullanılan çeşitli fırça
nesnelerini ve özellikleri hakkında yeterli bilgiye sahip olacaksınız. Daha sonra nesnelerin
ölçülendirilmesi ve sayfa üzerinde konumlandırılması ile ilgili olarak gerekli bilgiler
verilmiştir. Ayrıca sayfa üzerine düzgün ya da düzgün olmayan cisimlerin çizimlerini yapma
yöntemlerini öğrenebilirsiniz. Çeşitli XAML kontrolleri ile ilgili bazı önemli bilgiler de
verilmiştir. Nesnelerin döndürülme yöntemleri hakkında da yeterli derecede bilgi mevcuttur.
En önemlisi de uygulamalarda kullanılan nesnelerin çeşitli yöntemlerle hareketlendirilmesi
için gerekli bazı konulara değinilmiştir.
Tasarım ve animasyon işlemleri için fevkalade önemli bilgiler içeren bu modülü
başarıyla bitirmeniz dileğiyle.
GİRİŞ
3
4
ÖĞRENME FAALİYETİ-1
Tasarım özelliklerini düzenleyebileceksiniz.
XAML sayfalarında kullanılan panelleri araştırınız.
1. YERLEŞİM
XAML, gelişmiş İnternet uygulamalarında tasarım kısımlarını geliştireceğimiz, statik
ve dinamik kullanıcı arayüzleri oluşturmamızı sağlayan işaretleme dilidir. XML dilinin
genişletilmiş hâli gibi düşünülebilir. XAML bir programlama dili olmamakla beraber
program kodları xaml uzantılı tasarım dosyalarına bağlı olan cs uzantılı codebehind
dosyalarında bulunmaktadır.
XAML dilinde tanımlanan ilk eleman, root eleman olarak adlandırılır. UserControl,
bir root elemandır. Root elemanlarının kapsadığı panel elemanları ise Stackpanel, Grid,
Canvas ve Border gibi yerleşim panelleridir.
1.1. StackPanel
StackPanel, en basit tanımıyla içine aldığı nesneleri, yatay ve dikey olarak
hizalamakla görevlidir. Oldukça kullanışlı olan Stack Panel yardımı ile menu, liste,
sayfalama uygulamalarını rahatlıkla yapabiliriz. Stack Panel kontrolünün en önemli özelliği
Orientation özelliğidir. Orientation özelliği nesnelerin yatay ya da dikey olarak dizilmelerini
sağlar.
Orientation özelliği Vertical olarak ayarlanmış bir StackPanel örneği:
Ekran görüntüsü:
Resim 6.5: Matrix Transform
6.6. Senaryo (Storyboard)
XAML tabanlı gelişmiş İnternet uygulamalarında animasyon işlemlerinin
gerçekleştiği sınıf sınıfıdır.
Storyboard sınıfının metodlarından bazıları ve işlevleri aşağıdaki gibidir.
Begin(): Animasyonu başlatmak için kullanılır.
GetCurrnetState(): Animasyon üzerinde mevcut konumu almayı sağlar.
GetCurrnetTime(): Animasyon üzerinde mevcut zamanı almayı sağlar.
Pause(): Animasyonun duraklatılmasını sağlar.
Resume(): Animasyonun duraklatıldıktan sonra, kaldığı yerden devamını
sağlar.
Stop(): Animasyonun durdurulmasını sağlar.
Seek(): TimeSpan türünde bir zaman alır ve animasyonun bu zamana atlamasını
sağlar.
51
SkipToFill(): Animasyonun sonuna atlama yapmayı sağlar. Animasyonu
sonlandırır.
BeginStoryboard olayı gerçekleştiği zaman Storyboard’u başlatır.
6.7. Animasyon Çeşitleri
XAML tabanlı gelişmiş İnternet uygulamalarında kullanılan animasyon türleri aşağıda
verilmektedir.
6.7.1. Double Animation
Temel animasyon türlerinden biri olan DoubleAnimation, nesnelerin double türündeki
özelliklerine uygulanan bir animasyon yöntemidir.
oluşturmak için aşağıdaki prensip ve özelliklerin bilinmesi
gerekmektedir.
Animasyon uygulanacak nesneye mutlaka bir isim verilmelidir (Örneğin, bu
uygulamada “Resim1” ismi verilmiştir.).
Width ve Height özellikleri değiştirileceğinden dolayı her iki özellik için ayrı
ayrı oluşturulmuştur.
Oluşturulan her iki bloğu içinde olmalıdır.
bloğuna mutlaka bir isim verilmelidir. Çünkü animasyon
programlama dili koduyla bu isim üzerinden başlatılacaktır.
bloğu bloğu içinde bulunmalıdır.
Animasyon hazırlandıktan sonra program koduyla başlatılmalıdır.
MainPage.xaml.cs içindeki MainPage() kurucu metodu içerisine Story1.Begin()
gibi bir kod yazılarak animasyonun başlatılması sağlanmalıdır.
animasyonlarında kullanılan önemli özellikler aşağıda
belirtilmiştir.
From: Nesnenin animasyon boyunca değişecek özelliğinin başlangıç değerini belirler.
To: Nesnenin animasyon boyunca değişecek özelliğinin bitiş değerini belirler.
By: Form ve To özelliklerinin değerleri arasındaki artış miktarını belirler.
RepeatBehavior: Animasyonun kaç defa tekrar edeceğini belirler. RepeatBehavior=
”Forever” tanımlanırsa animasyon devamlı tekrar edecektir. Belirli bir sayı kadar tekrar
etmesini istersek RepeatBehavior=”3x” şeklinde atama yapmanız gerekecektir.
52
AutoReserve: True atanarak animasyon bittikten sonra animasyonun geriye doğru
çalışıp ilk hâline dönmesi sağlanır.
Duration: Animasyonun süresini belirlememizi sağlar. Saat, dakika, saniye şeklinde
süre verilmesi gerekir. (Örneğin 1 saniyelik bir animasyon için 0:0:1 şeklinde
kullanılmalıdır.
SpeedRatio: Animasyonun hızını belirler. Herhangi bir değer belirtilmez ise, 1
değerini alır. 10 saniyelik bir animasyonda SpeedRatio özelliği 5 atanmışsa animasyon 2
saniye sürecektir.
Storyboard.TargetName: Animasyonu oluşturulacak olan nesnenin adını tutar.
Storyboard.TargetProperty: Animasyonu oluşturulacak olan nesnenin animasyon
boyunca değiştirilecek özelliğinin adını tutar.
Örnek: Sayfa üzerinde bulunan bir resmin genişlik ve yüksekliklerini eş zamanlı
olarak değiştirerek resmi büyüten ve bu işlemi tekrarlayan animasyon uygulaması
MainPage sayfasının kod tarafında, MainPage() kurucu metodu içinde animasyonu
başlatan kod aşağıdaki gibi yazılmalıdır.
public MainPage()
{
InitializeComponent();
Story1.Begin();
}
53
Ekran görüntüsü: Uygulama çalıştırıldığında resmin genişlik ve yükseklik
değerlerinin büyüyüp küçüldüğünü ve bu işlemin tekrar edileceğini göreceğiz.
Resim 6.6: DoubleAnimation uygulaması
6.7.2. ColorAnimation
yöntemi renk geçiş animasyonları oluşturmak için kullanılır.
ColorAnimation sınıfında From özelliği ile başlangıç rengi, To özelliği ile bitiş rengi
belirlenir. AutoReserve özelliğine true atanarak, animasyon bittikten sonra animasyonun son
renkten ilk renge dönmesi sağlanacaktır.
Örnek: Bir saniye süre içerisinde kırmızıdan maviye dönüşen elips animasyonu
Görüldüğü gibi başlangıçta Ellipse kontrolünü düz kırmızıya boyayan solid1 isimli
fırça nesnesine renk animasyonu uygulanmıştır.
MainPage sayfasının kod tarafında, MainPage() kurucu metodu içinde animasyonu
başlatan kod aşağıdaki gibi yazılmalıdır.
54
public MainPage()
{
InitializeComponent();
Story1.Begin();
}
Ekran görüntüsü:
Resim 6.7: ColorAnimation uygulaması
6.7.3. PointAnimation
XAMl tabanlı İnternet uygulamalarında kullanılan kontrollerin point türündeki
özelliklerini değiştiren animasyon türüdür.
Örnek: RadialGradientBrush fırçası ile dairesel renk geçişi kullanarak renklendirilmiş
bir GradientOrigin noktasını PointAnimation yöntemiyle kaydıran uygulama
55
Kodlardan da anlaşılacağı gibi GradientOrigin noktasını çapraz olarak kaydıracaktır.
MainPage sayfasının kod tarafında, MainPage() kurucu metodu içinde animasyonu
başlatan kod aşağıdaki gibi yazılmalıdır.
public MainPage()
{
InitializeComponent();
Story1.Begin();
}
Ekran görüntüsü:
Resim 6.8: ColorAnimation uygulaması
6.8. Anahtar Çerçeveler (Key Frame)
Key Frame animasyonlar, bir zaman çizgisi üzerinde gerçekleşir. Key Frame denilen
animasyondaki kilit durumlar zaman çizelgesinin belirli anlarında tanımlanır. Key Frame
durumları arasındaki geçiş değerleri otomatik olarak hesaplanır.
Key Frame animasyonlar point, double, color ya da object türündeki özelliklere
uygulanabilir. Key Frame animasyon teknikleri aşağıdaki gibidir.
PointAnimationUsingKeyFrames
ColorAnimationUsingKeyFrames
DoubleAnimationUsingKeyFrames
ObjectAnimationUsingKeyFrames
Key Frame animasyonlarda özellik tipine göre üç farklı geçiş metodu vardır. Bunlar;
Linear, Spline, Discrete metodlarıdır.
Linear metodu: Bir cismin, bir özelliğinin, bir değerden bir değere ani olarak değil,
kademeli olarak geçiş yaptığı animasyon değeridir. Örneğin, bir elips nesnesinin form
üzerinde bir yerden bir yere kaydırılması bu yöntemle yapılmaktadır.
Discrete metodu: Nesne özelliklerinin anlık olarak değiştirildiği geçiş metodudur. İki
KeyFrame arasında ara değerler olmaz.
56
Spline metodu: Nesne özelliklerinin değerleri bir değerden bir değere doğru
değişirken belirli anlarda geçişin ivme kazanması ya da yavaşlatılması için kullanılır. Top
zıplama animasyoları gibi animasyonlarda kullanılabilir.
6.8.1. Etiketi
Nesnelerin Double türündeki özelliklerine uygulanacak olan keyframe
animasyonları bu etiket bloğunda tanımlanır. Bu etikette kullanılan bazı özellikler ise
şunlardır.
AutoReserve: Animasyon bittikten sonra geri döndürmeyi sağlar.
Duration: KeyFrame animasyonunun toplam süresini belirler.
RepeatBehavior: Animasyonun tekrarlanma sayısını belirler.
Storyboard.TargetName: Animasyonu oluşturulacak olan nesnenin adını
tutar.
Storyboard.TargetProperty: Animasyonu oluşturulacak olan nesnenin
animasyon boyunca değiştirilecek özelliğinin adını tutar.
Her bir keyframe ise geçiş türüne göre ,
ya da etiketlerinden biri ile
oluşturulur. Bu etiketlerin herbirinin KeyTime ve Value isimli iki önemli özelliği vardır.
KeyTime özelliği anahtar karenin animasyon içindeki anını belirler. Value özelliği ise
KeyTime’da belirtilen anda, TargetName içinde belirtilen nesnenin, TargetProperty içinde
belirtilen özelliğine ait alacağı değeri belirler.
Örnek: kullanımını aşağıdaki XAML kodunda
görelim.
57
MainPage sayfasının kod tarafında, MainPage() kurucu metodu içinde animasyonu
başlatan kod aşağıdaki gibi yazılmalıdır.
public MainPage()
{
InitializeComponent();
Story1.Begin();
}
Ekran görüntüsü:
Resim 6.9: DoubleAnimationUsingKeyFrames uygulaması
6.8.2. Etiketi
Nesnelerin Color(Renk) türündeki özelliklerine uygulanacak olan keyframe
animasyonları bu etiket bloğunda tanımlanır. içinde
geçerli olan özellikler bu etikette de geçerlidir.
Her bir keyframe ise geçiş türüne göre ,
ya da etiketlerinden biri ile
oluşturulur. Bu etiketlerin de herbirinin KeyTime ve Value özellikleri kullanılır.
Örnek:
MainPage sayfasının kod tarafında, MainPage() kurucu metodu içinde animasyonu
başlatan kod aşağıdaki gibi yazılmalıdır.
public MainPage()
{
InitializeComponent();
Story1.Begin();
}
Ekran görüntüsü: Kırmızıdan beyaza dönüşen bir daire görünecektir.
6.8.3. Etiketi
Nesnelerin point türündeki özelliklerine uygulanacak olan keyframe animasyonları bu
etiket bloğunda tanımlanır. ve
içinde geçerli olan temel özellikler bu etikette de
geçerlidir.
Her bir keyframe ise geçiş türüne göre ,
ya da etiketlerinden biri ile oluşturulur.
Bu etiketlerin de herbirinin KeyTime ve Value özellikleri kullanılır.
6.9. Animasyonların Kontrol Olayları İçinden Tetiklenmesi
Oluşturulan animasyonlar programlama dili kodları kullanılarak, çeşitli kontrollerin
çeşitli olaylarına bağlı olarak tetiklenebilir. Örneğin, fare bir nesnenin üzerine getirildiğinde
renk değiştirme animasyonunun çalışması ya da bir nesneye tıklandığında o nesnenin
dönmesi gibi uygulamalar yapılırken programlama dili kodları kullanılacaktır.
Örnek: Fare bir elipsin üzerine getirildiğinde bir elipsin renk değiştirmesini sağlayan
keyframe animasyonu yapalım.
XAML kodları aşağıdaki gibi olacaktır.
59
Görüldüğü gibi story1 ve story2 isminde iki adet StoryBoard tanımlanmıştır. Story1
içinde kırmızıdan yeşile geçiş animasyonu keyframe yöntemi ile oluşturulmuştur. Story2
içinde de yeşilden kırmızıya geçiş animasyonu oluşturulmuştur.
Oluşturulan her iki animasyonun elips üzerindeki fare hareketine göre başlatılması
gerekmektedir. Yani elipsin üzerine fare getirildiğinde(MouseEnter olayında) story1 isimli
animasyonun çalışması gerekiyor. Aynı şekilde fare elipsin üzerinden ayrıldığına
(MouseLeave olayında) story2 isimli animasyonun çalışması gerekiyor. Bunun için
MainPage sayfasının kod tarafında elips nesnesinin MouseEnter ve MouseLeave metodları
içinde animasyonları başlatan kodlar aşağıdaki gibi yazılmalıdır.
private void Ellipse_MouseLeave(object sender, MouseEventArgs e)
{
story2.Begin();
}
private void Ellipse_MouseEnter(object sender, MouseEventArgs e)
{
story1.Begin();
}
60
UYGULAMA FAALİYETİ
Aşağıdaki önerilere göre işlem basamaklarını uygulayınız.
İşlem Basamakları Öneriler
Döndürme işlemini gerçekleştirerek
aşağıdaki tasarımı gerçekleştiriniz.
Aşağıdaki XAML kodunu yazınız.
Ölçülendirme (Scale) işlemini
gerçekleştiriniz.
Aşağıdaki XAML kodunu yazınız.
Öteleme işlemini gerçekleştiriniz.
Aşağıdaki XAML kodunu yazınız.
Çarpıtma (Skew) işlemini
gerçekleştirerek aşağıdaki görüntüyü
elde ediniz.
Aşağıdaki XAML kodunu yazınız.
UYGULAMA FAALİYETİ
61
KONTROL LİSTESİ
Bu faaliyet kapsamında aşağıda listelenen davranışlardan kazandığınız beceriler için
Evet, kazanamadığınız beceriler için Hayır kutucuğuna (X) işareti koyarak kendinizi
değerlendiriniz.
Değerlendirme Ölçütleri Evet Hayır
1. Döndürme işlemini gerçekleştirdiniz mi?
2. Ölçülendirme işlemini gerçekleştirdiniz mi?
3. Dönüştürme işlemini gerçekleştirdiniz mi?
4. Çarpıtma işlemini gerçekleştirdiniz mi?
5. Matris dönüşümlerini gerçekleştirdiniz mi?
6. Animasyonların program kodlarıyla kontrol edilmesini
gerçekleştirdiniz mi?
7. Animasyon parametrelerini düzenlediniz mi?
8. Anahtar çerçevelerle ilgili ihtiyaç duyulan düzenlemeleri
gerçekleştirdiniz mi?
DEĞERLENDİRME
Değerlendirme sonunda “Hayır” şeklindeki cevaplarınızı bir daha gözden geçiriniz.
Kendinizi yeterli görmüyorsanız öğrenme faaliyetini tekrar ediniz. Bütün cevaplarınız
“Evet” ise “Ölçme ve Değerlendirme”ye geçiniz.
62
ÖLÇME VE DEĞERLENDİRME
Aşağıdaki soruları dikkatlice okuyunuz ve doğru seçeneği işaretleyiniz.
1. Aşağıdakilerden hangisi sol üst köşe referans alınarak dönme hareketi gerçekleştirir?
A) Rotate Transform
B) Skew Transform
C) Translate Transfom
D) Matrix Transform
2. Aşağıdakilerden hangisi yatay ve dikey eksendeki büyüklükleri değiştirir?
A) Rotate Transform
B) Scale Transform
C) Translate Transfom
D) Matrix Transform
3. Aşağıdakilerden hangisi öteleme işlemini gerçekleştirir?
A) Rotate Transform
B) Scale Transform
C) Translate Transfom
D) Matrix Transform
4. Aşağıdakilerden hangisi ile nesne X ve Y eksenlerinde tanımlanan açı ile eğilebilir?
A) Rotate Transform
B) Skew Transform
C) Translate Transfom
D) Matrix Transform
5. Aşağıdakilerden hangisi resim işleme yöntemlerinde kullanılmaktadır?
A) Rotate Transform
B) Skew Transform
C) Translate Transfom
D) Matrix Transform
Aşağıdaki cümleleri dikkatlice okuyarak boş bırakılan yerlere doğru sözcüğü yazınız.
6. Kontrollerin panel içerisindeki bulunuş açılarını değiştirerek rotasyona uğratma
işlemlerini……………………….denir.
7. XAML ile oluşturulan animasyonların ne zaman başlayacağını ya da ne zaman
biteceği ………………………. Özelliği aracılığıyla belirlenir.
8. Temel animasyon türlerinden biri olan ………………..sınıfı, nesnelerin double
türündeki özelliklerine uygulanmaktadır.
ÖLÇME VE DEĞERLENDİRME
63
DEĞERLENDİRME
Cevaplarınızı cevap anahtarıyla karşılaştırınız. Yanlış cevap verdiğiniz ya da cevap
verirken tereddüt ettiğiniz sorularla ilgili konuları faaliyete geri dönerek tekrarlayınız.
Cevaplarınızın tümü doğru ise “Modül Değerlendirme”ye geçiniz.
64
MODÜL DEĞERLENDİRME
DİRME
Aşağıdaki cümleleri dikkatlice okuyarak boş bırakılan yerlere doğru sözcüğü yazınız.
1. ……….. panelinin içerisinde bulunan kontrol noktasal konumlandırılabilir.
2. XAML’de ilk tanımlanan eleman, …………………. eleman olarak adlandırılır.
3. …………… bir root elemandır.
4. ………………………………., bir zaman çizgisi üzerinde gerçekleşir.
5. ………………………………..renklerle ilgili animasyonları oluşturmayı sağlar.
6. …………………………………, animasyon üzerinde mevcut konumu almayı sağlar.
7. …………………………………..animasyonun hızını belirler.
8. …………………………………..TimeSpan türünde bir zaman alır ve animasyonun bu
zamana atlamasını sağlar.
9. …................................ metodu bir StoryBoard animasyonunu başlatmayı sağlar.
Aşağıdaki soruları dikkatlice okuyunuz ve doğru seçeneği işaretleyiniz.
10. Aşağıdakilerden hangisi içinde yer alan nesnelere çerçeve ekler?
A) Border B) Tuval (Canvas) C) Stackpanel D) Grid
11. Satır ve sütunları bulunabilen yerleşim paneli hangisidir?
A) Stackpanel B) Tuval (Canvas) C) Border D) Grid
12. Aşağıdakilerden hangisi Key Frame animasyonlarda özellik tipine göre üç farklı
interpolasyon metodlarından değildir?
A) Linear B) Spline C) Double D) Discrete
DEĞERLENDİRME
Cevaplarınızı cevap anahtarıyla karşılaştırınız. Yanlış cevap verdiğiniz ya da cevap
verirken tereddüt ettiğiniz sorularla ilgili konuları faaliyete geri dönerek tekrarlayınız.
Cevaplarınızın tümü doğru ise bir sonraki modüle geçmek için öğretmeninize başvurunuz.
MODÜL DEĞERLENDİRME
65
CEVAP ANAHTARLARI
ÖĞRENME FAALİYETİ-1’İN CEVAP ANAHTARI
1 C
2 A
3 C
4 D
5 C
6 Border
7 Height
ÖĞRENME FAALİYETİ-2’NİN CEVAP ANAHTARI
1 C
2 B
3 A
4 B
5 D
6 A
7 A
8 B
ÖĞRENME FAALİYETİ-3’ÜN CEVAP ANAHTARI
1 96
2 37.7
3 1.333
4 B
5 C
6 A
7 Doğru
8 Yanlış
9 Doğru
CEVAP ANAHTARLARI
66
ÖĞRENME FAALİYETİ-4’ÜN CEVAP ANAHTARI
1 B
2 A
3 B
4 C
5 D
6 C
7 C
8 B
ÖĞRENME FAALİYETİ-5’İN CEVAP ANAHTARI
1 D
2 C
3 Source
4 FontFamily
5 FontUri
ÖĞRENME FAALİYETİ-6’NIN CEVAP ANAHTARI
1 A
2 B
3 C
4 B
5 D
6 RotateTrans
fom
7 Triggerlar
8 Double
Animation
67
MODÜL DEĞERLENDİRME’NİN SINAVI CEVAP ANAHTARI
1 Canvas
2 Root
3 UserControl
4 Key Frame
Animasyonlar
5 Color Animation
6 Get CurrentState
7 SpeedRatio
8 Seek
9 Begin
10 A
11 D
12 C
68
KAYNAKÇA
ÇA
MORONEY Laurence, Beginning Web Development, Silverlight, and
ASP.NET Ajax:From Notice to Professional, Apress, 2008.
ÖZDEMİR Selçuk, Framework 4.0, Kodlab Yayıncılık, İstanbul, 2010.
SÜZEN Ahmet Ali, Silverlight, Kodlab Yayıncılık, İstanbul, 2011.
KAYNAKÇA
0 yorum
Yorum Gönder