T.C. MİLLÎ EĞİTİM BAKANLIĞI BİLİŞİM TEKNOLOJİLERİ GELİŞMİŞ İNTERNET UYGULAMALARINDA TASARIM ARAÇLARI 482BK0150 Ankara, 2012
Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve Öğretim Programlarında yer alan yeterlikleri kazandırmaya yönelik olarak öğrencilere rehberlik etmek amacıyla hazırlanmış bireysel öğrenme materyalidir. Millî Eğitim Bakanlığınca ücretsiz olarak verilmiştir. PARA İLE SATILMAZ.
İÇİNDEKİLER 1. YERLEŞİM 1.1. StackPanel 1.2. Tuval (Canvas) 1.3. Grid 1.4. Border 2. FIRÇALAR 2.1. SolidColorBrush 2.2. LinearGradientBrush 2.3. RadialGradientBrush 2.4. ImageBrush 2.5. VideoBrush 3. GÖRSEL ÖZELLİKLER 3.1. Ölçü ve Yerleşim Özellikleri 3.2. Opacity 3.3. Cursor behaviors 3.4. Stroke 4. ŞEKİLLER 4.1. Elips (Ellipse) 4.2. Dikdörtgen (Rectangle) 4.3. Çizgi (Line) 4.4. Yol (Path) 4.5. Çoklu Geometrik Nesneler (GeometryGroup) 5. KONTROLLER 5.1. Tuval (Canvas) 5.2. Resim (Image) 5.3. Kabartma (Glyphs) 5.4. Metin Bloğu (TextBlock) 6. DÖNÜŞÜM VE ANİMASYON 6.1. Döndürme(RotateTransform) 6.2. Ölçeklendirme (ScaleTransform) 6.3. Dönüşüm (TranslateTransform) i
6.4. Çarpıtma (SkewTransform) 6.5. Matris (MatrixTransform) 6.6. Tetikleyiciler (Trigger ve Event Triggerlar) 6.7. Geçmiş (BeginStoryboard ve Storyboard) 6.8. Animasyon parametreleri 6.9. Anahtar Çerçeveler (Key Frame) ÖLÇME VE DEĞERLENDİRME: ii
KOD ALAN DAL/MESLEK AÇIKLAMALAR AÇIKLAMALAR 482BK0150 Bilişim Teknolojileri Veri Tabanı Programcısı MODÜLÜN ADI Gelişmiş İnternet Uygulamalarında Tasarım Araçları Tasarım özelliklerini düzenlemeyi, fırçaları kullanmayı, görsel özellikleri kullanarak uygulama geliştirmeyi, şekil işlemlerini MODÜLÜN TANIMI gerçekleştirmeyi, kontrolleri kullanmayı, dönüşüm ve animasyon işlemlerini yapmayı sağlayan modüldür. SÜRE 40/32 ÖN KOŞUL YETERLİK XAML tasarım araçlarını kullanmak Genel Amaç Öğrenci, bu modül ile gerekli ortam sağlandığında; tasarım araçlarını kullanabileceksiniz. Amaçlar 1. Tasarım özelliklerini düzenleyebilecektir. MODÜLÜN AMACI 2. Fırça işlemlerini gerçekleştirebilecektir. 3. Görsel özellikleri kullanarak uygulama geliştirebilecektir. 4. Şekil işlemlerini gerçekleştirebilecektir. 5. Kontrolleri kullanabilecektir. 6. Dönüşüm ve animasyon işlemlerini gerçekleştirebilecektir. EĞİTİM ÖĞRETİM ORTAMLARI VE DONANIMLARI Ortam: Atölye, Bilişim teknolojisi sınıfı, kütüphane, internet, bireysel öğrenme ortamları vb. Donanım: Bilgisayar(PC), Projeksiyon, projeksiyon perdesi, yazıcı, gerekli olan yazılımlar, harici harddisk, ilgili kitaplar, dökümanlar Ö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. iii
GİRİŞ GİRİŞ Sevgili Öğrenci, Günümüzde internet üzerinden birçok uygulamalar yapılmaktadır. Yapılan tüm uygulamalar sizlerin çalışmalarına yansımaktadır. Tüm uygulamalarda yapılması istenilen tasarım özelliklerini düzenleme sizlerin çalışmalarına yansıyacak olan işlemlerden birisidir. Tüm görsel olarak yapacağınız internet uygulamalarının arayüz ile ilgili olan bölümünü içerir. Fırçaları kullanma işleminde ise, ihtiyaca uygun fırça aracını kullanma becerisini kazanmaktasınız. Görsel özellikleri kullanarak uygulama geliştirme işlemi ile uygulamanın görsel özelliklerini ihtiyaca uygun şekilde düzenlemesini gerçekleştireceksiniz. Şekil işlemlerini gerçekleştirme işlemi sonucunda, ihtiyaca uygun şekil düzenlemesini yapmayı kazanmış olacaksınız. Kontrolleri kullanma işlemi ile, uygulama içinde ihtiyaç duyulan kontrolleri hatasız olarak gerçekleştirmeyi sağlayacaksınız. Dönüşüm ve animasyon işlemlerini yapmayı sağlama işlemi sonucunda, uygulama içinde kullanılan nesneler için istenilen dönüşüm işlemlerini gerçekleştirmeyi ve anahtar çerçeveleri, uygun değişim noktalarında kullanmayı kazanacaksınız. 1
2
ÖĞRENME FAALİYETİ 1 AMAÇ ÖĞRENME FAALİYETİ-1 Tasarım özelliklerini düzenleyebileceksiniz. ARAŞTIRMA Editör panellerini düzenlemek Tuval ayarlarını yapmak Izgara düzenlemelerini yapmak Kenarlıklarla ilgili ayarlamaları yapmak 1. YERLEŞİM XAML, Siverlight ve WPC teknolojilerinin 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 in gelişletilmiş hali gibi görülmekte ve uzantısı.xaml dır. Bu yüzden başlatılan her tag sonlandırılmak zorundadır. XAML bir programlama dili olmamakla beraber uygulama mantığı ve olaylar da codebehind dosyalarında bulunmaktadır. WCF (Windows Presentation Foundation), yeni nesil kullanıcılar için Windows Vista/7 görünümünde arayüzler sunmamızı sağlayan XAML tabanlı bir sistemidir. WPF kullanıcı arayüzleri geliştirmede ve görüntülemede önemli bir açığı kapatmıştır. Kullanıcı ile daha etkileşimli uygulamalar kullanarak, ses ve görüntülerle zengin içerikleri uygulamalar yapmamızı sağlamaktadır. XAML de ilk tanımlanan eleman, root eleman olarak adlandırılır. UserControl, bir root elemandır. Root elemanlarının kapsadığı panel elemanları kullanıcı ara yüzleri için Stackpanel, Grid,Canvas ve Border gibi düzen kontrolleri sunar. 1.1. StackPanel Yatay ve dikey olarak yönlendirilmiş tek satırlık değerler eklemek için kullanılır. Bu kontrolümüz daha iyi kavramak için projemize bir form ekleyelim. XAML kod alanına gelerek aşağıdaki kodumuzu yazarak şekilleri oluşturalım. <Gird> <Canvas> <Ellipse Width= 100 Height= 100 Fill= Red /> <Ellipse Width= 80 Height= 80 Fill= Orange /> <Ellipse Width= 60 Height= 60 Fill= Yellow /> <Ellipse Width= 40 Height= 40 Fill= Green /> 3
<Ellipse Width= 20 Height= 20 Fill= Blue /> </Canvas> </Gird> Kodumuzu yazdıktan sonra tasarıma baktığımızda şekillerimizin üst üste oluştuğunu görebiliriz. Resim 1.1: Stakpanel Kontol 1(framework) Burada yer alan kodlarımızı Stackpanel içerisine yazdığımızda her şekil bir satır olarak çizilecektir. <Gird> <Stackpanel Margin= 0,0,0,-44 > <Ellipse Width= 100 Height= 100 Fill= Red /> <Ellipse Width= 80 Height= 80 Fill= Orange /> <Ellipse Width= 60 Height= 60 Fill= Yellow /> <Ellipse Width= 40 Height= 40 Fill= Green /> <Ellipse Width= 20 Height= 20 Fill= Blue /> </ Stackpanel > </Gird> Kodumuzu düzenledikten sonra çalıştıralım. 4
Resim 1.2: Stakpanel Kontol 2 (framework) 1.2. Tuval (Canvas) Form içerisinde kontrolleri düzgün yerleştirmek için kullanılan bir kontroldür. Canvas paneli daha çok grafiksel işlemlerde veya animasyon yapımında tercih edilir. Bunun sebebi, Canvas panelinin içerisine alacağı kontrolü noktasal olarak belirtmesidir. Canvas kontrol içerisinde sol,sağ,üst ve alt köşelere göre kontrolleri yerleştirmek için kullanılır. Aşağıdaki kodumuzu XAML alanına yazalım. <Canvas> <Button Content= Sol Ust Width= 85 Height= 30 Canvas.Top= 20 Canvas.Left= 20 /> <Button Content= Sag Ust Width= 85 Height= 30 Canvas.Top= 20 Canvas.Right= 20 /> <Button Content= Sol Alt Width= 85 Height= 30 Canvas.Bottom= 20 Canvas.Left= 20 /> <Button Content= Sag Alt Width= 8a5 Height= 30 Canvas.Bottom= 20 Canvas.Right= 20 /> </Canvas> Kodumuz yazıp Design alanına baktığımızda Button kontrollerinin yerleştiğini görebilirsiniz. 5
1.3. Grid Resim 1.3: Canvas Kontrol (framework) Form üzerinde satır ve sütun olarak alanlar oluşturulması için kullanılır. Satır ve sütun ayarlarımız için genişlik ve yükseklik değerlerini belirlemeliyiz. Grid Kontrolü; RowDefinitions property si satır oluşturmamızı sağlar. ColumnDefinitions property si sütun oluşturmamızı sağlar. ShaowGridLines property si ile tanımlanan satır ve sütunları ekranda görebilirsiniz. Burada ölçüler genelde pixel(px) cinsinden verilir. Ama farklı ölçü birimleri de bu değerleri atayabiliriz. Aşağıdaki XAML kodumuzu yazalım. <Gird Margin= 5 > <Grid.ColumnDefinitions> <ColumnDefinition Width= 80 /> <ColumnDefinition Width= 80 /> <ColumnDefinition Width= 80 /> <ColumnDefinition Width= 80 /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height= 35 /> <RowDefinition Width= 216* /> </Grid.RowDefinitions> </Gird> Burada Grid ler şeklinde form alanımızı görebiliriz. 6
Resim 1.4: GridKontrol (framework) 1.4. Border Bir sınır belirleyen, arkaplan oluşturmak için kullanılan kontroldür. Projemize bir form ekleyelim ve XAML kodumuzu yazalım. <Gird> <Border HorizontalAligment= Center VerticalAligmetnt= Center Width= 150 Height= 100 CornerRadius= 20 BorderBrush= Red BorderThickness= 5 > <Border.BitmapEffect> <DropShadowBitmapEffect/> </Border.BitmapEffect> <Border.Background> <LinearGradientBrush Endpoint= 0.5,2 Startpoint= 0.2,0 > <GradientStop Color= Aqua Offset= 0 /> <GradientStop Color= Black Offset= 1 /> <LinearGradientBrush> </Border.Background> <TextBlock Width= 100 Height= 50 Fontweight= Bold TextWrapping= Wrap TextAligment= Center Text= Örnek Yazı Alanımız. /> </Border> </Gird> XMAL kodumuzu yazdıktan sonra projemizi çalıştıralım. 7
Resim 1.5: BorderKontrol (framework) 8
UYGULAMA FAALİYETİ UYGULAMA FAALİYETİ Aşağıda belirtilen işlem basamaklarını ve önerileri dikkate alarak tasarım özelliklerini düzenleyiniz. Kullanılacak araç ve gereçler: Bilgisayar (PCveya laptop), Projeksiyon, projeksiyon perdesi, yazıcı, gerekli olan yazılımlar, ilgili kitaplar ve dökümanlar İşlem Basamakları Öneriler Tasarım özelliklerini düzenlemek için; Editör panellerini düzenleyiniz. Tuval ayarlarını yapınız. Izgara düzenlemelerini yapınız. StackPanel düzen panellerini uygulayınız. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Grid> <Stackpan nel Height= 238 Margin= 53, 36, 0,0 Name= stackpanel1 Orientation= VerticalAligment=Top HorizontalAligment= Left Width= 371 MaxHeight= 750 MaxWidth= 750 > <MediaElement Heigh= 120 Name= mediaelement1 Width= 160 Source= Wildlife.wmv /> <Button Content= Oynat Height=23 Name= button2 Width= 75 HorizontalAligment= Center /> <Button Content= Duraklat Height=23 Name= button3 Width= 75 HorizontalAligment= Center /> </Stackpanel> </Grid> Canvas düzen panellerini uygulayınız. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Canvas Background= AntiqueWhite > <Rectangle Canvas.Left= 35 Canvas.Top= 80 Height= 200 Width= 200 Stroke= Yellow StrokeThickness= 5 Fill= Red /> <Rectangle Canvas.Left= 160 Canvas.Top= 62 Height= 200 Width= 200 Stroke= Yellow StrokeThickness= 5 Fill= Blue /> <Rectangle Canvas.Left= 272 Canvas.Top= 36 Height= 200 Width= 200 Stroke= Yellow StrokeThickness= 5 Fill= Green /> </Canvas> Grid düzen panellerini uygulayınız. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width= 100* /> < ColumnDefinition Width= 176* /> 9
Kenarlıklarla ilgili ayarlamaları yapınız. <ColumnDefinition Width= 227* /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height= 40* /> <RowDefinition Height= 30* /> <RowDefinition Height= 28* /> <RowDefinition Height= 28* /> <RowDefinition Height= 185* /> </Grid.RowDefinitions> </Grid> Border düzen panellerini uygulayınız. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Border BorderBrush= FF9D1212 BorderThickness= 5 Height= 161 HorizontalAligment= Left Margin= 46,92,0,0 Name= border1 VerticalAligment= Top Width= 207 CornerRadius= 25 Background= {x:null} > <image Height= 141 Name= image1 Stretch= Fill Width= 179 Source= /silverlightapplication2;component/images/kodlab.jpg /> </Border> Ayrıca Border kontrolünün CornerRadius property sine CornerRadius sınıfın yapıcı metodunda her köşe için farklı değerler belirleyebilirsiniz. 10
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 Tasarım özelliklerini düzenlemek için; 1 Editör panellerini düzenlediniz mi? 2 Tuval ayarlarını yaptınız mı? 3 Izgara düzenlemelerini yaptınız mı? 4 Kenarlıklarla ilgili ayarlamaları yaptınız mı? 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. 11
ÖLÇME VE DEĞERLENDİRME Ö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 Silverlight ve WPC teknolojilerinin tasarım kısımlarını geliştireceğimiz, statik ve dinamik kullanıcı ara yüzleri oluşturmamızı sağlayan işaretleme dilidir? A) HTML B) DHTML C) XAML D) CSS 2. Kullanıcı ile daha etkileşimli uygulamalar kullanarak, ses ve görüntülerle zengin içerikleri uygulamalar yapmamızı sağlayan sistemdir? A) WPF B) SQL Server C) ASP.NET D) XML 3. I- Editör panellerini düzenlemek II- Tuval ayarlarını yapmak III- Izgara düzenlemelerini yaptınız Yukarıdakilerden hangileri Grid düzen kontrollerini içerir? A) Yalnız I B) Yalnız II C) Yalnız III D) I ve III 4. Aşağıdakilerden hangisi yatay ve dikey olarak yönlendirilmiş tek satırlık değerler eklemek için kullanılır? A) Border B) Grid C) Tuval(Canvas) D) Stackpanel 5. Aşağıdakilerden hangisi form içerisinde kontrolleri düzgün yerleştirmek için kullanılan bir kontroldür? A) Grid B) Border C) Tuval(Canvas) D) Stackpanel 6. Aşağıdakilerden hangisi form üzerinde satır ve sütun olarak alanlar oluşturulması için kullanılır? A) Stackpanel B) Border C) Tuval(Canvas) D) Grid Aşağıdaki cümlelerde boş bırakılan yerlere doğru sözcükleri yazınız. 7. Kenarlıklarla ilgili ayarlamaları düzeni ile yapılır. 8. Satır ve sütun ayarlarımız için genişlik ve yükseklik değerleri. ile belirlenir. 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 öğrenme faaliyetine geçiniz. 12
ÖĞRENME FAALİYETİ 2 AMAÇ ÖĞRENME FAALİYETİ-2 Fırçaları kullanabileceksiniz. ARAŞTIRMA Tek renk fırçasını kullanınız. Doğrusal olarak değişen renk fırçasını kullanınız. Yayılarak değişen renk fırçasını kullanınız. Resim fırçasını kullanınız Video fırçasını kullanınız. 2. FIRÇALAR WFC ve Silverlight da görsel düzeni oluşturmak için fırçalar kullanılmaktadır. WFC ve Silverlight da bulunan tüm kontroller ve elementler fırçalar ile görselleştirilir. Fırçalar ile renkleri istenilen yapıya farklı şekillerle uygulayabilirsiniz. Temel olarak fırçalar, Brushes sınıfında türetilmiştir. Fırçaların farklı çeşitleri vardır. Her fırçanın kendine özgü çıktısı vardır. Fırça çeşitlerimiz ise şunlardır: SolidColorBrush LinearGradientBrush RadialGradientBrush ImageBrush VideoBrush 2.1. SolidColorBrush Kontrol içerisinde dolgu renklerini ayarlamak için kullanılır. SolidColorBrush tanılamak için; <SolidColorBrush Color= Red /> şeklinde yazmamız yeterlidir. Aşağıdaki XAML kodumuzu yazalım. <Grid> <Rectangle Width= 200 Height= 40 Stroke= Blue StrokeThickness= 1 > < Rectangle.Fill> <SolidColorBrush Color= #33FFFF /> </ Rectangle.Fill> </ Rectangle> </Grid> 13
2.2. LinearGradientBrush Resim 2.1 : SolidColorBrush Doğrusal renk geçişlerinde kullanılır. Aşağıdaki XAML kodumuzu yazalım. <Grid> <Rectangle Width="200" Height="100"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> </Grid> Resim 2.2 : Linear gradient brush Örnek; Dikey (horizontal linear gradient) oluşturmak için aşağıdaki XMAL kodları kullanılır. <Grid> <Rectangle Width="200" Height="100"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="Yellow" Offset="0.0" /> 14
<GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> </Grid> Resim 2.3 : Horizontal linear gradient brush Örnek; Yatay (vertical linear gradient) oluşturmak için aşağıdaki XMAL kodları kullanılır. <Grid> <Rectangle Width="200" Height="100"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> </Grid> 2.3. RadialGradientBrush Resim 2.4 : Vertical linear gradient brush Dairesel renk geçişleri için kullanılır. Aşağıdaki XAML kodumuzu yazalım. <Grid> <Rectangle Width= 300 Height= 200 > 15
< Rectangle.Fill> <RadialGradientBrush> <GradientStop Color= Blue Offset= 0 /> < GradientStop Color= Yellow Offset= 1 /> </RadialGradientBrush> < /Rectangle.Fill> </Rectangle> </Grid> 2.4. ImageBrush Resim 2.5 : Radial Gradient Uygulama Bir resmi fırça olarak kullanabiliriz. Aşağıdaki XAML kodumuzu yazalım. <Grid> <Rectangle Width= 75 Height= 75 > < Rectangle.Fill> <ImageBrush ImageSource= SekilFirca.png /> </ Rectangle.Fill> </ Rectangle> </Grid> Kodlamamız sonucunda oluşan karenin dolgu rengi aradığımız resim olacaktır. Resim 2.6 : ImageBrush Uygulama 16
2.5. VideoBrush VideoBrush, LinearGradientBrush veya bir ImageBrush benzer bir fırça objesi tipidir. Ancak, düz renk, degrade, ya da bir görüntü olan bir alan boyama yerine, video içeriği ile bir alanı boyar. Bu video içeriği bir MediaElement tarafından sağlanır. Sadece başka fırça türleri gibi, dolgu boyamak için bir şeklin, bir yol, bir tuval Arka Plan, ya da bir TextBlock veya Run Önalan bir Dikdörtgen veya geometri içeriği VideoBrush olarak kullanılabilir. Aşağıdaki örnekte, bir TextBlock ın Önalanı boyamak için VideoBrush kullanımı gösterilir. Aşağıdaki XAML kodumuzu yazalım. <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <MediaElement x:name="butterflymediaelement" Source="sampleMedia/Butterfly.wmv" IsMuted="True" Opacity="0.0" IsHitTestVisible="False" /> <TextBlock Canvas.Left="5" Canvas.Top="30" FontFamily="Verdana" FontSize="120" FontWeight="Bold" TextWrapping="Wrap" Text="Video"> <!-- Paint the text with video. --> <TextBlock.Foreground> <VideoBrush SourceName="butterflyMediaElement" Stretch="UniformToFill" /> </TextBlock.Foreground> </TextBlock> </Canvas> 17
UYGULAMA FAALİYETİ UYGULAMA FAALİYETİ İhtiyaca uygun fırça aracını kullanınız. Kullanılan araç ve gereçler: Bilgisayar (PC veya laptop), Projeksiyon, projeksiyon perdesi, yazıcı, gerekli olan yazılımlar, ilgili kitaplar ve dokümanlar İşlem Basamakları Tek renk fırçasını kullanınız. Doğrusal olarak değişen renk fırçasını kullanınız. Yayılarak değişen renk fırçasını kullanınız. 18 Öneriler SolidColorBrush özelliğini uygulayınız. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Ellipse Height= 100 HorizontalAligment= Left Width= 200 > <Ellipse.Fill> <SolidColorBrush Color= Red ></SolidColorBrush> </ Ellipse.Fill> < /Ellipse> LinearGradientBrush özelliğini uygulayınız. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Ellipse Height= 100 HorizontalAligment= Left Margin= 69,96,0,0 Name= ellipse1 Stroke= Black VerticalAligment= Top Width= 372 > <Ellipse.Fill> <LinearGradientBrush> <GradientStop Color= RosyBrown Offset= 0.1 /> < GradientStop Color= Yellow Offset= 0.25 /> < GradientStop Color= White Offset= 0.75 /> < GradientStop Color= BlueViolet Offset= 1 /> </LinearGradientBrush> </Ellipse.Fill> < /Ellipse> RadialGradientBrush özelliğini uygulayınız. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Grid> <Rectangle Height= 238 HorizontalAligment= Left Margin= 67, 33, 0, 0 Name= rectangle1 Stroke= Black
Resim fırçasını kullanınız. Video fırçasını kullanınız. VerticalAligment= Top Widht= 343 > <Rectangle.Fill> <RadialGradientBrush GradientOrigin= 0.9, 0.3 > < RadialGradientBrush.GradientStops> <GradientStop Color= Black Offset= 0.2 /> <GradientStop Color= Red Offset= 0.50 /> <GradientStop Color= AntiqueWhite Offset= 0 /> <GradientStop Color= AntiqueWhite Offset= 1 /> < /RadialGradientBrush.GradientStops> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> </Grid> ImageBrush özelliğini uygulayınız. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Grid> <Rectangle Height= 238 HorizontalAligment= Left Margin= 46, 32, 0, 0 Name= rectangle1 Stroke= Black VerticalAligment= Top Width= 404 > <Rectangle.Fill> <ImageBrush ImageSource= F:\a2s.png /> </Rectangle.Fill> < /Rectangle> </Grid> VideoBrush özelliğini uygulayınız. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Canvas> <MediaElement x:name="mybutterflymediaelement" Source="sampleMedia/Butterfly.wmv" /> 19 <! Texti boyamak için kullanılır. --> <TextBlock Canvas.Left="5" Canvas.Top="30"
FontFamily="Verdana" FontSize="120" FontWeight="Bold" Text="Video"> <TextBlock.Foreground> <VideoBrush /> </TextBlock.Foreground> </TextBlock> </Canvas> 20
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 Tek renk fırçasını kullandınız mı? 2 Doğrusal olarak değişen renk fırçasını kullandınız mı? 3 Yayılarak değişen renk fırçasını kullandınız mı? 4 Resim fırçasını kullandınız mı? 5 Video fırçasını kullandınız mı? 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. 21
ÖLÇME VE DEĞERLENDİRME Ö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 fırça çeşitlerinden değildir? A ) ImageBrush B ) SolidColorBrush C ) VisualBrush D ) RadialGradientBrush 2. Aşağıdakilerden hangisi kontrol içerisinde dolgu renklerini ayarlamak için kullanılan fırçadır çeşididir? A ) ImageBrush B ) SolidColorBrush C ) RadialGradientBrush D ) LinearGradientBrush 3. Aşağıdakilerden hangisi dairesel renk geçişleri için kullanılan fırça çeşididir? A ) RadialGradientBrush B ) LinearGradientBrush C ) SolidColorBrush D ) VideoBrush 4. Dikey renk düzeneği oluşturan fırça aşağıdakilerden hangisidir? A ) HorizontalLinearGradientBrush B ) VerticalLinearGradientBrush C ) RadialGradientBrush D ) VisualBrush 5. Aşağıdakilerden hangisi doğrusal renk geçişlerinde kullanılan fırça çeşididir? A ) SolidColorBrush B ) RadialGradientBrush C ) VideoBrush D )LinearGradientBrush 6. Yatay renk düzeneği oluşturan fırça aşağıdakilerden hangisidir? A ) VideoBrush B ) HorizontalLinearGradientBrush C ) VerticalLinearGradientBrush D ) SolidColorBrush 7. Aşağıdakilerden hangisi tek renk fırçadır? A ) VideoBrush B ) ImageBrush C ) LinearGradientBrush D ) SolidColorBrush 8. Aşağıdakilerden hangisi resim fırçasıdır? A ) VideoBrush B ) ImageBrush C ) RadialGradientBrush D ) LinearGradientBrush 22
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 öğrenme faaliyetine geçiniz. 23
ÖĞRENME FAALİYETİ 3 AMAÇ Görsel Özellikleri Kullanarak Uygulama Geliştiriniz. ARAŞTIRMA Ölçü ve yerleşim özelliklerini düzenleyiniz Zıtlık ayarını yapınız. İşaretçi olaylarını düzenleyiniz. Cursor behaviors özelliğiniz kullanınız. Uygulama içindeki hareketleri düzenleyiniz. 3. GÖRSEL ÖZELLİKLER XAML içerisinde nesnelerin özellikleri olarak yazılarak ölçü yerleşim birimleri, opacity, cursor behavour ve stroke kullanılır. 3.1. Ölçü ve Yerleşim Özellikleri Ölçü birimleri aşağıdaki tabloda yer almaktadır. Tablo 1.1: Ölçü Birimleri Atama Değeri Değerin Adı Açıklama px Pixel(Piksel) 1 pixel in Inches(İnç) 96 pixel cm Centimeters(Santimetre) 2,54 cm = 1 pixel pt Points(Nokta) 1/72 inch XAML boyutları, yükseklik ve genişlik özelliklerini kullanarak çift bir değer alarak ayarlanır. 100 piksel genişliğinde ve 200 piksel yüksekliğinde bir dikdörtgen oluşturmak için, örneğin, şöyle XAML tanımlarsınız: <Rectangle Fill="Black" Width="100" Height="200" /> Ayrıca, üst tuvala bağlı Yukarı (Top) ve Sol (Left) özellikleri nesnenin göreli konumunu belirtmek için kullanılır. 24
Sayı 0 arasındaki değerleri kapsayan ve PositiveInfinity dört olası boyut özelliklerini belirten bir Thickness yapısı bulunmaktadır. Margin: Öznitelik kullanımını da simetrik ve mantıksal olarak verilen sırada geçerli olan kısaltılmış değerleri kabul eder. Örneğin, Tüm özellikler, Margin="20" anlamında yorumlanacak bir Thickness 20 değer olacak şekilde ayarlanır. Margin="20,50"anlamında yorumlanacak bir Thickness ile Left ve Right yönlerini 20'ye ayarlanır ve Top ve Bottom 50 olarak ayarlanır. 3.2. Opacity Opacity, nesnelerde saydamlık için kullanılan bir özelliktir. Aşağıdaki XAML Kodlarını yazınız. <!-- Resim ve üzerine yazılı metnin 25% opak olmasını sağlar. --> <Image Opacity="0.25">A Image</ Image > 3.3. Cursor behaviors ( a ) ( b ) Resim 3.1: Resimlerde %25 opacity ayarı Kullanıcılara iyi bir geri besleme sağlamak için, uygun olan eylem türünü belirtmek için ve fare imlecini değiştirmek için sık sık gerekli olabilir. XAML elemanları aşağıdaki değerleri ayarlamak için izin veren imleç özellikleri; Arrow, Default, Hand, Ibeam, None, Wait. 3.4. Stroke Stroke: Dış çerçeve rengini seçer. StrokeThickness: Dış çerçeve kalınlığını ayarlar. 25
StrokeDashCap: Şeklin dış kenarlarını nasıl bir kesikli çizgi ile gösterileceği belirtilir. StrokeDashArray: Kesikli kenarlarda kesikli çizginin ne kadar boşlukta tekrarlanacağını belirtir. 26
UYGULAMA FAALİYETİ Uygulamanın görsel özelliklerini ihtiyaca uygun şekilde düzenleyiniz. Kullanılan araç ve gereçler: Bilgisayar (PCveya laptop), Projeksiyon, projeksiyon perdesi, yazıcı, gerekli olan yazılımlar, ilgili kitaplar ve dökümanlar İşlem Basamakları Ölçü ve yerleşim özelliklerini düzenleyiniz. Zıtlık ayarını yapınız. İşaretçi olaylarını düzenleyiniz. Cursor behaviors özelliğiniz kullanınız. Uygulama içindeki hareketleri düzenleyiniz. 27 Öneriler Margin değerler ile ilgili uygulama yapınız. Aşağıdaki XAML Kodlarını yazınız. <object> <object.margin> <Thickness Left="left" Top="top" Right="right" Bottom="bottom"/> </object.margin> </object> Opacity, butona efekt vermek için kullanılır. Aşağıdaki XAML Kodlarını yazınız. opacity of 0.125 (0.25 * 0.5 = 0.125). --> <Button Opacity="0.25"> <StackPanel Orientation="Horizontal"> <TextBlock VerticalAlignment="Center" Margin="10">A Button</TextBlock> <Image Source="sampleImages\berries.jpg" Width="50" Height="50" Opacity="0.5"/> </StackPanel> </Button> Aşağıdaki XAML Kodlarını yazınız. <Grid x:name= LayoutRoot Background= White > <Rectangle Width= 300 Height= 200 Fill= Red > <i:interaction.behaviours> <local:clickanddeletebehavior> </i:interaction.behaviours> </Rectangle> </Grid> Aşağıdaki XAML Kodlarını yazınız. Canvas xmlns="http://schemas.microsoft.com/2003/xaml"> <Rectangle Fill="#33CC66" Width="2in" Height="1in"
Canvas.Top="25" Canvas.Left="50" StrokeThickness="6px" Stroke="Orange" /> <Ellipse Fill="yellow" CenterX="1.5in" CenterY="1.1in" RadiusX=".5in" RadiusY="1in" StrokeThickness="4px" Stroke="Blue" /> <Text Canvas.Top="50" Canvas.Left="60" Foreground="#000000" FontWeight="Bold" FontFamily="Arial" FontStyle="Normal" FontSize="25">Hello Shapes!</Text> </Canvas> 28
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 Ölçü ve yerleşim özelliklerini düzenlediniz mi? 2 Zıtlık ayarını yaptınız mı? 3 İşaretçi olaylarını düzenlediniz mi? 4 Cursor behaviors özelliğiniz kullandınız mı? 5 Uygulama içindeki hareketleri düzenlediniz 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. 29
ÖLÇME VE DEĞERLENDİRME Aşağıdaki cümlelerde boş bırakılan yerlere doğru sözcükleri yazınız. 1. 1 inç.. px(piksel) değerindedir. 2. 1px (piksel).. cm değerindedir. 3. 1 pt (point).. inç değerindedir. Aşağıdaki soruları dikkatlice okuyunuz ve doğru seçeneği işaretleyiniz. 4. Simetrik ve mantıksal olarak verilen sırada geçerli olan kısaltılmış değerler aşağıdakilerden hangisidir? A ) Piksel B ) Margin C ) Opacity D ) Stroke 5. Nesnelerde saydamlık için kullanılan bir özellik aşağıdakilerden hangisidir? A ) Cursor Behavior B ) Margin C ) Opacity D ) Stroke 6. Kullanıcılara iyi bir geri besleme sağlamak için ve uygun olan eylem türünü belirtmek için aşağıdakilerden hangisidir? A ) Cursor Behavior B ) Margin C ) Opacity D ) Stroke Aşağıdaki cümlelerin başında boş bırakılan parantezlere, cümlelerde verilen bilgiler doğru ise D, yanlış ise Y yazınız. 7. ( ) Dış çerçeve rengine Stroke denir. 8. ( ) StrokeDashCap, dış çerçeve kalınlığını ayarlan özelliktir. 9. ( )StrokeDashArray, kesikli kenarlarda kesikli çizginin ne kadar boşlukta tekrarlanacağını belirtir. 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 öğrenme faaliyetine geçiniz. 30
ÖĞRENME FAALİYETİ 4 AMAÇ Şekil İşlemlerini Gerçekleştiriniz. ARAŞTIRMA Uygulama içinde kullanılan elips şekline ait düzenlemeleri yapmak Uygulama içinde kullanılan dörtgen şekline ait düzenlemeleri yapmak Uygulama içinde kullanılan çizgi şekline ait düzenlemeleri yapmak Uygulama içinde tanımlanan yola ait düzenlemeleri yapmak Geometrik gruplar oluşturmak ve düzenlemek 4. ŞEKİLLER WPF formlarımızda dikdörtgen, kare, elips gibi şekiller oluşturabilirsiniz. Form üzerinde çizimsel işlemler yapmak istediğimizde bu kontrollerin kullanımı önem kazanmaktadır. 4.1. Elips (Ellipse) Elips, daire çizimleri için kullanılır. Aşağıdaki XAML kodunu yazınız. <Grid> <Ellipse Width= 100 Height= 50 Stroke= Blue StrokeThichness= 5 Fill= Yellow HorizontalAlignment= Left VerticalAlignment= Top Margin= 10, 10, 0, 0 /> </Grid> XAML kodunu yazdıktan sonra formunuzda elips şeklinin oluştuğunu görebilirsiniz. 31
Resim 4.1 : Ellipse Burada elipse çizerken kullandığınız özellikler ise şunlardır: Stroke: Çerçeve Rengi StrokeThickness: Çerçeve Kalınlığı Fill: Dolgu rengi 4.2. Dikdörtgen (Rectangle) Dikdörtgen, kare çizim için kullanılır. Aşağıdaki XAML kodunu yazınız. <Grid> <Rectangle Width= 200 Height= 100 Fill= Blue Stroke= Black StrokeThickness= 3 /> </Grid> Kodun sonucunda dolgu rengi mavi olan (Fill= Blue ), çerçeve rengi siyah(stroke= Black ) ve çerçeve kalınlığı 3 olan (StrokeThickness= 3 ) bir dikdörtgen oluşacaktır. Resim 4.2 : Dikdörtgen (Rectangle) 1 32
Dikdörtgene ait köşelerin yuvarlatılması için RadiusX ve RadiusY özelliklerine değer atanması yeterli olacaktır. <Grid> <Rectangle Width= 200 Height= 100 Fill= Blue RadiusX= 20 RadiusY= 20 Stroke= Black StrokeThickness= 3 /> </Grid> 4.3. Çizgi (Line) Resim 4.3 : Dikdörtgen (Rectangle) 2 Çizgi çizmek için kullanılır. Aşağıdaki XAML kodunu yazınız. <Grid> <Line X1= 250 Y1= 40 X2= 50 Y2= 200 Stroke= Red StrokeThickness= 5 /> </Grid> XAML kodlamanın sonunda çizginin oluştuğunu görebilirsiniz. Burada yer alan X1- Y1- X2- Y2 değerleri, form üzerindeki uzaklıklara göre iki nokta belirlenir. Bu iki nokta birleşerek çizgi oluşturulur. Çizgilerin düz çizgi olması dışında farklı görünmesini StrokeDashArray özelliği ile sağlayabilirsiniz. 33
XAML kodunu düzenleyiniz. Resim 4.4 : Line 1. Örneği <Grid> <Line X1= 250 Y1= 40 X2= 50 Y2= 200 StrokeDashArray= 1, 1 Stroke= Red StrokeThickness= 5 Margin= -33, -12, 33, 12 /> < Line X1= 250 Y1= 40 X2= 50 Y2= 200 StrokeDashArray= 4, 3 Stroke= Red StrokeThickness= 5 Margin= -12, -12, 12, 12 /> Resim 4.5 : Line 2. Örneği 4.4. Yol (Path) Temel şekilleri uç uca eklenmesi veya birleştirilmesi ile oluşturulan karmaşık çizimlerdir. XAML kodunu düzenleyiniz. 4.5. Çoklu Geometrik Nesneler (GeometryGroup) Geometrik şekilleri birleştirmek ve kesişimlerini almak için kullanılır. XAML kodunu düzenleyiniz. 34
UYGULAMA FAALİYETİ Uygulamanın görsel özelliklerini ihtiyaca uygun şekilde düzenleyiniz. Kullanılan araç ve gereçler: Bilgisayar (PC veya laptop), Projeksiyon, projeksiyon perdesi, yazıcı, gerekli olan yazılımlar, ilgili kitaplar ve dökümanlar İşlem Basamakları Uygulama içinde kullanılan elips şekline ait düzenlemeleri yapınız. Uygulama içinde kullanılan dörtgen şekline ait düzenlemeleri yapınız. Uygulama içinde kullanılan çizgi şekline ait düzenlemeleri yapınız. Öneriler Elips şeklini oluşturunuz. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Grid> <Ellipse Fill= #FF63639F Margin= 132, 50, 141, 47 Stroke= Yellow StrokeThickness= 10 /> <Ellipse Fill= #FFD0D0DE HorizontalAlignment= Left Margin= 177, 107, 0, 151 Stroke= Black Widht= 42 /> <Ellipse Fill= #FFD0D0DE HorizontalAlignment= Right Margin= 0, 107, 198, 151 Stroke= Black Widht= 42 /> <Ellipse Fill= #FF080870 Height= 14 Margin= 189, 0, 198, 95 Stroke= Black VerticalAligment= Botton /> <Ellipse Fill= # FF080870 HorizontalAlignment= Left Margin= 240, 124, 0, 151 Stroke= Black Widht= 10 /> </Grid> Dikdörtgen şeklini oluşturunuz. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Grid> <Rectangle Fill= # FF080870 HorizontalAlignment= Left Margin= 26, 64, 0, 99 Stroke= Yellow Widht= 149 RadiusX= 20 RadiusY= 42 /> < Rectangle Fill= # FF707087 Margin= 200, 64, 208, 99 Stroke= Black StrokeThickness= 8 /> < Rectangle Fill= #FF080870 HorizontalAlignment= Right StrokeDashArray= 6 StrokeThickness= 5 StrokeDashCap= Flat Margin= 0, 64, 44, 99 RadiusY= 1 Stroke= Black Width= 133 /> </Grid> Dikdörtgen şeklini oluşturunuz. Xaml kodları ile yandaki resimdeki formu oluşturunuz. 35
Uygulama içinde tanımlanan yola ait düzenlemeleri yapınız. Geometrik gruplar oluşturmak ve düzenleyiniz. <Grid> <Line X1= 50 X2= 450 Y1= 150 Y2= 150 Stroke= Red StrokeDashArray= 1 StrokeDashCap= Flat StrokeThickness= 5 /> </Grid> Yol şeklini oluşturunuz. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Grid> <Path Data= M91, 108, L324.5, 40.5 290.5 z Margin= 77, 51.5, 197.5, 90.5 Stretch= Fill Stroke= Black StrokeThickness= 1 /> </Grid> GeometryGroup şeklini oluşturunuz. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Grid> <PathStroke= Black StrokeThickness= 1 Fill= #CCCCFF Margin= 123, 80, 82, 12 > <Path.Data> <GeometryGroup FillRule= EvenOdd > <EllipseGeometry RadiusX= 50 RadiusY= 50 Center= 75, 75 /> <LineGeometry StartPoint= 25, 10 EndPoint= 90,150 > <EllipseGeometry RadiusX= 100 RadiusY= 100 Center= 75, 75 /> 30 /> </Grid> <RectangleGeometry Rect= 30, 55 100 </Path> </GeometryGroup> </Path.Data> 36
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. 1 2 3 4 Değerlendirme Ölçütleri Evet Hayır Uygulama içinde kullanılan elips şekline ait düzenlemeleri yaptınız mı? Uygulama içinde kullanılan dörtgen şekline ait düzenlemeleri yaptınız mı? Uygulama içinde kullanılan çizgi şekline ait düzenlemeleri yaptınız mı? Uygulama içinde tanımlanan yola ait düzenlemeleri yaptınız mı? 5 Geometrik gruplar oluşturdunuz ve düzenlediniz 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. 37
Ö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 daire çizimleri için kullanılır? A ) Rectangle B ) Ellipse C ) Path D ) Line 2. Aşağıdakilerden hangisi Ellipse Width= 100 Height= 50 Stroke= Yellow StrokeThickness= 10 kodlarının doğru açılımıdır? A ) Elips genişliği 100, yüksekliği 50, dış çerçeve rengi sarı, dış çerçeve kalınlığı 10 B ) Daire yüksekliği 100, genişliği 50, dış çerçeve rengi sarı, dış çerçeve kalınlığı 1 C ) Elips yüksekliği 100, genişliği 50, dış çerçeve rengi mavi, dış çerçeve kalınlığı 1 D ) Daire genişliği 100, yüksekliği 50, dış çerçeve rengi mavi, dış çerçeve kalınlığı 10 3. Aşağıdakilerden hangisi Rectangle Width= 200 Height= 100 Fill= Blue Stroke= Black kodlarının doğru açılımıdır? A ) Elips genişliği 200, yüksekliği 100, iç alan rengi mavi, dış çerçeve rengi siyah B ) Kare genişliği 200, yüksekliği 100, iç alan rengi mavi, dış çerçeve rengi siyah C ) Elips genişliği 200, yüksekliği 100, iç alan rengi mavi, iç çerçeve rengi siyah D ) Kare genişliği 200, yüksekliği 100, iç alan rengi mavi, iç çerçeve rengi siyah 4. Aşağıdakilerden hangisi dikdörtgene ait köşelerin yuvarlatılması için kullanılan koddur? A ) Rectangle B ) Stroke C ) RadiusX D ) Path 5. Aşağıdakilerden hangisi çizgi çizmek için kullanılır? A ) Rectangle B ) Ellipse C ) Path D ) Line 6. Aşağıdakilerden hangisi çizgilerin düz çizgi olması dışında farklı görünmesini sağlayan özelliktir? A ) RadiusX B ) StrokeThickness C ) StrokeDashArray D ) Stroke 7. Aşağıdakilerden hangisi temel şekilleri uç uca eklenmesi veya birleştirilmesi ile oluşturulan karmaşık çizimlerdir? A ) Rectangle B ) Ellipse C ) Path D ) Line 8. Aşağıdakilerden hangisi Geometrik şekilleri birleştirmek ve kesişimlerini almak için kullanılır? A ) Rectangle B ) GeometryGroup C ) Path D ) Line 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 öğrenme faaliyetine geçiniz. 38
ÖĞRENME FAALİYETİ 5 AMAÇ Kontrolleri Kullanacaksınız. ARAŞTIRMA Tuval kontrollerini düzenleyiniz Resim kontrollerini düzenleyiniz Metin kontrollerini düzenleyiniz 5. KONTROLLER Her bir kontrol aslında birer sınıf yapısındadır. Kontroller, amaçlarına göre farklı sınıflardan türeyebilir. Kontrolleri anlatırken her kontrolün yapısına değineceğiz. Değinilecek kontoller, tuval(canvas), resim(image), kabartma(glyphs), metin bloğu(textblock) dur. 5.1. Tuval (Canvas) Canvas paneli daha çok grafiksel işlemlerde veya animasyon yapımında tercih edilir. Bunun sebebi, Canvas panelinin içerisine alacağı kontrolü noktasal olarak belirtmesidir. Canvas paneli içerisine alacağı kontrolleri herhangi bir köşeden belirtilen uzaklıktaki noktaya yerleştirir. Canvas paneli içerisine yerleştirilecek her kontrolün Left, Right, Top, Bottom isimli attached property leri vardır. Bu property ler sayesinde bileşenlerin konumu noktasal olarak belirtebiliriz. 5.2. Resim (Image) Resim göstermek için kullanılır. Resim boyutlandırmak için Strecht özelliğini kullanabiliriz. 5.3. Kabartma (Glyphs) eder. Kabartma (Glyphs), sabit metinlerin oluşturulması için kullanılan kümeleri temsil 39
Aşağıdaki XAML kodunu yazınız. <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Glyphs Fill="#FF000000" FontUri="Resources/23460227-2793-4F9D-DB34-7D3834712823.odttf" FontRenderingEmSize="18" StyleSimulations="None" OriginX="72.024" OriginY="87.624" UnicodeString="Hello, World!" Indices=",85.333;,64;,57.333;,57.333;,70.667;,30.667;,25.333;,113.33;,70.667;,68;,57.333;,7 0.667;"> </Glyphs> </Canvas> 5.4. Metin Bloğu (TextBlock) Metin Bloğu (TextBlock)Akış, içeriği görüntülemek için küçük derecede bir kontrol sağlar. 40
UYGULAMA FAALİYETİ Uygulamanın görsel özelliklerini ihtiyaca uygun şekilde düzenleyiniz. Kullanılan araç ve gereçler: Bilgisayar (PCveya laptop), Projeksiyon, projeksiyon perdesi, yazıcı, gerekli olan yazılımlar, ilgili kitaplar ve dökümanlar İşlem Basamakları Tuval kontrollerini düzenleyiniz. Resim kontrollerini düzenleyiniz. Metin kontrollerini düzenleyiniz Öneriler Tuval (Canvas) kontrolünü uygulayınız. Aşağıdaki XAML kodunu yazınız. <Canvas Background= AntiqueWhite > <Rectangle Canvas.Left= 35 Canvas.Top= 80 Height= 200 Width= 200 Stroke= Yellow StrokeThickness= 5 Fill= Red /> <Rectangle Canvas.Left= 160 Canvas.Top= 62 Height= 200 Width= 200 Stroke= Yellow StrokeThickness= 5 Fill= Blue /> <Rectangle Canvas.Left= 272 Canvas.Top= 36 Height= 200 Width= 200 Stroke= Yellow StrokeThickness= 5 Fill= Green /> </Canvas> Resim kontrolünü uygulayınız. Aşağıdaki XAML kodunu yazdıktan sonra resmin geldiğini görebilirsiniz. <Grid> <Image Width= Auto Height= Auto HorizontalAligment= Stretch VerticalAligment= Stretch Source= ResimTaban.jpg Stretch= UniformToFill /> </Grid> Metin Bloğunu(TextBlock) kontrolünü uygulayınız. Aşağıdaki XAML kodunu yazınız. <TextBlock Name="textBlock1" TextWrapping="Wrap"> <Bold>TextBlock</Bold> is designed to be <Italic>lightweight</Italic>, and is geared specifically at integrating <Italic>small</Italic> portions of flow content into a UI. </TextBlock> <Button Width="100" Margin="10">Click Me</Button> <TextBlock Name="textBlock2" TextWrapping="Wrap" Background="AntiqueWhite" TextAlignment="Center"> </TextBlock> <Button Width="100" Margin="10">Click Me</Button> 41
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 Tuval kontrollerini düzenlediniz mi? 2 Resim kontrollerini düzenlediniz mi? 3 Metin kontrollerini düzenlediniz 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. 42
Ö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 içerisine alacağı kontrolleri herhangi bir köşeden belirtilen uzaklıktaki noktaya yerleştiren panele verilen addır? A ) Resim (Image) B ) Tuval (Canvas) C ) Metin Bloğu(TextBlock) D ) Kabartma (Glyphs) 2. Aşağıdakilerden hangisi sabit metinlerin oluşturulması için kullanılan kümeleri temsil eden kontrole verilen addır? A ) Resim (Image) B ) Tuval (Canvas) C ) Metin Bloğu(TextBlock) D ) Kabartma (Glyphs) 3. Aşağıdakilerden hangisi, içeriği görüntülemek için küçük derecede bir kontrol sağlar? A ) Resim (Image) B ) Tuval (Canvas) C ) Metin Bloğu(TextBlock) D ) Kabartma (Glyphs) Aşağıdaki cümlelerde boş bırakılan yerlere doğru sözcükleri yazınız. 4. Resim boyutlandırmak için.. özelliğini kullanabiliriz. 5.. paneli daha çok grafiksel işlemlerde veya animasyon yapımında tercih edilir. 6. Bu. sayesinde bileşenlerin konumu noktasal olarak belirtebiliriz. 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 öğrenme faaliyetine geçiniz. 43
ÖĞRENME FAALİYETİ 6 AMAÇ Dönüşüm ve animasyon işlemlerini yapacaksınız. ARAŞTIRMA Uygulama içinde kullanılan nesneler üzerinde gerçekleştiriniz. Döndürme işlemini gerçekleştiriniz. Ölçülendirme işlemini gerçekleştiriniz. Dönüştürme işlemini gerçekleştiriniz. Çarpıtma işlemini gerçekleştiriniz. Matris dönüşümlerini gerçekleştiriniz. Tetikleyicilerle çalışınız Olayları düzenleyiniz Geçmiş ekranını kullanınız Animasyon parametrelerini düzenleyiniz Anahtar çerçevelerle ilgili ihtiyaç duyulan düzenlemeleri gerçekleştiriniz. 6. DÖNÜŞÜM VE ANİMASYON Form uygulamalarında görsel olarak hissedilen eksikliklerden biri de kontrollerin açısal olarak kontrol edilememesidir. Bu sebep ile vektörel oluşumlar veya animasyon oluşturmada çok büyük eksiklikler vardı. Silverlight ta bulunan tüm kontrolleri veya elementleri kolaylıkla transformasyon işlemlerine aktarabiliriz. Temel olarak beş adet transformasyon işlemi vardır. Döndürme (Rotatetransform) Ölçeklendirme (Scaletransform) Dönüşüm (Translatetransform) Çarpıtma (Skewtransform) Matris (Matrixtransform) 6.1. Döndürme(RotateTransform) Silverlight ta bulunan element ve kontrollerin panel içerisindeki bulunuş açılarını değiştirerek rotasyona uğratma işlemlerini, bu transformasyon yöntemi ile gerçekleştirebilirsiniz. 44
Rotate Transform un Angle property si, sol üst köşe referans alınarak dönme hareketi gerçekleştirilir. Aşağıdaki XAML kodunu yazınız. <Grid> <ListBox Height= 100 HorizontalAligment= Left Margin= 213, 65, 0, 0 Name= ListBox1 VerticalAligment= Top Width= 120 > <ListBoxItem Content= Galatasaray /> <ListBoxItem Content= Fenerbahçe /> <ListBoxItem Content= Beşiktaş /> <ListBox.RenderTransform> <RotateTransform Angle= 90 ></ RotateTransform> </ListBox.RenderTransform> </ListBox> </Grid> Resim 6.1 : Rotate Transform 6.2. Ölçeklendirme (ScaleTransform) Silverlight ta bulunan element ve kontrollerin boyutlarını yatay ve dikey eksende değiştirerek rotasyona uğratma işlemlerini bu transformasyon yöntemi ile gerçekleştirebilirsiniz. ScaleX ve ScaleY property leri sayesinde yatay ve dikey eksendeki büyüklüklerini belirtebilirsiniz. Aşağıdaki XAML kodunu yazınız. <Grid> <Button Content= Button Height= 23 HorizontalAligment= Left Margin= 79, 160, 0, 0 Name= button1 VerticalAligment= Top Width= 75 > <Button.RenderTransform> <ScaleTransform ScaleX= 3 ScaleY= 2 > </ScaleTransform> </Button.RenderTransform> </Button> 45
<Button Content= Button Height= 23 HorizontalAlignment= Left Margin= 91, 110, 0, 0 Name= button2 VerticalAligment= Top Width= 75 /> </Grid> Resim 6.2 : Scale Transform 6.3. Dönüşüm (TranslateTransform) Silverlight ta bulunan element ve kontrollerin boyutlarını yatay ve dikey eksenlerinde istenilen birim kadar öteleyerek rotasyona uğratma işlemlerini bu transformasyon yöntemi ile gerçekleştirebilirsiniz. X ve Y property leri ile öteleme işlemini gerçekleştirebilirsiniz. Aşağıdaki XAML kodunu yazınız. <Grid> <Ellipse Height= 100 HorizontalAlignment= Left Margin= 114, 90, 0, 0 Name= ellipse1 Stroke= Black VerticalAligment= Top Width= 200 Fill= #FF935E5E > <Ellipse.RenderTransform> <TranslateTransform X= 25 Y= 5 > </TranslateTransform> </ Ellipse.RenderTransform> </ Ellipse > </Grid> 46
6.4. Çarpıtma (SkewTransform) Resim 6.3 : Translate Transform Silverlight ta bulunan element ve kontrolleri X ve Y eksenlerinde bükerek rotasyona uğratma işlemlerini bu transformasyon yöntemi ile gerçekleştirebilirsiniz. AngleX ve AngleY property leri ile nesneyi X ve Y eksenlerinde tanımlanan açı ile eğebilirsiniz. Aşağıdaki XAML kodunu yazınız. <Grid> <Image Height= 121 HorizontalAlignment= Left Margin= 85,39, 0, 0 Name= image1 Stretch= Fill VerticalAligment= Top Width= 300 Source= /SilverlightApplication3;component/images/P5270086.jpg > <Image.RenderTransform> <SkewTransform AngleX= 25 AngleY= 5 /> </ Image.RenderTransform> </ Image > </Grid> Resim 6.4 : Skew Transform 47
6.5. Matris (MatrixTransform) Silverlight ta bulunan element ve kontrollere 3x3 matris algoritmaları uygulayabilmek için kullanılan transformasyon yöntemidir. Daha çok resim işleme yöntemlerinde kullanılmaktadır. M11:Matrisin (1,1) elemanıdır. M12: Matrisin (1,2) elemanıdır. M21: Matrisin (2,1) elemanıdır. M22: Matrisin (2, ) elemanıdır. OffsetX: Matrisin (3,1) elemanıdır. OffsetY: Matrisin (3,2) elemanıdır. Aşağıdaki XAML kodunu yazınız. <Grid> <Button Content= Button Height= 23 HorizontalAlignment= Left Margin= 37,20, 0, 0 Name= button1 VerticalAligment= Top Width= 75 > <Button.RenderTransform> <MatrixTransform> <MatrixTransform.Matrix> <Matrix OffsetX= 0.2 OffsetY= 1 M11= 4.2 M12= 2.5 M21= 1 M22= 2 /> </ MatrixTransform.Matrix > </MatrixTransform> </Button.RenderTransform> </Button > </Grid> Resim 6.5 : Matrix Transform 48
6.6. Tetikleyiciler (Trigger ve Event Triggerlar) TriggerBase sınıfında türeyen trigger ları daha detaylı bir şekilde diğer bölümlerde inceleyeceksiniz. XAML ile oluşturulan animasyonların ne zaman başlayacağını ya da ne zaman biteceğini trigger lar aracılığıyla belirlenir. Bu işlemler, EventTrigger a bağlı olarak tanımlanan olaylar sayesinde gerçekleştirilir. EventTrigger sınıfının RoutedEvent property si ile animasyonun hangi event ile tetikleyeceği belirtilmektedir. SourceName property si ise hangi nesnenin event ini tetikleyeceğinizi belirler. Aşağıdaki XAML kodunu yazınız. <Grid> <Ellipse Height= 150 HorizontalAlignment= Left Name= ellipse1 Stroke= Black VerticalAligment= Top Width= 200 > < Ellipse.Triggers > <EventTrigger RoutedEvent= Ellipse.MouseEnter > <!Animasyon işlemleri> < EventTrigger > < EventTrigger RoutedEvent= Ellipse.MouseLeave > <!Animasyon işlemleri> </ EventTrigger > </ Ellipse.Triggers > </ Ellipse > </Grid> 6.7. Geçmiş (BeginStoryboard ve Storyboard) Silverlight ta tüm animasyon işlemlerinin gerçekleştiği sınıftır. Storyboary sınıfı TimeLine sınıfından türemiştir. Storyboard sınıfının alt üyeleri sayesinde kontrolün hangi özelliğinin ne derecede değişeceği belirlenir. XAML ile oluşturulan Storyboard elementinin TargetName ve TargetProperty isimli iki attached property si vardır. TargetName, animasyona dahil edilecek nesnenin ismidir. TargetProperty ise nesnenin dependency-property sinin ismidir. Codebehind tarafında progmatik olarak Set-TargetName ve SetTargetProperty metotları ile belirlenir. BeginStoryboard event gerçekleştiği zaman Storyboard u başlatır. Storyboard sınıfının metotları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. 49
SkipToFill(): Animasyonun sonuna atlama yapmayı sağlar. Animasyonu sonlandırır. 6.8. Animasyon parametreleri Animasyon türleri aşağıda verilmektedir. Double Animation: Temel animasyon türlerinden biri olan DoubleAnimation sınıfı, nesneleri başlangıç ve bitiş değerleri arasında özelliğini değiştirmektedir. Bu değerler Double tipinde ve DependencyProperty si ile başlangıç değeri ve To property si ile bitiş değeri belirlenir. o By property si Form ve To property lerinin değerleri arasındaki artış miktarını belirler. Yani yüksekliği 20 ile 260 arasında olan bir dairenin yüksekliğini belirli aralıklarla 20 birim artırır. o RepeatBehavior property si; 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. o AutoReserve property sine true atanarak, animasyon bittikten sonra animasyonun tersten ilk değerine dönmesi için kullanılır. o Duration property si animasyonun süresini belirlememizi sağlar. Saat, dakika, saniye şeklinde süre verilmesi gerekir. Kısaca Time Line nı belirler. o SpeedRatio property si animasyonun hızını belirler. Herhangi bir değer belirtilmez ise, 1 değerini alır. 10 saniyelik bir animasyonda SpeedRatio property si 5 atanmışsa animasyon 2 saniye sürecektir. ColorAnimation: ColorAnimation sınıfı; IU Element lerin arkaplan renginin farklı bir renge geçişini animasyon olarak sağlamaktadır. ColorAnimation sınıfında From property si ile başlangıç rengi, To property si ile bitiş rengi belirlenir. AutoReserve property sine true atanarak, animasyon bittikten sonra, animasyonun son renkten ilk renge dönmesi sağlanacaktır. PointAnimation: Silverlight ta içerisinde bulunan element ve kontrollerin konumun point türünde animasyon ile değişmesini gerçekleştiren animasyon türüdür. 6.9. Anahtar Çerçeveler (Key Frame) Basit animasyon türlerinde yapılan her from, to ve by üzerinde gerçekleştirilir. Bu animasyonlarda sadece toplam animasyon süresi belirtilebilir, ama süreye müdahale yapılamamaktadır. Key Frame animasyonlar, bir zaman çizgisi üzerinde gerçekleşir. Bu zaman çizgisi üzerinde animasyonun her saniyesine ulaşabilir ve kullanılan nesne üzerinde değişiklik yapılabilir. İşte bir animasyonun süreleri arasında nesneler ile yapılan değişiklikleri Key Frame ler temsil eder. Kısaca Key Frame, animasyondaki kilit karelerdir. Zaman çizgili üzerinde istenilen saniyedeki nesnenin durumunu değiştirmek için o noktaya Key Frame ler arasında kalan parçaları Silverlight doldurur. 50