• Anasayfa
  • Hakkımızda
  • Etkinlikler
  • Destek Verin
  • Site Haritası
  • Giriş Yap
  • Üye Ol
  • Facebook
  • Twitter
  • RSS
Yazılım Dilleri
  • Soru - Cevap
  • EĞİTİM SETİ
  • KATEGORİ
  • DUYURU
  • TEKNOLOJİ HABERLERİ

Son Sorular

  • 23.04.2016 00:55:33C programlama 2 oyun
  • 20.04.2016 16:34:41Local Database
  • 15.04.2016 14:26:15Fatura kayıt işlemi
  • 21.03.2016 01:55:30C# problem

Popüler Sorular

  • 27.05.2012 05:49:50Asp.Net ile Date time alana veri ekleyemiiyorum ?
  • 2.04.2012 00:45:18.exe uzantılı dosya için dijital imza nerde nasıl alınır.
  • 12.05.2012 08:44:49Acil Yardım
  • 27.05.2012 13:46:51veri tabanı bağlantısı
  • .Net Framework
  • 8085 Assembly
  • Active Directory
  • ADO.NET
  • Android
  • Apple IOS
  • Arduino
  • ASP.NET
  • ASP.NET MVC
  • Blackberry
  • C#.Net
  • C++
  • CCG Framework
  • CISCO
  • CSS
  • Diğer
  • Dreamweaver
  • Entity Framework
  • Exchange Server
  • Gömülü Sistemler
  • GSM Programlama
  • Güncel
  • Güvenlik
  • HTML5
  • Java
  • Javascript / JQuery
  • Jira
  • Kariyer ve İş Yaşamı
  • LINQ
  • LibreOffice
  • Linux
  • Matlab
  • Microsoft Dynamics CRM
  • Mobil Uygulama Geliştirme
  • MySQL
  • NoSQL
  • Oracle
  • OWIN
  • PFSense
  • PHP
  • Powershell
  • Python
  • Sanallastirma
  • SAP-ABAP
  • SCOM 2012
  • SEO
  • Sharepoint 2010
  • Sharepoint 2013
  • Silverlight
  • Sistem Analiz ve Tasarımı
  • SQL Server
  • Symantec
  • TFS
  • T-SQL
  • Ubuntu
  • VB.NET
  • Veritabanı Yönetim Sistemleri
  • Visual Studio
  • VMware
  • WCF
  • Web Hosting
  • Windows 8
  • Windows Azure
  • Windows Phone 7.1
  • Windows Phone 8
  • Windows Server
  • Wordpress
  • WPF
  • Xamarin
  • XNA
  • Yazılım Mühendisliği
  • Yöneylem Araştırması
  • ASP.NET MVC
  • Entity Framework
  • Javascript / JQuery
  • LINQ
  • PHP

Son Duyurular

IPhone 6 ve IPhone 6 Plus Teknik Özellikleri ve Fiyatı

IPhone 6 ve IPhone 6 Plus Teknik Özellikleri ve Fiyatı

DELL'in Yeni Projesi: USB Bilgisayar (Project Ophelia)

DELL'in Yeni Projesi: USB Bilgisayar (Project Ophelia)

Windows Phone Youtube Uygulaması Google ve Microsoft ile Yeniden Yapılıyor

Windows Phone Youtube Uygulaması Google ve Microsoft ile Yeniden Yapılıyor

Android ve Apple IOS Telefonlar için Blackberry Messenger (BBM)

Android ve Apple IOS Telefonlar için Blackberry Messenger (BBM)

Nokia Lumia 925 Teknik Özellikleri, Lumia 928 ve 920 ile Karşılaştırması

Nokia Lumia 925 Teknik Özellikleri, Lumia 928 ve 920 ile Karşılaştırması

LG Optimus G Pro Özellikleri ve Gözle Video Oynatma Teknolojisi

LG Optimus G Pro Özellikleri ve Gözle Video Oynatma Teknolojisi

Silverlight ve Fırça (Brush) Yapıları

Silverlight ve Fırça (Brush) Yapıları

09.03.2010

Yazar: Daron Yöndem (Google+)

Kategori: Silverlight

4945

İster Silverlight uygulamaları olsun ister WPF uygulamaları, her şekilde XAML kodları içerisindeki Brush (fırça) tanımlamaları görsel anlamda çok önemlidir. Herhangi bir nesnenin içerisini boyamaktan tutan resim ile doldurmaya kadar çoğu noktada Brush yapıları kullanılır.

Bu makalemizde Silverlight içerisinde kullanabileceğimiz Brush yapılarını ufak örneklerle inceleyeceğiz. Makale boyunca bahsi geçen tüm işlemleri bir "yazılımcı" perspektifi ile değerlendireceğim, o nedenle XAML kodlarını yazmak için Visual Studio kullanacağız. Tasarımcı arkadaşların Expression Blend dünyasında daha farklı araçları ve olanakları olacaktır.

SolidColorBrush

Herhangi bir nesnenin için tek bir renk ile doldurmak istiyorsanız veya herhangi bir alana tek bir renk atamak istiyorsanız yapmanız gereken bir SolidColorBrush kullanmaktır.

<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Canvas Width="120" Height="44">

    <Ellipse Width="500" Height="500">

      <Ellipse.Fill>

        <SolidColorBrush Color="Black"></SolidColorBrush>

      </Ellipse.Fill>

    </Ellipse>

  </Canvas>

</Canvas>

Örneğimizde bir Silverlight animasyonu içerisinde yer alan Ellipse nesnenin içerisini tek bir renk ile doldurmak için uygun bir SolidColorBrush kullanıyoruz. Söz konusu Brush'ın rengini ayarlamak için Color özelliğinden faydalanmamız gerekiyor. Herhangi bir SolidColorBrush'ın Color özelliğine doğrudan bir renk adı verebileceğiniz gibi toplam 8 karakterden oluşan Hexadecimal bir değer de aktarabilirsiniz. #AARRGGBB şeklinde formatlı olan renk değerinin AA kısımlarına Alpha (şeffaflık), RR (Red / Kırmızı), GG (Green / Yeşil), BB (Blue / Mavi) renk değerleri aktarılır.

LinearGradientBrush

Gradient yapısını az çok çoğu programdan biliyoruz, belirli bir renkten başka bir renge doğru geçişlerin yapıldığı boyama şekline Gradient deniyor. Bu şekilde bir boyamayı Silverlight içerisinde yapabilmemiz için GradientBrush yapılarından birini kullanmanız gerekir. Bu çerçevede LinearGradientBrush doğrusal olarak renkler arası geçişlerin yapıldığı bir boyama işlemine olanak tanır.

<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Canvas Width="120" Height="44">

    <Ellipse Width="200" Height="200">

      <Ellipse.Fill>

        <LinearGradientBrush>

          <GradientStop Color="Yellow" Offset="0"/>

          <GradientStop Color="Black" Offset="0.7"/>

          <GradientStop Color="Yellow" Offset="1"/>

        </LinearGradientBrush>

      </Ellipse.Fill>

    </Ellipse>

  </Canvas>

</Canvas>

LinearGradientBrush yapıları içerisinde birbirinden bağımsız GradientStop'lar kullanılır. Her bir GradientStop renk geçişinin tamamlanacağı noktayı ve o noktadaki rengi belirler. Bizim örneğimizde sarıdan siyaha ve sonrasında tekrar siyahtan sarıya doğru bir geçiş olacak. Bu doğrusal geçiş boyunca geçişlerin tam olarak hangi noktalarda yapılacağına da her bir GradientStop'ın Offset değeri karar verir. 0 ile 1 arasında tüm geçiş doğrusu üzerinde belirlenen konuma göre GradientStop'lar yerleştirilir. Yukarıdaki kodun oluşturduğu görseli aşağıda inceleyebilirsiniz.

LinearGradientBrush çizimi
LinearGradientBrush çizimi.

Yukarıdaki resimde de gördüğünüz gibi LinearGradientBrush yapısı sol üst köşeden başlayarak sağ alt köşeye doğru ilerler. Bu doğrunun yönünü değiştirmek için LinearGradientBrush'ların StartPoint ve EndPoint özelliklerinden faydalanabiliriz. Bu özelliklerin her ikisi de LinearGradientBrush doğrusunun başlangıç ve son noktalarının X ve Y koordinatlarını içerir. Söz konusu koordinatlar 1 ile 0 arasında verilerek nesnenin en üst sol noktası 0,0 (origin) olarak kabul edilir. Gerektiğinde bu değerler eksi veya artı olarak 0'dan küçük veya 1'den büyük de olabilir. Bu gibi durumlarda Gradient doğrusunun nesne sınırlarının dışarısında başlayacağı veya biteceği öngörülür.

<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Canvas Width="120" Height="44">

    <Ellipse Width="200" Height="200">

      <Ellipse.Fill>

        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

          <GradientStop Color="Yellow" Offset="0"/>

          <GradientStop Color="Black" Offset="0.7"/>

          <GradientStop Color="Yellow" Offset="1"/>

        </LinearGradientBrush>

      </Ellipse.Fill>

    </Ellipse>

  </Canvas>

</Canvas>

Yukarıdaki kod içerisinde tanımlanan LinearGradientBrush'ın başlangıç noktası 0,0 ve sonlanma noktası da 0,1 olarak verilmiş. Başlangıç ve bitiş noktalarının sadece Y koordinatları değiştirilmiş ve bitiş noktası nesnenin sol altına denk getirilmiş. Aldığımız görsel sonuç aşağıdaki gibi olacaktır.

LinearGradientBrush yönündeki değişiklik.
LinearGradientBrush yönündeki değişiklik.

RadialGradientBrush

LinearGradientBrush'ların tüm özelliklerine sahip olan RadialGradientBrush'ların tek farkı doğrusal bir renk değişimi sağlamak yerine dairesel bir renk değişimi sağlamalarıdır.

<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Canvas Width="120" Height="44">

    <Ellipse Width="200" Height="200">

      <Ellipse.Fill>

        <RadialGradientBrush>

          <GradientStop Color="Yellow" Offset="0"/>

          <GradientStop Color="Black" Offset="1"/>

        </RadialGradientBrush>

      </Ellipse.Fill>

    </Ellipse>

  </Canvas>

</Canvas>

Yukarıda gördüğünüz yapıda LinearGradientBrush'lara kıyasla tek fark Brush'ımız kendi adı. Aldığımız görsel sonuç ise aşağıdaki şekilde.

RadialGradientBrush çizimi.
RadialGradientBrush çizimi.

RadialGradientBrush'ların merkez noktasını değiştirerek farklı görsel efektler oluşturmak mümkün. Bunun için GradientOrigin denen özellikten faydalanacağız ve söz konusu özelliğe merkez noktası için X ve Y koordinatları aktaracağız. Bu koordinatların da 1 ile 0 arasında olması gerekiyor, aksi halde merkez nokta nesnenin dışına çıkacaktır.

<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Canvas Width="120" Height="44">

    <Ellipse Width="200" Height="200">

      <Ellipse.Fill>

        <RadialGradientBrush GradientOrigin="0,0">

          <GradientStop Color="Yellow" Offset="0"/>

          <GradientStop Color="Black" Offset="1"/>

        </RadialGradientBrush>

      </Ellipse.Fill>

    </Ellipse>

  </Canvas>

</Canvas>

Aldığımız görsel sonuç gerçekten etkileyici. Özellikle bir Ellipse kullanmış olmamız RadialGradientBrush'ın ışık etkisi yaratmasına neden oldu.

Origin'i değiştirilmiş RadialGradientBrush.
Origin'i değiştirilmiş RadialGradientBrush.

ImageBrush

Nesnelerin içlerini resimlerle doldurmak için kullanacağınız fırça (Brush) yapısının adı ImageBrush olarak geçiyor.

<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Canvas Width="120" Height="44">

    <Ellipse Width="200" Height="200">

      <Ellipse.Fill>

        <ImageBrush ImageSource="kaplumbaga.jpg"></ImageBrush>

      </Ellipse.Fill>

    </Ellipse>

  </Canvas>

</Canvas>

Kodumuzda da gördüğünüz üzere Ellipse'imizin Fill özelliğine bir ImageBrush aktarıyoruz. Söz konusu ImageBrush resim kaynağını ImageSource özelliği ile alıyor. Böylece elde ettiğimiz görüntü aşağıdaki şekilde oluyor.

ImageBrush ile gelen kaplumbağamız :)
ImageBrush ile gelen kaplumbağamız :)

ImageBrush'a özel olarak bahsedebileceğimiz bir durum kaynak resmin hedef alana yerleştirilirken en-boy oranına göre ne tarz bir konumlandırma yapılacağıdır. Bu konuyla ilgili ImageBrush'ın Stretch özelliğinden faydalanıyoruz.

  • Fill : Resmin en-boy oranı korunmadan hedef alan doldurulur.
  • Uniform : Resmin en boy oranı korunarak olabilen en büyük boyutta yerleştirilir.
  • UniformToFill: Resmin en-boy oranı korunarak hedef alan tamamen doldurulur. Bu işlemin gerçekleşebilmesi için resmin fazla gelen kısımları dışarıda bırakılır.

VideoBrush

Belki de en ilginç fırçalardan biridir VideoBrush. ImageBrush gibi çalışan VideoBrush kaynak olarak bir resim dosyası almak yerine video alır. Böylece nesnelerin için hareketli bir görüntü ile doldurulabilir.

<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Canvas Width="120" Height="44">

    <MediaElement Name="AyiVideo" Source="ayi.wmv" Opacity="0" IsMuted="True"></MediaElement>

    <Ellipse Width="200" Height="200">

      <Ellipse.Fill>

        <VideoBrush SourceName="AyiVideo"></VideoBrush>

      </Ellipse.Fill>

    </Ellipse>

  </Canvas>

</Canvas>

Yukarıdaki kodumuz içerisinde Ellipse'in Fill değerine bir VideoBrush aktarıyoruz. Bu VideoBrush'a video kaynağı olarak AyiVideo adında bir MediaElement bağlamışız. VideoBrush'lar doğrudan video dosyalarını açamaz, arada aracı bir MediaElement gerekir. Bu nedenle sahneye yerleştirdiğimiz MediaElement'imizin şeffaflığını Opacity değerini 0 yaparak arttırıyoruz. Böylece sahnede MediaElement gözükmeyecek. Ayrıca video ile beraber gelen sesin de duyulmaması için yine MediaElement'e ait IsMuted özelliği True yapıyoruz. Sonuçta aşağıdaki görüntüyü elde ediyoruz.

VideoBrush ile aldığımız ayıcık Ellipse içerisinde.
VideoBrush ile aldığımız ayıcık Ellipse içerisinde.

Silverlight 1.0 içerisindeki Brush'larımız hepsi bu kadar. Hepinize kolay gelsin.

Yazar Hakkında

Daron Yöndem

Daron Yöndem

daron.yondem.com

DEVELOAD Yazılım şirketi kurucusu Daron Yöndem ASP.NET alanında aldığı MVP ünvanını son üç yıldır Silverlight alanında devam ettirmektedir. Microsoft Regional Director ünvanına da sahip olan Daron Yöndem’e 2009, 2010 ve 2011 yıllarında Microsoft tarafından “Gold Global Impact Award” ödülü verilmiştir. Microsoft TechEd, PDC, DevReach, Microsoft DevDays gibi uluslararası konferanslarda konuşmacı olan Daron Yöndem INETA (International .NET Association) Orta-Doğu Afrika Bölge Başkanlığı görevini sürdürürerek 262.000’i aşkın üyesi olan 58 sosyal topluluğa destek vermektedir. Üç Türkçe, üç İngilizce kitabı olan Daron Yöndem’in Wrox Publishing gibi uluslararası yayınevlerinden kitapları bulunmaktadır.

Sosyal Medya

ORANLAR

  • 4945izleme

Arkadaşlarınla Paylaş

  • Tweet

0 Yorum

Yorum Yaz / Soru Sor

Lütfen yorum yazmak veya soru sormak için üye girişi yapınız.

Son Yorumlar

  • Hocam Link başka sayfaya yönlendiriyor.
  • merhaba benim merak ettiğim bir konu var y...
  • Merhaba download linki çalışmıyor. Rica et...
  • Nevzat Bey selamlar, Açıkçası bizler a...
  • Parametreleri Cache İşleminden Yalıtma kon...

En Güncel Sorular

  • Bilgilendirme maili (C#.Net)
  • Power Pivot (Sharepoint 2010)
  • BigInteger, BigDecimal (Asp.Net ve Asp.Net MVC)
  • visual C# ile asp nette veritabanı islemleri (Asp.Net ve Asp.Net MVC)
  • Share Point ile Dosya Arşiv Yönetim Sistemi yapılabilir mi ? (Sharepoint 2010)

En Son Cevap Verilen Sorular

  • Bilgilendirme maili
  • BigInteger, BigDecimal
  • visual C# ile asp nette veritabanı islemleri
  • Share Point ile Dosya Arşiv Yönetim Sistemi yapılabilir mi ?
  • txt dosyasına veri yazma

Twitter

Takip et: @yazilim_dilleri

En Çok Okunanlar

Elif BAYRAKDAR

C# ile SQL Server Bağlantısı, Insert, Update ve Delete Sorguları

23.05.2013

  • 120000
  • 0
Hakan Keskin

C# ile Windows Service Projesi Oluşturma, Debug Etme ve Setup Hazırlama

17.12.2013

  • 65045
  • 0
batuhan avlayan

Php - Mail Gönderme (İletişim Formu)

02.09.2013

  • 48253
  • 0

Sponsorlar

KODLAB
Pluralsight
Exchange server is
Office 365
YAZILIM DİLLERİ
Yukarı Çık
  • Hakkımızda
  • Facebook
  • Twitter
  • RSS

© Yazılım Dillerinin Buluşma Noktası | Kaynak belirtildiği sürece makaleler kopyalanabilir.
YazilimDilleri.Net sitesinde yer alan kullanıcıların oluşturduğu tüm içeriklerin yayınlanması ile ilgili yasal yükümlülükler içeriği oluşturan kullanıcıya aittir, YazilimDilleri.Net hiçbir şekilde sorumlu değildir.

Kapat

Giriş Yap

Kullanıcı Adı

Şifre

Şifremi Unuttum

KULLANICI GİRİŞİ