Silverlight 2.0 içerisinde Toolkit'den ViewBox kullanımı.

0 dakikada yazıldı

6080 defa okundu

Düzenle

WPF'den Silverlight dünyasına geçince eksiğini hissettiğimiz
kontrollerin Silverlight Toolkit projesi ile sağlanmaya çalışıldığına
dair daha önceki yazılarımda ufak ipuçları vermiştim. Bu sefer de yine
Toolkit içerisinde ViewBox kontrolünü inceleyeceğiz. ViewBox hali
hazırda WPF içerisinde bulunan bir Layout kontrolü. Silverlight
tarafında ise herhangi bir muadilinin olmaması bazı durumlarda ciddi
sıkıntı yaratabiliyor.

Peki nedir ViewBox?

İster WPF ister Silverlight tarafında olun sahnenin planını Layout
kontrolleri dediğimiz kontroller ile düzenlemek durumundasınız. Bu
kontrollerin her birinin birbirinden farklı özellikleri var. Tüm bu
özellikleri göz önünde aldığımızda ViewBox'ın eşsiz olduğu nokta
içerisindeki tüm nesneleri vektörel olarak görsel anlamda tekrar
boyutlandırabiliyor olması. Birkaç görsel örnek ile konuyu
netleştirelim.

Not: Silverlight Toolkit'i kullanabilmeniz için
CodePlex üzerindeki adresten
kütüphaneyi indirerek içerisindeki
Microsoft.Windows.Controls.dll
dosyasını projenize referans olarak eklemelisiniz.

Grid içerisinde 5 farklı Ellipse'in değişen durumları.
Grid içerisinde 5 farklı Ellipse'in değişen durumları.

Yukarıdaki gibi bir Grid içerisinde bulunan nesneler Grid'in
kenarlarından olan uzaklarına ve farklı hizalama bilgilerine göre
konumlandırılırlar. Bu nedenle Grid'in boyutu değiştiğinde nesnelerin
kenarlara olan uzaklıklarını sabit tutabilmek adına nesneler garip
şekillerde boyutlandırılır. Oysa biz bu Grid'in boyutlandırırken
içindeki görselliği doğrudan aynı şekilde büyütmesini istiyorduk hem de
vektörel olarak. Maalesef Silverlight 2.0 ile beraber hali hazırda gelen
ve bu işlevselliği sağlayacak hiçbir Layout kontrolü yok! Tabi bu durum
"Böyle bir Layout kontrolü yazılamaz" anlamına gelmiyor :) Nitekim
yazmışlar ve Silverlight Toolkit içerisinden de biz ViewBox
kontrolünü alıp kullanabileceğiz.

ViewBox kontrolümüzü kullanalım.

Silverlight Toolkit'i projenize referans olarak aldıktan sonra
Expression Blend içerisinde doğrudan "Asset Library"'de "Custom
Controls" tabında "ViewBox" kontrolünü bulabilirsiniz. Bir önceki
bölümdeki görsel örneğimizde kullandığımız Grid'i gelin bir ViewBox
içerisine yerleştirelim.

[XAML]

<UserControl
x
:Class="SilverlightApplication1.Page"

  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  Width="400"
Height
="300" xmlns:controls="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls">

    <Grid
x
:Name="LayoutRoot"
Background
="White">

        <controls:Viewbox
Margin
="24,24,176,108">

          <Grid
Height
="Auto" Width="Auto">

            <Ellipse
Margin
="8,8,8,8" Fill="#FFFF0000"
Stroke
="#FF000000"/>

            <Ellipse
Height
="16" HorizontalAlignment="Left"
Margin
="56,40,0,0" VerticalAlignment="Top"
Width
="32" Fill="#FFFFFFFF"
Stroke
="#FF000000"/>

            <Ellipse
Height
="16" HorizontalAlignment="Right"
Margin
="0,40,48,0" VerticalAlignment="Top"
Width
="32" Fill="#FFFFFFFF"
Stroke
="#FF000000"/>

            <Ellipse
Margin
="88,80,88,80" Fill="#FFFFFFFF"
Stroke
="#FF000000" Width="20"
Height
="20"/>

            <Ellipse
Height
="40" Margin="56,0,48,24"
VerticalAlignment
="Bottom" Fill="#FFFFFFFF"
Stroke
="#FF000000"/>

          </Grid>

        </controls:Viewbox>

    </Grid>

</UserControl>

Yukarıdaki kod içerisinde de görebildiğiniz üzere elimizdeki Grid'i
doğrudan alıp bir ViewBox içerisinde yerleştirdik. Böylece artık
ViewBox'ı tekrar boyutlandırdığımızda içerisinde tüm görseller vektörel
olarak bir bütün şeklinde kabul edilecek ve o şekilde tekrar
boyutlandırılacak.

ViewBox güzelliği.
ViewBox güzelliği.

Gördüğünüz gibi görselde hiçbir değişiklik yok. Elimizdeki çizim
vektörel olduğu için büyüdüğünde de herhangi bir görsel bozulma olmuyor.
Tabi ViewBox'ı her durumda kullanmak da doğru olmayacaktır. Örneğin
Silverlight ekranınızda bir Button varsa (veya herhangi bir kontrol) ve
bu kontrolün dinamik olarak boyutlandırılmasını istiyorsanız ViewBox
yerine Grid'i tercih etmelisiniz. Çünkü Grid Button'un Height ve
Width gibi özellikleri üzerinden Button'a boyut verirken ViewBox
doğrudan Button'un görselliği üzerinden vektörel olarak büyütecektir.

ViewBox ve Grid farkı.
ViewBox ve Grid farkı.

ViewBox özellikleri...

Bir ViewBox kontrolü içerisinde görsellerin nasıl boyutlandırılacağı ile
ilgili verebileceğimiz kararlar var. Bunlardan ilki Strech özelliği.
Gelin Strech özelliğine verebileceğimiz değerler arasındaki farklara bir
örnek ile bakalım.

ViewBox'ın Strech özellikleri arasındaki farklar.
ViewBox'ın Strech özellikleri arasındaki farklar.

Farklar sanırım görselde açık bir şekilde belli oluyor. None
değerini verdiğimiz Strech özelliği ViewBox içerisindeki görsellerin
boyutlandırılmamasını sağlıyor. Uniform değeri en/boy oranını
koruyarak ViewBox'ın içerisinde tam sığacak şekilde görseli büyütürken
UniformToFill ise yine en/boy oranını korusa da bu sefer ya eni ya
da boyu her şekilde ViewBox'ın içine en büyük değeri ile yerleştiriyor.
Strech özelliğine doğrudan Fill değerini verirseniz bu sefer
görselin en/boy oranı korunmadan tamamen ViewBox'ın içerisine yayılıyor.

Ayrıca isterseniz ViewBox'ın VerticalAlignment ve
HorizontalAlignment özellikleri ile de UniForm modunda ViewBox
içerisindeki görselin nasıl hizalanacağına karar verebilirsiniz.

StretchDirection özelliği.

Şu ana kadar ViewBox içerisinde görsellerin sürekli büyüdüğünü
gördük fakat isterseniz ViewBox'ın boyutunu ufaltarak aynı şekilde
elinizdeki görseli küçültebilirsiniz de. Bazı durumlarda ise ViewBox
içerisindeki görselin sadece gerektiğinde büyütülmesini veya sadece
küçültülmesini isteyebilirsiniz. Bu gibi durumlarda gerekli
sınırlamaları yapmak için doğrudan StretchDirection özelliğini
kullanabilirsiniz.

Eğer StretchDirection değeri UpOnly olursa ViewBox içerisindeki
görsel gerektiğinde sadece büyütülecektir. ViewBox kendi içindeki
görselden daha fazla ufaltılırsa içindeki görseli kesinlikle
ufaltmayacaktır. Aynı şekilde DownOnly özelliği de ViewBox'ın kendi
içerisindeki görseli gerektiğinde sadece ufaltmasını sağlayacaktır.
StretchDirection özelliğinin varsayılan değeri Both olarak
geldiği için normal şartlarda hem ufaltma hem de büyütme yapar.

Hepinize kolay gelsin.