Silverlight 2.0 HyperlinkButton Kullanımı

0 dakikada yazıldı

7539 defa okundu

Düzenle

Silverlight 1.0 içerisinde harici sayfalara linkler verecek düğmeler
yaratmak için el ile kod yazmak gerekiyordu, eğer bir de gerçekten bir
HTML linki gibi gözüken bir HyperLink yaratmak isterseniz epey bir
uğraşmanız gerekecektir. Silverlight 2.0 Beta 1 ile bu soruna çok basit
bir çözüm geliyor; HyperlinkButton.

<UserControl
x:Class="SilverlightApplication19.Page"

    xmlns="http://schemas.microsoft.com/client/2007"

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

    Width="400" Height="300">

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

    <HyperlinkButton Margin="175,101,92,0"
Content="Tikla
Git
" VerticalAlignment="Top" Height="Auto"
NavigateUri="http://www.live.com"
TargetName
="_blank"/>

  </Grid>

</UserControl>

Yukarıda da görebileceğiniz gibi HyperlinkButton kısmen bizim
ASP.NET tarafında alıştığımız yapılardan farklı değil. NavigateUri
özelliğine verdiğiniz adrese yönlendirme yaparken TargetName ile
isterseniz hedef bir pencere veya frame de belirtebiliyorsunuz. Son
olarak HyperlinkButton içerisinde gözükmesini istediğiniz içeriği de
Content özelliğine aktarabilirsiniz.

Özellikle ASP.NET ile bir karşılaştırma yaparsak ASP.NET içerisinde
HyperLink kontrollerinin içine farklı kontroller koyabildiğimizi de
hatırlayabiliriz. Örneğin rahatlıkla bir Image kontrolünü HyperLink
içerisine koyarak kullanabiliriz. Aynı durum Silverlight için de
geçerli.

<UserControl
x:Class="SilverlightApplication19.Page"

    xmlns="http://schemas.microsoft.com/client/2007"

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

    Width="400" Height="300">

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

    <HyperlinkButton VerticalAlignment="Center"

                    Height="Auto"

                    NavigateUri="http://www.live.com"

                    TargetName="_blank"
HorizontalAlignment="Center">

      <HyperlinkButton.Content>

        <Image
Height="54"

              Source="Waterfall.jpg"
/>

      </HyperlinkButton.Content>

    </HyperlinkButton>

  </Grid>

</UserControl>

Herhangi bir HyperlinkButton'ın Content özelliği aslında sadece
metin içeriği almak için düzenlenmiş değil. İsterseniz herhangi bir
Silverlight kontrolünü de Content içerisine yerleştirebilirsiniz.
Bunun için tek yapmanız gereken Content özelliğini Inline olarak
değil de HyperlinkButton içerisinde ek taglar içinde düzenlemeniz.
İsterseniz birden çok kontrolü de Content içerisine
yerleştirebilirsiniz, tek şart elinizdeki tüm kontrolleri Canvas
gibi bir container element içerisine toplamış olmak.

HyperlinkButton için Template Kullanımı

Bir uygulamada birden çok HyperlinkButton kullanılması olası. Bu
gibi durumlarda tüm bu linklerin görsel özelliklerinin ortak bir noktada
tutuluyor olması gerekiyor. Hali hazırdaki bir HyperlinkButton'un görsel
özelliklerinin değiştirilebilmesi için Content özelliğine farklı
içerikler aktarmaktansa doğrudan HyperlinkButton'un Template
özelliği düzenlenebilir.

    <HyperlinkButton VerticalAlignment="Center"

                    Height="Auto"

                    NavigateUri="http://www.live.com"

                    TargetName="_blank"

                    HorizontalAlignment="Center"

                    Content="TIKLA"

                    Template="{StaticResource
LinkTemplate}
" />

Yukarıdaki HyperlinkButton'un Template özelliği uygulama
içerisindeki kaynaklardan birine bağlanmış. Birazdan LinkTemplate
adındaki HyperlinkButton şablonumuzu hazırlayacağız. Böylece aynı görsel
şablonu birden çok link kullanabilecek.

Örneğimizde ulaşmak istediğimiz noktayı belirleyelim. HyperlinkButton'un
Content özelliğine verilen içeriğin doğrudan görsel şablonun ortasında
gözükmesini istiyoruz. Bunun için bir ContentPresenter kullanacağız.
Bu ContentPresenter'ın arkasında ise kenarları yuvarlatılmış bir
dikdörtgen kullanalım. Böylece HyperlinkButton'umuz normal bir düğme
gibi gözüksün.

    <ControlTemplate x:Key="LinkTemplate"
TargetType="HyperlinkButton">

      <Grid>

        <Rectangle
Stroke="#FF000000"

                  RadiusY="16"

                  RadiusX="16">

          <Rectangle.Fill>

            <RadialGradientBrush>

              <GradientStop
Color="#FFFF0000"

                            Offset="1" />

              <GradientStop
Color="#FFFFFFFF"

                            Offset="0" />

            </RadialGradientBrush>

          </Rectangle.Fill>

        </Rectangle>

        <ContentPresenter Margin="10,10,10,10"
Content="{TemplateBinding Content}"

                          HorizontalAlignment="Center"

                          VerticalAlignment="Center"
/>

      </Grid>

    </ControlTemplate>

Yukarıdaki kod tüm isteklerimizi yerine getiriyor. Şimdi önemli
noktalara tek tek değinelim. İlk olarak ControlTemplate içerisine
iki kontrol koyacağımız için bunları bir container element içerisine
almamız gerekiyor. Biz örneğimizde Grid kullandık. ContentPresenter
kontrolümüzün Content özelliğini şablonun hedefi olacak
HyperlinkButton'un Content özelliğine bağladıktan sonra geriye
sadece ufak iki ayar kalıyor. Birincisi ContentPresenter ile
Rectangle arasında mesafe kalması için ContentPresenter'a elle
Margin vermek. Böylece HyperlinkButton içerisine ne konulursan
konulsun her zaman arkasında Rectangle'ın kenarlarından 10'a piksel uzak
kalacak. İkinci ufak detay ise ControlTemplate'in TargetType
özelliğinin kesinlikle ayarlanmış olması gerektiği.

Artık birden çok HyperlinkButton kullanarak aynı görsel özellikleri
kullanabilirsiniz.

Hepinize kolay gelsin.