Makale Özeti

Bu yazımıda Silverlight 2.0 Beta 1 ile beraber HyplerlinkButton kontrolünün kullanımı ve görsel özelliklerinin merkezi yönetimini inceliyoruz.

Makale

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.