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

0 dakikada yazıldı

8071 defa okundu

Düzenle

İ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.

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.