Makale Özeti

Bu makalemizde Silverlight 2.0 içerisinde Toolkit paketinden ViewBox'ın yerini ve kullanım şeklini inceliyoruz.

Makale

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.